Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Hello. This is not a doubt. I have completed my webpage design and have submitted it too. Yet, in the certification page, my project shows up without CSS, though I could see in the preview page.

What could be the issue?

Your code so far
These are the images in the certification page, even though I can see the page with applied css in my preview page :

What might be the issue?

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <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=Montserrat:wght@450&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio</title>
</head>
<body>
  <navbar id='navbar'>
    <ul>
      <li><a href=#projects>Projects</a></li>
      <li><a href=#social-media>Social Media</a></li>
      </ul>
    </navbar>
  <main>
    <section id='welcome-section'>
      <h1 style='text-align:center;'>Hey, I am Akhil </h1>
      <p style='text-align:center;''><i> a web developer</i><p>
      </section>
<section id='projects'>
  <h1 style='text-align:center;'>These are some of my projects</h1>
  <div class=project-tile>
    <h4>Tribute Page</h4>
       <a href='https://www.freecodecamp.org/settings#'><img src='https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg'>
</a>
    </div>
  <div class=project-tile>
    <h4>Survey Form</h4>
      <a href='https://www.freecodecamp.org/settings#'><img src='https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png'>
</a>
    </div>
  <div class=project-tile>
    <h4>Technical Documentation</h4>
     <a href='https://www.freecodecamp.org/settings#'> <img src='https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png'>
</a>
    </div>
  </section>
  <section id='social-media'>
    <h1 style="text-align:center; margin-top:-10px;">Social Media</h1>
    <a id='profile-link' href='https://github.com/akhilswarop' target='_blank'>
    <i class="fa-brands fa-square-github fa-2xl"></i></a>
    <a href='https://www.facebook.com/akhil.swarop'><i class="fa-brands fa-facebook fa-2xl"></i></a>
     <a href='https://twitter.com/home'><i class="fa-brands fa-twitter fa-2xl"></i></a>
  </section>
    </main>
</body>
</html>
  <script src="https://kit.fontawesome.com/1b0ce9b846.js" crossorigin="anonymous"></script>
/* file: styles.css */
*{
background-color:#2b2c2f;
color:f0f0f0;
font-family:'Montserrat', sans-serif;
scroll-behavior:smooth;
}
@media(min-width:400px){
  *{
    background-color:#2b2c2f;
  }
}
navbar{
  position:absolute;
  top:0%;
  right:10%;
}
navbar ul li{
  list-style-type:none;
  display:flex;
  float:right;
  padding-left:35px;
}
navbar ul li a{
  text-decoration:none;
}

section{
  margin-top:20%;
  border:1px solid white;
  border-radius:10px;
}
.project-tile{
  display:block;
  border: 3px dotted white;
  border-radius:10px;
  width:400px;
  margin:40px auto;
  padding:20px;
  overflow:hidden;
}

.project-tile h4{
  text-align:center;
}

img{
  width:400px;
}

#social-media{
  display:block;
  padding:20px;
}

.fa-twitter{
position:relative;
left:34%;
top:5px;
}

.fa-facebook{
position:relative;
left:44%;
top:5px;
}
.fa-square-github{
position:relative;
left:54%;
top:5px;
}

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

in certification page you’re only “giving” a link to your completed “project” right? so considering that perhaps you should look into that, if you have added it in that “environment” or not, happy learning :slight_smile: