Merge pull request #108 from Schola-droid/🎨-Create-the-home-landing-p…

…age-#2 🎨 create the home landing page #2
italanta · Oct 11, 2023 · c006ff6 · c006ff6
2 parents 81ff8cd + ffa9b7f
commit c006ff6
Show file tree

Hide file tree

Showing 8 changed files with 399 additions and 119 deletions.
diff --git a/images/Union.png b/images/Union.png
diff --git a/images/arrow black.svg b/images/arrow black.svg
diff --git a/images/arrow-down.svg b/images/arrow-down.svg
diff --git a/images/arrow-right-solid.svg b/images/arrow-right-solid.svg
diff --git a/images/elewa-logo.png b/images/elewa-logo.png
diff --git a/images/toRightArrow_tlcdnk.svg b/images/toRightArrow_tlcdnk.svg
diff --git a/index.html b/index.html
@@ -13,9 +13,21 @@
 
   <title>Collaboration and Contribution</title>
   <link rel="stylesheet" href="src/css/style.css">
+
+  <!-- styling -->
+  <link rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
+  <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=Montserrat:ital,wght@1,100&family=Roboto:wght@100&display=swap"
+    rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
+  <!-- end of styling -->
+
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
   <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
   <!-- <script src="./src/ts/index.ts"></script> -->
+
   <script defer type="module" src="dist\out-tsc\index.js"></script>
 </head>
 <body id="body">
@@ -38,6 +50,44 @@
     </label>
   </nav>
 
-</body>
+<body>
+
+
+  <header>
+    <nav class="navbar contain">
+      <img src="images/elewa-logo.png" class="logo">
+      <input type="checkbox" id="toggler" />
+      <label for="toggler"><i class="ri-menu-line"></i></label>
+
+      <div class="menu-list">
+        <ul class="navlist">
+          <li><a href="#">Solutions<span><img src="images/arrow-down.svg" alt="chevron-down" width="30px" height="15px"
+                  class="chevron"></span></a></li>
+          <li><a href="#">Projects</a></li>
+          <li><a href="#">Company</a></li>
+          <li><a href="#">News</a></li>
+        </ul>
+        <button class="contactus-btn">
+          <a href="#">Contact us</a>
+        </button>
+      </div>
+    </nav>
+  </header>
+
+  <section class="hero">
+    <div class="hero-text">
+      <h1>Training at scale</h1>
+      <p id="human">Human-centered, meaningful and<br>enjoyable</p>
+      <button class="btn-unlock">
+        <span>Unlock your potential</span> <span class="arrow-icon"><img src="images/arrow-right-solid.svg"
+            alt=""></span>
+      </button>
+
+    </div>
+    <div class="hero-img">
+      <img src="images/Union.png">
+
+    </div>
 
-</html>
+  </section>
+</body>