<div class="navbar">
    <div class="logoDiv">
      <img id="logo" src="https://cdn-icons-png.flaticon.com/512/5706/5706604.png" alt="logo" />
      <h1 id="bizName">OTWUP</h1>
    </div>
    <ul class="links">
      <li><a href="#" target="_blank">Products</a></li>
      <li><a href="#" target="_blank">About</a></li>
      <li><a href="#" target="_blank">Contact Us</a></li>
    </ul>
     <div class="signUp">
        Sign Up
     </div>
  </div>
<div id="headerDiv">
  <div class="headerContent">
    <!--   <p class="gradient-text" id="gradient1">Gradient text</p> -->
    <div class="plainTextDiv">
    <h1 class="gradient-text" id="gradient2">Start up your business</h1>
    <p id="lorem"> Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. </p>
    <!--   <p class="gradient-text" id="gradient3">Gradient text</p>
           <p class="gradient-text" id="gradient4">Gradient text</p> -->
    <p class="plainText" id="reference"> Gradient background by <a href ="https://codepen.io/aepicos/pen/YzNebYr" target="_blank">Aepicos</a></p>
    <p class="plainText"> Corporate Ipsum by <a href="https://www.cipsum.com/" target="_blank">cipsum.com</a></p>
      
      <div class="btnStart">
        Learn More
      </div>
    </div>
    <div>
      <img id="mainIll" src="https://woobro.design/thumbnails/41/launch-project-vector-illustration-5de23524e4c55.png" alt="illustration" />
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@500;600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&family=Roboto&display=swap');

body {
  font-family: 'Bungee', cursive;
  text-align: center;
/*background: rgb(0,125,89);
  background: radial-gradient(circle, rgba(0,125,89,0.9743084733893558) 0%, rgba(9,74,112,1) 68%, rgba(0,45,108,1) 100%); */
  
/* vvv  FOR MAX COMPATIBILITY vvv */
/*   background: rgb(0,125,89);
  background: -moz-radial-gradient(circle, rgba(0,125,89,0.9743084733893558) 0%, rgba(9,74,112,1) 68%, rgba(0,45,108,1) 100%);
  background: -webkit-radial-gradient(circle, rgba(0,125,89,0.9743084733893558) 0%, rgba(9,74,112,1) 68%, rgba(0,45,108,1) 100%);
  background: radial-gradient(circle, rgba(0,125,89,0.9743084733893558) 0%, rgba(9,74,112,1) 68%, rgba(0,45,108,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#007d59",endColorstr="#002d6c",GradientType=1); */
  
/*   background: repeating-linear-gradient(45deg, gold 20%, maroon 50%)0 / 100vw 100vw; */

/*  background: -webkit-radial-gradient(#4c1569 ,rgb(0 49 57 / 91%) );
    background-image: radial-gradient(circle, #4c1569 ,rgb(0 49 57 / 91%)); */
/*  background: -webkit-radial-gradient( 0% 100%, ellipse cover, #9c27b080 20%,rgb(176 99 39 / 20%) 40%), linear-gradient(to bottom, rgb(115 57 219 / 25%) 0%,rgba(42,60,87,.4) 100%), linear-gradient(
51deg, #00bcd4c2 0%,#092756 100%); */
  
/*   background-image: radial-gradient(rgb(102 0 191 / 43%), rgba(255, 0, 0, 0) 40vw), 
                      radial-gradient(rgb(4 169 160 / 72%), rgba(0, 128, 0, 0) 40vw), 
                      radial-gradient(rgb(255 156 0 / 54%), rgba(0, 0, 255, 0) 40vw), 
                      radial-gradient(#ffc107, rgba(255, 255, 0, 0) 40vw), 
                      radial-gradient(rgb(255 0 181), rgba(255, 0, 0, 0) 40vw); */
  
/*     background-position:  -40vw 14rem,
      50% 10rem,
      60vw 14rem,
      -10vw calc(14rem + 20vw),
      30vw calc(14rem + 20vw); 
   background-size: 80vw 80vw;*/
  
/*  BASIC LINEAR  */
  background: rgb(197,169,255);
  background: linear-gradient(45deg, rgba(197,169,255,1) 0%, rgba(255,255,255,1) 50%, rgba(209,240,255,1) 100%);
  
/*  MORE COMPATIBLE TO OTHER BROWSERS */
/*  background: -moz-linear-gradient(45deg, rgba(219,201,255,1) 0%, rgba(255,255,255,1) 50%, rgba(209,240,255,1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(219,201,255,1) 0%, rgba(255,255,255,1) 50%, rgba(209,240,255,1) 100%);
    background: linear-gradient(45deg, rgba(219,201,255,1) 0%, rgba(255,255,255,1) 50%, rgba(209,240,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dbc9ff",endColorstr="#d1f0ff",GradientType=1);
 */
  
  height: 100vh;
  background-repeat: no-repeat;  
}

