Optik Tack v.2

by HcJanni

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>OptikTack</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Saira:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  </head>

  <body>
    <div id="container">
      <div class="body">
        <!-- MAIN -->
        <div id="spacer"></div>
        <!-- home section -->
        <section id="home" class="section sectionhome">
          <div>
            <img src="https://i.postimg.cc/tgk5cWmx/Bild-1.jpg" alt="Frau" id="homebild" width="1280px">
          </div>
        </section>
        <!-- home section ende -->
        <!-- wir-ueber-uns section -->
        <section id="wir-ueber-uns" class="section sectionwir-ueber-uns">
          <div>
            <img src="https://i.postimg.cc/FH6RSxbF/Bild-2.jpg" width="1280px" id="wir-ueber-unsbild">
          </div>
        </section>
        <!-- wir-ueber-uns section ende -->
      </div>
    </div>
    <!-- container ende -->
  </body>

</html>

CSS

@charset "utf-8";

/* CSS Document */

/* ALLGEMEINES */
* {
  font-family: "Saira", "Roboto", Segoe UI, Helvetica Neue, Arial, sans-serif;
  box-sizing: border-box;
}

#container {
  max-width: 1280px;
  margin: 0 auto;
  overflow-x: hidden;
}

body {
  background-color: #d0d0d0;
  margin: 0;
}



/* MAIN */

/* SECTION HOME */
#home {
  height: 100% !important;
  display: flex;
}

.sectionhome::before {
  display: block;
  content: " ";
  margin-top: -128px;
  height: 128px;
  visibility: hidden;
  pointer-events: none;
}

#homebild {
  width: 1280px;
  height: 853px;
}

/* SECTION WIR-UEBER-UNS */
#wir-ueber-uns {
  height: 100% !important;
  display: flex;
}

.sectionwir-ueber-uns::before {
  display: block;
  content: " ";
  margin-top: -80px;
  height: 80px;
  visibility: hidden;
  pointer-events: none;
}

#wir-ueber-unsbild {
  width: 1280px;
  height: 853px;
}