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. 
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