Workshop – Tag 2 – Webdesign pixelgenau und CSS Variablen

Autor

Datum

13.11.2021

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

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;
}

Autor: Marc Borkowski

Moin,
mein Name ist Marc Borkowski. Ich bin in Berlin geboren und habe mich in eine ruhigere Stadt verkrümelt, Wismar. Ich habe mehrere Jahre Erfahrung im Bereich Frontend und bin ausgebildeter Mediengestalter. Aktuell entwickle ich mich zu einem Techlead und werde hier meine Erfahrungen mit euch teilen.

Kontakt

E-Mail: moin@boolie.org | Über mich Seite

Workshop – Tag 2 – Webdesign pixelgenau und CSS Variablen

Video

Workshop

HTML

CSS

Kontakt

Schreibe einen Kommentar