.navbar{
    position: absolute;
    top: 0;
    left: 0;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 100vw;
    padding-top: 20px;
}

.logoDiv{
    position: absolute;
    top: 5px;
    left: 45px;
    display: flex;
    border-radius: 25px;
}

#logo{
  margin-top: 15px;
  width: 15%;
  
}

#bizName{
  margin-top: 30px;
  margin-left: 30px;
  background:linear-gradient(180deg, rgba(21,175,228,1) 24%, rgba(134,70,252,1) 86%);
  background-clip: text;
  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}


a {
   text-decoration: none;
   color: blueviolet;
}

a:hover, a:focus, a:active{
  color: grey;
}

.links{
  display: inline-flex;
  gap: 100px;
  padding: 0;
  width: 30%;
}

.links li{
  font-family: 'Gemunu Libre', sans-serif;
  display: flex;
  text-decoration: none;
  font-weight: 800;
  font-size: 20px;
}

.gradient-text {
  margin: 30px;
  -webkit-text-fill-color: transparent;
  font-size: 42px;
  
}

#headerDiv{
    margin-top: 80px;
    width: 100%;
    height: 65%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#headerDiv p{
  text-align: initial;
  font-family: 'Roboto', sans-serif;
}

.headerContent{
  display: flex;
}

/* #gradient1{
  background: linear-gradient(#FFFFFF, #00072D);
  background-clip: text;
  -webkit-background-clip: text;
}

#gradient3{
  background: linear-gradient( #03001e, #7303c0, #ec38bc, #fdeff9);
  background-clip: text;
  -webkit-background-clip: text;
} */

/* #gradient4{
  background: linear-gradient( #5d4157, #a8caba);
  background-clip: text;
  -webkit-background-clip: text;
} */

#gradient2{
  text-align: initial;
  font-size: 60px;
  margin: 40px auto auto auto;
  background: linear-gradient(90deg, rgba(123,21,228,1) 24%, rgba(242,70,252,1) 86%);
  background-clip: text;
  -webkit-background-clip: text;
}

#mainIll{
  width: 55%;
  float: right;
  margin-right: 3%;
  margin-top: 5%;
}

#reference{
  font-family: 'Montserrat', sans-serif;
}

.plainTextDiv{
    width: 33%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 90px;
    margin-left: 4%;
    margin-top: 2%;
  gap: 5px;
}

.plainText{
  margin: 0px;
  color: #8b6498;
  font-family: 'Montserrat', sans-serif;
}

#lorem{
  width: 100%;
  color: #8b6498;
}

.btnStart, .signUp{
  margin-top: 35px;
  height: 50px;
  width: 200px;
  background: linear-gradient(to right, #52A0FD 0%, #00e2fa 80%, #00e2fa 100%);
  color: white;
  border-radius: 25px;
  justify-contents: center;
  align-items: center;
  display: flex;
  justify-content: center;
  cursor: pointer;
  -webkit-box-shadow: 0px 10px 13px -7px #3f51b5, 0px 6px 15px 2px rgb(102 187 209 / .76); 
box-shadow: 0px 10px 13px -7px #3f51b5, 0px 6px 15px 2px rgb(102 187 209 / 76%);
  transition: all 80ms ease;
}


.btnStart:hover, .btnStart:focus{
  transform: scale(1.06);
}

.signUp{
  margin-top: 5px;
  height: 50px;
  width: 150px;
  margin-right: 35px;
}
  
  
  @media (min-width: 481px) and (max-width: 767px){
    #mainIll{
      width: 50%;
    }
    
    .plainTextDiv {
    width: 36%;
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.