Personal Portfolio Webpage - Build a Personal Portfolio Webpage

I’m trying to make my portfolio website. I decided I wasn’t going to finish it right now, so I completed all of the steps quickly. You can create a completely blank certification project and still complete all of the steps, I’ve found. Anyway, I did all of the steps, but when I pressed Ctrl+Enter, it said I hadn’t done a media query. I had, however. What is causing it to not detect the media query?

<html>
  <head>
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emblem</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600&family=Rubik:wght@700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;1,500&family=Roboto+Mono:wght@400;500;600&family=Rubik:wght@700&display=swap" rel="stylesheet">
  </head>
  <body>
    <nav></nav>
    <section id="welcome-section">
      <div id="title">
        <div id="title_centerer">
          <h1 id="title_text">Emblem</h1>
          <div id="title_coverer"></div>
          <div id="title_underscore"></div>
        </div>
      </div>
        <h3 id="subtitle">A story</h3>
    </section>
  </body>
</html>




<link rel="stylesheet" href="styles.css"><section id="projects"><img class="project-tile"><a></section><nav id="navbar"><a href="#" id="profile-link" target="_blank"></nav>

:root {
  --header-size: 15vh;
  --welcome-color: gray;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#navbar {
  position: fixed;
  top: 0vh;
  left: 0vw;
}

#welcome-section {
  height: 50vh;
  padding: 5%;
  background-color: var(--welcome-color);
}

#title {
  position: relative;
  margin-left: calc(50% - var(--header-size)*1.8);
}

#title_text {
  font-family: 'Roboto Mono', monospace;
  font-size: var(--header-size);
  padding-left: calc(var(--header-size) / 5);
  margin-left: 0;
  padding-left: 0;
}

#title_coverer {
  animation: title_uncover 3s;
  background-color: var(--welcome-color);
  width: calc(var(--header-size) * 4);
  height: calc(var(--header-size) * 1.2);
  position: absolute;
  top: 0;
  left: 100vw;
}

#title_underscore {
  width: calc(var(--header-size) / 2);
  height: calc(var(--header-size) / 8);
  background: black;
  position: absolute;
  top: calc(var(--header-size) * 1.1);
  left: calc(var(--header-size)*3.6 + calc(var(--header-size) / 20));
  animation: title_underscore_move 3s;
    opacity: 0%;
}

#subtitle {
  font-family: 'Raleway', sans-serif;
  text-align: center;
  animation: subtitle_fade 4s linear;
  opacity: 100%;
  font-size: 5vh;
}

@media screen and (max-width: 350px) {
    p {
        font-size:120px;
    }
}

@keyframes title_underscore_move {
  0% {  
    left: calc(var(--header-size) / 20);
    opacity: 100%;
  }
  10% {
    left: calc(var(--header-size) / 20);
    animation-timing-function: ease-out;
  }
  15% {
    left: calc(var(--header-size)*0.6 + calc(var(--header-size) / 20));
  }
  20% {
    left: calc(var(--header-size)*0.6 + calc(var(--header-size) / 20));
    animation-timing-function: ease-out;
  }
  25% {
    left: calc(var(--header-size)*1.2 + calc(var(--header-size) / 20));
  }
  30% {
    left: calc(var(--header-size)*1.2 + calc(var(--header-size) / 20));
    animation-timing-function: ease-out;
  }
  35% {
    left: calc(var(--header-size)*1.8 + calc(var(--header-size) / 20));
  }
  40% {
    left: calc(var(--header-size)*1.8 + calc(var(--header-size) / 20));
  }
  45% {
    left: calc(var(--header-size)*2.4 + calc(var(--header-size) / 20));
    animation-timing-function: ease-out;
  }
  50% {
    left: calc(var(--header-size)*2.4 + calc(var(--header-size) / 20));
  }
  55% {
    left: calc(var(--header-size)*3 + calc(var(--header-size) / 20));
    }
  60% {
    left: calc(var(--header-size)*3 + calc(var(--header-size) / 20));
    animation-timing-function: ease-out;
  }
  65% {
    left: calc(var(--header-size)*3.6 + calc(var(--header-size) / 20));
  }
  70% {
    left: calc(var(--header-size)*3.6 + calc(var(--header-size) / 20));
    animation-timing-function: ease-out;
  }
  75% {
    left: calc(var(--header-size)*3.6 + calc(var(--header-size) / 20));
    opacity: 100%;
  }
  100% {
    left: calc(var(--header-size)*3.6 + calc(var(--header-size) / 20));
    opacity: 0%;
  }
}

@keyframes title_uncover {
  0% {  
    left: 0;
  }
  9.999% {
    left: 0;
  }
  10% {
    left: calc(var(--header-size)*0.6);
  }
  19.999% {
    left: calc(var(--header-size)*0.6);
  }
  20% {
    left: calc(var(--header-size)*1.2);
  }
  29.999% {
    left: calc(var(--header-size)*1.2);
  }
  30% {
    left: calc(var(--header-size)*1.8);
  }
  39.999% {
    left: calc(var(--header-size)*1.8);
  }
  40% {
    left: calc(var(--header-size)*2.4);
  }
  49.999% {
    left: calc(var(--header-size)*2.4);
  }
  50% {
    left: calc(var(--header-size)*3);
  }
  59.999% {
    left: calc(var(--header-size)*3);
  }
  60% {
    left: calc(var(--header-size)*3.6);
  }
  69.999% {
    left: calc(var(--header-size)*3.6);
  }
  100% {
    left: calc(var(--header-size)*3.6);
  }
}

@keyframes subtitle_fade {
  0% {
    opacity: 0%;
  }

  70% {
    opacity: 0%;
  }

  100% {
    opacity: 100%;
  }
}

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

Hey!
The code you have shared works on my end. Please ensure that you have disabled any extensions that interface with the freeCodeCamp website (such as Dark Mode and Ad Blocker), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

Also, You should not have the link element outside of the head element. Its always a good idea to run your code through an HTML validator which will tell you about any semantic errors you might have in your code.

Hope this helps! :smile: