Add files via upload

Index.html

@@ -0,0 +1,258 @@
+<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>