I want my contact section of my page to have links to my social. I applied :hover to my span classes to make it move up by 5px. Although ALL of my links move down when i hover over the desired link... what did I do wrong can some one please help.. Code is below.
#contact {
background: linear-gradient(0deg, rgb(235, 216, 247) 20%, var(--color-primary) 80%);
height: 30vh;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.contact-section {
text-align: center;
padding-top: 100px;
}
.contact-section-header {
display: block;
justify-content: center;
}
.contact-section-header h2 {
font-family: var(--text-primary), sans-serif;
font-size: 2rem;
text-align: center;
justify-content: center;
letter-spacing: 2px;
border-bottom: 0.1rem solid var(--color-secondary);
border-width: 1px;
margin: 0 45% 0.7rem;
}
.contact-section-header p {
font-family: var(--text-primary);
text-align: center;
}
.contact-links {
margin: 0;
padding-top: 35px;
justify-content: center;
display: flex;
flex-direction: row;
}
.contact-links i {
color: rgb(204, 49, 173);
margin-right: 20px;
border-radius: 20px;
}
.ig-blanket-link,
.ig-hair-link,
.fb-link-span,
.fcc-link-span {
font-family: var(--text-primary);
font-size: 2.4rem;
transition: all 200ms ease;
position: relative;
display: flex;
flex-direction: row;
}
.ig-blanket-link:hover {
color: var(--color-secondary);
transition: all 200ms ease-in;
}
.ig-hair-link:hover {
color: var(--color-secondary);
transition: all 200ms ease-in;
}
.fb-link-span:hover {
color: var(--color-secondary);
transition: all 200ms ease-in;
}
span:hover {
color: var(--color-secondary);
transition: all 200ms ease-in;
padding-bottom: 5px;
}
.contact-links a {
display: flex;
margin:auto;
text-align: center;
text-decoration: none;
color: black;
}<section id="contact" class="contact-section">
<div class="contact-section-header">
<h2>Contact Me!</h2>
<p class="social-p">Links To My Socials Are Below:</p>
</div>
<div class="contact-links">
<a
href="#"
target="_blank"
class="contact-details"
><span class="ig-blanket-link"><i class="fab fa-instagram"></i>My Blanket Page</span>
</a>
<a
href="#"
target="_blank"
class="contact-details"
><span class="ig-hair-link"><i class="fab fa-instagram"></i>My Hair Page</span>
</a>
<a
href="#"
target="_blank"
class="contact-details"
><span class="fb-link-span"><i class="fab fa-facebook-f"></i>My Facebook Page</span>
</a>
<a
id="profile-link"
href="#"
target="_blank"
class="contact-details"
><span class="fcc-link-span"><i class="fab fa-free-code-camp"></i>freeCodeCamp.org</span>
</a>
</div>