add navbar

solygambas · solygambas · commit 9864ab3c0ac5 · 2021-05-14T16:13:29.000+02:00
diff --git a/photo-ninja/index.html b/photo-ninja/index.html
@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
+      crossorigin="anonymous"
+    />
     <link
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"
@@ -12,13 +18,43 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
     />
-
-    <title>Materialize</title>
+    <link rel="stylesheet" href="style.css" />
+    <title>Photo Ninja</title>
   </head>
   <body>
-    <div class="container">
-      <h1>Materialize</h1>
-    </div>
+    <!-- navbar -->
+    <header>
+      <nav class="nav-wraper transparent">
+        <div class="container">
+          <a href="#" class="brand-logo">Photo Ninja</a>
+          <a href="#" class="sidenav-trigger" data-target="mobile-menu"
+            ><i class="material-icons">menu</i></a
+          >
+          <ul class="right hide-on-med-and-down">
+            <li><a href="#">Portfolio</a></li>
+            <li><a href="#">Services</a></li>
+            <li><a href="#">Contact</a></li>
+          </ul>
+          <ul class="sidenav grey lighten-2" id="mobile-menu">
+            <li><a href="#">Portfolio</a></li>
+            <li><a href="#">Services</a></li>
+            <li><a href="#">Contact</a></li>
+          </ul>
+        </div>
+      </nav>
+    </header>
+    <!-- photo / grid -->
+
+    <!-- parallax -->
+
+    <!-- services / tabs -->
+
+    <!-- parallax -->
+
+    <!-- contact form -->
+
+    <!-- footer -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+    <script src="index.js"></script>
   </body>
 </html>
diff --git a/photo-ninja/index.js b/photo-ninja/index.js
@@ -0,0 +1,2 @@
+const sidenav = document.querySelector(".sidenav");
+M.Sidenav.init(sidenav);
diff --git a/photo-ninja/style.css b/photo-ninja/style.css
@@ -0,0 +1,10 @@
+header {
+  background: url(https://i.ibb.co/TbFxMgn/man-min.jpg) center / cover;
+  min-height: 100vh;
+}
+
+@media screen and (max-width: 670px) {
+  header {
+    min-height: 50vh;
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+const sidenav = document.querySelector(".sidenav");`
	`2`	`+M.Sidenav.init(sidenav);`