Merge pull request #196 from AzharAhmed-bot/Website-header

💄Website header-#1
italanta · Oct 6, 2023 · 81ff8cd · 81ff8cd
2 parents 0ad233c + 2890c63
commit 81ff8cd
Show file tree

Hide file tree

Showing 3 changed files with 162 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -13,12 +13,31 @@
 
   <title>Collaboration and Contribution</title>
   <link rel="stylesheet" href="src/css/style.css">
-
+  <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">
+  <!--This is the navbar of the page-->
+  <nav>
+    <label class="logo"><span class="curved-line">ele</span>wa</label>
+    <ul>
+      <li><a class="" href="#">Solution</a></li>
+      <li><a href="#">Projects</a></li>
+      <li><a href="#">Company</a></li>
+      <li><a href="#">News</a></li>
+      <li><a class="nav-button" href="#">Contact Us</a></li>
+    </ul>
+
+    <label id="icon">
+      <i class="fas fa-bars"></i>
+    </label>
+    <label id="icontwo">
+      <i class="fas fa-times"></i>
+    </label>
+  </nav>
 
-<body>
-  <div>Welcome</div>
 </body>
 
 </html>
diff --git a/src/css/style.css b/src/css/style.css
@@ -1,5 +1,118 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
+*{
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  text-decoration: none;
+  list-style: none;
+  color: black;
+}
+body{
+  background-color:#F9F8F4;
+
+}
+nav{
+  height: 80px;
+  width: 100%;
+  justify-content: space-between;
+  background-color:#F9F8F4;
+}
+label.logo{
+  font-size: 35px;
+  font-weight: bold;
+  color: black;
+  padding: 0 100px;
+  line-height: 80px;
+}
+.curved-line{
+  border-radius: 50%;
+  border-bottom: 2px solid;
+}
+nav ul{
+  float: right;
+  margin-right: 200px;
+}
+.nav-button {
+  background:#2D2E52 0% 0% no-repeat padding-box;
+  color: white;
+  padding: 10px 30px;
+  border: none;
+  border-radius: 22px;
+  font-size: 18px;
+  margin-left: 150px;
+}
+
+
+nav li{
+  display: inline-block;
+  margin: 0 8px;
+  line-height: 80px;
+}
+nav a {
+  color:black; 
+  font-size: 18px;
+  padding: 7px 10px;
+}
+#icon{
+  color: black;
+  font-size: 30px;
+  line-height: 80px;
+  float: right ;
+  margin-right: 40px;
+  cursor: pointer;
+  display: none;
+}
+#icontwo{
+  color: black;
+  font-size: 30px;
+  line-height: 80px;
+  float: right ;
+  margin-right: 40px;
+  cursor: pointer;
+  display: none;
+}
+
+@media (max-width:909px){
+ label.logo{
+  font-size: 32px;
+  padding-left: 60px;
+ }
+ nav ul{
+  margin-right:20px;
+ }
+ nav a{
+  font-size: 17px;
+ }
+}
+@media (max-width:1181px){
+  #icon{
+    display: block;
+  }
+  nav ul{
+    position: fixed;
+    width: 100%;
+    height:100vh;
+    background: #F9F8F4;
+    top: 80px;
+    left: -100%;
+    text-align: center;
+    transition:all .5s ;
+  }
+  nav li{
+    display: block ;
+    margin: 10px 0;
+    line-height: 30px;
+  }
+  .nav-button{
+    margin-left: 50px;
+  }
+  nav a{
+    font-size: 20px;
+  }
+  a.active,a:hover{
+    text-decoration: underline;
+  }
+  nav ul.show{
+    left: 0;
+  }
+
+}
diff --git a/src/ts/index.ts b/src/ts/index.ts
@@ -0,0 +1,22 @@
+document.addEventListener("DOMContentLoaded", () => {
+    //Declare variables for the elements of the html 
+    const icon = document.getElementById("icon");
+    const iconTwo = document.getElementById("icontwo");
+    const ul = document.querySelector("ul");
+    //condition to check if the icon,icontwo and ul exist
+    if (icon && iconTwo && ul) {
+        //When fa-bars is clicked it adds the show class,then it's replaced with the fa-times
+      icon.addEventListener("click", () => {
+        ul.classList.add("show");
+        icon.style.display = "none";
+        iconTwo.style.display = "block";
+      });
+      //when fa-times is clicked it removes the .show class, then it's display is replaced with the fa-bars
+      iconTwo.addEventListener("click", () => {
+        ul.classList.remove("show");
+        icon.style.display = "block";
+        iconTwo.style.display = "none";
+      });
+    }
+  });
+