toasty woasty 2 | lesson

<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Montserrat&family=Poppins&display=swap" rel="stylesheet">
<style>
::-webkit-scrollbar {width: 5px; background: #3B3A3A}
::-webkit-scrollbar-thumb {background: linear-gradient(0deg, #869d72 0%, #D83320 100%);}

.body{
   margin: auto;
    width: 80%;
     border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.2);
    background: #eee;
    position: relative;
    font-family: 'Montserrat';
    box-shadow: 1px 1px 16px #666;
    overflow: hidden
}
.bg{
clip-path: polygon(100% 0%, 0% 0% , 0.00% 86.88%, 2.00% 88.74%, 4.00% 89.96%, 6.00% 90.48%, 8.00% 90.30%, 10.00% 89.41%, 12.00% 87.86%, 14.00% 85.69%, 16.00% 82.98%, 18.00% 79.83%, 20.00% 76.35%, 22.00% 72.66%, 24.00% 68.90%, 26.00% 65.19%, 28.00% 61.67%, 30.00% 58.46%, 32.00% 55.68%, 34.00% 53.43%, 36.00% 51.78%, 38.00% 50.79%, 40.00% 50.50%, 42.00% 50.92%, 44.00% 52.04%, 46.00% 53.80%, 48.00% 56.16%, 50.00% 59.03%, 52.00% 62.30%, 54.00% 65.87%, 56.00% 69.59%, 58.00% 73.35%, 60.00% 77.01%, 62.00% 80.44%, 64.00% 83.52%, 66.00% 86.13%, 68.00% 88.19%, 70.00% 89.63%, 72.00% 90.38%, 74.00% 90.44%, 76.00% 89.78%, 78.00% 88.45%, 80.00% 86.47%, 82.00% 83.93%, 84.00% 80.92%, 86.00% 77.54%, 88.00% 73.90%, 90.00% 70.15%, 92.00% 66.41%, 94.00% 62.81%, 96.00% 59.49%, 98.00% 56.56%, 100.00% 54.12%);
    height: 300px;
	width: 100%;
    position: absolute;
    background: linear-gradient(90deg, #124559 0%, #D83320 100%);
    top: -20px
}

img {
    object-fit: cover;
    border-radius: 20px;
}
h2{
    font-family: 'Poppins';
    text-transform: uppercase;
    font-size: 20px;
    margin: 0px;
    color: #3F3232;
    font-weight: normal;
        line-height: 100%

}
h3{
    font-family: 'DM Serif Display';
    font-size: 40px;
    margin: 0px 0px 5px;
    color: #3F3232;
    font-weight: normal;
    line-height: 100%
}
h4{
    margin: 5px 0px;
    background: linear-gradient(90deg, #124559 0%, #D83320 100%);
    padding: 5px 20px;
    color: #fff;
    font-family: 'Poppins';
    text-transform: uppercase;
    font-size: 13px;
    width: auto
}
.text{
    padding: 20px;
    margin: 20px 20px 0px;
    border: 1px solid rgba(0,0,0,0.2);
    font-family: 'Montserrat';
    font-size: 13px;
    background: #fff;
    color: #3F3232;
    text-align: justify;
    border-radius: 20px;
    position: relative;

}
.sidebar{
	border-left: 1px solid rgba(0,0,0,0.2);
    height: 500px;
    width: 250px;
    position: absolute;
    left: 550px;
    padding: 20px;
    box-sizing: border-box;
    color: #fff
}

b,i,a{
background: linear-gradient(90deg, #124559 0%, #D83320 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

</style>
<div class="body">
<div class="bg"></div>
<div class="text">
<h2>toasty woasty</h2>
<h3>mamma mia</h3>
<img src="https://64.media.tumblr.com/8c92c0e61e26b8c4f3fa1951a1adfc91/e703b4acb49b83e2-ef/s400x600/e13d10de9a6001386f967172b42c6b3975d0d80c.gifv" style="width: 100%; height: 200px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At consectetur lorem donec massa sapien faucibus et. Dis parturient montes nascetur ridiculus. Donec pretium vulputate sapien nec sagittis aliquam. Imperdiet dui accumsan sit amet. Fusce id velit ut tortor. Morbi tristique senectus et netus. Vel turpis nunc eget lorem dolor sed. Vulputate eu scelerisque felis imperdiet proin. Adipiscing elit ut aliquam purus sit amet luctus venenatis.

<p><b>Hendrerit gravida rutrum quisque non tellus orci. Sagittis vitae et leo duis ut diam quam nulla porttitor. Mi proin sed libero enim sed faucibus. Vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur.</b> Ipsum a arcu cursus vitae. Neque volutpat ac tincidunt vitae. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Ac ut consequat semper viverra nam libero. Etiam sit amet nisl purus in. Cras ornare arcu dui vivamus arcu felis bibendum ut tristique. Amet massa vitae tortor condimentum. <i>Vulputate mi sit amet mauris commodo quis. Dignissim diam quis enim lobortis. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing. Porttitor lacus luctus accumsan tortor posuere ac.</i> In metus vulputate eu scelerisque felis.

<p>Mi bibendum neque egestas congue quisque egestas diam in. Dui vivamus arcu felis bibendum ut tristique et. Pellentesque massa placerat duis ultricies lacus sed turpis. Sociis natoque penatibus et magnis. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Eget nulla facilisi etiam dignissim diam quis enim lobortis. Sed vulputate mi sit amet mauris commodo quis. Lacinia quis vel eros donec ac odio tempor.

<p>In hac habitasse platea dictumst vestibulum rhoncus. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel. Platea dictumst quisque sagittis purus sit amet. Auctor elit sed vulputate mi sit amet mauris. Posuere lorem ipsum dolor sit amet consectetur adipiscing elit duis.

<h4>your assignment</h4>
<p>hahha toast goes crunch crunch
<h2>requirements</h2>
- In RPG format.
<br>- stinky
<br>- yummy
<center><a href="PROFILELINK" target="_blank"><img alt="profile-picture" src="LINK" style="width:80px;border:1px solid rgba(0,0,0,0.2);margin-top:15px;" /></a>
</center>
</div>
<center><p><a href="https://finchscodes.tumblr.com/" target="_blank" style="color: #fff; text-decoration:none; font-size:12px;font-family:'poppins'">CODED BY FINCH</a></center></div>
</div>