Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:
Describe your issue in detail here.
I can’t pass this test: Your portfolio should use at least one media query.
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devise-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Personal Portfolio</title>
  </head>
  <body>
    <header>
       <nav id="navbar">
         <ul>
           <li>
             <a href="#welcome-section" class="nav-link">welcome-section</a>
             </li>
           <li>
             <a class="nav-link" href="#projects">projects</a>
             </li>
           <li>
             <a class="nav-link" href="#goodbye">goodbye</a>
             </li>
         </ul>
       </nav>
    </header>
    <section id="welcome-section">
      <h1>My Portfolio</h1>
        <p>Build a Personal Portfolio Webpage
Objective: Build an app that is functionally similar to https://personal-portfolio.freecodecamp.rocks

User Stories:

Your portfolio should have a welcome section with an id of welcome-section
The welcome section should have an h1 element that contains text
Your portfolio should have a projects section with an id of projects
The projects section should contain at least one element with a class of project-tile to hold a project
The projects section should contain at least one link to a project
Your portfolio should have a navbar with an id of navbar
The navbar should contain at least one link that you can click on to navigate to different sections of the page
Your portfolio should have a link with an id of profile-link, which opens your GitHub or freeCodeCamp profile in a new tab
Your portfolio should have at least one media query
The height of the welcome section should be equal to the height of the viewport
The navbar should always be at the top of the viewport
Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!

Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS

Tests
Passed:Your portfolio should have a "Welcome" section with an id of welcome-section.
Passed:Your #welcome-section element should contain an h1 element.
Passed:You should not have any empty h1 elements within #welcome-section element.
Passed:You should have a "Projects" section with an id of projects.
Passed:Your portfolio should contain at least one element with a class of project-tile.
Passed:Your #projects element should contain at least one a element.
Passed:Your portfolio should have a navbar with an id of navbar.
Passed:Your #navbar element should contain at least one a element whose href attribute starts with #.
Passed:Your portfolio should have an a element with an id of profile-link.
Passed:Your #profile-link element should have a target attribute of _blank.
Passed:Your portfolio should use at least one media query.
Failed:Your #navbar element should always be at the top of the viewport.</p>
    </section>
    <section id="projects">
      <h2>Project 
        <a id="profile-link" target="_blank" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-69">link</a>
        </h2>
      <div class="project-tile">
      </div>
    </section>
    <footer id="goodbye">Thank you for your time</footer>
  </body>
</html>
/* file: styles.css */
header {
position: fixed;
width: 100%;
top: 0px;
height: 20px;
padding: 25px 0px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: black;
opacity: 80%;
}

@media (max-width: 1250px) {
  /* … */
}

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

This one you have to pass:

The height of the welcome section should be equal to the height of the viewport.

Try to put some selector within the media query (instead of the comment).

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