Update navigation index.html

CSS part

@@ -0,0 +1,260 @@
+# MentorMe
+/* CSS Reset*/
+*{
+    margin: 0;
+    padding: 0;;
+
+}
+.service::before{
+background-image: url();
+
+    content: " ";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+}
+/* CSS Variables*/
+:root{
+    --navbar-height: 59px;
+}
+/*Navigation bar*/
+
+
+#navbar{
+    display: flex;
+    align-items: flex-end;
+    position: absolute;
+    top: 0%;
+}
+/*navbar list style*/
+#navbar ul{
+    display: flex;
+}
+#navbar ul li{
+    list-style: none;
+
+}
+ form{
+    float: right;
+
+}
+#navbar ul li a{
+    color: white;
+    display: block;
+    padding: 3px 43px;
+    border-radius: 20px;
+    text-decoration: none;
+}
+#navbar ul li a:hover{
+    color: black;
+    background-color: rgb(248, 149, 113);
+}
+/* Home section*/
+#home{
+    display: flex;
+    flex-direction: column;
+    height: 750px;
+    padding: 3px 200px;
+    justify-content: center;
+    align-items: center;
+}
+#home::before{
+    content: " ";
+    position: absolute;
+    background: url(java9.jpg) no-repeat center center/cover;
+    height: 130%;
+    width: 100%;
+    z-index: -1;
+    opacity: 0.89;
+    top: 0%;
+    left: 0%;
+}
+/* utility classes*/
+#home h1{
+    color: white;
+    text-align: center;
+}
+#home p{
+    color: white;
+    text-align: center;
+    font-size: 1.5rem;
+    font-family: cursive;
+}
+.h_primary{
+    font-size: 2.8rem;
+    padding: 15px;
+    font-family: sans-serif;
+
+}
+.btn{
+    padding: 6px 20px;
+    border: 2px solid white;
+    background-color: rgba(85, 26, 8, 0.651);
+    color: white;
+    margin: 17px;
+    font-size: 1.3rem;
+    border-radius: 14px;
+    cursor: pointer;
+}
+.btn:hover{
+    color: chocolate;
+}
+/* service section*/
+.center{
+    text-align: center;
+}
+.h_secendary{
+    font-size: 1.1rem ;
+    padding: 1px;
+}
+#service{
+    margin: 34px;
+    display: flex;
+}
+
+#service .box{
+    border: 2px solid brown;
+    padding: 34px;
+    margin: 3px 6px;
+    border-radius: 28px;
+    background: rgb(240, 238, 236);
+}
+#service .box img{
+    height: 156px;
+    margin: auto;
+    display: block;
+    width: fit-content;
+}
+#service .box p{
+    font-family: cursive;
+}
+/* Client Section*/
+
+#clients{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 0%;
+}
+#client img{
+    height: 110px;
+
+}
+#clients-item{
+    padding: 34px;
+    padding-top: 0%
+}
+
+
+/*contact section*/
+#contact{
+    position: relative;
+}
+#contact::before{
+    content: " ";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+
+    background: url('../img7.jpg');
+
+
+}
+footer{
+    background: black;
+    color: white;
+    padding: 9px 20px;
+}
+#contact-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 24px;
+
+}
+#contact-box input,
+#contact-box textarea{
+    width: 100%;
+    padding: 0.4rem;
+    border-radius: 4px;
+
+}
+#contact-box form{
+    width: 55%;
+}
+#contact-box label{
+    font-size: 1,3rem;
+}
+
+ul{
+    text-align: center;
+    text-decoration: none;
+    list-style: none;
+}
+.bn{
+    padding: 6px 20px;
+    border: 2px solid white;
+    background-color:whitesmoke;
+    margin: 17px;
+    font-size: 1.3rem;
+    border-radius: 14px;
+    cursor: pointer;
+
+}
+.bn:hover{
+    color: burlywood;
+}
+.b{
+    padding: 3px 10px;
+    border: 2px solid white;
+    background-color: whitesmoke;
+    margin:9px ;
+    font-size: 1.0rem;
+    border-radius: 7px;
+    cursor: pointer;
+    text-align: center;
+
+}
+.b:hover{
+    color: burlywood;
+
+
+}
+
+
+/* social media section*/
+#social{
+    height: 344px;
+}
+#social-media{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#social img{
+    height: 124px;
+
+}
+.social-item{
+    padding: 44px;
+
+    margin-bottom: 7%;
+    padding-bottom: 6%;
+
+}
+#social::before{
+    content: "";
+    position: absolute;
+    background: url('logo9.jpg');
+    width: 100%;
+    height: 47%;
+    z-index: -1;
+    opacity: 0.4;
+
+
+}
+
+

assets/css/style.css

@@ -1,4 +1,51 @@
+/* Navigation css part*/
+ul{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    height: 36px;
+    line-height: 36px;
+    background-color: #000;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 13px;
+}
+li{
+    float: left;
+
+}
+a{
+    display: block;
+    padding: 0 28px;
+    color: #fff;
+    text-decoration: none;
+}
+a:hover,.active a{
+    background-color: #156ee2;
+}
+.search{
+    float: right;
+}
+input[type=text]{
+    padding: 6px;
+    margin: top 8px;
+    border: none;
+    font-size: 13px;
+}
+.search button{
+    float: right;
+    padding: 6px;
+    margin-top: 5px;
+    font-size: 13px;
+    border: none;
+    background-color: #ddd;
+    cursor: pointer;
+    transition: 0.6s all;
+}
+.search button:hover{
+    background-color: dodgerblue;
+    color: #fff;
 
+}
 body {
   font-family: "Open Sans", sans-serif;
   color: #444444;

index.html

@@ -9,8 +9,21 @@
   <meta content="" name="description">
   <meta content="" name="keywords">
 
-  <!-- Favicons -->
-
+  <!-- navigation -->
+  <ul>
+
+        <li class="active"><a href="#">MENTORS</a></li>
+        <li><a href="#">STORE</a></li>
+        <li><a href="#">MOCK OPENINGS</a></li>
+        <li><a href="#">BLOG</a></li>
+        <li><a href="#">ABOUT</a></li>
+        <div class="search">
+            <form>
+                <input type="text" placeholder="Search....">
+                <button>search</button>
+            </form>
+        </div>
+    </ul>
 
   <!-- Google Fonts -->
   <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
@@ -124,4 +137,4 @@ <h4 class="title"><a href="">Nemo Enim</a></h4>
 
 </body>
 
-</html>
+</html>