Personal Portfolio - help

Hi there,

I could use some pointers on the “Personal Portfolio” challenge.
Here’s my code so far.

2 issues:

  1. I can’t get the height of the welcome section to be equal to the height of the viewport.
  2. My projects section is styled in grid. The next section “contact” seems to continue in the same grid style. How do I stop this? Setting width and height doesn’t change it so far.

Thanks all!

<DOCTYPE html>
<html>
<head>
  <title>FCC - Personal Portfolio</title>
  </head>

<nav id="navbar">
  <ul>
    <li><a href="#welcome-section" class="nav-link">Intro</a></li>
    <li><a href="#projects" class="nav-link">Projects</a></li>
    <li><a href="#contact" class="nav-link">Contact</a></li>
  </ul>
</nav>
  
<body>
<br>
  <div class="intro" id="welcome-section">
    <div id="introtext">
      <h1>Hi, I'm <span class="mimic">Mimic</span></h1>
      <p><u>a</u> web developer</p>
    </div>
   </div>
  
  <main>
    <h2 class="work-title">Here's some recently developped projects</h2>
    
    <div class="work" id="projects">
      <div class="tile-container1">
        <div class="project-title">FCC - Product Landing Page</div>
      <a href="https://codepen.io/CPRSN/pen/pGPzWQ?editors=1100" target="blanc" class="project-tile" id="project_tile_3">
        <img class="project-pic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Junction_3.svg/1600px-Junction_3.svg.png" alt="project"></a>
      </div>
      <div class="tile-container2">
        <div class="project-title">FCC- Technical Documentation Page</div>
      <a href="https://codepen.io/CPRSN/pen/LqdEwZ?editors=1100" target="blanc" class="project-tile" id="project_tile_4">
        <img class="project-pic" src="https://vignette.wikia.nocookie.net/phobia/images/d/d0/4.jpg/revision/latest?cb=20161127143001" alt="project">
      </a>
      </div>
     <div class="tile-container3">
      <div class="project-title">FCC-Survey Form</div>
      <a href="https://codepen.io/CPRSN/pen/Erydob?editors=1100" target="blanc" class="project-tile" id="project_tile_2">
        <img class="project-pic" src="https://s3.amazonaws.com/tinycards/image/e23a3d91dd56ac2c3106108c3d6c56aa" alt="project"></a>
      </div>
      <div class="tile-container4">
       <div class="project-title">FCC-Tribute Page</div> 
      <a href="https://codepen.io/CPRSN/pen/YBXNxe?editors=1100" target="blanc" class="project-tile" id="project_tile_1">
        <img class="project-pic" src="https://www.pelicanrouge.nl/wp-content/uploads/2017/06/Nummer-1.png" alt="project"></a
        </div>
    </div>
    <br>
    <div class="contact" id="contact">
      <h2>Get in touch</h2>
      <a id="profile-link" href="https://www.github.com/freecodecamp" target="_blank" class="contact-details">Webpage</a>
      
    </div>
      
      
  </main>
  
  <footer>
  </footer>
  
</body>
  </html>

html, body {height: 100%; width: 100%;}

#navbar {
display: block;
text-align: right;
position: fixed;
top: 0;
left: 0;
}

#navbar ul {
list-style-type: none;
margin: 0px;
padding: 10px;
width: 98%;
position: fixed;
top: 0;
background-color: #000000;

}

#navbar ul li {
display: inline;

}

#navbar ul li a {
color: white;
text-align: center;
padding: 10px;
border: 2px solid #00695C;
}

#navbar ul li a:hover {
background-color: #00695C;
}

#welcome-section {
height: 100%;
width: 100%;
padding-top: 0px;
margin-top: 0px;
background-color: #00695C;
text-align: center;
border: 1px solid #000000;
border-radius: 5px;

}

#introtext {
height: 120px;
width: 220px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -60px;
margin-left: -110px;
border: 2px solid #000000;
border-radius: 10px;

}

.mimic {
color: white;
}

.work {
background-color: white;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
grid-template-columns: repeat(2, 1fr);
grid-template-rows:repeat (2, 1fr);
align-items: center;
align-self: center;
justify-items: center;
justify-self: center;
}

.work-title {
text-align: center;
}

.project-pic {
width: 250px;
height: 250px;
}

.project-tile {
text-align: center;
}

.project-title {
color: black;
text-align: center;

}

.project-title a {
text-align: center;
}

.contact {
height: 100%;
width: 100%;
background-color:#00695C;
}

1 Like

Hey! To get make an element to have its height set to the height of the viewport you need to apply this to it:

height: 100vh;

vh: viewport height
vw: viewport width

For num2, I don’t know sorry.

-Tech.

You missed a closing bracket on your closing a tag.

@Tech is right about using vh units. You can read more about responsive units available to you here:

https://www.w3schools.com/cssref/css_units.asp

1 Like

Hi there,

thanks for your reply. Unfortunately, changing the height to 100vh; is not enough for the script to let me pass the test. Any other suggestions? :slight_smile:

Hi Ethan,

Thanks for your reply.
I swear the closing bracket was there the 50 times i checked it :wink:

User Story #10: The height of the welcome section should be equal to the height of the viewport.

Normally it should be enough. I have a feeling that your “html, body {height: 100%; width: 100%;}” and has nothing to do there imo. Try removing it!

-Tech

I did the old curriculum so didn’t have to pass the same tests. I’m not sure how FCC is checking the height of your section. However, with padding, borders, and a 100vh height, the actual height of the div could be more. Maybe try:

box-sizing: border-box;

if @Tech’s suggestion doesn’t do it. Or even removing borders/padding on the welcome section.

1 Like

Adding box-sizing: border-box; made me pass this test!
Thank you!

2 Likes