Merge pull request #321 from niharikastha/main

#12 create navbar with fields home, about , contact us
E-Cell-VSSUT · Oct 31, 2022 · 9ab76e7 · 9ab76e7
2 parents ffb4567 + 3c59f4b
commit 9ab76e7
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 0 deletions.
diff --git a/AsthaNiharika/navbar/index.html b/AsthaNiharika/navbar/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Navbar</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" media="screen and (max-width: 1170px)" href="css/phone.css">
+    <link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Bree+Serif&display=swap" rel="stylesheet">
+</head>
+
+<body>
+    <nav id="navbar">
+        <div id="logo">
+            <img src="logo.png" alt="MyOnlineMeal.com">
+        </div>
+        <ul>
+            <li class="item"><a href="#home">Home</a></li>
+            <li class="item"><a href="#abouts">Services</a></li>
+            <li class="item"><a href="#sector">Awards</a></li>
+            <li class="item"><a href="#contact">Contact Us</a></li>
+        </ul>
+    </nav>
+</body>
+</html>
diff --git a/AsthaNiharika/navbar/logo.png b/AsthaNiharika/navbar/logo.png
diff --git a/AsthaNiharika/navbar/style.css b/AsthaNiharika/navbar/style.css
@@ -0,0 +1,60 @@
+
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    background-color: #cbaf76;
+}
+
+#navbar{
+    display: flex;
+    align-items: center;
+    position: sticky;
+    top: 0px;
+}
+
+#navbar::before{
+    content: "";
+    background-color: black;
+    position: absolute;
+    top:0px;
+    left:0px;
+    height: 100%;
+    width:100%;
+    z-index: -1;
+    opacity: 0.7;
+}
+
+#logo{
+    margin: 10px 34px;
+}
+
+#logo img{
+    height: 59px;
+    margin: 3px 6px;
+}
+
+
+#navbar ul{
+    display: flex;
+    font-family: 'Baloo Bhai', cursive;
+}
+
+#navbar ul li{ 
+    list-style: none;
+    font-size: 1.3rem;
+}
+
+#navbar ul li a{
+    color: white;
+    display: block;
+    padding: 3px 22px;
+    border-radius: 20px;
+    text-decoration: none;
+}
+
+#navbar ul li a:hover{
+    color: black;
+    background-color: white;
+}