Hello reader! I am going to try and keep the explanation simple and short. So I just finished my portfolio project for responsive web design, and have turned it in. However, I have ran into a few issues, and want to fix them and resubmit the project. This is because of two issues:
- My navbar isn’t implemented very well as the margins overflow on a smaller screen
- I can’t impliment my downloaded images into the new freecodecamp editor
I have this replit below showcasing what I have. Thank you reader for reading, and thank you to anyone who reponds!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>PPW.net</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="navbar">
<ul>
<li><a href="#welcome-section">Welcome</a></li>
<li><a href="#projects">My Projects</a></li>
<li><a href="#contacts">Contacts</a></li>
</ul>
</nav>
<main id="main-page">
<div id="background1">
<section id="welcome-section">
<header id="header1">
<h1>Hello! My Name Is Yash!</h1>
</header>
<h2>Welcome to my Web Development Portfollio!</h2>
</section>
</div>
<div id="background2">
<section id="projects">
<header id="header2">
<h3>These are some of my projects!</h3>
</header><hr><br>
<div id="my-projects">
<div id="tribute-page">
<a href="https://tribute-page.yash930.repl.co" target="_blank">
<img src="Screenshots/Tribute Page Screenshot.png" alt="Tribute Page" class="project-tile">
</a>
</div>
<div id="product-landing-page">
<a href="https://Product-Landing-Pagecom.yash930.repl.co" target="_blank">
<img src="Screenshots/PLP Screenshot.png" alt="Product Landing Page" class="project-tile">
</div>
<div id="technical-documentation-page">
<a href="https://Technical-Documentation-Page.yash930.repl.co" target="_blank">
<img src="Screenshots/TDP Screenshot.png" alt="Technical Documentation Page" class="project-tile">
</div>
<div id="color-survey-form">
<a href="https://Color-Survey-Form.yash930.repl.co" target="_blank">
<img src="Screenshots/Survey Form Screenshot.png" alt="Survey Form" class="project-tile">
</a>
</div>
</div>
</section>
<section id="contacts">
<hr><br>
<div>
<h4><u>You can find more about me here:</u></h4>
<div class="imageContainer" id="git-div">
<a href="https://github.com/Josh60169" target="_blank" id="profile-link">
<img src="Images/GitHub-Img.png" id="myGithub" alt="Github Link">
</a>
<label for="profile-link" id="Git-label">Github</label>
</div>
<div class="imageContainer" id="FCC-div">
<a href="https://forum.freecodecamp.org/u/josh641/summary" target="_blank" id="FCC-link">
<img src="Images/fccLogo.jpg" id="myFCC" alt="Freecodecamp Link">
</a>
<label for="FCC-link" id="FCC-label">Freecodecamp Profile</label>
</div>
</section>
</div>
</main>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>
CSS:
@media(min-width: 800px)
{
#header1
{
font-size: 60px;
font-family: Arial;
}
}
.project-tile
{
width: autopx;
height: 300px;
border-width: 1.5px;
border-style: solid;
border-color: black;
border-radius: 10px;
margin: 5px;
}
#myGithub
{
width: 50px;
height: 50px;
border-radius: 10px;
position: relative;
}
#myGithub:hover
{
top: -10px;
}
#Git-label
{
margin: 10px;
padding: 2px;
}
#myFCC
{
width: 40px;
height: 40px;
border-radius: 50px;
position: relative;
}
#myFCC:hover
{
top: -10px;
}
#FCC-label
{
margin: 10px;
padding: 2px;
}
#navbar
{
position: fixed;
overflow: hidden;
text-align: center;
top: 0px;
background-color: #FFFFFF;
}
#navbar li
{
display: inline-block;
list-style-type: none;
}
#navbar a
{
display: inline-block;
margin-left: 205px;
margin-right: 205px;
padding: 1px;
border-width: 5px;
border-radius: 10px;
border-style: solid;
border-color: #000000;
background-color: #000000;
color: #FFFFFF;
text-decoration: none;
}
#navbar a:hover
{
box-shadow: -5px 5px rgba(0, 0, 0, 0.4);
}
#my-projects
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
#header1
{
text-align: center;
animation-name: rainbow;
animation-duration: 3s;
animation-iteration-count: infinite;
margin-top: 80px;
padding-top: 20px;
}
@keyframes rainbow
{
0%
{
color: #FF0000;
}
20%
{
color: #FFA500;
}
40%
{
color: #FFFF00;
}
60%
{
color: #008000
}
80%
{
color: #0000FF;
}
100%
{
color: #EE82EE;
}
}
#welcome-section h2
{
text-align: center;
font-family: Arial;
font-size: 40px;
margin: 60px 20px 20px 20px;
padding: 80px 20px 20px 20px;
}
#header2
{
text-align: center;
font-family: Arial;
font-size: 30px;
}
#welcome-section
{
height: 100vh;
}
#projects
{
margin: 60px;
}
h4
{
text-align: center;
font-family: Arial;
font-size: 25px;
}
.imageContainer
{
display: flex;
flex-direction: row;
justify-content: center;
}
#git-div
{
margin: 10px;
padding: 5px;
}
#FCC-div
{
margin: 10px;
padding: 5px;
}
#background1
{
background-color: #D3D3D3;
margin-bottom: 0px;
}
#background2
{
margin-top: 0px;
padding-top: 10px;
background-color: rgba(245, 245, 245, 1);
}
#nav-div
{
text-align: center;
}