Update index.html

tranthanhvi · Dec 14, 2021 · 9f06617 · 9f06617
1 parent a606448
commit 9f06617
Showing 1 changed file with 30 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -6,8 +6,6 @@
     <title>Shep@r Photography</title>
     <link rel="stylesheet" href="Shepar-photography1.css">
     <style>
-
-
         .contact-symbol {
             width: 20px;
             height: 20px;
@@ -26,7 +24,7 @@
     <!-- Main Menu -->
     <div class="main">
         <!--Title-->
-        <div class="title-shepar">
+        <div class="mutual-title">
             <h1 class="shepar">Shep@r</h1>
             <h3>Photographer</h3>
         </div>
@@ -38,25 +36,48 @@ <h3>Photographer</h3>
                     <li class="nav-item"><a class="link-nav" href="About.html">About</a></li>
                 </ul>
             </nav>
-            <!-- Nav mobile-->
-            <div class="nav-button">
+            <!-- Nav bars button-->
+            <label for="nav-mobile-input" class="nav-button">
                 <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars"
                     class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 448 512">
                     <path fill="currentColor"
                         d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z">
                     </path>
                 </svg>
-            </div>
+            </label>
+            <input type="checkbox" name="" id="nav-mobile-input" class="nav-input">
+            <!--The overlay-->
+            <label for="nav-mobile-input" class="nav-overlay"></label>
+            <!--Nav Mobile-->
+            <nav class="nav-mobile">
+                <ul class="nav-mobile-container">
+                    <li class="nav-mobile-item-"><a class="nav-mobile-link" href="Shepar-photography.html">Home</a></li>
+                    <li class="nav-mobile-item"><a class="nav-mobile-link" href="About.html">About</a></li>
+                </ul>
+                <label for="nav-mobile-input" class="nav-mobile-close">
+                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times"
+                        class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 352 512">
+                        <path fill="currentColor"
+                            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z">
+                        </path>
+                    </svg>
+                </label>
+            </nav>
+
+
         </div>
+
     </div>
-    <hr>
+
+
     <!--Projects section-->
     <div class="flex-container">
         <div class="flex-item">
             <a class="link-flex" href="Into-the-woods.html" target="_blank"><img
-                    src="https://github.com/tranthanhvi/tranthanhvi.github.io/blob/main/1.jpg?raw=true"
-                    width="457" alt="Into the Woods">
+                    src="https://github.com/tranthanhvi/tranthanhvi.github.io/blob/main/1.jpg?raw=true" width="457"
+                    alt="Into the Woods">
                 <h3 class="title bottom-title">Into the Woods</h3>
             </a>
         </div>