<div class="hero">
  <div class="hero-inner">
    
      <div class="navbar">
        
        <div class="logo">logo 
          <span class="col-primary">here</span>
        </div>
        
        <div class="col-primary" id="toggle">
          <svg width="35" height="35" fill="none" stroke-linecap="round" stroke-   linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16m-7 6h7"></path></svg>
        </div>
        
      </div>
    
    <div class="hero-content">
      <div class="circle"></div>
      <h1 class="hero-title">Your<br>partner in <br>digital
       
          <span class="underline-box">
          <span>universe</span>
          <span class="underline"></span>
        </span>
      </h1>
     
    </div>
    
    <div class="hero-menu hide" id="menu">
       <div class="navbar">
        
        <div class="logo col-white">logo 
          <span class="col-white">here</span>
        </div>
        
        <div class="col-white" id="close">
         <svg width="30" height="30" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M6 18L18 6M6 6l12 12"></path></svg>
        </div>
        
      </div>
      <div class="hero-menu-navigation">
        <div><a href="#" class="hero-menu-link">Link 1</a></div>
         <div><a href="#" class="hero-menu-link">Link 2</a></div>
         <div><a href="#" class="hero-menu-link">Link 3</a></div>
      </div>
    </div>
  </div>
</div>
body {
  color: #0a1c2d;
  font-family: "Lato", sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  tab-size: 4;
  font-size: 16px;
}
.hero {
  height: 500px;
  background: #ffffff;
}

.hero-inner {
  max-width: 1440px;
  margin: auto;
  width: 100%;
}

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

.logo {
  font-size: 30px;
  font-weight: 600;
}

.col-primary {
  color: #ff5733;
}

.col-white {
  color: #ffffff;
}

.hero-content {
  display:flex;
  justify-content:flex-start;
  align-items: center;
  padding: 100px 0;
  position: relative;
  max-width: 1140px;
  widht:100%;
  margin: 0 auto;
}

.circle {
  width: 308px;
  height: 308px;
  background: #ff5733;
  border-radius: 50%;
  margin-left: 180px;
}

  .hero-title {
    position: absolute;
    left: 28%;
    font-size: 88px !important;
    line-height: 120%;
    padding-bottom: 0.5rem;
    top: -10%;
  }

.underline-box {
  display: inline-flex;
  flex-direction: column;
}

.underline {
  height: 8px;
  display: block;
  background: #4cd3c2;
  border-radius: 2202px;
}

.hero-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ff5733;
}

.hero-menu-navigation {
  display: flex;
  max-width: 991px;
  width: 100%;
  height: 100%;
  margin:auto;
  justify-content: space-between;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
}

.hero-menu-link {
  color: #ffffff;
  font-size: 70px;
  line-height: 85px;
  text-decoration: none;
}

.hero-menu-link:hover {
  text-decoration: underline;
}

@media only screen and (max-width: 991px) {
  .hero-title {
    font-size: 66px !important;
    left: 34%;
    top: -3%;
  }
  
  .hero-menu-navigation {
    flex-direction: column;
    transform: unset !important;
    left: 4%;
    top: 10%;
    margin-top: 40px;
    justify-content: unset !important;
  }
  
  .hero-menu-link {
    padding-bottom: 20px;
    font-size: 50px;
  }
}

.hide {
  transform: translateX(-100%);
  transition: .25s all ease-in-out;
}

#toggle, #close {
  cursor: pointer;
}

@media only screen and (max-width: 767px) {
  .hero-title {
    font-size: 54px !important;
    left: 47%;
    top: 2%;
  }
  
    .circle {
    width: 250px;
    height: 250px;
    background: #ff5733;
  }

  
  @media only screen and (max-width: 540px) {
     .hero-title {
      font-size: 44px !important;
      left: 29%;
      top: 6%;
    }
    .circle {
      margin-left: 25px;
    }
  }
  
   @media only screen and (max-width: 540px) {
     .hero-title {
        font-size: 34px !important;
        left: 46%;
        top: 11%;
    }
    .circle {
      margin-left: 30px;
      width: 200px;
      height: 200px;
    }
  }
let toggle = document.getElementById('toggle');
let close = document.getElementById('close');
let menu = document.getElementById('menu');

toggle.addEventListener('click', function() {
  menu.classList.remove('hide');
});

close.addEventListener('click', function() {
  menu.classList.add('hide');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.