Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="viewport"/>
    <title>Personal Portfolio Webpage</title>
    <link rel="stylesheet" href="styles.css" />

    
</head>

<body>
<header id="welcome-section">
  <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
  <h1 id="section">Welcome</h1>
  <nav>
     <ul>
          <li><a href="#info">INFO</a></li>
          <li><a href="#products">PRODUCTS</a></li>
          <li><a href="#about">ABOUT</a></li>
        </ul>
   </nav>     
</header>

<div class="nickname">

  <h2 id="info">Student Info</h2>
     <div class="nb">
      <h2>@Chesshadji here on page</h2>
      <p>I am just a beginner</p>
   </div>
</div>

<div id="projects">

  <h2 id="products">My fiew products</h2>
  <navbar id="navbar">
      <div class="project-tile">
<a></a>
      </div>
</navbar>
</div>

<div id="profile-link">
  
  <h2 id="about">Join and help me improve myself</h2>
     <div class="pl">
      <p>Dont let me down</p>
     
   </div>
</div>
  </body>
  </html>

/* file: styles.css */
@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}
body {
  font-family: Helvetica, sans-serif;
  margin: 0;
}

header {
  width: 100%;
  height: 70px;
  background-color: #6f6f9e;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0%;
}

#logo {
  width: max(100px, 18vw);
  background-color: #6f6f9e;
  aspect-ratio: 35 / 4;
  padding: 1rem;
  padding-right: 50px;
}
h1 {
  color: #eccb6e;
  font-size: min(10vw, 2.2em);
  text-align: center;
}
nav {
  width: 50%;
  max-width: 300px;
  height: 50px;
}
nav > ul {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: center;
  padding-inline-start: 0;
  margin-block: 0;
  height: 100%;
  
}

nav > ul > li {
  color: #dfdfe2;
  margin: 0 0.2rem;
  padding: 0.2rem;
  display: block;
}
nav > ul > li:hover {
  background-color: #ea170c;
  color: #1b1b32;
  cursor: pointer;
}
li > a {
  color: inherit;
  text-decoration: none;
}

div{
  width: 100%;
  height: 400px;
   position: absolute;
  background-color: rgba(71, 117, 163, 0.327);
  top: 0%;
  text-align: center;
  margin: 70px auto;
     }

.nb{
  text-align: center;
  font-size: min(10vw, 1.8em);
  font-family: Verdana, Tahoma;
  margin: 90px auto;
  }
.nickname{
 width: 100%;
  height: 400px;
  background-color: #b20403;
  margin: 70px auto;
  position: absolute; 
  top: 0%;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

i am stuck here,
My plan is to separate 3 divisions i create, info products and about.
How can i make them to be one above another.
Now all stuck in 3 layers.
i never ubderstud this. i am sertain someone can give me some help ,
Thank you very much.

3

Hi there!

The problem seems to be in the “position” property.

When you set all divs to be in position: absolute;, you force each one of them to hold a specific area on your page and stay there, regardless of the rest of your page’s content.

Then, by setting the property “top” to 0 (or 0% in your case) for all divs, you basically tell them that they all have to start at the very beginning of your page. The “top: 0;” means that the element’s start must be at 0px distance from the top of the page.

Try to remove the “position” and “top” properties from your div and .nickname selectors so that they go back to their original position in the page and see if this fixes the problem. :smiley:

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.