Index.html

<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Waiting+for+the+Sunrise&display=swap" rel="stylesheet">
<div id="box">
    <video autoplay loop muted>
    <source src="original-59fdb03a123772fd4ba37d5ff4819af9.mp4" type="video/mp4">
    </video>
    
  <!--   Hero section -->
    <div class="row cd">
      <div class="item cn"><SPAN style="font-family: cursive;
        font-weight: 400;
        font-style: normal;">  KELECHI DESIGNS   </SPAN>  </div>
      <div class="item ph"> <SPAN style="font-family: cursive;
        font-weight: 400;
        font-style: normal;" >     <a href="project.html" class="button">About  </a>&nbsp; &nbsp;  <a href="project.html" class="button">View Designs </a>  </a> &nbsp; &nbsp; <a href="project.html" class="button">Contact  </a>   </SPAN> </div>
     
    </div>
    <div class="row hero">
      <div class="item">
        <div id="hl"> <SPAN style="font-family: cursive;
            font-weight: 600;
        opacity: 90%; color: rgb(3, 3, 3);"  >  THE FUTURE OF AFRICAN WEB DESIGN ® </SPAN>   <BR> <sub></sub><br>
          
          <span></span>        
        </div>
 
      </div>
    </div>
      </div>   </div>
    </div>
    <!--   Hero section -->
  
  </div>


  <style>

:root {
  --black: black;
  --white: white;
  --gold: #406ab3;
}

body {
  padding:0;
  margin:0;
  font-family:sans-serif;
  text-align:center;
  background:var(--black);
  perspective:50vw;
}

#box {
  width:100%;
  margin:auto;  
  position:relative;
}

video {
  width:100%;
  position:absolute;
  left:0;
  top:38px;
  z-index:-1;
}

img {
  width:100%; 
  height:auto;
  padding:0;
}

a { 
  text-decoration:none;
  color:inherit;
  width:fit-content;
}

.row {
  display:flex;
  justify-content:center;
  padding:0 15%;
  max-width:1200px;
}
.item {
/*   background:red; */
  padding:10px;
  flex-grow:1;
/*   outline:1px solid limegreen; */
}

.btn {
  width:fit-content;
  max-width:50%;
  padding:20px;
  background:var(--gold);
  color:var(--black);
  text-align:center;
  transition:.25s;
}
.btn:hover {
  transform:skewX(-15deg);
}

.cd {
  background:var(--black);
  color:var(--white);
}

.cn {
  text-align:left;
  max-width:50%;
}
.ph {
  text-align:right;
  max-width:50%;
}

.hero {
  margin-top:calc((100vw * .3229) - 150px);
  color:var(--gold);
  text-align:left;
  font-size:24px;
  font-weight:600;
}

.hero span {
  font-size:7vw;
  line-height:80%;
}

.hero .item  {
  max-width:60%;
}

#hl {
  max-width:100%;
  transform-origin:center;
  
}

.hero .item div:nth-child(2) {
  margin:25px 0;
  font-size:20px;
  line-height:150%;
  font-weight:100;
  /*   color:var(--black); */
}

.info {
  margin:100px 0;
  color:var(--white);  
}

.info .item {
  padding:15px;
}

.info img {
  width:60%;
  max-width:250px;
  border-radius:50%;
}

.info h3 {
  line-height:125%;
}

.info div {
  line-height:200%;
}

@media all and (max-width: 800px) {
  .row  {
    display:block;
    padding:0 2.5%;
  }
  
  .hero .item {
    width:100%;
    max-width:100%;
  }
  
  .hero img {
    display:none;
  }
  
  .hero span {
    font-size:48px;
  }
}

  </style>
<br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br> <br><br><br><br><br> <br> <br><br><br> <br>
<div id="box">

    <div id="hl"> <SPAN style="font-family: cursive;
        font-weight: 900; font-size: larger;
    opacity: 90%; color: rgb(249, 246, 246);"  >  Meet Kelechi  The Innovator: A Web Dev Freelancer Reshaping African Design   ® </SPAN>   <BR> <sub></sub><br>
      
      <span></span>        
    </div>
    <video autoplay loop muted>
    <source src="original-9ab7b20e4ab01666955aed0503ffcd52.mp4" type="video/mp4">
    </video>
    

    <div class="row hero">
      <div class="item">
        <div id="hl"> <sub> </sub><br>

          
          <span>  </span>        
        </div>
        
      </div>
    </div>
      </div>   </div>
    </div>
    <!--   Hero section -->
    

    <div id="box">

        <div id="hl"> <SPAN style="font-family: cursive;
            font-weight: 900; font-size: larger;
        opacity: 90%; color: rgb(249, 246, 246);"  >   </SPAN>   <BR> <sub></sub><br>
          
          <span></span>        
        </div>
      
        
    
        <div class="row hero">
          <div class="item">
            <div id="hl"> <sub> </sub><br>
    
              
              <span>  </span>        
            </div>
            
          </div>
        </div>
          </div>   </div>
        </div>
        <!--   Hero section -->
        <div class="row cd">
            <div class="item cn"><SPAN style="font-family: cursive;
              font-weight: 400;
              font-style: normal;">  KELECHI DESIGNS   </SPAN>  </div>
            <div class="item ph"> <SPAN style="font-family: cursive;
              font-weight: 400;
              font-style: normal;" >     <a href="project.html" class="button">About  </a>&nbsp; &nbsp;  <a href="project.html" class="button">View Designs </a>  </a> &nbsp; &nbsp; <a href="project.html" class="button">Contact  </a>   </SPAN> </div>