new to coding, how do I move the text to the center of the picture?
HTML:
<section id="banner" class="d-flex align-items-center">
<div class="container d-flex flex-column align-items-center" data-aos="zoom-in" data-aos-delay="100">
</div>
</section>
<section id="hero" class="d-flex align-items-center">
<div class="container d-flex flex-column align-items-center" data-aos="zoom-in" data-aos-delay="100">
<h1>About</h1>
<img src="assets/img/logo.png" width="320">
<center><h2>The term KAPITBISIG is a Filipino word which means "linked together" or working in unity.</h2></center>
<center><h2>KAPITBISIG</center></h2>
<a href="https://www.youtube.com/channel/" target="_blank"class="btn-about">Check out our YouTube channel</a>
</div>
<!-- THE STUDENTS -->
</section><!-- End Hero -->
<!-- ======= Testimonials Section ======= -->
<section id="testimonials" class="testimonials">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Meet the team of KAPITBISIG</h2>
</div>
<div class="testimonial-item">
<h3>MG</h3>
<h4>Creative Director</h4>
<h3>MA</h3>
<h4>Creative Editor</h4>
<h3>NN</h3>
<h4>Project Coordinator</h4>
</div>
</div><!-- End testimonial item -->
</div>
</section><!-- End Testimonials Section -->
</main>
CSS:
#banner{
width: 100%;
height: 100vh;
background: url("../img/taal-church.jpg") top right;
background-size: cover;
}
#banner .container {
padding-top: 70px;
position: relative;
}
Attachments
Last edited: