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

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 >
      <div >
        <div >
          <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 >
      <div >
        <p>Hello, I'm</p>
        <h1>----------</h1>
        <h3>but you can call me moosee</h3>
      </div>
    </div>

    <div >
      <div >
        <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 >
      <div >
        <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

CodePudding user response：

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 >
    <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