In dieser Programmier-Session zeige ich wie man ein fluides Webdesign umsetzt. Ich zeige es nur grob, nicht wie man ein 1:1 Design baut, da dies zu viel Zeit beanspruchen würde.
Video
Workshop
- Workshop – Tag 1 – Wie baue ich ein fluides Webdesign
- Workshop – Tag 2 – Webdesign pixelgenau und CSS Variablen
- Breakpoints & Navigation
- Flexbox
HTML Code
<html>
<head>
<title>100 Bücher</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<nav>
<img src="logo.svg" alt="100 Bücher Logo" />
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
</ul>
</nav>
<main>
<h1>100 Bücher</h1>
<div class="genre_box">
<h2><a href="#">Thriller</a></h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<img src="buecher.png" alt="thriller bücher top 3" />
<div>
<a href="#" class="genre_button">Thriller öffnen</a>
</div>
</div>
<div class="genre_box">
<h2><a href="#">Thriller</a></h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<img src="buecher.png" alt="thriller bücher top 3" />
<div>
<a href="#" class="genre_button">Thriller öffnen</a>
</div>
</div>
<div class="genre_box">
<h2><a href="#">Thriller</a></h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<img src="buecher.png" alt="thriller bücher top 3" />
<div>
<a href="#" class="genre_button">Thriller öffnen</a>
</div>
</div>
<div class="genre_box">
<h2><a href="#">Thriller</a></h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<img src="buecher.png" alt="thriller bücher top 3" />
<div>
<a href="#" class="genre_button">Thriller öffnen</a>
</div>
</div>
<div class="genre_box">
<h2><a href="#">Thriller</a></h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<img src="buecher.png" alt="thriller bücher top 3" />
<div>
<a href="#" class="genre_button">Thriller öffnen</a>
</div>
</div>
<div class="genre_box">
<h2><a href="#">Thriller</a></h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<img src="buecher.png" alt="thriller bücher top 3" />
<div>
<a href="#" class="genre_button">Thriller öffnen</a>
</div>
</div>
<div class="genre_box">
<h2><a href="#">Thriller</a></h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<img src="buecher.png" alt="thriller bücher top 3" />
<div>
<a href="#" class="genre_button">Thriller öffnen</a>
</div>
</div>
<div class="genre_box">
<h2><a href="#">Thriller</a></h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<img src="buecher.png" alt="thriller bücher top 3" />
<div>
<a href="#" class="genre_button">Thriller öffnen</a>
</div>
</div>
<div class="genre_box">
<h2><a href="#">Thriller</a></h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<img src="buecher.png" alt="thriller bücher top 3" />
<div>
<a href="#" class="genre_button">Thriller öffnen</a>
</div>
</div>
<div class="genre_box">
<h2><a href="#">Thriller</a></h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<img src="buecher.png" alt="thriller bücher top 3" />
<div>
<a href="#" class="genre_button">Thriller öffnen</a>
</div>
</div>
</main>
<footer>
<img src="logo.svg" alt="100 Bücher Logo" />
<div class="footer_nav">
<a href="#">Startseite</a>
<a href="#">Impressum</a><br/>
© Marc Borkowski
</div>
</footer>
</body>
</html>CSS
body {
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 60px;
background-color: #f3f3f3;
border-bottom: 1px solid brown;
position: sticky;
top: 0;
z-index: 100;
}
nav img {
height: 50px;
width: auto;
float: left;
margin: 5px 10px;
}
nav ul {
list-style: none;
float: left;
}
nav ul li {
float: left;
margin: 5px;
}
nav ul li a {
text-decoration: none;
color: brown;
padding: 5px 10px;
}
nav ul li a:hover {
color: white;
background-color: black;
}
main {
}
main h1 {
font-size: 35px;
text-align: center;
margin: 50px auto;
}
main .genre_box {
width: calc( 25% - 28px);
margin: 14px;
border: 1px solid grey;
padding: 0 10px 50px 10px;
box-sizing: border-box;
overflow: hidden;
text-align: center;
float: left;
position: relative;
}
main .genre_box h2{
text-align: center;
}
main .genre_box h2 a{
color: brown;
text-decoration: none;
}
main .genre_box p {
text-align: left;
}
main .genre_box img {
position: absolute;
bottom: -45px;
margin: 0 auto;
transition: bottom 1s ease;
left: calc( 50% - 80px);
}
main .genre_box:hover img {
bottom: -30px;
}
main .genre_box .genre_button {
position: absolute;
bottom: -100px;
border: 1px solid grey;
margin: 0 auto;
transition: bottom 0.75s ease;
background-color: white;
padding: 5px 10px;
text-decoration: none;
display: inline-block;
color: brown;
left: calc( 50% - 64px);
}
main .genre_box:hover .genre_button {
bottom: 20px;
}
footer {
width: 100%;
border-top: 1px solid brown;
padding: 100px 14px;
background-color: #f3f3f3;
box-sizing: border-box;
clear: both;
}
footer img{
width: 250px;
}
footer .footer_nav {
float: right;
width: 250px;
}
footer .footer_nav a{
text-decoration: none;
color: brown;
}
Schreibe einen Kommentar