From 19efcd9c50cbdc14d86bfd331dd488c514472127 Mon Sep 17 00:00:00 2001
From: rafayhanan <mrafayhanan@gmail.com>
Date: Tue, 28 May 2024 14:08:46 +0500
Subject: [PATCH] Added social media icons

---
 index.html |  46 ++++++++++--------------
 styles.css | 104 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 122 insertions(+), 28 deletions(-)

diff --git a/index.html b/index.html
index 6a1e950..409b9bf 100644
--- a/index.html
+++ b/index.html
@@ -11,10 +11,10 @@
         <h1><img src="Images/1.png" id="sitelogo" alt="website logo">RAFAY</h1> 
         <nav>
             <ul>
-                <li><a href="#about">ABOUT</a></li>
-                <li><a href="#">SKILLS</a></li>
-                <li><a href="#">EXPERIENCE</a></li>
-                <li><a href="#">CONTACT ME</a></li>
+                <li><a href="#gotoabout">ABOUT</a></li>
+                <li><a href="#gotoskill">SKILLS</a></li>
+                <li><a href="#gotoexp">EXPERIENCE</a></li>
+                <li><a href="#gotocontact">CONTACT ME</a></li>
             </ul>
         </nav>
     </header>
@@ -39,7 +39,7 @@ <h2>Software Developer based in Islamabad, Pakistan</h2>
         </div>
         </section>
 
-        <section class="about">
+        <section class="about" id="gotoabout">
             <div class="about-me">
                 <h2>About Me</h2>
                 <p> I am Muhammad Rafay. I am 21 years old and I live in Islamabad, Pakistan. 
@@ -53,7 +53,7 @@ <h2>About Me</h2>
 
         </section>
 
-        <section class="skills">
+        <section class="skills" id="gotoskill">
             <div>
             <h2>Skills</h2>
             </div>
@@ -100,12 +100,12 @@ <h2>Skills</h2>
             </div>
         </section>
 
-        <section class="experience">
+        <section class="experience" id="gotoexp">
             <h2></h2>
         </section>
 
 
-        <section class="contact">
+        <section class="contact" id="gotocontact">
             <div>
                 <h2>Contact Me</h2>
             </div>
@@ -157,7 +157,7 @@ <h2>Contact Me</h2>
                     <ul class="example-2">
                         <li class="icon-content">
                           <a
-                            href="https://linkedin.com/"
+                            href="https://linkedin.com/in/mrafayhanan"
                             aria-label="LinkedIn"
                             data-social="linkedin"
                           >
@@ -180,7 +180,7 @@ <h2>Contact Me</h2>
                           <div class="tooltip">LinkedIn</div>
                         </li>
                         <li class="icon-content">
-                          <a href="https://www.github.com/" aria-label="GitHub" data-social="github">
+                          <a href="https://www.github.com/rafayhanan" aria-label="GitHub" data-social="github">
                             <div class="filled"></div>
                             <svg
                               xmlns="http://www.w3.org/2000/svg"
@@ -201,7 +201,7 @@ <h2>Contact Me</h2>
                         </li>
                         <li class="icon-content">
                           <a
-                            href="https://www.instagram.com/"
+                            href="https://www.instagram.com/rafay_rh"
                             aria-label="Instagram"
                             data-social="instagram"
                           >
@@ -224,24 +224,16 @@ <h2>Contact Me</h2>
                           <div class="tooltip">Instagram</div>
                         </li>
                         <li class="icon-content">
-                          <a href="https://youtube.com/" aria-label="Youtube" data-social="youtube">
+                          <a href="#" aria-label="Email" data-social="email">
                             <div class="filled"></div>
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              width="16"
-                              height="16"
-                              fill="currentColor"
-                              class="bi bi-youtube"
-                              viewBox="0 0 16 16"
-                              xml:space="preserve"
-                            >
-                              <path
-                                d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"
-                                fill="currentColor"
-                              ></path>
+                            <svg 
+                            viewBox="0 0 8 6" 
+                            xmlns="http://www.w3.org/2000/svg">
+                              <path d="m0 0h8v6h-8zm.75 .75v4.5h6.5v-4.5zM0 0l4 3 4-3v1l-4 3-4-3z"/>
                             </svg>
+                            
                           </a>
-                          <div class="tooltip">Youtube</div>
+                          <div class="tooltip">Email</div>
                         </li>
                       </ul>
                       
@@ -257,8 +249,6 @@ <h2>Contact Me</h2>
     <footer>
         <p>Copyright &copy 2024. All Rights Reserved.</p>
     </footer>
-
-    <!-- <script src="script.js"></script> -->
     
 </body>
 </html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 4aec610..63d7c3a 100644
--- a/styles.css
+++ b/styles.css
@@ -243,6 +243,7 @@ nav ul li a:hover {
   background-color: #171717;
   /* background-color: #0a192f; */
   border-radius: 20px;
+  
 }
 
 .form-heading {
@@ -331,6 +332,109 @@ nav ul li a:hover {
 }
 
 .contact-me{
+  display: flex;
+  justify-content:left;
+}
+
+
+
+/*Social Media */
+ul {
+  list-style: none;
+}
+
+.example-2 {
   display: flex;
   justify-content: center;
+  align-items: center;
+  flex-direction: column;
 }
+.example-2 .icon-content {
+  margin: 0 10px;
+  position: relative;
+  padding: 0.5rem;
+}
+.example-2 .icon-content .tooltip {
+  position: absolute;
+  top: 100%;
+  right: 110%;
+  transform: translateY(200%);
+  color: #fff;
+  padding: 6px 10px;
+  border-radius: 5px;
+  opacity: 0;
+  visibility: hidden;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+.example-2 .icon-content:hover .tooltip {
+  opacity: 1;
+  visibility: visible;
+  top: -50px;
+}
+.example-2 .icon-content a {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  color: #4d4d4d;
+  background-color: #fff;
+  transition: all 0.3s ease-in-out;
+}
+.example-2 .icon-content a:hover {
+  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
+}
+.example-2 .icon-content a svg {
+  position: relative;
+  z-index: 1;
+  width: 30px;
+  height: 30px;
+}
+.example-2 .icon-content a:hover {
+  color: white;
+}
+.example-2 .icon-content a .filled {
+  position: absolute;
+  top: auto;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 0;
+  background-color: #000;
+  transition: all 0.3s ease-in-out;
+}
+.example-2 .icon-content a:hover .filled {
+  height: 100%;
+}
+
+.example-2 .icon-content a[data-social="linkedin"] .filled,
+.example-2 .icon-content a[data-social="linkedin"] ~ .tooltip {
+  background-color: #0274b3;
+}
+
+.example-2 .icon-content a[data-social="github"] .filled,
+.example-2 .icon-content a[data-social="github"] ~ .tooltip {
+  background-color: #24262a;
+}
+.example-2 .icon-content a[data-social="instagram"] .filled,
+.example-2 .icon-content a[data-social="instagram"] ~ .tooltip {
+  background: linear-gradient(
+    45deg,
+    #405de6,
+    #5b51db,
+    #b33ab4,
+    #c135b4,
+    #e1306c,
+    #fd1f1f
+  );
+}
+.example-2 .icon-content a[data-social="email"] .filled,
+.example-2 .icon-content a[data-social="email"] ~ .tooltip {
+  background-color: #ff0000;
+}
+
+