Update index.html

tranthanhvi · Dec 17, 2021 · b1e76b1 · b1e76b1
1 parent b18c099
commit b1e76b1
Showing 1 changed file with 116 additions and 105 deletions.
diff --git a/index.html b/index.html
@@ -9,69 +9,73 @@
 
 <body>
     <!-- Main Menu -->
-    <div class="main">
-        <!--Title-->
-        <div class="mutual-title">
-            <h1 class="shepar">Shep@r</h1>
-            <h3>Photographer</h3>
-        </div>
-        <div class="nav">
-            <!-- Nav PC -->
-            <nav class="nav-pc">
-                <ul class="nav-container">
-                    <li class="nav-item"><a class="link-nav" href="index.html">Home</a></li>
-                    <li class="nav-item"><a class="link-nav" href="About.html">About</a></li>
-                </ul>
-            </nav>
-            <!-- 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>
-            </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">
+    <table>
+        <tr>
+            <td>
+                <div class="mutual-title">
+                    <h1 class="shepar">Shep@r</h1>
+                    <h3>Photographer</h3>
+                </div>
+            </td>
+            <td><div class="nav">
+                <!-- Nav PC -->
+                <nav class="nav-pc">
+                    <ul class="nav-container">
+                        <li class="nav-item"><a class="link-nav" href="index.html">Home</a></li>
+                        <li class="nav-item"><a class="link-nav" href="About.html">About</a></li>
+                    </ul>
+                </nav>
+                <!-- 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="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">
+                            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>
                 </label>
-            </nav>
-
-
-        </div>
-
-    </div>
+                <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="index.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>
+        </td>
+        </tr>
+    </table>
+
 
 
     <!--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="550"
+                    src="https://github.com/tranthanhvi/tranthanhvi.github.io/blob/main/1.jpg?raw=true" width="475px"
                     alt="Into the Woods">
                 <h3 class="title bottom-title">Into the Woods</h3>
             </a>
         </div>
         <div class="flex-item">
             <a class="link-flex" href="Human.html" target="_blank"><img
                     src="https://github.com/tranthanhvi/tranthanhvi.github.io/blob/main/21985386_898514333630517_1079663338360668160_n.jpg?raw=true"
-                    width="550" alt="Human">
+                    width="475px" alt="Human">
                 <h3 class="title bottom-title">Human</h3>
             </a>
         </div>
@@ -81,14 +85,14 @@ <h3 class="title bottom-title">Human</h3>
         <div class="flex-item">
             <a class="link-flex" href="Moments.html" target="_blank"><img
                     src="https://github.com/tranthanhvi/tranthanhvi.github.io/blob/main/26283514_728295440699657_7405108528425205760_n.jpg?raw=true"
-                    width="550" alt="Moments">
+                    width="475px" alt="Moments">
                 <h3 class="title bottom-title">Moments</h3>
             </a>
         </div>
         <div class="flex-item">
             <a class="link-flex" href="Harbour.html" target="_blank"><img
                     src="https://github.com/tranthanhvi/tranthanhvi.github.io/blob/main/66601878_2357859121207317_6018794254461462874_n.jpg?raw=true"
-                    width="550" alt="At Habour">
+                    width="475px" alt="At Habour">
                 <h3 class="title bottom-title">At Habour</h3>
             </a>
         </div>
@@ -98,68 +102,75 @@ <h3 class="title bottom-title">At Habour</h3>
         <div class="flex-item">
             <a class="link-flex" href="the-cities.html" target="_blank"><img
                     src="https://github.com/tranthanhvi/tranthanhvi.github.io/blob/main/59652263_841435362887629_2667476118665075524_n.jpg?raw=true"
-                    width="550" alt="The Cities">
+                    width="475px" alt="The Cities">
                 <h3 class="title bottom-title">The Cities</h3>
             </a>
         </div>
     </div>
-    <hr>
-    <!--Contact Info-->
-    <footer>
-        <div class="contact-container">
-            <h1>Contact</h1>
-            <div class="contact-item">
-                <div class="contact-symbol"><svg aria-hidden="true" focusable="false" data-prefix="far"
-                        data-icon="envelope" class="svg-inline--fa fa-envelope fa-w-16" role="img"
-                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-                        <path fill="currentColor"
-                            d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z">
-                        </path>
-                    </svg>
-                </div>
-                <br>
-
-                <div>[email protected]</div>
-            </div>
-
-            <div class="contact-item">
-                <div class="contact-symbol"><svg aria-hidden="true" focusable="false" data-prefix="fas"
-                        data-icon="phone" class="svg-inline--fa fa-phone fa-w-16" role="img"
-                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-                        <path fill="currentColor"
-                            d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z">
-                        </path>
-                    </svg>
-                </div>
-                <br>
-                <div>
-                    0705348906
-                </div>
-            </div>
-
-            <div class="contact-item">
-                <div class="contact-symbol">
-                    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram"
-                        class="svg-inline--fa fa-instagram fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 448 512">
-                        <path fill="currentColor"
-                            d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z">
-                        </path>
-                    </svg>
-                </div>
-                <br>
-                <div>
-                    <a style="color:black" href="https://www.instagram.com/shepaar/">@shepaar</a>
-                </div>
-
-            </div>
-        </div>
-        <div class="validator-icon">
-            <a href="https://validator.w3.org/" target="_blank"><img src="https://www.w3.org/Icons/valid-css-blue" alt="Validator icon">
-            </a>
-        </div>
-    </footer>
+    <hr> 
+   <!--FOOTER-->
+    <!--Contact info using table-->
 
+    <div class="contact-table">
+        <h3>Contact</h3>
+        <table>
+            <tr>
+                <td>
+                    <div class="contact-symbol"><svg aria-hidden="true" focusable="false" data-prefix="far"
+                            data-icon="envelope" class="svg-inline--fa fa-envelope fa-w-16" role="img"
+                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path fill="currentColor"
+                                d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z">
+                            </path>
+                        </svg>
+                    </div>
+                </td>
+                <td>
+                    <div>[email protected]</div>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <div class="contact-symbol"><svg aria-hidden="true" focusable="false" data-prefix="fas"
+                            data-icon="phone" class="svg-inline--fa fa-phone fa-w-16" role="img"
+                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path fill="currentColor"
+                                d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z">
+                            </path>
+                        </svg>
+                    </div>
+                </td>
+                <td>
+                    <div>
+                        0705348906
+                    </div>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <div class="contact-symbol">
+                        <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram"
+                            class="svg-inline--fa fa-instagram fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 448 512">
+                            <path fill="currentColor"
+                                d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z">
+                            </path>
+                        </svg>
+                    </div>
+                </td>
+                <td>
+                    <div>
+                        <a style="color:black" href="https://www.instagram.com/shepaar/">@shepaar</a>
+                    </div>
+                </td>
+            </tr>
+        </table>
+    </div>
+    <!--Validator symbol-->   
+    <div class="validator-icon">
+        <a href="https://validator.w3.org/" target="_blank"><img src="https://www.w3.org/Icons/valid-css-blue" alt="Validator icon">
+        </a>
+    </div>
 </body>
 
 </html>