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>
        <!-- terminvereinbarung section -->
        <section id="terminvereinbarung" class="section section terminvereinbarung">
          <div>
            <img src="https://i.postimg.cc/6q8b8tBp/Bild-9.jpg" width="1280px" id="terminverinbarungbild">
          </div>
        </section>
        <!-- terminvereinbarung section ende -->
        <!-- infos section -->
        <section id="infos" class="section sectioninfos">
        <div id="infodiv">
        section 5
          </div>
        </section>
    <!-- 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 TERMINVEREINBARUNG */
#terminvereinbarung {
  height: 100% !important;
  display: flex;
}

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

#terminvereinbarungbild {
  display: block;
}

/* SECTION INFOS */
#infos {
  height: 1200px !important;
  display: flex;
  z-index: -5;
  position: relative;
  background-color: darkblue;
}

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