Skip to content

Commit

Permalink
Added social media icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@rafayhanan
rafayhanan committed May 28, 2024
1 parent 18cc96a commit 19efcd9
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 28 deletions.
46 changes: 18 additions & 28 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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.
Expand All @@ -53,7 +53,7 @@ <h2>About Me</h2>

</section>

<section class="skills">
<section class="skills" id="gotoskill">
<div>
<h2>Skills</h2>
</div>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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"
>
Expand All @@ -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"
Expand All @@ -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"
>
Expand All @@ -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>

Expand All @@ -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>
104 changes: 104 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,7 @@ nav ul li a:hover {
background-color: #171717;
/* background-color: #0a192f; */
border-radius: 20px;

}

.form-heading {
Expand Down Expand Up @@ -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;
}


0 comments on commit 19efcd9

Please sign in to comment.