feat: Navigation Done

maitrakhatri · Feb 5, 2022 · 3fe9225 · 3fe9225
1 parent 0aeea30
commit 3fe9225
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 0 deletions.
diff --git a/CSS/Components/navigation/navigation.css b/CSS/Components/navigation/navigation.css
@@ -0,0 +1,32 @@
+.navbar {
+    display: flex;
+}
+
+.navbar-header {
+    display: flex;
+    gap: 1rem;
+    padding: 1rem;
+    align-items: center;
+    margin-right: auto;
+}
+
+.navbar-links {
+    display: flex;
+    gap: 2rem;
+    padding: 1rem;
+    justify-content: center;
+    align-items: center;
+}
+
+.navbar a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.navbar-header-title {
+    font-weight: bolder;
+}
+
+.navbar-container {
+    position: relative;
+}
diff --git a/CSS/Components/navigation/navigation.html b/CSS/Components/navigation/navigation.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>navigation</title>
+    <link rel="stylesheet" href="navigation.css">
+</head>
+<body>
+
+    <nav class="navbar bg-red">
+
+        <div class="navbar-header">
+
+            <a href="#"><p class="navbar-header-title text-l text-white">Navbar Title</p></a>
+
+        </div>
+
+        <div class="navbar-links">
+
+            <a href="#"><img src="../../../assets/download_white_36dp.svg" alt="download"></a>
+            <a href="#"><img src="../../../assets/print_white_36dp.svg" alt="print"></a>
+            <a href="#"><img src="../../../assets/bookmark_white_36dp.svg" alt="bookmark"></a>
+
+        </div>
+
+    </nav>
+
+</body>
+</html>
diff --git a/CSS/style.css b/CSS/style.css
@@ -13,6 +13,7 @@
 @import url(./Components/image/image.css);
 @import url(./Components/input/input.css);
 @import url(./Components/text-utilities/text-utilities.css);
+@import url(./Components/navigation/navigation.css);
 
 /* FONT */
 @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');

diff --git a/assets/bookmark_white_36dp.svg b/assets/bookmark_white_36dp.svg
diff --git a/assets/download_white_36dp.svg b/assets/download_white_36dp.svg
diff --git a/assets/menu_white_36dp.svg b/assets/menu_white_36dp.svg
diff --git a/assets/print_white_36dp.svg b/assets/print_white_36dp.svg
diff --git a/docs/components.html b/docs/components.html
@@ -762,6 +762,41 @@ <h3 class="sub-section-title">Shadow</h3>
 
         </div>
 
+        <div id="navigation" class="section">
+
+                <h2 class="section-title">Navigation</h2>
+
+                <h3 class="sub-section-title">Classic Navbar</h3>
+
+                <div class="component-container navbar-container">
+
+                    <div class="navbar bg-red">
+
+                        <div class="navbar-header">
+
+                            <a href="#"><p class="navbar-header-title text-l text-white">Navbar Title</p></a>
+
+                        </div>
+
+                        <div class="navbar-links">
+
+                            <a href="#"><img src="../../../assets/download_white_36dp.svg" alt="download"></a>
+                            <a href="#"><img src="../../../assets/print_white_36dp.svg" alt="print"></a>
+                            <a href="#"><img src="../../../assets/bookmark_white_36dp.svg" alt="bookmark"></a>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+                <div class="code-snippets">
+                    <iframe src="https://carbon.now.sh/embed?bg=rgba%28255%2C255%2C255%2C1%29&t=seti&wt=none&l=htmlmixed&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%253Cnav%2520class%253D%2522navbar%2520bg-red%2522%253E%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520%253Cdiv%2520class%253D%2522navbar-header%2522%253E%250A%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Ca%2520href%253D%2522%2523%2522%253E%253Cp%2520class%253D%2522navbar-header-title%2520text-l%2520text-white%2522%253ENavbar%2520Title%253C%252Fp%253E%253C%252Fa%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%253C%252Fdiv%253E%250A%250A%2520%2520%2520%2520%253Cdiv%2520class%253D%2522navbar-links%2522%253E%250A%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Ca%2520href%253D%2522%2523%2522%253E%253Cimg%2520src%253D%2522...%2522%2520alt%253D%2522icon-desc%2522%253E%253C%252Fa%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Ca%2520href%253D%2522%2523%2522%253E%253Cimg%2520src%253D%2522...%2522%2520alt%253D%2522icon-desc%2522%253E%253C%252Fa%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Ca%2520href%253D%2522%2523%2522%253E%253Cimg%2520src%253D%2522...%2522%2520alt%253D%2522icon-desc%2522%253E%253C%252Fa%253E%250A%250A%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%250A%253C%252Fnav%253E" style="width: 884px; height: 485px; border:0; transform: scale(1); overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe>
+
+                </div>
+
+        </div>
+
     </main>
 
 </body>

diff --git a/docs/docs.css b/docs/docs.css
@@ -227,4 +227,8 @@ button#bfc-show {
     flex-direction: column;
     gap: 2rem;
     width: inherit;
+}
+
+.navbar-container {
+    width:auto;
 }