initial commit

Sunday-Binakin · Sunday-Binakin · commit a595c601c3b8 · 2022-10-20T15:16:31.000Z
diff --git a/starter/css/main.css b/starter/css/main.css
@@ -259,4 +259,62 @@ ul {
 Navbar
 ===============
 */
+.navbar{
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
+}
+.nav-center{
+  width: 90vw;
+  max-width: var(--max-width);
+}
+.nav-header{
+  height: 6rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.nav-logo{
+  display: flex;
+  align-items: center;
+}
+.nav-header img{
+  width: 200px;
+}
+
+.nav-btn{
+  padding: 0.15rem 0.75rem;
+}
+.nav-btn i{
+  font-size: 1.25rem;
+}
+.nav-links{
+  display:flex;
+  flex-direction: column;
+  /* todo */
+  height: 0;
+  overflow: hidden;
+  transition: var(--transition);
+}
+.show-links{
+  height: 310px;
+}
+.nav-link{
+  display:block;
+  text-align: center;
+  text-transform: capitalize;
+  color: var(--grey-900);
+  letter-spacing: var(--letterSpacing);
+  padding:1rem 0;
+  border-top: 1px solid var(--grey-500);
+  transition: var(--transtion);
+}
+.nav-link:hover {
+  color: var(--primary-500);
+}
+.contact-link a{
+  padding: 0.15rem 1rem;
+}
+
+ 
diff --git a/starter/index.html b/starter/index.html
@@ -18,7 +18,33 @@
     <link rel="stylesheet" href="./css/main.css" />
   </head>
   <body>
-   <h1>Home Page </h1>
-    
+    <!-- nav -->
+    <div class="navbar">
+      <div class="nav-center">
+        <!-- header -->
+        <div class="nav-header">
+          <a href="index.html" class="nav-logo">
+            <img src="./assets/logo.svg" alt="Simply Recipes" />
+          </a>
+          <button type="button" class="btn nav-btn">
+            <i class="fas fa-align-justify"></i>
+          </button>
+        </div>
+        <!-- links -->
+        <div class="nav-links">
+          <a href="index.html" class="nav-link">home</a>
+          <a href="about.html" class="nav-link">about</a>
+          <a href="tags.html" class="nav-link">tags</a>
+          <a href="recipes.html" class="nav-link">recipes</a>
+          <div class="nav-link contact-link">
+            <a href="contact.html" class="btn">contact</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- end of nav -->
+    <script src="./js/app.js">
+
+    </script>
   </body>
 </html>
