After searching for a while, I still haven't found a solution to my problem. I am currently working on a Personal portfolio that has different sections with a height of 100vh each. However, I am facing difficulty in positioning the images within the sections as desired (I want the image of the penguins to be positioned like the first lion image, but in the section below). Can anyone provide assistance with this? (I am using a bootstrap grid)
Code:
.section-1 {
background: radial-gradient(#2d2d2d, #1a1a1a);
height: 100vh;
}
.section-2 {
background: #fc6621;
height: 100vh;
}
.section-3 {
background: #20468b;
height: 100vh;
}
.col-sm-6 {
height: 100vh;
}
#profile img {
display: inline;
float: right;
position: absolute;
bottom: 0;
right: 0;
z-index: 0;
}
.center {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.text {
height: 100vh;
position: relative;
z-index: 10;
}<!-- 1st section -->
<div class="section-1">
<div id="profile"><img src="https://i.gyazo.com/4cefd23a7fdc59ac022cc46d44fe9321.jpg" width="1006" height="821"></div>
<div class="container">
<div class="row">
<div class="col-sm-6 center text">
<h1>I'm <strong>Gilles</strong></h1>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam
id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.</p>
<div class="col-sm-4 button"><a href="index.html">CONTACT ME</a></div>
</div>
</div>
</div>
</div>
<!-- 2nd section -->
<div class="section-2">
<div id="smartschool"><img src="https://i.gyazo.com/abdeb771b58043c53cfb08e5ffd42f6e.jpg" width="990" height="753"></div>
<div class="container">
<div class="row">
<div class="col-sm-6 center text">
<h1>I'm <strong>Gilles</strong></h1>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam
id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.</p>
<div class="col-sm-4 button"><a href="index.html">READ MORE</a></div>
</div>
</div>
</div>
</div>
<!-- 3th section -->
<div class="section-3">
<div id="dutchcreativestudio"><img src="https://i.gyazo.com/4cefd23a7fdc59ac022cc46d44fe9321.jpg" width="933" height="643"></div>
<div class="container">
<div class="row">
<div class="col-sm-6 center text">
<h1>I'm <strong>Gilles</strong></h1>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam
id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.</p>
<div class="col-sm-4 button"><a href="index.html">READ MORE</a></div>
</div>
</div>
</div>
</div>The first section is displaying correctly!
https://i.sstatic.net/5w0vH.png
However, the subsequent sections are not displaying as desired and are stacking upon each other