This is a solution to the Profile card component challenge on Frontend Mentor.
- Build out the project to the designs provided
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
Overlaying an image between 2 element:
<section class="container">
<div class="upper">
<!-- Inside this is the image you want to overlay -->
<img class="profile-picture" src="./images/image-victor.jpg">
</div>
<div class="lower"></div>
</section>
.profile-picture {
position: absolute;
margin-bottom: -50px; /* Change this as you please to fit the content */
}
However, this only work if you know the height of the elements.
- Github - Long Nguyen