<!-- =============================================================================
- NOTES -
- do not remove the credit. You can move it around, but it must stay visible
- do not redistribute my code for money nor claim it as your own
- if you need copyright free pics I recommend going on https://unsplash.com/
(that's where I got the background pic).
- I used https://fontawesome.com/ for the icons. They're also free
- feel free to change anything you'd like (colors, some of the layout, all that jazz)
- replace 'IMG_URL' with your image links.
- replace 'LINK_URL' with your links.
=========
- COLORS USED -
I used rgb and rbga to make this template. The last value of an rgba color stands
for its opacity.
purple
- rgb(72,30,61)
- rgba(72,30,61,0.7)
white
- rgb(255,255,255)
blue
- rgb(82,99,117)
black (only for the lil lozange in the code credit at the bottom)
- rgb(0,0,0)
============================================================================= -->
<div class="row no-gutters mx-2 p-5">
<!-- IMAGE -->
<div class="mx-auto mb-5 col-lg-6 col-md-12 col-sm-12" style="text-align: center;">
<!-- CHARACTER IMAGE WITH LINK FOR CREDIT -->
<a href='LINK_URL' target="_blank">
<img src='IMG_URL'>
</a>
<!-- END CHARACTER IMAGE -->
<!-- BACKGROUND -->
<div style="position: absolute; top:0; bottom: 0; left:0; right:0; background-image: url('IMG_URL'); background-size: cover; background-repeat: no-repeat; opacity: 0.7; clip-path: polygon(15% 0, 100% 0, 100% 30%, 100% 85%, 85% 100%, 0 100%, 0% 70%, 0 15%); z-index: -1">
</div>
<!-- END BACKGROUND -->
</div>
<!-- END IMAGE -->
<!-- TEXT -->
<div class="m-auto col-lg-6 col-md-12 col-sm-12" style="max-width: 700px; text-align: justify; font-family: Georgia; font-size: 1rem; color: rgb(82,99,117);">
<!-- SECTION 1 -->
<div style="position:relative; left:-60px; margin-bottom:5px; padding:1%; background-color: rgb(72,30,61); color: rgb(255,255,255); border: 1px solid rgb(255,255,255); clip-path: polygon(0 0, 95% 0, 100% 50%, 100% 50%, 95% 100%, 0 100%, 0 80%, 0% 20%);">
<h2 style="font-size: 1.5rem;">
<i class="fa-solid fa-feather mr-2"></i>
Header 1
</h2>
</div>
<div style="border-left: 5px solid rgba(72,30,61,0.7); padding: 10px; margin-bottom: 10px; overflow: auto; max-height: 200px;">
<p>
You can write as much as you'd like here. The text will scroll when the div is taller than 200 pixels. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et imperdiet leo. Aenean pharetra blandit viverra. Morbi ante nisl, commodo quis eros nec, ultrices facilisis tortor. Ut id placerat nisl. Nulla in magna leo. In aliquet pretium ipsum ut eleifend. Morbi sit amet sapien commodo, sodales nunc eu, varius erat. Ut ultricies felis aliquam auctor sagittis. Proin in libero lectus. Duis mollis, ante sit amet elementum maximus, tortor sapien consectetur risus, sed faucibus magna justo posuere mi. Duis ac fermentum nulla. Fusce a nibh in augue pretium ornare et ut ligula. Nulla vehicula finibus mauris, nec cursus velit vehicula nec. Mauris at egestas ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
<!-- END SECTION 1 -->
<!-- SECTION 2 -->
<div style="position:relative; left:-60px; margin-bottom:5px; padding:1%; background-color: rgb(72,30,61); color: rgb(255,255,255); border: 1px solid rgb(255,255,255); clip-path: polygon(0 0, 95% 0, 100% 50%, 100% 50%, 95% 100%, 0 100%, 0 80%, 0% 20%);">
<h2 style="font-size: 1.5rem;">
<i class="fa-solid fa-feather mr-2"></i>
Header 2
</h2>
</div>
<div style="border-left: 5px solid rgba(72,30,61,0.7); padding: 10px; margin-bottom: 10px; overflow: auto; max-height: 200px;">
<p>
You can write as much as you'd like here. The text will scroll when the div is taller than 200 pixels. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et imperdiet leo. Aenean pharetra blandit viverra. Morbi ante nisl, commodo quis eros nec, ultrices facilisis tortor. Ut id placerat nisl. Nulla in magna leo. In aliquet pretium ipsum ut eleifend. Morbi sit amet sapien commodo, sodales nunc eu, varius erat. Ut ultricies felis aliquam auctor sagittis. Proin in libero lectus. Duis mollis, ante sit amet elementum maximus, tortor sapien consectetur risus, sed faucibus magna justo posuere mi. Duis ac fermentum nulla. Fusce a nibh in augue pretium ornare et ut ligula. Nulla vehicula finibus mauris, nec cursus velit vehicula nec. Mauris at egestas ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
<!-- END SECTION 2 -->
<!-- SECTION 3 -->
<div style="position:relative; left:-60px; margin-bottom:5px; padding:1%; background-color: rgb(72,30,61); color: rgb(255,255,255); border: 1px solid rgb(255,255,255); clip-path: polygon(0 0, 95% 0, 100% 50%, 100% 50%, 95% 100%, 0 100%, 0 80%, 0% 20%);">
<h2 style="font-size: 1.5rem;">
<i class="fa-solid fa-feather mr-2"></i>
Header 3
</h2>
</div>
<div style="border-left: 5px solid rgba(72,30,61,0.7); padding: 10px; margin-bottom: 10px; overflow: auto; max-height: 200px;">
<p>
You can write as much as you'd like here. The text will scroll when the div is taller than 200 pixels. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et imperdiet leo. Aenean pharetra blandit viverra. Morbi ante nisl, commodo quis eros nec, ultrices facilisis tortor. Ut id placerat nisl. Nulla in magna leo. In aliquet pretium ipsum ut eleifend. Morbi sit amet sapien commodo, sodales nunc eu, varius erat. Ut ultricies felis aliquam auctor sagittis. Proin in libero lectus. Duis mollis, ante sit amet elementum maximus, tortor sapien consectetur risus, sed faucibus magna justo posuere mi. Duis ac fermentum nulla. Fusce a nibh in augue pretium ornare et ut ligula. Nulla vehicula finibus mauris, nec cursus velit vehicula nec. Mauris at egestas ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
<!-- END SECTION 3 -->
<!-- CODE CREDIT -->
<div style="text-align:right; color: rgb(0,0,0);">
<a href="https://toyhou.se/MauveCoffee" style="color:rgb(82,99,117)"><i class="fa-solid fa-code"></i></a>
⬥
<a href="https://unsplash.com/" style="color:rgb(82,99,117)"><i class="fa-solid fa-image"></i></a>
</div>
<!-- END CODE CREDIT -->
</div>
<!-- END TEXT -->
</div>