search

Home  >  Q&A  >  body text

Unable to position a section correctly in HTML, CSS

I am creating a portfolio website and I would like to have a "Hobbies" section below the "About" section. When I first made the Hobby section, it appeared above the about section, even though I had coded it below the about section in the HTML. Now when I try to place it below the about section using DevTools, it is hidden below the about section. Your help would be greatly appreciated. 

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    console.log(entry)
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
    } else {
      entry.target.classList.remove("show");
    }
  })
})

const hiddenElements = document.querySelectorAll(".hidden");
hiddenElements.forEach((el) => observer.observe(el));
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(0, 118, 214);
}


* {
  margin: 0;
  padding: 0;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

#hero {
  background-color: darkgray;
  height: 100vh;
}

#hey {
  position: absolute;
  top: 228px;
  left: 46vw;
}

#name {
  position: absolute;
  top: 39vh;
  left: 39vw;
}

#line_1 {
  position: absolute;
  top: 50vh;
  left: 23vw;
}

#line_2 {
  position: absolute;
  top: 50vh;
  right: 21vw;
}

nav {
  position: fixed;
  top: -50px;
  left: 20.7vw;
  width: 100%;
  background-image: url("navbar.png");
  background-repeat: no-repeat;
  transition: top 0.2s ease-in-out;
  font-family: 'Playfair Display', serif;
}

nav ul {
  margin: 0;
  padding: 0;
  position: relative;
  right: 313px;
  list-style: none;
  text-align: center;
  font-size: larger;
}

nav li {
  display: inline-block;
  margin: 10px;
  margin-right: 25px;
}

nav a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}


nav:hover {
  top: 0;
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #ffffff;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

#about {
  position: absolute;
  top: 111vh;
  left: 45vw;
  font-family: 'Playfair Display';
  width: 29vw;
}

#about h1 {
  font-size: xx-large;

}

#about h2 {
  font-size: large;
  position: relative;
  left: -13px;
  top: 48px;
}

#profile_pic {
  position: relative;
  bottom: 161px;
  right: 305px;
}

#india {
  position: relative;
  right: 276px;
  bottom: 163px;
  height: 56px;
}

.hidden {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 1s;
}

.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

#blur_bg {
  animation: fadeInAnimation ease 3s;
  position: relative;
  bottom: 76vh;
  left: 28vw;
}

#blur_bg2 {
  animation: fadeInAnimation ease 3s;
  position: relative;
  bottom: 162vh;
  left: -58vw;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#hr {
  position: absolute;
  bottom: 145vh;
  right: -1vw;
  width: 50vw;
}

#hobbies {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
<!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>I'm Shardul Bhatkar</title>
    <link rel="stylesheet" href="index.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter&family=Playfair+Display:wght@500&display=swap" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="favicon.png">
    <script defer src="script.js"></script>
  </head>
  <body>
    <div id="hero">
      <nav>
        <ul>
          <li class="hover-underline-animation"><a href="#">Home</a></li>
          <li class="hover-underline-animation"><a href="#about">About</a></li>
          <li class="hover-underline-animation"><a href="#">Services</a></li>
          <li class="hover-underline-animation"><a href="#">Get in touch</a></li>
        </ul>
      </nav>
      <img id="hey" src="hey.png" alt="">
      <img id="name" src="name.png" alt="">
      <img id="line_1" src="line_1.png" alt="">
      <img id="line_2" src="line_2.png" alt="">
    </div>
    <section id="about">
      <h1 class="hidden">About Me</h1>
      <h2 class="hidden">
        I am a 14-year-old with a passion for technology and a love for science. In addition to being a podcaster and published author, I have a keen interest in web development and enjoy playing both cricket and table tennis. I also find gaming to be a great way to unwind.

        While I may be young, I am driven to explore the ever-evolving world of technology and constantly seek to expand my knowledge and skills in this field. Thank you for taking the time to get to know me better.
      </h2>
      <img class="hidden" id="profile_pic" src="profile pic.png" alt="">
      <img class="hidden" id="india" src="india 1.png" alt="">
      <img src="blur_bg.png" alt="" id="blur_bg">
      <img src="blur_bg2.png" alt="" id="blur_bg2">
      <img id="hr" src="hr.png" alt="">
    </section>

    <section id="hobbies">
      <h1>My Hobbies</h1>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit vel sit quasi quas. Unde laboriosam est eveniet modi culpa velit.</p>
    </section>
  </body>
</html>

P粉481035232P粉481035232433 days ago538

reply all(1)I'll reply

  • P粉421119778

    P粉4211197782023-09-11 08:57:09

    Can you tell me if the following CSS is valid? If not, what problem do you see in the following CSS? 

    /* width */
    ::-webkit-scrollbar {
        width: 10px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: rgb(0, 118, 214);
    }


    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    html {
        scroll-behavior: smooth;
    }

    #hero {
        background-color: darkgray;
        height: 100vh;
    }

    #hey {
        /* position: absolute; */
        top: 228px;
        left: 46vw;
    }

    #name {
        /* position: absolute; */
        top: 39vh;
        left: 39vw;
    }

    #line_1 {
        /* position: absolute; */
        top: 50vh;
        left: 23vw;
    }

    #line_2 {
        /* position: absolute; */
        top: 50vh;
        right: 21vw;
    }

    nav {
        position: fixed;
        top: -50px;
        left: 20.7vw;
        width: 100%;
        background-image: url("navbar.png");
        background-repeat: no-repeat;
        transition: top 0.2s ease-in-out;
        font-family: 'Playfair Display', serif;
    }

    nav ul {
        margin: 0;
        padding: 0;
        position: relative;
        right: 313px;
        list-style: none;
        text-align: center;
        font-size: larger;
    }

    nav li {
        display: inline-block;
        margin: 10px;
        margin-right: 25px;
    }

    nav a {
        display: block;
        padding: 10px;
        color: #fff;
        text-decoration: none;
    }


    nav:hover {
        top: 0;
    }

    .hover-underline-animation {
        display: inline-block;
        position: relative;
        color: #ffffff;
    }

    .hover-underline-animation:after {
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #ffffff;
        transform-origin: bottom right;
        transition: transform 0.25s ease-out;
    }

    .hover-underline-animation:hover:after {
        transform: scaleX(1);
        transform-origin: bottom left;
    }

    #about {
        /* position: absolute; */
        /* top: 111vh;
        left: 45vw; */
        margin: auto;
        font-family: 'Playfair Display';
        width: 29vw;
    }

    #about h1 {
        font-size: xx-large;

    }

    #about h2 {
        font-size: large;
        /* position: relative; */
        left: -13px;
        top: 48px;
    }

    #profile_pic {
        /* position: relative; */
        bottom: 161px;
        right: 305px;
    }

    #india {
        /* position: relative; */
        right: 276px;
        bottom: 163px;
        height: 56px;
    }

    .hidden {
        opacity: 0;
        transform: translateX(-100%);
        transition: all 1s;
    }

    .show {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }

    #blur_bg {
        animation: fadeInAnimation ease 3s;
        /* position: relative; */
        bottom: 76vh;
        left: 28vw;
    }

    #blur_bg2 {
        animation: fadeInAnimation ease 3s;
        /* position: relative; */
        bottom: 162vh;
        left: -58vw;
    }

    @keyframes fadeInAnimation {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    #hr {
        /* position: absolute; */
        bottom: 145vh;
        right: -1vw;
        width: 50vw;
    }

    #hobbies {
        /* position: relative; */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    reply
    0
  • Cancelreply