Trying to make the text in the jumbotron hide underneath the container when scrolling, but it's not working as expected. How can I get 'Main Title Goes Here', 'Subtitle' and the blue box to go under the lorem ipsum text? I tried setting z-index to -1 for the hero-text class, but it made everything disappear.
Check out this code snippet for reference.
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<div class="hero-text">
<h1 class="hero-title">Main Title Will</h1>
<h1 class="hero-title">Go Here</h1>
<div class="subtitle">SUBTITLE</div>
<div class="arrow animated bounce">
<img width="40" height="40" alt="" src="data:image/svg+xml;base64,... [truncated] ... <!-- ENF OF JUMBOTRON -->
<main>
...
<div class="col-md-12">
<div class="text-box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<!-- More Lorem Ipsum Text -->
</div>
</div>
...