Commit 4ae72c91 authored by Dennis Dominik Schöpf's avatar Dennis Dominik Schöpf
Browse files

Finish up first implementation of screendesign

parent 0bedf5d4
......@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400&display=swap" rel="stylesheet">
<link href="./styles/main.scss" rel="stylesheet" />
<title>Alex Mayer</title>
</head>
......@@ -19,16 +20,16 @@
</ul>
</nav>
<section id="hero">
<h2>Glänzende Ideen für leuchtende Augen</h2><button>Angebot einholen</button>
<article><h2><span>Glänzende Ideen für leuchtende Augen</span></h2><button>Angebot einholen</button></article>
</section>
</header>
<main>
<section id="services">
<h2>Leistungen</h2>
<ul>
<li><a href="/"><h3>Design</h3></a></li>
<li><a href="/"><h3>Strategie</h3></a></li>
<li><a href="/"><h3>Consulting</h3></a></li>
<li><a href="/" class="bg-accent-bright"><h3>Design</h3><img src="./assets/design_icon.svg" alt=""></a></li>
<li><a href="/" class="bg-accent-reg"><h3>Strategie</h3><img src="./assets/strategy_icon.svg" alt=""></a></li>
<li><a href="/" class="bg-accent-dark"><h3>Consulting</h3><img src="./assets/consulting_icon.svg" alt=""></a></li>
</ul>
</section>
<section id="news">
......@@ -40,27 +41,42 @@
</ul>
</section>
<section id="references">
<h2>Referenzen</h2>
<ul>
<li>
<blockquote>Alex' Redesign hat maßgeblich mitgeholfen, unseren Umsatz um 20% in die Höhe zu treiben!<cite>Tina Ubuntu, CEO Headless Ltd.</cite></blockquote>
<li class="tina-ubuntu">
<div class="image-wrapper">
<img src="./assets/img_ref2.jpg" alt="">
</div>
<blockquote>Alex' Redesign hat maßgeblich mitgeholfen, unseren Umsatz um 20% in die Höhe zu treiben!</blockquote><cite>Tina Ubuntu, CEO Headless Ltd.</cite>
</li>
<li>
<blockquote>Große Webkunst - Keine Kunst mit Alex Mayer!<cite>Tom Herzog, Cutter's Finest</cite></blockquote>
<li class="tom-herzog">
<div class="image-wrapper">
<img src="./assets/img_ref1.jpg" alt="">
</div>
<blockquote>Große Webkunst - Keine Kunst mit Alex Mayer!</blockquote><cite>Tom Herzog, Cutter's Finest</cite>
<div class="fill-item"></div>
</li>
<li>
<blockquote>Das Store-Konzept von Alex Mayer hat unsere größten Erwartungen übertroffen.<cite>Vorstand Müller AG<br>KR Ernst Anker, Dr. Florian Eisner</cite></blockquote>
<li class="mueller-ag">
<div class="image-wrapper">
<img src="./assets/img_ref3.jpg" alt="">
</div>
<blockquote><span class="blockquote-content">Das Store-Konzept von Alex Mayer hat unsere größten Erwartungen übertroffen.</span><cite>Vorstand Müller AG<br>KR Ernst Anker, Dr. Florian Eisner</cite></blockquote>
<div class="quotation-decoration">
<img src="./assets/quotation_icon.svg" alt="Quotation">
</div>
</li>
</ul>
</section>
</main>
<footer>
<small>© Alex Mayer 2020</small>
<nav>
<small>© Alex Mayer 2020</small>
<ul>
<li><a href="/">Impressum</a></li>
<li><a href="/">Datenschutzerklärung</a></li>
</ul>
</nav>
<article>
<p>Demo-Wordpress-Seite im Rahmen der LV ‚Content Mangagement Systeme‘ an der FH Salzburg
von Dennis Schöpf und Maximilian Schmitt</p>
<p>Alle Inhalte frei erfunden</p>
......@@ -77,6 +93,7 @@
</ul>
<h4>Icons</h4>
<p>Freepik (http://www.freepik.com) / www.flaticon.com</p>
</article>
</footer>
</body>
</html>
\ No newline at end of file
html {
font-family: 'monospace';
font-family: $font-reg;
font-size: 10px;
font-weight: 500;
}
body {
font-size: 1.6rem;
font-size: $font-size-m;
}
h1,
......@@ -17,5 +17,54 @@ h5 {
}
h1 {
font-size: 4.6rem;
font-size: $font-size-xxl;
}
h2 {
font-size: $font-size-xl;
line-height: $line-height-xl;
margin-bottom: 3rem;
}
h3 {
font-size: $font-size-l;
}
h4 {
font-size: $font-size-l;
color: $bright-color;
margin-bottom: 1rem;
}
h5 {
font-size: 2rem;
color: $bright-color;
margin-bottom: 1rem;
}
section {
padding: 0 1.5rem;
margin-bottom: 4.5rem;
}
blockquote {
padding: 1rem;
font-size: $font-size-l;
}
cite {
padding: 1rem;
font-size: 2.2rem;
}
.bg-accent-bright {
background-color: $accent-color-bright;
}
.bg-accent-reg {
background-color: $accent-color-reg;
}
.bg-accent-dark {
background-color: $accent-color-dark;
}
footer {
background-color: $primary-color;
color: $bright-color;
padding: 1.5rem 1.5rem 35rem 1.5rem;
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 0 3.5rem 0;
ul {
display: flex;
justify-content: flex-end;
li {
a {
text-decoration: none;
color: $bright-color;
}
&:first-child::after {
content: '|';
}
}
}
}
article {
p {
width: 50%;
margin-bottom: 2.5rem;
}
ul {
list-style-type: disc;
padding: 0 2rem;
line-height: $line-height-m;
margin-bottom: 2rem;
}
}
}
header {
nav {
display: flex;
justify-content: space-between;
align-items: flex-end;
h1 {
width: 50%;
padding: 1rem;
margin-right: 3.5rem;
}
ul {
width: 50%;
display: flex;
margin: 0 1rem 2rem 0;
li {
&:not(:last-child) {
margin-right: 2rem;
}
a {
text-decoration: none;
color: $dark-color;
&.active {
border-bottom: 1px solid $primary-color;
color: $primary-color;
}
}
}
}
}
section#hero {
background-image: url('../assets/hero.jpg');
background-size: cover;
width: 100%;
height: 38rem;
display: flex;
justify-content: flex-end;
align-items: center;
article {
width: 50%;
h2 {
font-size: $font-size-xxl;
line-height: $line-height-xxl;
margin: 0 0 1.5rem 1rem;
span {
padding: 0.2rem 0;
background-color: $bright-color;
display: inline;
box-shadow: 10px 0 0 $bright-color, -10px 0 0 $bright-color;
}
}
button {
font-family: monospace;
font-size: $font-size-xl;
background-color: $secondary-color;
color: $bright-color;
padding: 1.5rem;
border: 0;
outline: 0;
border-radius: $border-radius;
}
}
}
}
section#news {
ul {
background-color: $accent-color-important;
border-radius: $border-radius;
padding: 1.5rem 1rem;
li {
font-size: $font-size-l;
&:not(:last-child) {
margin-bottom: 1.5rem;
}
a {
text-decoration: none;
color: $primary-color;
}
}
}
}
section#references {
ul {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(3, 1fr);
img {
height: 10rem;
width: 10rem;
}
.tina-ubuntu {
grid-row: 1 / 4;
grid-column: 1 / 4;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
.image-wrapper {
background-color: $accent-color-bright;
padding: 1rem;
img {
width: 100%;
height: 14rem;
object-fit: cover;
}
}
blockquote {
grid-column: 1 / span 4;
grid-row: 3 / 3;
background-color: $accent-color-bright;
display: flex;
align-items: center;
}
cite {
grid-column: 1 / span 2;
grid-row: 2 / 3;
background-color: $accent-color-bright;
padding-top: 2rem;
}
}
.tom-herzog {
grid-row: 1 / 4;
grid-column: 2 / 5;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
.image-wrapper {
grid-column: 3 / 4;
grid-row: 1 / 1;
background-color: $accent-color-reg;
padding: 1rem;
img {
width: 100%;
height: 14rem;
object-fit: cover;
}
}
cite {
grid-column: 1 / 3;
grid-row: 1 / 2;
text-align: right;
padding-left: 40%;
background-color: $accent-color-reg;
}
blockquote {
grid-column: 2 / 4;
grid-row: 2 / 3;
background-color: $accent-color-reg;
padding-top: 2rem;
}
.fill-item {
grid-column: 3 / 4;
grid-row: 3 / 4;
background-color: $accent-color-reg;
}
}
.mueller-ag {
grid-row: 1 / 4;
grid-column: 5 / 9;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
.image-wrapper {
grid-column: 2 / 5;
grid-row: 1 / 3;
background-color: $accent-color-dark;
padding: 1rem 1rem 0 1rem;
display: flex;
align-items: bottom;
img {
width: 100%;
height: auto;
object-fit: cover;
}
}
blockquote {
grid-column: 1 / 5;
grid-row: 3 / 4;
background-color: $accent-color-dark;
display: flex;
flex-direction: column;
cite {
text-align: right;
}
.blockquote-content {
order: 2;
}
}
.quotation-decoration {
background-color: $primary-color;
grid-row: 1 / 3;
grid-column: 1 / 2;
padding-top: 2.5rem;
display: flex;
justify-content: center;
}
}
}
}
nav {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 1rem 1.5rem;
section#services {
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 1rem 1rem 0;
li {
flex: 1 1 0;
&:not(:last-child) {
margin-right: 1rem;
margin-right: 2.5rem;
}
a {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: $dark-color;
padding: 3rem 0;
border-radius: $border-radius;
h3 {
margin-bottom: 2.5rem;
}
&.active {
border-bottom: 1px solid $primary-color;
color: $primary-color;
img {
height: 24rem;
width: auto;
}
}
}
}
}
section#hero {
background-image: url('../assets/hero.jpg');
background-size: cover;
width: 100%;
height: 36rem;
}
@import './reset';
@import './variables';
@import './globals';
@import './header';
@import './includes/header';
@import './includes/services';
@import './includes/news';
@import './includes/references';
@import './includes/footer';
$primary-color: #00aeef;
$secondary-color: #43ad4d;
$dark-color: #000000;
$bright-color: #ffffff;
$accent-color-bright: #fffbd8;
$accent-color-reg: #c7eaf9;
$accent-color-dark: #d8e9d3;
$accent-color-important: #f7dacf;
$font-reg: 'Roboto Slab', serif;
$font-size-m: 1.8rem;
$font-size-l: 2.2rem;
$font-size-xl: 3.6rem;
$font-size-xxl: 4.8rem;
$line-height-m: 2.2rem;
$line-height-l: 2.8rem;
$line-height-xl: 4.2rem;
$line-height-xxl: 6.6rem;
$border-radius: 0.6rem;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment