Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:
Describe your issue in detail here.
i have used the hover pseudo selector on my navigation bar. The problem I encounter is that the the hover option is also active on my project grid, when I hover the cursor on all the projects they display the color I used at the welcome section.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width initial-scale=1.0"/>
<link rel="stylesheet" href="styles.css"/>
<title>Personal Portfolio</title>
</head>

<body>
<nav id="nav-bar">
<ul id="nav-list">
<li>
<a class="nav-link" href="#welcome-section">About
</a>
</li>
<li><a class="nav-link" href="#projects">Work
  </a>
</li>
<li><a class="nav-link" href="#contact">
  Contact
</a>
</li>
</ul>
</nav>

<section id="welcome-section" class="welcome-section">
<h1>Welcome, I am Camagu</h1>
<p>a  Front-End Developer</p>
</section>

<section id="projects" class="projects">
<h2 class="project-tile">These are some of my projects</h2>
<div class="projects-grid">
  <a href=" " target="_blank"> <img src="https://i.pinimg.com/originals/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img"> <p class="project-title">Tribute page</p>
</a>

<a href="https://codepen.io/Camagu-Ncoso/full/zYMdvoP">
  <img src="https://i.pinimg.com/originals/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img"><p class="project-title">Tribute page</p> </a>

<a href="https://codepen.io/Camagu-Ncoso/full/zYMdvoP">
  <img src="https://i.pinimg.com/originals/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img"><p class="project-title">Tribute page</p></a>

<a href="https://codepen.io/Camagu-Ncoso/full/zYMdvoP">
  <img src="https://i.pinimg.com/originals/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img"><p class="project-title">Tribute page</p>
</a>

<a href="https://codepen.io/Camagu-Ncoso/full/zYMdvoP">
  <img src="https://i.pinimg.com/originals/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img"><p class="project-title">Tribute page</p>
</a>

<a href="https://codepen.io/Camagu-Ncoso/full/zYMdvoP">
  <img src="https://i.pinimg.com/originals/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img"><p class="project-title">Tribute page</p>
</a>

<a href="https://codepen.io/Camagu-Ncoso/full/zYMdvoP">
  <img src="https://i.pinimg.com/originals/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img"><p class="project-title">Tribute page</p>
</a>

</div>
</section>

<section id="contact" class="contact">

</section>









</body>
</html>
/* file: styles.css */
body {margin: 0; padding: 0;}

#nav-bar {background-color: #000000;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: flex-end;
font-family: Blippo, fantasy;}

#nav-list {display: flex;
flex-direction: row;}

li {list-style: none;}

a {color: white;
text-decoration: none;
font-size: 1.5em;
padding: 1rem 2rem;}

a:hover {background-color: #C06014;}

#welcome-section {width: 100%;
height: 100vh;
display: flex; 
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #C06014;}

h1 {color: white;
font-size: 3.5rem;
}

#welcome-section > p {color: #1A2930;
  font-size: 2.5rem;
  font-style: italic;
  font-weight: 700;}

  .projects {text-align: center; 
    background-color: #828081;
    padding: 7rem 2rem;} 

.projects > h2 {font-size: 3.2rem;
color: white;}
  
.project-img {height: calc(100-6.8rem);
width: 100%;
object-fit: cover;}

.project-title {color: white;
width: 100%;
background-color: #008284;
padding: 1em;}

.projects-grid {display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 4rem;
width: 100%;
max-width: 1080px;
margin: 0 auto;
margin-bottom: 6rem;}



  #0F1626      #0B3C5D     #1A2930

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

Add the following css selector:

nav > ul > li > a:hover {
  background-color: #C06014;
}

Delete the hover effect on all ‘a’ elements in the code:

2 Likes

Thank you very much it worked

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.