Merge pull request #1 from ihazrel/contact

edit contact section
ihazrel · May 28, 2024 · ca04ef9 · ca04ef9
2 parents c05ff0b + 1cc54ab
commit ca04ef9
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -57,7 +57,6 @@ <h3>CodeNection 2021</h3>
             <p id="description">Top 15 finalist</p>
             <h3>Dean's List all semester</h3>    
         </div>
-        <hr>
     </section>
 
     <!-- Skills Section -->
@@ -104,14 +103,16 @@ <h2>
         </h2>
         <h3>
             Email: <span> hazrel.idlan21@gmail.com</span><br><br>
-            Phone: <span> +6011-10522347</span>
         </h3>
         <div class="row">
-            <a href="https://api.whatsapp.com/send/?phone=%2B601110522347&text&type=phone_number&app_absent=0" style="padding-right: 20px;">
-                <img src="image/whatsapp.png" style="height: 50px;">
+            <a href="https://api.whatsapp.com/send/?phone=%2B601110522347&text&type=phone_number&app_absent=0">
+                <i class="ri-whatsapp-fill"></i>
             </a>
             <a href="mailto:hazrel.idlan21@gmail.com">
-                <img src="image/email.png" style="height: 50px;">
+                <i class="ri-mail-fill"></i>
+            </a>
+            <a href="https://github.com/ihazrel">
+                <i class="ri-github-fill"></i>
             </a>
         </div>
 

diff --git a/style.css b/style.css
@@ -12,6 +12,8 @@ body{
     background: #141414;
     min-height: 200vh;
 }
+
+/* Header */
 header{
     position: fixed;
     top: 0px;
@@ -38,6 +40,8 @@ header.sticky{
     padding: 30px 100px;
     background: #dfdfdf;
 }
+
+/* Navbar */
 .navbar ul{
     position: relative;
     display: flex;
@@ -63,6 +67,8 @@ section::before {
     height: 70px; /* Adjust this to match the height of your navbar */
     margin: -70px 0 0; /* This negative margin is the trick */
 }
+
+/* Home */
 .home{
     position: relative;
     width: 100%;
@@ -92,6 +98,8 @@ hr{
     width: 50%;
     margin: 50px auto;
 }
+
+/* About */
 .about{
     color: #fff;
     justify-content: center;
@@ -132,6 +140,8 @@ hr{
 .about .education{
     padding: 50px 0;
 }
+
+/* Skills */
 .skills{
     color: #000;
     justify-content: center;
@@ -171,6 +181,8 @@ hr{
     height: 70%;
     object-fit: cover;
 }
+
+/* Projects */
 .projects{
     color: #fff;
     justify-content: center;
@@ -230,6 +242,8 @@ hr{
     font-size: 1.2em;
     text-decoration: none;
 }
+
+/* Contact */
 .contact{
     color: #000;
     justify-content: center;
@@ -249,5 +263,17 @@ hr{
 .contact h3{
     font-size: 1.3em;
     justify-content: space-between;
-    margin-bottom: 40px;
+}
+.contact .row{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+}
+.contact a{
+    text-decoration: none;
+}
+.contact i{
+    font-size: 50px;
+    color: #000;
 }