Simply site 2

by Michał Oręziak

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<div id="wrapper">
  <header>
<div id="header-wrapper">
<iframe src="https://embed.windy.com/embed2.html?lat=44.166&lon=-5.405&zoom=5&level=surface&overlay=wind&menu=&message=&marker=&forecast=12&calendar=now&location=coordinates&type=map&actualGrid=&metricWind=kt&metricTemp=%C2%B0C" frameborder="0"></iframe> 
</div>

</header>
<nav>
  <ul>
    <li>O Nas</li>
    <li>Info</li>
    <li class="active">Mapa</li>
    <li>Kontakt</li>
  </ul>
</nav>
<main>
<div class="col">
   <img src="https://www.bikecad.ca/faqFiles/enter_key.jpg">
</div>
 <div class="col">
 <div id="text-wrapper">

 <p id="main-text">
 Mapa z windy.com
</p>
 
  <div id="labels">
    <span class="label animated">Lorem</span>
    <span class="label animated">ipsum</span>
    <span class="label animated">dolor</span>
  </div>
   </div>
  </div>
</main>
</div>

SCSS

body{
  background:#e8dada;
  height:100%;
}
#wrapper{
  width:75%;
  margin:0 auto 0 auto;
}
header{
  background:rgb(175, 10, 10);
padding:10px 10px 10px 10px;
   box-shadow: 0px 2.5px 5px #333;
   position:relative;
   z-index:5;
   height:30vh;
   display:flex;
   align-items:flex-end;
}
iframe, #header-wrapper{
  width:100%;
  height:100%;
}
h2{
  font-size:2em;
}
nav{
  margin-top:-7.5px;
  position:relative;
  z-index:1;

  ul{
    display:flex;
    /* justify-content:space-around; */
  }

  li{
    display:block;
    text-align:center;
    padding:20px 0 10px 0;
   /*  margin: 0 10px 0 10px; */
    font-size:1.5em;
    color:white;
   background: radial-gradient(circle at 35% 0, lighten(rgb(233,42,42), 5%) 10%, rgb(173,1,1) 60%, rgb(156,1,1) 100%);
   box-shadow: 1px 1px 5px #333;
   width:25%;
   height:1.2em;
  }
  li.active{
   padding:30px 0 10px 0;
  }
  li:nth-child(4){
    box-shadow: 0 1px 5px #333;
  }
}
main{
  display:flex;
padding-top:5%;
  img{
    position:relative;
    margin-top:10%;
    transform:rotate(-10deg);
    border: 10px solid white;
     max-width:80%;
     box-shadow: 1px 1px 5px #333;
  }


  .col{
text-align:right;
    width:50%;
    height:100%;
    position:relative;
  }

  #text-wrapper{
      background: radial-gradient(circle at 35% 0, lighten(rgb(233,42,42), 5%) 10%, rgb(173,1,1) 60%, rgb(156,1,1) 100%);
   
  }
  #labels{
    min-height:calc(1.2em + 20px);
    font-size:1.5em;
    position:relative;
    margin:10px 0 10px 0;
          display:flex;
      align-items:center;
    &::before, &::after{
      position:absolute;
      top:0;
      left:0;
      content:'';
      width:100%;
       box-shadow: 1px 1px 5px #333;
      height:10px;
        z-index:10;
      background: radial-gradient(circle at 10% 0, lighten(rgb(233,42,42), 5%) 0%, rgb(173,1,1) 70%, rgb(156,1,1) 100%);
    }
    &::after{
      top:auto;
      bottom:0;
    
    }
  }
  .label{
    background:rgb(196, 11, 11);
    padding:10px;
opacity:0;
  }
...

JavaScript

const els = document.querySelectorAll('nav li')
for (let i = 0; i < els.length; ++i) {
  els[i].addEventListener('click', (e) => {
  for (let j = 0; j < els.length; ++j) {
  els[j].classList.remove('active');
}
els[i].classList.add('active');
  })
}