I don’t know why my media query doesn’t pass.
Also, my CSS for .projects, .projects-grid and .contact do not work as well.
Your code so far
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poppins:200i,300,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:700&display=swap" rel="stylesheet">
</head>
<link rel="stylsheet" href="styles.css">
</head>
<body>
<div id="navbar">
<ul>
<li><a href="" id="About" target="_blank">About</a></li>
<li><a href="" id="Work" target="_blank">Work</a></li>
<li><a href="#contact" id="Contact" target="_blank">Contact</a></li>
</ul>
</div>
<section id="welcome-section" class="welcome-section">
<h1>Hey I'm Mimic</h1>
<p>a web developer</p>
</section>
<section id="projects" class="projects">
<div class="project-header">
<h2>These are some of my projects </h2>
</div>
<div class="projects-grid">
<a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank" class="project-tile"/> <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="Tribute Page" >
<p class="project-tile">
<span class="code"><</span>Tribute Page<span class="code">/><span>
</p>
</a>
<a href="https://codepen.io/freeCodeCamp/full/wgGVVX" target="_blank"> <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png" alt="Random Quote Machine" class="project-tile">
<p class="project-tile">
<span class="code"><</span>Random Quote Machine<span class="code">/><span>
</p>
</a>
<a href="https://codepen.io/freeCodeCamp/full/mVEJag" target="_blank" class="project-tile" class="project-tile"/><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png" alt="JavaScript Calculator">
<p class="project-tile">
<span class="code"><</span>JavaScript calculator<span class="code">/><span>
</p>
</a>
<a href="https://codepen.io/freeCodeCamp/full/mVEJag" target="_blank" class="project-title"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg" alt="Map Across The Globe">
<p class="project-tile">
<span class="code"><</span>Map Across The Globe<span class="code">/><span>
</p>
</a>
<a href="https://codepen.io/freeCodeCamp/full/wGqEga" target="_blank" class="project-title"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png" alt="Wikipedia Viewer">
<p class="project-tile">
<span class="code"><</span>Wikipedia Viewer<span class="code">/><span>
</p>
</a>
<a href="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png" target="_blank" class="project-title"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png" alt="Tic Tac Toe">
<p class="project-tile">
<span class="code"><</span>Tic Tac Toe<span class="code">/><span>
</p>
</a>
</div>
</section>
<div>
<a href="https://codepen.io/FreeCodeCamp/" class="show-all" target="_blank" id="profile-link">Show all<i class="fas fa-chevron-right"></i></a>
</div>
<section class="contact" id="contact" >
<div class="contact-section-header">
<h1>Let's Work together </h1>
<p>How do you take your coffee</p>
</div>
<div class="contact-section-link">
<a href="https://facebook.com/freecodecamp" target="_blank" class="btn contact-details"><i class="fab fa-facebook-square"></i> Facebook</a>
<a id="profile-link" href="https://github.com/freecodecamp" target="_blank" class="btn contact-details"><i class="fab fa-github"></i> GitHub</a>
<a href="https://twitter.com/freecodecamp" target="_blank" class="btn contact-details"><i class="fab fa-twitter"></i> Twitter</a>
<a href="mailto:example@example.com" class="btn contact-details"><i class="fas fa-at"></i> Send a mail</a>
<a href="tel:555-555-5555" class="btn contact-details"><i class="fas fa-mobile-alt"></i> Call me</a>
</div>
</section>
<footer>
<p>
**This is just a fake portfolio. All the projects and contact details
given are not real.
</p>
<p>
© Created for
<a href="https://www.freecodecamp.com/" target="_blank">freeCodeCamp <i class="fab fa-free-code-camp"></i></a>
</p>
</footer>
</body>
<html>
<!--END OF HTML-->
CSS:
*{margin:0;
padding:0;
box-sizing:box;}
:root{
--main-white: #f0f0f0;
--main-red: #be3144;
--main-blue: #45567d;
--main-gray: #303841;
}
body {
font-family: 'Poppins', sans-serif;
font-size: 1.8rem;
font-weight: 400;
line-height: 1.4;
color: var(--main-white);
}
section{display:block;}
li{list-style-type:none;
display: inline-block;
font-size: 1em;
padding: 10px;
font-weight: bold;
color: var(--main-white);
}
li a{text-decoration: none;
color: var(--main-white);}
#navbar{
display: flex; justify-content: flex-end; position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--main-red);
box-shadow: 0 2px 0 rgb(0 0 0 / 40%);
z-index: 10;
}
.welcome-section {display: flex; flex-direction: column; justify-content: center; align-items: center;
width: 100%;
height: 100vh; background-color: #000; background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
.projects{text-align: center;
padding: 10rem 2rem;
background: var(--main-blue);
}
.projects-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 4rem;
width: 100%;
max-width: 1280px;
margin: 0 auto;
margin-bottom: 6rem;}
.contact {background-color: var(--main-blue);}
@media (max-width:600px){body{font-size:60%;}}
@media (max-width:500px){body{font-size:50%;}}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage
Link to the challenge: