Personal Portfolio Webpage - Build a Personal Portfolio Webpage

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">&lt;</span>
        Tribute Page
         <span class="code">&#47;&gt;</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">&lt;</span>
        Random Quote Machine
         <span class="code">&#47;&gt;</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">&lt;</span>
        Javascript Calculator
         <span class="code">&#47;&gt;</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">&lt;</span>
        Map Data Across the Globe
         <span class="code">&#47;&gt;</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">&lt;</span>
        Wikipedia Viewer
         <span class="code">&#47;&gt;</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">&lt;</span>
        Tic Tac Toe 
         <span class="code">&#47;&gt;</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:

Try something like this:

.socials > a:hover {
  margin-top: 20px;
  color: grey;
  background-color: white;
}

and play with this if you want to get the other final effect.

1 Like

Thanks Dobar, but this only gave me another effect. Your solution doesn’t need the margin-top element cause it didn’t have any effect on the code.

Try this one. Maybe it is what you are looking for :slight_smile: :
a:hover > #facebook {
margin-top: 20px;
}
a:hover > #github {
margin-top: 20px;
}
a:hover > #twitter {
margin-top: 20px;
}

if I understood correctly your intention…
If not, never mind. At least I have tried.