I have created single-page HTML for the website. I have added section tags to differentiate sections. Sections are scroll while scrolling and when clicking on any link from the top menu it will scroll on a specific ection. Below is my HTML code.
<div id="pagepiling" class="wrapper">
<section id="home"
class="navbar-is-white text-dark pp-scrollable d-flex align-items-center section position-absolute home-bg"
role="main">
<div class="intro">
<div class="scroll-wrap">
<div class="container">
</div>
</div>
</div>
</section>
<section id="about" class="section pp-scrollable d-flex align-items-center position-absolute">
<div class="intro">
<div class="scroll-wrap">
<div class="container">
</div>
</div>
</div>
</section>
<section id="service" class="section pp-scrollable d-flex align-items-center position-absolute">
<div class="intro">
<div class="scroll-wrap">
<div class="container">
</div>
</div>
</div>
</section>
<section id="career" class="section pp-scrollable d-flex align-items-center position-absolute">
<div class="intro">
<div class="scroll-wrap">
<div class="container">
</div>
</div>
</div>
</section>
<section id="contact" class="section pp-scrollable d-flex align-items-center position-absolute">
<div class="intro">
<div class="scroll-wrap">
<div class="container">
</div>
</div>
</div>
</section>
</div>
I have created an Angular 11 app and I have enabled routing in that app. Now, need to migrate the above code in this app. So, I have created the Angular 11 app and implement my HTML code. But all sections come one on one instead of below as per the sequence.
