How do i fix the location of my headers and paragraphs?

moosee 0
Viewed 27

I am new to html and have decided to create a portfolio website showing what I have learned. I am having an issue with the formatting and the location of the "Projects" and the foreseeable other parts of my website. What I am trying to accomplish is by making my website a scrolling website. The user will scroll down (or click the reference buttons) to the other parts (Projects, About me, etc.) of my page, but I cannot for the life of me get these to go under the introduction page.

Here is a screenshot of the page and what I am trying to accomplish: image of webpage

@import url("https://fonts.googleapis.com/css2?family=DynaPuff:wght@600&family=Shadows+Into+Light&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "DynaPuff", cursive;
}

.canvas {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100vh;
  width: 100vw;
}

body {
  min-height: 100vh;
  background: linear-gradient(#cdc5b4, #b59da4);
}

.navbar-container {
  display: flex;
  nav-left: 100%;
}


.navbar {

  max-width: 1560px;
  padding: 20px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
}

 ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

 ul li {
  list-style: none;
  margin-left: 20px;
}

 ul li a {
  text-decoration: none;
  padding: 6px 15px;
  color: #fff;
  border-radius: 20px;
}

 ul li a:hover {
  color: #ffff;
  border-radius: 20px;
}

.hello {
  color: #ffff;
  margin: 0;
  text-align: center;
  padding: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.text {
  flex: auto;
  color: white;
  white-space: nowarp;
  font-size: 7.5vw;
  font-size: 1.5em;
  z-index: 9;
}
.projects {
  position: absolute;
  color: #fff;
}
<!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" />
    <title>------</title>
    <link rel="stylesheet" href="./style.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap"
      rel="stylesheet"
    />
  </head>

  <body>
    <div class="container">
      <div class="navbar-container">
        <div class="navbar">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Education</a></li>
            <li><a href="#">Resume</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="hello">
        <p>Hello, I'm</p>
        <h1>----------</h1>
        <h3>but you can call me moosee</h3>
      </div>
    </div>

    <div class="container">
      <div class="Projects">
        <h2>Projects</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint odio
          quisquam minus maxime debitis consequuntur alias optio, repellendus
          fuga expedita a in unde incidunt sapiente autem magnam voluptatibus.
          Quaerat voluptate deserunt nemo dolore! Tempore, iste magnam. Quam,
          harum libero hic optio, iste minima voluptas illum possimus dolorum
          odit provident velit delectus distinctio reprehenderit quae aperiam
          eligendi ab voluptatibus voluptatem? Reprehenderit, libero cum? Cum
          doloremque atque error asperiores accusantium iure ratione eius
          officiis, blanditiis, omnis aliquam exercitationem dolor in
          consequatur optio quae nobis, libero ad quos facere vel neque!
          Asperiores eligendi doloremque velit repellat atque nostrum
          reiciendis, ipsam recusandae dicta deserunt?
        </p>
      </div>
    </div>

    <div class="container">
      <div class="Projects">
        <h2>About me</h2>

        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint odio
          quisquam minus maxime debitis consequuntur alias optio, repellendus
          fuga expedita a in unde incidunt sapiente autem magnam voluptatibus.
          Quaerat voluptate deserunt nemo dolore! Tempore, iste magnam. Quam,
          harum libero hic optio, iste minima voluptas illum possimus dolorum
          odit provident velit delectus distinctio reprehenderit quae aperiam
          eligendi ab voluptatibus voluptatem? Reprehenderit, libero cum? Cum
          doloremque atque error asperiores accusantium iure ratione eius
          officiis, blanditiis, omnis aliquam exercitationem dolor in
          consequatur optio quae nobis, libero ad quos facere vel neque!
          Asperiores eligendi doloremque velit repellat atque nostrum
          reiciendis, ipsam recusandae dicta deserunt?
        </p>
      </div>
    </div>
  </body>
  <footer></footer>
</html>

Here are also the current style.css and index.html files :) https://github.com/moos3e/Personal-portfolio

css html
1 Answers

Do not position your elements by using position: absolute; that is why they all seem to be placed 'on top of each other'.

It seems to me you want the first block ("hello") to take the entire screen and have the content in the middle, there are better ways to achieve this:

.hello {
  display: grid;
  place-items: center;
  min-height: 80vh;
  width: 100%; 
}

You will need to make a div around the content though:

  <div class="hello">
    <div>
      content goes here
    </div>
  </div>

Some explanations on the code as well display: grid; this says this container is a grid (needed later) place-items: center; places the content of a grid in the center (this is why you needed it to be a grid) min-height: 80vh; sets the minumum height to 80% of the screen height, this means that on large screen the visitors will easily see there is further content, and on smaller screens you will still have place for all content, this number could be adjusted width: 100%; takes the entire width

Stephane Vanraes0
Related