Workshop

Tag 2 des Workshops, diesmal setzte ich das Design, mit CSS, pixelgnau um. Des weiteren erkläre ich euch was CSS Variablen sind.

Video

Workshop – Tag 1 – Wie baue ich ein fluides Webdesign
Workshop – Tag 2 – Webdesign pixelgenau und CSS Variablen
Breakpoints & Navigation
Flexbox

HTML

<html>
  <head>
    <title>100 Bücher</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&family=Roboto:wght@400;700&display=swap" rel="stylesheet"> 
    <link href="style.css" rel="stylesheet"/>
  </head>
  <body>
    <nav>
      <img src="logo.svg" alt="100 Bücher Logo" />
      <ul>
        <li><a href="#">Thriller</a></li>
        <li><a href="#">Roman</a></li>
        <li><a href="#">Fantasy</a></li>
        <li><a href="#">Science Fiction</a></li>
        <li><a href="#">Horror</a></li>
        <li><a href="#">Klassik</a></li>
        <li><a href="#">Reportage</a></li>
        <li><a href="#">Memoire</a></li>
        <li><a href="#">Kinderbuch</a></li>
        <li><a href="#">Fitness</a></li>
      </ul>
    </nav>
    <main>
      <h1>100 Bücher, die du lesen musst, bevor du stirbst</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_thriller.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Thriller öffnen</a>
        </div>
      </div>
      <div class="genre_box roman">
        <h2><a href="#">Roman</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_roman.png" alt="roman bücher top 3" />
        <div>
          <a href="#" class="genre_button">Roman öffnen</a>
        </div>
      </div>
      <div class="genre_box fantasy">
        <h2><a href="#">Fantasy</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_fantasy.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Fantasy öffnen</a>
        </div>
      </div>
      <div class="genre_box fiction">
        <h2><a href="#">Science Fiction</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_fiction.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Science Fiction öffnen</a>
        </div>
      </div>
      <div class="genre_box horror">
        <h2><a href="#">Horror</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_horror.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Horror öffnen</a>
        </div>
      </div>
      <div class="genre_box classic">
        <h2><a href="#">Klassik</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_klassik.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Klassik öffnen</a>
        </div>
      </div>
      <div class="genre_box reportage">
        <h2><a href="#">Reportage</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_reportage.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Reportage öffnen</a>
        </div>
      </div>
      <div class="genre_box memoire">
        <h2><a href="#">Memoire</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="buercher_memorie.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Memoire öffnen</a>
        </div>
      </div>
      <div class="genre_box kinderbuch">
        <h2><a href="#">Kinderbuch</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_kinderbuch.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Kinderbuch öffnen</a>
        </div>
      </div>
      <div class="genre_box fitness">
        <h2><a href="#">Fitness</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_fitness.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Fitness ö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/>
        <span>©  Marc Borkowski</span>
      </div>
    </footer>
  </body>
</html>

CSS

:root {
  --genrefarbe: grey;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  min-width: 960px;
}

nav {
  width: 100%;
  height: 47px;
  background-color: #f3f3f3;
  border-bottom: 1px solid brown;
  position: sticky;
  top: 0;
  z-index: 100;
}

nav img {
  height: 27px;
  width: auto;
  float: left;
  margin: 11px 19px;
}

nav ul {
  list-style: none;
  float: left;
  padding: 0;
}

nav ul li {
  float: left;
  margin: -1px 3px;
}

nav ul li a {
  text-decoration: none;
  color: brown;
  padding: 4px 6px;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 11pt;
}

nav ul li a:hover {
  color: white !important;
  background-color: black;
}

main {
  float: left;
  padding: 10px;
}

main h1 {
  font-size: 30px;
  text-align: center;
  margin: 41px auto 34px;
}

main .genre_box {
  width: calc( 25% - 20px);
  margin: 10px;
  border: 1px solid var(--genrefarbe);
  padding: 10px 14px 80px 14px;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
  float: left;
  position: relative;
  font-size: 13px;
  line-height: 150%;
}

main .genre_box h2{
  text-align: center;
  font-size: 18px;
  margin: 0px 0 20px;
}

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 var(--genrefarbe);
  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);
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
}

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;
  margin: 150px 0 0 0;
  float: left;
}

footer img{
  width: 250px;
}

footer .footer_nav {
  float: right;
  width: 250px;
}

footer span {
  padding: 20px 0;
  display: inline-block;
}

footer .footer_nav a{
  text-decoration: none;
  color: brown;
}

a {
  color: #a86e22 !important;
}

h1, h2, h3, h4, h5 {
  font-family: 'Roboto Slab', serif;
}

.roman {
  --genrefarbe: #9700b8;
}

.fantasy {
  --genrefarbe: #0084ff;
}

.fiction {
  --genrefarbe: #0e8f94;
}

.horror {
  --genrefarbe: black;
}

.classic {
  --genrefarbe: #ffc600;
}

.reportage {
  --genrefarbe: #96ff00;
}

.memoire {
  --genrefarbe: #6600ff;
}

.kinderbuch {
  --genrefarbe: #06a60a;
}

.fitness {
  --genrefarbe: #ff0000;
}

Möchtest du zu den Ersten gehören, die Zugang zu meinem bahnbrechenden KI-Prompting Kurs erhalten? Melde dich jetzt für meinen Newsletter an und sei der Erste, der erfährt, wann der Kurs veröffentlicht wird! Erlebe die Zukunft des Lernens und entdecke, wie KI deine kreativen Prozesse transformieren kann. Worauf wartest du noch? Sei dabei und sichere dir deinen Platz in der ersten Reihe!

Marc Borkowski

Workshop – Tag 2 – Webdesign pixelgenau und CSS Variablen

Video

Workshop

HTML

CSS

Socials

Erfahre wenn mein KI-Prompting Kurs veröffentlicht wird.

Marc Borkowski