Commit 0238d40c authored by Dennis Dominik Schöpf's avatar Dennis Dominik Schöpf
Browse files

Mobile design

parent a22be844
<!DOCTYPE html>
<html lang="en">
<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>
<body>
<header>
<nav>
<h1>Alex Mayer</h1>
<ul>
<li><a class="active" href="/">Start</a></li>
<li><a href="/">Leistungen</a></li>
<li><a href="/">Blog</a></li>
<li><a href="/">Über Mich</a></li>
<li><a href="/">Kontakt</a></li>
</ul>
</nav>
<section id="hero">
<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="/" 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">
<h2>News</h2>
<ul>
<li><a href="/">365 Postkarten</a> - Eine Liebeserklärung für jeden Tag! <a href="/">[mehr erfahren]</a></li>
<li><a href="/">Award Nominierung</a> - Tolle News: Ich bin bei der Endauswahl 2020! <a href="/">[mehr erfahren]</a></li>
<li><a href="/">CMYK erklärt</a> - Der neueste <a href="/">Blog</a>-Eintrag <a href="/">[mehr erfahren]</a></li>
</ul>
</section>
<section id="references">
<h2>Referenzen</h2>
<ul>
<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 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 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>
<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>
<p>Bildnachweis</p>
<h5>Fotos</h5>
<ul>
<li>Herofoto Tastatur: Aman Anderson, http://de.freeimages.com/photo/illuminated-keyboard-124228</li>
<li>Foto Dina Meyer by Dreifachaxel [CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0)], from Wikimedia
Commons</li>
<li>Foto Thomas Meyer-Hermann By Thomas Meyer-Hermann (Thomas Meyer-Hermann) [GFDL (http://www.gnu.org/
copyleft/fdl.html), CC BY-SA 3.0 (https://creativecommons.org/licenses/by-sa/3.0) or CC BY-SA 3.0 de (https://creativecommons.org/licenses/by-sa/3.0/de/deed.en)], via Wikimedia Commons https://upload.wikimedia.org/wikipedia/
commons/thumb/c/c6/Thomas_Meyer-Hermann_1.jpg/407px-Thomas_Meyer-Hermann_1.jpg</li>
<li>Foto Vorstand Sparkasse Ülzen [[File:SKUelzen Vorstand 2015.jpg|SKUelzen Vorstand 2015]] https://upload. wikimedia.org/wikipedia/commons/3/3e/SKUelzen_Vorstand_2015.jpg</li>
</ul>
<h4>Icons</h4>
<p>Freepik (http://www.freepik.com) / www.flaticon.com</p>
</article>
</footer>
</body>
</html>
\ No newline at end of file
<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>
<body>
<header>
<nav>
<h1>Alex Mayer</h1>
<ul>
<li><a class="active" href="/">Start</a></li>
<li><a href="/">Leistungen</a></li>
<li><a href="/">Blog</a></li>
<li><a href="/">Über Mich</a></li>
<li><a href="/">Kontakt</a></li>
</ul>
</nav>
<section id="hero">
<article>
<h2><span>Glänzende Ideen für leuchtende Augen</span></h2>
<button>Angebot einholen</button>
</article>
</section>
</header>
<main>
<section class="maxwidthcontainer" id="services">
<h2>Leistungen</h2>
<ul>
<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 class="maxwidthcontainer" id="news">
<h2>News</h2>
<ul>
<li>
<a href="/">365 Postkarten</a> - Eine Liebeserklärung für jeden Tag!
<a href="/">[mehr erfahren]</a>
</li>
<li>
<a href="/">Award Nominierung</a> - Tolle News: Ich bin bei der
Endauswahl 2020! <a href="/">[mehr erfahren]</a>
</li>
<li>
<a href="/">CMYK erklärt</a> - Der neueste
<a href="/">Blog</a>-Eintrag <a href="/">[mehr erfahren]</a>
</li>
</ul>
</section>
<section class="maxwidthcontainer" id="references">
<h2>Referenzen</h2>
<ul>
<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 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 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>
<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>
<p>Bildnachweis</p>
<h5>Fotos</h5>
<ul>
<li>
Herofoto Tastatur: Aman Anderson,
http://de.freeimages.com/photo/illuminated-keyboard-124228
</li>
<li>
Foto Dina Meyer by Dreifachaxel [CC BY-SA 4.0
(https://creativecommons.org/licenses/by-sa/4.0)], from Wikimedia
Commons
</li>
<li>
Foto Thomas Meyer-Hermann By Thomas Meyer-Hermann (Thomas
Meyer-Hermann) [GFDL (http://www.gnu.org/ copyleft/fdl.html), CC
BY-SA 3.0 (https://creativecommons.org/licenses/by-sa/3.0) or CC
BY-SA 3.0 de
(https://creativecommons.org/licenses/by-sa/3.0/de/deed.en)], via
Wikimedia Commons https://upload.wikimedia.org/wikipedia/
commons/thumb/c/c6/Thomas_Meyer-Hermann_1.jpg/407px-Thomas_Meyer-Hermann_1.jpg
</li>
<li>
Foto Vorstand Sparkasse Ülzen [[File:SKUelzen Vorstand
2015.jpg|SKUelzen Vorstand 2015]] https://upload.
wikimedia.org/wikipedia/commons/3/3e/SKUelzen_Vorstand_2015.jpg
</li>
</ul>
<h4>Icons</h4>
<p>Freepik (http://www.freepik.com) / www.flaticon.com</p>
</article>
</footer>
</body>
</html>
......@@ -70,18 +70,18 @@ cite {
}
.maxwidthcontainer {
max-width: 80rem;
max-width: 128rem;
margin: 0 auto;
padding: 1.5rem;
}
@mixin breakpoint($min, $max: 0) {
@if $max == 0 {
@media (min-width: rem($min)) {
@media (min-width: $min) {
@content;
}
} @else {
@media (min-width: rem($min)) and (max-width: rem($max)) {
@media (min-width: $min) and (max-width: $max) {
@content;
}
}
......
header {
nav {
display: flex;
justify-content: space-between;
align-items: flex-end;
nav {
display: flex;
justify-content: space-between;
align-items: flex-end;
h1 {
width: 50%;
padding: 1rem;
}
h1 {
padding: 1rem;
}
ul {
width: 50%;
display: flex;
margin: 0 1rem 2rem 0;
ul {
display: flex;
margin: 0 1rem 2rem 0;
li {
&:not(:last-child) {
margin-right: 2rem;
}
li {
&:not(:last-child) {
margin-right: 2rem;
}
a {
text-decoration: none;
color: $dark-color;
a {
text-decoration: none;
color: $dark-color;
&.active {
border-bottom: 1px solid $primary-color;
color: $primary-color;
}
}
}
&.active {
border-bottom: 1px solid $primary-color;
color: $primary-color;
}
}
}
}
}
section#hero {
background-image: url('../assets/hero.jpg');
background-size: cover;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 6rem 0;
section#hero {
background-image: url('../assets/hero.jpg');
background-size: cover;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 6rem 0;
article {
width: 50%;
padding-right: 2.5rem;
article {
width: 50%;
padding-right: 2.5rem;
h2 {
font-size: $font-size-xxl;
line-height: $line-height-xxl;
margin: 0 0 1.5rem 1rem;
@include breakpoint(0, 915px) {
width: 100%;
padding-left: 2.5rem;
}
span {
padding: 0.2rem 0;
background-color: $bright-color;
display: inline;
box-shadow: 10px 0 0 $bright-color, -10px 0 0 $bright-color;
}
}
h2 {
font-size: $font-size-xxl;
line-height: $line-height-xxl;
margin: 0 0 1.5rem 1rem;
button {
font-family: $font-reg;
font-size: $font-size-xl;
background-color: $secondary-color;
color: $bright-color;
padding: 1.5rem;
border: 0;
outline: 0;
border-radius: $border-radius;
}
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: $font-reg;
font-size: $font-size-xl;
background-color: $secondary-color;
color: $bright-color;
padding: 1.5rem;
border: 0;
outline: 0;
border-radius: $border-radius;
}
}
}
}
section#references {
margin-bottom: 4.5rem;
ul {
}
@include breakpoint(850px) {
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(8, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
img {
height: 10rem;
width: 10rem;
.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;
}
.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;
}
.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;
}
}
.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;
}
blockquote {
grid-column: 1 / 5;
grid-row: 3 / 4;
background-color: $accent-color-dark;
display: flex;
flex-direction: column;
justify-content: space-between;
cite {
text-align: right;
}
.blockquote-content {
order: 2;