Marc Borkowski

Portfolio öffnen

Workshop – Tag 1 – Wie baue ich ein fluides Webdesign

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

Socials

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

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


Kontakt

Moin, ich erkläe einfach was KI ist und wie man damit umgeht. Mein Verprechen an dich ist es, technische Aspekte von KI zu erklären und das in nicht technischer Sprache. Dadurch können Alle sich ein Bild von KI machen, ohne Informatik studiert zu haben. Aktuell arbeite ich an einem KI Video Kurs. Dadurch möchte ich auch für den kleinen Geldbeutel einen starken Mehrwert bieten. Lass uns mal quatschen und eine passende Lösung für dein Wissenshunger finden.

hi@dermarc.org

Portfolio öffnen