update Contact page

vhnam · Aug 7, 2018 · 0c0ca66 · 0c0ca66
1 parent a827e03
commit 0c0ca66
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 67 deletions.
diff --git a/contact.html b/contact.html
@@ -72,45 +72,33 @@
     </nav>
 
     <section class="contact">
-        <div class="text-center">
-            <div class="container">
-                <div class="hero">
-                    <h1 hidden>Liên hệ</h1>
-                    <img src="https://vhnam.github.io/public/img/namvh_2.png" alt="Nam Vo" itemprop="image">
-                    <p class="contact__greeting" itemprop="description">
-                        Cảm ơn bạn đã dành thời gian ghé thăm blog.<br>
-                        Bạn có thể liên hệ tôi bằng những mạng xã hội phía dưới.
-                    </p>
-                </div>
-                <ul class="contact__social-networks">
-                    <li>
-                        <a href="https://github.com/vhnam" itemprop="url">
-                            <img src="https://vhnam.github.io/public/img/github.png" class="social-networks__icon" alt="GitHub" />
-                        </a>
-                    </li>
-                    <li>
-                        <a href="https://vn.linkedin.com/in/namvh" itemprop="url">
-                            <img src="https://vhnam.github.io/public/img/linkedin.png" class="social-networks__icon" alt="LinkedIn" />
-                        </a>
-                    </li>
-                    <li>
-                        <a href="https://www.pinterest.com/vhnam2504/" itemprop="url">
-                            <img src="https://vhnam.github.io/public/img/pinterest.png" class="social-networks__icon" alt="Pinterest" />
-                        </a>
-                    </li>
-                    <li>
-                        <a href="https://plus.google.com/+NamVoHoai2504" itemprop="url">
-                            <img src="https://vhnam.github.io/public/img/google+.png" class="social-networks__icon" alt="Google+" />
-                        </a>
-                    </li>
-                </ul>
-                <div class="contact__download">
-                    <form action="/src/nam-vo__resume.pdf" method="GET" target="_blank">
-                        <button type="submit" class="contact__btn-download">Résume của tôi</button>
-                    </form>
-                </div>
-            </div>
-        </div>
+        <ul class="social-networks">
+            <li>
+                <a href="https://github.com/vhnam" itemprop="url">
+                    <img src="https://vhnam.github.io/public/img/github.png" class="social-networks__icon" alt="GitHub" />
+                </a>
+            </li>
+            <li>
+                <a href="https://vn.linkedin.com/in/namvh" itemprop="url">
+                    <img src="https://vhnam.github.io/public/img/linkedin.png" class="social-networks__icon" alt="LinkedIn" />
+                </a>
+            </li>
+            <li>
+                <a href="https://www.pinterest.com/vhnam2504/" itemprop="url">
+                    <img src="https://vhnam.github.io/public/img/pinterest.png" class="social-networks__icon" alt="Pinterest" />
+                </a>
+            </li>
+            <li>
+                <a href="https://plus.google.com/+NamVoHoai2504" itemprop="url">
+                    <img src="https://vhnam.github.io/public/img/google+.png" class="social-networks__icon" alt="Google+" />
+                </a>
+            </li>
+            <li>
+                <a itemprop="url" href="https://soundcloud.com/namvh">
+                    <img src="https://vhnam.github.io/public/img/soundcloud.png" class="social-networks__icon" alt="Soundcloud" />
+                </a>
+            </li>
+        </ul>
     </section>
 
     <footer class="footer">

diff --git a/public/css/contact.css b/public/css/contact.css
diff --git a/public/img/map.jpg b/public/img/map.jpg
diff --git a/src/scss/contact.scss b/src/scss/contact.scss
@@ -1,40 +1,41 @@
-.contact {
-    margin: 5rem 0;
+.hero {
+    height: 3rem;
+}
 
-    &__greeting {
-        margin-top: 3rem;
-        margin-bottom: 5rem;
-        font-size: 1.5rem;
-        color: #F44336;
-    }
 
-    &__social-networks {
+.contact {
+    text-align: center;
+    width: 100vw;
+    height: calc(100vh - 266px);
+    background-image: url('/public/img/map.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+
+    .social-networks {
         display: inline-flex;
         padding: 0;
-        list-style-type: none;
-    }
-
-    &__download {
-        display: block;
         margin-top: 3rem;
-    }
-
-    &__btn-download {
-        padding: 1rem;
-        width: 15rem;
-        font-weight: 300;
-        text-align: center;
-        color: #fff;
-        background-color: #F44336;
-        outline: none;
-        border: 0;
-    }
+        background-color: #fff;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+        list-style-type: none;
 
-    .social-networks {
         &__icon {
             width: 48px;
             height: 48px;
             margin: 1rem .75rem;
         }
     }
 }
+
+
+@media (max-width: 576px) { 
+    .contact {
+        .social-networks {
+            &__icon {
+                width: 24px;
+                height: 24px;
+            }
+        }
+    }
+}