Personal Portfolio Webpage - Build a Personal Portfolio Webpage

My Media Query isn’t working and I can’t finish the project.

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="styles.css">
	<div class="nav">
    <nav id="navbar">
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
  <div id="welcome-section">
    <h1>Henlo, I am Arc!</h1>
    <p><i>I am a self-taught developer with a thirst to succeed.<i></p> 
    <div class="grid section" id="projects">
      <div class="project-1"><a><p>Project 1</p><img src="" alt="My PC"></a></div>
      <div class="project-2"><a><p>Project 2</p><img src="" alt="My Cat" ></a></div>
      <div class="project-3 project-tile"><a  href="#" target="_blank" id="profile-link"><p>Project 3</p><img src="" alt="TOP 500" ></a></div>

/* file: styles.css */
* {
  padding: 0;
  margin: 0; 
  box-sizing: border-box;
  font-family: Verdana, sans-serif;
  display: flex;
  width: 100vw; 
  position: fixed;
  justify-content: flex-end;
  background-color: rgba(245, 39, 39, 0.83);
  overflow: auto;

 #navbar > ul{
   display: flex;
   list-style: none; 
  #navbar a {
   display: flex;
   padding: 1rem;
   margin-right: 1rem; 
   text-decoration: none;
   color: white;
  #navbar a:hover{
    background-color: rgba(39, 46, 245, 0.83);
    color: rgba(245, 39, 39, 0.83);
      display: flex; 
      flex-direction: column; 
      width: 100vw;
      height: 100vh; 
      justify-content: center; 
      align-items: center; 
    #welcome-section > h1:hover{
      transform: scale(2, 2);
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         text-align: center;
         grid-template-rows: auto;
        object-fit: cover; 
        width: 100%;
        height: 100%;

@media (max-width: 600px) {
  body {
    background-color: #87ceeb;

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 Edg/106.0.1370.47

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

That last { looks wrong.

fixed it! boy , do I feel dumb.

I am glad it worked out.

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