Merge pull request #12 from deepak1ok/deepak1ok/dev

create responsive navbar
iprinceroyy · Apr 22, 2022 · eec73e8 · eec73e8
2 parents 32bf9de + 6a6c6bb
commit eec73e8
Show file tree

Hide file tree

Showing 4 changed files with 292 additions and 63 deletions.
diff --git a/css/index.css b/css/index.css
diff --git a/css/index.css.map b/css/index.css.map
diff --git a/index.html b/index.html
@@ -16,60 +16,78 @@
 
 <body>
     <!-- ============================= Header ========================= -->
+    <nav class="navbar container">
+        <img class="bookmark" src="assets\images\logo-bookmark.svg">
+
+        <ul class="nav" id="navId">
+            <li class="border-top"><a href="#">FEATURES</a></li>
+            <li class="border-top"><a href="#">PRICING</a></li>
+            <li class="border-top"><a href="#">CONTACT</a></li>
+            <li class="border-top"><a href="#" id="button">LOGIN</a></li>
+            <li class="icon">
+                <a href="#"><img id="fb" src="assets/images/icon-facebook.svg">
+                    <img id="twitter" src="assets/images/icon-twitter.svg"></a>
+            </li>
+        </ul>
+
+        <i class="hamburger" onclick="toggle()">
+            <img src="assets\images\icon-hamburger.svg">
+        </i>
+    </nav>
+
     <header>
-        <div class="navbar">
-            <img src="assets\images\logo-bookmark.svg">
-            <ul class="nav">
-                <li><a href="#">FEATURES</a></li>
-                <li><a href="#">PRICING</a></li>
-                <li><a href="#">CONTACT</a></li>
-                <li><a><button>LOGIN</button></a></li>
-            </ul>
-        </div>
+
     </header>
 
     <!-- ============================= Main =========================== -->
     <main>
 
 
-        Features Pricing Contact Login A Simple Bookmark Manager A clean and simple interface to organize your favourite websites. Open a new browser tab and see your sites load instantly. Try it for free. Get it on Chrome Get it on Firefox Features Our aim is
+        <!-- Features Pricing Contact Login A Simple Bookmark Manager A clean and simple interface to organize your favourite websites. Open a new browser tab and see your sites load instantly. Try it for free. Get it on Chrome Get it on Firefox Features Our aim is
         to make it quick and easy for you to access your favourite websites. Your bookmarks sync between your devices so you can access them on the go. Simple Bookmarking Speedy Searching Easy Sharing Bookmark in one click Organize your bookmarks however
         you like. Our simple drag-and-drop interface gives you complete control over how you manage your favourite sites. More Info Intelligent search Our powerful search feature will help you find saved sites in no time at all. No need to trawl through
         all of your bookmarks. More Info Share your bookmarks Easily share your bookmarks and collections with others. Create a shareable link that you can send at the click of a button. More Info Download the extension We’ve got more browsers in the
         pipeline. Please do let us know if you’ve got a favourite you’d like us to prioritize. Add to Chrome Minimum version 62 Add & Install Extension Add to Firefox Minimum version 55 Add & Install Extension Add to Opera Minimum version 46 Add & Install
-        Extension Frequently Asked Questions Here are some of our FAQs. If you have any other questions you’d like answered please feel free to email us.
+        Extension Frequently Asked Questions Here are some of our FAQs. If you have any other questions you’d like answered please feel free to email us. -->
 
         <!-- Question 1 -->
-        What is Bookmark?
+        <!-- What is Bookmark? -->
 
         <!-- Answer 1 -->
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt justo eget ultricies fringilla. Phasellus blandit ipsum quis quam ornare mattis.
+        <!-- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt justo eget ultricies fringilla. Phasellus blandit ipsum quis quam ornare mattis. -->
 
         <!-- Question 2 -->
-        How can I request a new browser?
+        <!-- How can I request a new browser? -->
 
         <!-- Answer 2 -->
-        Vivamus luctus eros aliquet convallis ultricies. Mauris augue massa, ultricies non ligula. Suspendisse imperdiet. Vivamus luctus eros aliquet convallis ultricies. Mauris augue massa, ultricies non ligula. Suspendisse imperdie tVivamus luctus eros aliquet
-        convallis ultricies. Mauris augue massa, ultricies non ligula. Suspendisse imperdiet.
+        <!-- Vivamus luctus eros aliquet convallis ultricies. Mauris augue massa, ultricies non ligula. Suspendisse imperdiet. Vivamus luctus eros aliquet convallis ultricies. Mauris augue massa, ultricies non ligula. Suspendisse imperdie tVivamus luctus eros aliquet
+        convallis ultricies. Mauris augue massa, ultricies non ligula. Suspendisse imperdiet. -->
 
         <!-- Question 3 -->
-        Is there a mobile app?
+        <!-- Is there a mobile app? -->
 
         <!-- Answer 3 -->
-        Sed consectetur quam id neque fermentum accumsan. Praesent luctus vestibulum dolor, ut condimentum urna vulputate eget. Cras in ligula quis est pharetra mattis sit amet pharetra purus. Sed sollicitudin ex et ultricies bibendum.
+        <!-- Sed consectetur quam id neque fermentum accumsan. Praesent luctus vestibulum dolor, ut condimentum urna vulputate eget. Cras in ligula quis est pharetra mattis sit amet pharetra purus. Sed sollicitudin ex et ultricies bibendum. -->
 
         <!-- Question 4 -->
-        What about other Chromium browsers?
+        <!-- What about other Chromium browsers? -->
 
         <!-- Answer 4 -->
-        Integer condimentum ipsum id imperdiet finibus. Vivamus in placerat mi, at euismod dui. Aliquam vitae neque eget nisl gravida pellentesque non ut velit. More Info 35,000+ already joined Stay up-to-date with what we’re doing Contact Us Features Pricing
-        Contact
+        <!-- Integer condimentum ipsum id imperdiet finibus. Vivamus in placerat mi, at euismod dui. Aliquam vitae neque eget nisl gravida pellentesque non ut velit. More Info 35,000+ already joined Stay up-to-date with what we’re doing Contact Us Features Pricing
+        Contact -->
     </main>
 
     <!-- ============================ Footer ================================ -->
     <footer>
 
     </footer>
+    <script>
+        function toggle() {
+            var navId = document.getElementById('navId');
+            navId.classList.toggle("show");
+
+        }
+    </script>
 </body>
 
 </html>