Übung 02 - Responsive Web Design
2.1 - Desktop First
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Desktop-First</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
flex-wrap: wrap;
margin: 3vw 5vw 3vw 5vw;
height: 90vh;
}
aside.right {
flex-basis: 19%;
background-color: #ea3efe;
height: 68%;
}
aside.left {
background-color: #2cee27;
flex-basis: 19%;
height: 68%;
}
article {
flex-basis: 59.67%;
height: 68%;
background-color: #0533ff;
margin: 0 1% 0 1%;
}
nav {
background-color: #ff2500;
flex-basis: 100%;
height: 30%;
margin-bottom: 1.5vw;
}
/* mid-size devices like tablets <= 800px */
@media screen and (max-width: 800px) {
body{
margin: 5% 2% 5% 2%;
}
aside.left {
flex-basis: 33%;
height: 100%;
margin-right: 1%;
}
article {
flex-basis: 66%;
height: 100%;
margin: 0;
}
aside.right {
flex-basis: 100%;
height: 20%;
margin-top: 2%;
}
}
/* small devices like smartphones <= 500px */
@media screen and (max-width: 500px) {
nav{
flex-basis: 100%;
height: 20%;
margin: 0;
}
article {
flex-basis: 100%;
height: 150%;
margin: 0;
}
aside.left, aside.right {
flex-basis: 100%;
height: 20%;
margin: 0;
}
}
</style>
</head>
<body>
<nav></nav>
<aside class="left"></aside>
<article></article>
<aside class="right"></aside>
</body>
</html>
2.2 - Mobile First
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid Mobile First</title>
<style>
/* default for small devices like smartphones < 768px width */
body {
display: grid;
grid-template-rows: 1fr 1fr 3fr 1fr;
grid-template-columns: 1fr;
grid-template-areas:
"nav" "asidel" "article" "asider";
height: 100vh;
margin: 0;
}
nav {
background-color: #ff2500;
grid-area: nav;
}
aside.left {
background-color: #2cee27;
grid-area: asidel;
}
aside.right {
background-color: #ea3efe;
grid-area: asider;
}
article {
background-color: #0533ff;
grid-area: article;
}
p{
padding-bottom: 2em;
font-size: 18px;
font-weight: bold;
}
/* mid-size devices like tablets >= 768px */
@media (min-width: 768px ) {
body {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 3fr 1fr;
grid-template-areas:
"nav nav nav"
"asidel article article"
"asider asider asider";
}
}
/* big devices like monitors, notebooks >= 992 */
@media (min-width: 992px) {
body {
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 1fr 3fr;
grid-template-areas:
"nav nav nav"
"asidel article asider";
}
}
</style>
</head>
<body>
<nav></nav>
<aside class="left"></aside>
<article></article>
<aside class="right"></aside>
</body>
</html>
2.3a - Holy Grail Flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Holy Grail Flexbox</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
color: white;
text-align: center;
}
header {
background-color: #c14f4f;
text-align: left;
padding-bottom: 2vh;
}
main {
background-color: #6a9ebd;
}
footer {
background: black;
}
.left-sidebar {
background-color: #c28281;
}
.right-sidebar {
background-color: #c28281;
}
.container {
display: flex;
width: 100%;
flex-direction: column;
height: 100vh;
}
.content {
display: flex;
flex-direction: column;
overflow-y: auto;
height: 100vh;
}
button {
background-color: #6a709f;
color: black;
border-top-color: white;
border-left-color: white;
border-bottom-color: #9a9a9a;
border-right-color: #9a9a9a;
border-radius: 20px;
font-weight: bold;
padding: 0.3em 2em;
margin-left: 1em;
}
h1 {
text-align: center;
margin: 0;
}
a {
color: white;
}
@media all and (min-width: 768px) {
.content {
flex-direction: row;
flex-wrap: wrap;
}
main {
flex: 5;
order: 2;
}
.left-sidebar {
order: 1;
flex: 1;
font-size: 2em;
}
.right-sidebar {
flex: 1;
order: 3;
font-size: 2em;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Header</h1>
<button>Home</button>
<button>News</button>
<button>Contact</button>
<button>About</button>
</header>
<div class="content">
<aside class="left-sidebar">
<p>left</p>
<p>menu</p>
<p>with</p>
<p>many</p>
<p>items</p>
</aside>
<main>
Lorem ipsum Text (left out for readability)
</main>
<aside class="right-sidebar">
right
</aside>
</div>
<footer>
<span style="font-size: 30px">Footer:</span>
<a href="">Sitemap</a>
<a href="">Home</a>
<a href="">News</a>
<a href="">Contact</a>
<a href="">About</a>
</footer>
</div>
</body>
</html>
2.3b - Holy Grail Grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Holy Grail Grid</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
color: white;
text-align: center;
}
header {
background-color: #c14f4f;
text-align: left;
}
main {
background-color: #6a9ebd;
}
footer {
background: black;
}
.left-sidebar {
background-color: #c28281;
}
.right-sidebar {
background-color: #c28281;
}
.container {
display: grid;
grid-column: auto;
width: 100%;
height: 100vh;
grid-template-rows: 1fr 9fr 0.5fr;
grid-template-columns: 1fr;
}
.content {
display: grid;
overflow-y: auto;
grid-template-rows: 1fr 3fr 1fr;
grid-template-columns: 1fr;
height: 100%;
}
button {
background-color: #6a709f;
color: black;
border-top-color: white;
border-left-color: white;
border-bottom-color: #9a9a9a;
border-right-color: #9a9a9a;
border-radius: 20px;
font-weight: bold;
padding: 0.3em 2em;
margin-left: 1em;
}
h1 {
text-align: center;
margin: 0;
}
a {
color: white;
}
@media all and (min-width: 768px) {
.content {
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 1fr;
}
.left-sidebar {
order: 1;
font-size: 2em;
}
main {
order: 2;
}
.right-sidebar {
order: 3;
font-size: 2em;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Header</h1>
<button>Home</button>
<button>News</button>
<button>Contact</button>
<button>About</button>
</header>
<div class="content">
<aside class="left-sidebar">
<p>left</p>
<p>menu</p>
<p>with</p>
<p>many</p>
<p>items</p>
</aside>
<main>
Lorem ipsum text (left out for readability)
</main>
<aside class="right-sidebar">
right
</aside>
</div>
<footer>
<span>Footer:</span>
<a href="">Sitemap</a>
<a href="">Home</a>
<a href="">News</a>
<a href="">Contact</a>
<a href="">About</a>
</footer>
</div>
</body>
</html>
2.4 - Landing Page Grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Landing Page Grid</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Economica&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
* {
box-sizing: border-box;
}
body {
overflow: hidden;
font-family: "Open Sans", sans-serif;
margin: 0;
height: 100vh;
width: 100vw;
display: grid;
grid-template-rows: 0.5fr 7fr 2.5fr;
grid-template-areas:
"nav"
"main"
"footi";
}
button {
background: #f88e37;
color: white;
border-radius: 8px;
border: none;
font-family: "Economica", sans-serif;
font-size: 3vh;
font-weight: bold;
width: 50%;
}
.main {
grid-area: main;
display: grid;
height: 70vh;
grid-template-columns: 50% 50%;
grid-template-rows: 5vh 65vh;
grid-template-areas: "heading heading" "pic text";
text-align: center;
background: #ebeae6;
}
nav {
grid-area: nav;
background: #363636;
text-align: center;
color: #dcdbdb;
font-weight: bold;
position: relative;
top: 50%;
transform: translateY(-50%);
}
nav span {
display: inline-block;
padding: 0 1em;
}
footer {
grid-area: footi;
background: #011826;
text-align: center;
color: white;
padding-top: 3em;
font-size: 2vh;
}
.pic {
grid-area: pic;
vertical-align: middle;
}
.pic > img {
max-height: 90%;
max-width: 90%;
border: 1px solid black;
border-radius: 10px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.text {
padding-top: 3em;
grid-area: text;
}
h1 {
text-align: center;
font-family: Roboto, sans-serif;
font-weight: bold;
grid-area: heading;
margin: 0;
font-size: 4vh;
}
.text p {
font-weight: bold;
padding-bottom: 2em;
font-size: 2vh;
}
/* small devices like smartphones <= 500px */
@media screen and (max-width: 500px) {
h1 {
font-size: 1.5em;
}
nav span {
display: block;
position: static;
top: auto;
transform: none;
}
.main {
grid-template-columns: 100%;
grid-template-rows: 10% 50% 40%;
grid-template-areas: "heading" "pic" "text";
}
.text p {
padding: 0;
font-size: 0.8em;
}
.text {
padding: 0;
}
button {
font-size: 1em;
}
footer {
padding: 0;
}
}
</style>
</head>
<body>
<nav>
<span>The book series</span>
<span>Testimonials</span>
<span>The Author</span>
<span>Free resources</span>
</nav>
<div class="main">
<h1>You don't know JavaScript</h1>
<div class="pic">
<img alt="Picture of a book named You don't know JS, Complete Series by Kyle Simpson"
src="https://kaul.inf.h-brs.de/wem/assets/img/landing-img.png">
</div>
<div class="text">
<p>Don't just drift through Javascript.</p>
<p>Understand how Javascript works</p>
<p>Start your journey through the bumpy side of Javascript.</p>
<button>ORDER YOUR COPY NOW</button>
</div>
</div>
<footer>
<p>The first ebook in the book series is absolutely
free.</p>
<button>FIND OUT MORE ABOUT THIS OFFER</button>
</footer>
</body>
</html>