Personal Portfolio Issue #2 topic

Tell us what’s happening:
Hi,

I’m having some issues with the #2 topic, it says:

  1. The height of the welcome section should be equal to the height of the viewport.

I’ll be thankful if you could provide some guidance and ideas on how to solve this.

Your code so far

HTML code:

<head>
        <title>Personal Portfolio</title>
        <link rel="stylesheet" href="Portfolio.css">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    </head>
    <body>
        <!-- Header -->
            <header id="welcome-section">
                <h1>Portfolio</h1>
            </header>

        <!-- Nav -->
            <nav id="navbar">
                <ul>
                    <li><a href="#project-1">Project 1</a></li>
                    <li><a href="#project-2">Project 2</a></li>
                    <li><a href="#project-3">Project 3</a></li>
                    <li><a href="#project-4">Project 4</a></li>
                </ul>
                <ul>
                    <li><a href="" id="profile-link2">Github Profile</a></li>
                    <li><a href="https://www.linkedin.com/in/danilo-donado-4a5655168/" id="profile-link" target="_blank">Linkdin Profile</a></li>
                </ul>                

            </nav>

        <!-- Main -->
            <div id="main">
                <!-- Projects -->
                    <div class="container-grid">

                        <div class="r1" id="welcome">
                            <section>
                                <article>
                                    <header>
                                        <h2>Take a look on my work</h2>
                                    </header>
                                    <img id="imgpri" alt="coding image" src="Images/Imgprin.jpeg">
                                </article>
                            </section>
                        </div>

                        <div class="r2">
                            <section id="projects">

                                <article id="project-1" class="project-tile">
                                    <header>
                                            <a href="https://codepen.io/danilo21128/pen/pYpbQM" target="_blank">
                                                <h2>Tribute Page</h2>
                                            </a>
                                    </header>
                                </article>

                                <article id="project-2" class="project-tile">
                                    <header>
                                        <a href="https://codepen.io/danilo21128/pen/jJZXQE" target="_blank">
                                            <h2>Survey Form</h2>
                                        </a>
                                    </header>
                                </article>

                                <article id="project-3" class="project-tile">
                                    <header>
                                        <a href="https://codepen.io/danilo21128/pen/WmPQjy" target="_blank">
                                            <h2>Product Landing Page</h2>
                                        </a>
                                    </header>
                                </article>

                                <article id="project-4" class="project-tile">
                                    <header>
                                        <a href="https://codepen.io/danilo21128/pen/PLMozg" target="_blank">
                                            <h2>Technical Documentation Page</h2>
                                        </a>
                                    </header>
                                </article>
                            </section>
                        </div>    
                    </div>
            </div>

        <!-- Footer -->
            <footer>

            </footer>

    </body>

CSS code:

/* Type */
    html {
        font-family: Georgia;
    }


/* Projects Section */
    #welcome {
        height: 100%;
        text-align: center;
        color: white;
    }

    #projects {
        height: 100%;
        text-align: center;
        color: white;
    }

    .project-tile {

    }

/* Nav Bar */    
    #navbar {
      position: fixed;
      left: 0%;
      top: 0%;  
      width: 20%;
      height: 100%;
      background: linear-gradient(90deg, #000000, #300000);;
      opacity: 1;
      filter: alpha(opacity=50);
    }

/* Basic */ 

    body {
        font-family: Georgia;
        font-size: 15px;
        background: #F0F0F0;
    }

    h1 {
        text-align: center;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;        
    }

/* Grid */ 
    .container-grid{
        display: grid;
        width: 100%;
        grid-template-rows: 500px 500px;
        justify-content: center;
    }


    .r1 {
        background: linear-gradient(45deg, #000000, #300000);
        width: 500px;
        padding: 0px 0px 0px 0px;
        margin: 40px 0px 0px 100px;
    }

    .r2{
        background: linear-gradient(145deg, #000000, #300000);
        width: 500px;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 100px;
    }

 /* External Link*/ 
    #profile-link {

    }

/* Lists*/
    ul {

    }     

    li a {
        color: white;
    }

    li :hover{
        color: dodgerblue;
    }

    a {
        color: white;
        text-decoration: none;
    }

    a :hover {
        color: dodgerblue;
    }

    a :visited {
        color: white;
    }

 /* Images*/
    #imgpri{
        display: flex;
        max-width: 100%;
        max-height: 100%;
        width: 360px;
        height: 280px;
        padding: 0px 0px 0px 0px;
        margin: 50px 0px 0px 75px;
    }


 /* Media*/ 
    @media (min-width: 350px) {
        p {
        font-size: 20px;
        }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36.

Link to the challenge:

You can use vh units to set the welcome section’s height.

100vh is 100% of the viewport’s height.

More detail on units.

1 Like

Thanks for that info, yes that was the solution! helped me a lot!