Personal Portfolio Webpage - Build a Personal Portfolio Webpage

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


<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <link href=",300,400&amp;display=swap" rel="stylesheet">
    <link href=";display=swap" rel="stylesheet">
  <link rel="stylsheet" href="styles.css">


  <div id="navbar"> 
      <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>

  <section id="welcome-section" class="welcome-section">
    <h1>Hey I'm Mimic</h1>
    <p>a web developer</p>

  <section id="projects" class="projects"> 
    <div class="project-header">
    <h2>These are some of my projects </h2>
    <div class="projects-grid"> 
     <a href="" target="_blank" class="project-tile"/> <img src="" alt="Tribute Page" >
     <p class="project-tile">
       <span class="code"><</span>Tribute Page<span class="code">/><span>

      <a href="" target="_blank"> <img src="" alt="Random Quote Machine" class="project-tile">
<p class="project-tile">
       <span class="code"><</span>Random Quote Machine<span class="code">/><span>

      <a href="" target="_blank" class="project-tile" class="project-tile"/><img src="" alt="JavaScript Calculator">
      <p class="project-tile">
       <span class="code"><</span>JavaScript calculator<span class="code">/><span>

<a href="" target="_blank" class="project-title"><img src="" alt="Map Across The Globe">
<p class="project-tile">
       <span class="code"><</span>Map Across The Globe<span class="code">/><span>

<a href="" target="_blank" class="project-title"><img src="" alt="Wikipedia Viewer">
<p class="project-tile">
       <span class="code"><</span>Wikipedia Viewer<span class="code">/><span>

<a href="" target="_blank" class="project-title"><img src="" alt="Tic Tac Toe">
<p class="project-tile">
       <span class="code"><</span>Tic Tac Toe<span class="code">/><span>

    <a href="" class="show-all" target="_blank" id="profile-link">Show all<i class="fas fa-chevron-right"></i></a>
  <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 class="contact-section-link">
        <a href="" target="_blank" class="btn contact-details"><i class="fab fa-facebook-square"></i> Facebook</a>
        <a id="profile-link" href="" target="_blank" class="btn contact-details"><i class="fab fa-github"></i> GitHub</a>
        <a href="" target="_blank" class="btn contact-details"><i class="fab fa-twitter"></i> Twitter</a>
        <a href="" 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>
        **This is just a fake portfolio. All the projects and contact details
        given are not real.
        © Created for
        <a href="" target="_blank">freeCodeCamp <i class="fab fa-free-code-camp"></i></a>


<!--END OF HTML-->



 --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);


display: inline-block;
font-size: 1em;
padding: 10px;
font-weight: bold;
color: var(--main-white);

li a{text-decoration: none;
color: var(--main-white);}

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);

    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/ Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

Check the .welcome-section selector. See something missing?

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