JSFiddle - React, Tailwind, and code Playground

by Can Burak AlakuĹź

HTML

<body>

  <div class="navbar">
    <h1 class="colorChange">Der Blaue Planet<br>
      <span class="highlight"> Die Erde</span>

    </h1>

    <div>
      <a href="#"> google </a>
      <a href="#"> Termin </a>
      <a href="#"> Preise </a>
      <a href="#"> Kalender </a>
    </div>

  </div>


  <div class="containerClass">
    <img class="class-image" src="Bilder/4k.jpg">


    <div class="Fotoind">
      Individuelle Fotos
    </div>

    <div class="MapsContainer">

      <iframe class="mapStyle" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2429.8384006473802!2d13.596700815695565!3d52.48206157980705!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a849b423ae37e9%3A0x1c91decc13ce5a24!2sMechthildstra%C3%9Fe%2053%2C%2012623%20Berlin!5e0!3m2!1sde!2sde!4v1633806883383!5m2!1sde!2sde" allowfullscreen="" loading="lazy"></iframe>

      <div class="maps-right">
        Ein Fast proffesionelles Seiten Layout
      </div>
    </div>

    <div class="contentdown">
      <span class="legal"> Copyright von morgen </span> | <a href="#">Impressum</a> | <a href="#"> Datenschutz</a>
    </div>
  </div>

</body>

CSS

body {
   font-family: 'Open Sans', sans-serif;
   background-color: #f3f5f6;
   padding-left: 100px;
   padding-right: 100px;
   height:1500px !important;
 }

 .class-image {
   width: 100%;
   height: 500px;
   object-fit: cover;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   border-radius: 10px 10px 0px 0px;
   object-position: 30% 60%;
   display: block;

 }

 .colorChange {
   font-size: 20px;
   font-weight: bold;
   color: black;
 }

 .containerClass {
   padding: 16px;
   vertical-align: middle;
   animation: example 2s linear;
   width: 85%;
   position: absolute;
 }

 .navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 a {
   color: #831D17;
   text-decoration: none;
   margin-left: 16px;
   font-weight: 700;
 }

 a:hover {
   font-weight: bolder;
   color: white;
   padding-left: 8px;
   padding-right: 8px;
   display: inline-block;
   line-height: 200%;
   font-size: 16px;
   border-radius: 20px;

   background-color: #333333;
   text-decoration: none;
 }

 @keyframes example {
   0% {
     margin-top:calc(-100vh - 100%);
   }

   100% {
     margin-top: 0vh
   }
 }

 .highlight {
   color: black;
   font-weight: bolder;
   font-size: 48px;
 }

 .Fotoind {
   background-color: #333333;
   color: #D6D6D6;
   font-weight: 600;
   border-radius: 0px 0px 10px 10px;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   padding: 16px;
 }

 .MapsContainer {
   margin-top: 16px;
   width: 100%;
   border-radius: 10px;
   overflow: hidden;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   display: flex;
   justify-content: space-between;
 }

 .maps-right {
   background-color: #333333;
   color: #D6D6D6;
   font-weight: 600;
   border-radius: 0px 0px 0px 0px;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   padding: 16px;
   margin-left: 16px;
   width: 30%;
 }

 .mapStyle {
   border: 0;
   height: 350px;
   width: 70%;
 }

 .contentdown {
   padding: 8px;
 }

 .legal {
   margin-right: 16px;
 }