Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Hey people,

I’m doing the final project for the responsive web design course.

My issue is that I apparently need an element with the class project-title. I’m perplexed as I do have one.

Sorry if my code is insulting. :sweat_smile:

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>H Riley Web Development</title>
</head>

<body>
  <nav id="navbar">
    <a href="#welcome-section">About</a>
    <a href="#projects">Projects</a>
    <a href="#profile-link">Contact</a>
  </nav>
  <main>
    <section id="welcome-section">
      <h1>Hayden Riley</h1>
      <p>a Web Dev</p>
    </section>
    <section id="projects">
      <p id="project-title">Here are some of my previous projects</p>
      <a class="project-title" href="https://www.freecodecamp.org/deepseavoyager">View my freeCodeCamp page to see.</a>
    </section>
  <main>
  <footer>
    <p>Check out my socials!<p>
      <a target="_blank" id="profile-link" href="https://www.freecodecamp.org/deepseavoyager"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/FreeCodeCamp_logo.svg/2560px-FreeCodeCamp_logo.svg.png"></a>
  </footer>
</body>
/* file: styles.css */
:root{
  --main-grey: 	#2F2F2F;
  --sub-grey: #676766;
  --main-orange: #FF8C00;
  --sub-orange: #FFB100;
  --main-blue: #001B47;
}
* {
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

#navbar{
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--main-grey);
  box-shadow: 0 1px 200px var(--sub-grey);
  z-index: 10;
  border: 1px solid var(--main-grey);
}
#navbar a{
  color: var(--main-orange);
  margin-right: 1rem;
  display: block;
  font-size: 2rem;
  text-decoration: none;
  padding: 10px 10px;
}
#navbar a:hover{
  background-color: var(--main-blue);
}
@media only screen and (max-width: 600px){
  #navbar {
  }
  #navbar a{
    font-size: 1.4rem;
  }
}

@media only screen and (max-width: 300px){
  #navbar a{
    font-size: 1rem;
  }
}

#welcome-section{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: var(--main-blue);
  color: #f1abb9;

}
#welcome-section h1 {
  color: var(--main-orange);
  margin-bottom: 20px;
  font-size:4rem; 
  text-shadow: 5px 10px 75px var(--sub-orange);
}
#welcome-section > p {
  margin-top: -15px;
  color: var(--main-orange);
  text-shadow: 2px 3px 20px var(--sub-grey);
  font-style: italic;
  font-size: 2rem;
  font-weight: 100;
}

@media only screen and (max-width: 600px){

  #welcome-section h1 {
    font-size: 3rem;
    margin: 0 auto;
  }
  #welcome-section p {
    font-size: 1.5rem;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 300px){
  #welcome-section h1{
    font-size: 2rem;
  }
  #welcome-section p{
    font-size: 1rem;
  }
}

#projects{
  display: block;
  width: 100%;
  height: 100vh;
  text-align: center;
  margin: 0 auto;
  background-color: var(--main-grey);
  color: var(--sub-orange);
}
#projects p{
  display: block;
  padding-top: 300px;
}
#projects a:link{
  color: var(--main-orange);
}
#projects a:visited{
  color: var(--main-orange);
}
#projects a:hover{
  color: white;
}
.project-title {
text-shadow: 2px 2px 14px black;
}


footer{
  background-color: var(--sub-grey);
  color: var(--main-orange);
  font-size: 2rem;
}
footer p{
  text-align: center;
}
footer img{
  width: 100%;
}
footer:hover{
  background-color:var(--main-blue);
  color: var(--main-grey)
}
@media only screen and (max-width: 300px){
  footer {
    font-size: 1.2rem;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:122.0) Gecko/20100101 Firefox/122.0

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

I think you need project-tile , instead of project-title.
@deepseavoyager

Oh, I’m an idiot.

Thank you.

Your welcome. Happy Coding!