Personal Potofolio

I passed all the requirements of the task except the condition of " The height of the welcome section should be equal to the height of the viewport.". I tried everything but I could not figure it out.
I also cannot display images in the Porotolio although i uploaded them in many file sharing web sites and added the linkto the code.

Your code so far

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="Personal Potrofolio.css">

    <script src="https://kit.fontawesome.com/b74586c0fb.js" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://app.mediafire.com/myfiles">

    <title>Document</title>

</head>

<body>
<style>
*

{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

body {

 }

    @media (max-width: 350px)  {

        h1 {

     font-size: 14px;

    }

    h2 {

        font-size: 12px;

    }

   h3 {

      font-size: 10px;

  }

 }

 #container {

     height: 900px;

 }

#navbar {

    background-color: rgb(55, 55, 129);

    text-align: center;

    position: fixed;

   

}

#navbar ul {

    display: inline-flex;

    list-style-type: none;

    color: white;

}

#navbar ul li {

   

    width: 120px;

    margin: 15px;

    padding: 15px;

    padding-right: 30px;

}

#navbar ul li a {

    text-decoration: none;

    color: white

}

.active, #navbar ul li:hover {

    background-color: rgb(0, 204, 255);

    border-radius: 5px;

}

.sub-menu-1 {

    display: none;

}

#navbar ul li:hover .sub-menu-1 {

    display: block;

    position: absolute;

    margin: 15px 0 0 15px;

}

#navbar ul li:hover .sub-menu-1 ul {

    display: block;

    margin: 10px;

    background: rgb(0, 204, 255);

}

#navbar ul li:hover .sub-menu-1 ul li {

    width: 150px;

    padding: 10px;

    border-bottom:  #fff;

    border-style: inset;

    border-radius: 5px;

    text-align: left;

}

#navbar ul li:hover .sub-menu-1 ul li a:hover {

    color: yellowgreen;

}

#welcome-section {

    width: auto;

    background-color: rgb(96, 185, 156);

   

}

p {

    font-size: 70px;

    color: rgb(249, 253, 0);

    font-family: cursive;

    text-align: center;

    font-style: italic;

    padding: 50px;

}

h1 {

    font-size: 50px;

    text-align: center;

    font-family: anton;

    }

h2 {

    font-size: 70px;

    font-family: anton;

    text-align: center;

    font-style: italic;

    padding-top: 40px;

}

#container2 {

    height: 900px;

}

#projects {

    display: grid;

    grid-template-columns: 700px 700px;

    grid-template-rows: 250px 250px 250px 250px;

    grid-column-gap: 10px;

    width: auto;

    height: 500px;

    background-color: rgb(236, 236, 22);

    box-sizing: border-box;  

    align-items: center;

    justify-items: center;

}

#image1 {

    width: 350px;

    height: 200px;

    border: rgb(0, 139, 139);

    border-style: double;

    box-shadow: 0 10px 10px;

    box-sizing: border-box;

   

}

.h3-1 {

    color: red;

    font-family: Verdana, Geneva, Tahoma, sans-serif;

    font-weight: bolder;

    font-size: 18px;

}

#image2 {

    width: 350px;

    height: 200px;

    border: rgb(0, 139, 139);

    border-style: double;

    box-shadow: 0 10px 10px;

    image-resolution: initial;

    box-sizing: border-box;            

}

.h3-2 {

    color: red;

    font-family: Verdana, Geneva, Tahoma, sans-serif;

    font-weight: bolder;

    font-size: 18px;

}

#image3 {

    width: 350px;

    height: 200px;

        border: rgb(0, 139, 139);

        border-style: double;

        box-shadow: 0 10px 10px;

        box-sizing: border-box;            

}

.h3-3 {

    color: red;

    font-family: Verdana, Geneva, Tahoma, sans-serif;

    font-weight: bolder;

    font-size: 18px;

}

#image4 {

    width: 350px;

    height: 200px;

        border: rgb(0, 139, 139);

        border-style: double;

        box-shadow: 0 10px 10px;

        box-sizing: border-box;            

}

.h3-4 {

    color: red;

    font-family: Verdana, Geneva, Tahoma, sans-serif;

    font-weight: bolder;

    font-size: 18px;

}

#imag-link {

    display: none;

}

footer {

    height: 100px;

    display: grid;

    background-color: tomato;

    text-align: center;

    grid-template-columns: 1fr 1fr;

    grid-template-rows: repeat(25px 25px 25px);

    border: blue

   

}

.contacts {

    color: white;

    justify-content: start;

    text-align: center;

    grid-row: 1/4;

    align-self: center;

    font-size: 25px;

    font-family: Arial, Helvetica, sans-serif;

}

