Tell us what’s happening:
Hey guys, i’m trying to give the “i” element nested inside the “a” element a margin-top of 20px when hovered on. I applied it on the first “a” element (#facebook) it worked but it also automatically applies on the other “a” element inside the parent element (.socials) when i hover on the facebook icon.
When i hover on the other icons, it doesn’t work as expected but the facebook hover element affects the rest of the icons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Webpage</title>
</head>
<link rel="stylesheet" href="styles.css">
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css?family=Poppins:200i,300,400&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Raleway:700&display=swap"
rel="stylesheet"
/>
<body>
<nav id="navbar">
<ul class="nav-list">
<li class="list-item"><a href="#">About</a></li>
<li class="list-item"><a href="#">Work</a></li>
<li class="list-item"><a href="#">Contact</a></li>
</ul>
</nav>
<section id="welcome-section">
<h1 style="color: white;" class="welcome">Hey I am Eastside</h1>
<i><p class="sub-heading" style="color: #ca3433;"">a web developer</p></i>
</section>
<section id="projects">
<h2 class="project-tile">These are some of my projects</h2>
<div class="project-grid">
<a href="https://codepen.io/freeCodeCamp/full/zNqgVx">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="Tribute Page">
<p class="project-title">
<span class="code"><</span>
Tribute Page
<span class="code">/></span>
</p>
</a>
<a href="https://codepen.io/freeCodeCamp/full/qRZeGZ">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png" alt="Random Quote Machine">
<p class="project-title">
<span class="code"><</span>
Random Quote Machine
<span class="code">/></span>
</p>
<a href="https://codepen.io/freeCodeCamp/full/wgGVVX">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png">
<p class="project-title">
<span class="code"><</span>
Javascript Calculator
<span class="code">/></span>
</p>
<a href="https://codepen.io/freeCodeCamp/full/mVEJag">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg">
<p class="project-title">
<span class="code"><</span>
Map Data Across the Globe
<span class="code">/></span>
</p>
<a href="https://codepen.io/freeCodeCamp/full/wGqEga">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png">
<p class="project-title">
<span class="code"><</span>
Wikipedia Viewer
<span class="code">/></span>
</p>
<a href="https://codepen.io/freeCodeCamp/full/KzXQgy">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png">
<p class="project-title">
<span class="code"><</span>
Tic Tac Toe
<span class="code">/></span>
</p>
<a href="https://codepen.io/FreeCodeCamp/"><button class="btn">Show all<i class="fas fa-chevron-right"></i
></button></a>
</div>
</section>
<section id="profile-link">
<h1 class="pro">Let's work together</h1>
<i><p class="how">How do you take your coffee?</p></i>
<div class="socials">
<a href="#" class="contact-details"><i class="fab fa-facebook-f" id="facebook"></i>Facebook</a>
<a href="#" class="contact-details"><i class="fab fa-github" id="github"></i>Github</a>
<a href="#" class="contact-details"><i class="fab fa-twitter"id="twitter"></i>Twitter</a>
<a href="#" class="contact-details"><i class="fa fa-envelope" aria-hidden="true" id="mail"></i>
Send a mail</a>
<a href="#"class="contact-details" ><i class="fa fa-mobile" aria-hidden="true" id="phone"></i>Call me</a>
</div>
</section>
</body>
</html>
body {
margin: 0;
padding: 0;
font-family: Poppins, Raleway;
overflow-x: hidden;
}
#navbar {
background-color:#ca3433;
display: flex;
justify-content: flex-end;
font-weight: bold;
position: fixed;
z-index: 1000000;
width: 100vw;
}
.nav-list {
list-style: none;
margin-right: 24px;
}
.nav-list .list-item {
display: inline-block;
padding: 15px 10px;
margin-left: 16px;
}
a {
text-decoration: none;
font-size: 22px;
color: #fdfff5 ;
}
#welcome-section {
background-color: #303030;
height: 100vh;
}
.welcome{
position: absolute;
bottom: 280px;
left: 400px;
font-size: 60px;
}
.sub-heading {
position: absolute;
bottom: 250px;
left: 490px;
font-size: 30px;
}
h2 {
text-align: center;
font-size: 40px;
color: white;
border-bottom: 2px solid white;
display: inline-block;
margin-left: 330;
margin-top: 90
}
#projects {
background-color: #0e4d92;
/*height: 100vh;*/
}
.project-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-gap: 10px;
}
img {
width: 383px;
height:370px;
position: relative;
margin-right: 12px;
margin-left: 18px;
}
.project-title {
text-align: center;
background-color: #303030;
height: 55px;
width: 383px;
position: relative;
bottom: 22px;
border-radius: 0 0 3px 3px;
}
.project-title {
margin-left: 18px;
padding-top: 20px;
}
.code:hover{
transform: translateX(5px);
color: #FFC000;
}
span {
color: #303030;
}
.btn {
position: relative;
left: 570px;
padding: 10px 25px;
font-size: 20px;
color: white;
background-color: #303030;
border: none;
cursor: pointer;
transition: all 0.9s ease;
}
.btn:hover {
background-color: #ca3433;
}
.btn:hover > i {
transform: translateX(5px);
}
button {
margin-bottom: 80px;
}
#profile-link {
background-color: #303030;
height: 100vh;
padding-top: 10px;
}
.pro {
color: white;
font-size: 55px;
margin-left: 400px;
margin-top: 170px;
}
.how {
position: relative;
bottom: 50px;
left: 490px;
color: white;
font-size: 20px;
}
a:hover > #facebook {
margin-top: 20px;
}
.contact-details {
margin-left: 17px;
}
i {
margin-right: 7px;
}
.socials {
margin-left: 300px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36
Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage
Link to the challenge: