I'm currently working on coding a page layout where each section takes up the entire screen. My goal is to have the content within each section centered both vertically and horizontally. I'm unsure if this is achievable, so any guidance or advice would be much appreciated. Additionally, I'd like to know if it's possible for the page to automatically scroll to the next section as the user scrolls down. I hope that explanation is clear enough.
Below is the CSS code snippet:
.presta .container {
width: 100%;
position: relative;
}
.presta .h1 {
font-size: 80px;
font-weight: bold;
}
.presta card {
padding: 30px;
margin: 0 auto;
}
.logoPresta:hover {
transition: transform 0.3s ease-in;
transform: translateY(-10px);
}
.prestaShow {
text-align: center;
}
.wrapper {
min-height: 100%;
}<div class="navbar ">
<div class="container flex">
<div class="logo" data-aos="fade-right">
<a href="index.html"><img src="images/linko_bg_transp.png" alt="" /></a>
</div>
<nav data-aos="fade-in">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="services.html">Our Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</div>
</div>
<section class="presta bg-light wrapper">
<div class="container">
<div class="text-center">
<h1>Our Areas of Expertise</h1>
</div>
<div class="grid grid-4">
<div class="logoPresta card">
<img src="images/1.jpg" alt="">
</div>
<div class="logoPresta card">
<img src="images/2.jpg" alt="">
</div>
<div class="logoPresta card">
<img src="images/3.jpg" alt="">
</div>
<div class="logoPresta card">
<img src="images/4.jpg" alt="">
</div>
</div>
</div>
</section>
<section class="prestaShow wrapper">
<div class="container info">
<div class="text-center">
<h2>Information Technology</h2>
</div>
<div class="textePresta card">
Web application design & development
</div>
<div class="textePresta card">
Database creation & enhancement
</div>
<div class="textePresta card">
Network infrastructure deployment
</div>
</div>
</section>Check out the images of the page: https://i.stack.imgur.com/Mrqs2.png https://i.stack.imgur.com/4p5Yd.png