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:
