Saya sedang mencipta laman web portfolio dan saya ingin mempunyai bahagian "Hobi" di bawah bahagian "Perihal". Apabila saya mula-mula membuat bahagian Hobi, ia muncul di atas bahagian tentang, walaupun saya telah mengekodkannya di bawah bahagian tentang dalam HTML. Sekarang apabila saya cuba meletakkannya di bawah bahagian tentang menggunakan DevTools, ia tersembunyi di bawah bahagian tentang. Bantuan anda amat dihargai.

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

             
  
      
 
 
About Me
 
 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. 
      
 
 
My Hobbies
 
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit vel sit quasi quas. Unde laboriosam est eveniet modi culpa velit.