About Submitting my Project

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:

  1. My navbar isn’t implemented very well as the margins overflow on a smaller screen
  2. 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!

My Replit

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