.sub-contacts {

    color: #fff;

    align-self: center;

    justify-self: start;

    font-size: 25px;

    font-family: Arial, Helvetica, sans-serif;

}

 a {

    text-decoration: none;

    color: #fff;

}
</style>

    <div class="Container">

    <header>

        <nav id="navbar">

            <ul>

                <li class="active"><a href="#about"><i class="fas fa-address-card"></i>About</a></li>

                <li><a href="#projects"><i class="fab fa-creative-commons-pd-alt"></i>Projects</a>

                     <div class="sub-menu-1">

                         <ul>

                             <li><a href="#image1">Tribute Page</a></li>

                             <li><a href="#image2">Survay Form</a></li>

                             <li><a href="#image3">Production Landing Page</a></li>

                             <li><a href="#image4">Technical Documentation</a></li>

                         </ul>

                     </div>

                </li>

            </ul>

        </nav>

    </header>

   <section id="welcome-section">

        <p>Hello</p>

        <h1>I am Ahmed Saber</h1>

         <p>Iam a begginer web developer</p>

         <h2>WELCOME to my Potrofolio</h2>

    </section>

</div>

   

<div class="Container 2">

    <section id="projects">

           

          <div class="project-tile"><div><a class="project-1" href="https://codepen.io/Sabereaf/pen/Jjyzwxy" target="_blank">

             <img id="image1"  src="https://drive.google.com/file/d/1y4e9nF86e0f0rSOdurLghLpQxFEuuQVq/view?usp=sharing" alt="Tribute Page"></a></div>

            <div><h3 class="h3-1">Tribute Page</h3></div></div>

          <div class="project-tile"><div><a class="project-2" href="https://codepen.io/Sabereaf/pen/abyxROW" target="_blank">

             <img id="image2"  src="https://drive.google.com/file/d/1TJktMtuRthAmbJdbFQ8s36mZBO8ltrdY/view?usp=sharing" alt="Survay Form"></a></div>

            <div><h3 class="h3-2">Survay Form</h3></div></div>

          <div class="project-tile"><div><a class="project-3" href="https://codepen.io/Sabereaf/pen/WNEBWgg" target="_blank">

             <img id="image3"  src="https://drive.google.com/file/d/1QCwN95uQSusXqEwCXeKUA2Ingx-dvKRN/view?usp=sharing" alt="Production Landing Page"></a></div>

             <div><h3 class="h3-3">Production Landing Page</h3></div></div>

          <div class="project-tile"><div><a class="project-4" href="https://codepen.io/Sabereaf/pen/ExvBQxj" target="_blank">

             <img id="image4"  src="https://drive.google.com/file/d/1G8FkTEzJrCS623Avq3jS-Vke96aMgmkE/view?usp=sharing" alt="Technical Documentation"></a></div>

             <div><h3 class="h3-4">Technical Documentation</h3></div></div>

           

        <nav id="imag-link">

           

            <ul>

                <li><a href="#project-1"></a></li>

                <li><a href="#project-2"></a></li>

                <li><a href="#project-3"></a></li>

                <li><a href="#project-4"></a></li>

            </ul>

        </nav>

    </section>

   

    <footer>

       

        <div class="contacts">Contacts</div>

        <div class="sub-contacts">

           <ul>

                <li><a id="profile-link" href="https://www.facebook.com/111111" target="_blank">Facebook</a></li>

                <li><a id="profile-link"href="#">Email</a></li>

                <li><a id="profile-link"href="#"><i class="fa-thin fa-circle-phone"></i>Telephone</a></li>

                </ul>

           </ul>

        </div>

    </footer>

</div>

</body>

</html>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

@Sabereaf,
First, keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
The test script, with all tests passing, should be included when you submit your projects.

It’s easier to help debug if you present a live link to your code so we don’t have to cut/paste. You have to submit a live link to your project so you can do that here when you have a question.
Since your projects have a link to codepen you could have provided the pen link.

When a test fails click the red button to see which test(s) are failing and text to help you correct the issue.
Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
It also may help to revisit this lesson.

Keep your styling external. Do not use internal styling.
On that same note, you have elements out of order. Review this for an understanding of the HTML boilerplate tags.

Codepen creates large and small screenshots of your pens that can be used in your portfolio. Their official documentation explains how to access them.

Thank you. for your help.
I just want to apologize that I did not include the link of my work. May be because this is my first time to ask for help. Of course as a beginner, I know that I still have a lot to learn.
Thank you again and here is the link of my work.

I would read up on this good CSS tricks article.

It will help you solve the last user story.
Hope that helps!

I did it. I really helped. Thanks a lot for you all.