Build a Personal Portfolio - Build a Personal Portfolio

HTML-CSS
1

Tell us what’s happening:

No matter what I try I can’t get past #11 & 12. Failed:11. Your portfolio should use at least one media query.
Failed:12. Your #navbar element should always be at the top of the viewport.

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" />
  <title>My Portfolio</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <nav id="navbar">
    <ul>
      <li><a href="#welcome-section">Home</a></li>
      <li><a href="#project-section">Projects</a></li>
      <li><a id="profile-link" href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer">GitHub</a></li>
    </ul>
  </nav>

  <section id="welcome-section">
    <h1>Welcome to My Portfolio</h1>
    <p>Creative Developer | Problem Solver | Tech Enthusiast</p>
  </section>

  <section id="project-section">
    <h2>Projects</h2>
    <div class="projects-grid">
      <div class="project-tile">
        <a href="https://example.com" target="_blank" rel="noopener noreferrer">
          <img src="https://via.placeholder.com/300" alt="Project screenshot" />
          <p>My Sample Project</p>
        </a>
      </div>
    </div>
  </section>
</body>
</html>


/* file: styles.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: Arial, sans-serif;
  scroll-behavior: smooth;
  background-color: white;
  color: black;
  padding-top: 60px; 
}

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #222;
  padding: 1rem 0;
  z-index: 9999;
}

#navbar ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

#navbar a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

#navbar a:hover {
  text-decoration: underline;
}

#welcome-section {
  height: 100vh;
  background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
}

#project-section {
  padding: 4rem 2rem;
  background-color: #f5f5f5;
  text-align: center;
}

#project-section h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

.projects-grid {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.project-tile {
  background: white;
  border: 1px solid #ccc;
  max-width: 300px;
  padding: 1rem;
  transition: transform 0.3s ease;
}

.project-tile:hover {
  transform: scale(1.05);
}

.project-tile img {
  width: 100%;
  height: auto;
}

.project-tile p {
  margin-top: 1rem;
  font-weight: bold;
}

@media (max-width: 600px) {
  #navbar ul {
    flex-direction: column;
    gap: 1rem;
  }

  body {
    background-color: #f0f0f0;
  }
}

Your browser information:

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

Challenge Information:

Build a Personal Portfolio - Build a Personal Portfolio

2

is any of your css applying?

3

no, i can’t get it to link

4

then consider making sure that each character is correct in the element where you link the css

5

removed it and put the link back in and still not working…

6

there are three parts

<link is this the correct element name? how can you check?

rel="stylesheet" is this the correct attribute name, is that the correct value? how can you check?

href="style.css" is this the correct attribute name, is this the correct value? how can you check?

7
this is a copy and paste of what I have to link html to css...
8 
         <link rel="stylesheet" href="style.css" />
9

and my comments are for that. Are you considering and double checking each part?

10

went through everything rewrote rechecked, looked online for help- at least 20 times, still can’t get it to pass or css to link

11

are you sure it is the right filename? where can you check what is the name of the file you are using?

12

when back in and looked for the other links. changed it to instead and finally got eveything to go through, thanks. I forgot the change the last few activites. Been running on here for over 20 hours…

13

this will not be the last time that a small typo will make you loose hours, that’s part of programming

14

it kicks my OCD in over drive, I got use to using the link,href,and rel in that we started off with it, that I forgot that it changes, because I started copying and pasting from the instruction on the activity; it probably didn’t help, I was doing my C## at the same time. Trying to load as much in my mind as possible and get my certifications. Thanks for your help.