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:
