ah the screaming of children | lesson

<head></head><body></body>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<style>
.body{
    margin: auto;
    width: 550px;
    border: 1px solid rgba(0,0,0,0.2);
    background: #484041;
    font-family: 'Montserrat'
}
.text{
    padding: 20px;
    text-align: justify;
    font-size: 12px;
    color: #fff;
}
.header{
    background: url(https://64.media.tumblr.com/9057f5f1bc60c9e1f92fb99c856c3cf4/tumblr_ounfjteqU01wvd8cco2_400.gifv);
    background-size: cover;
    height: 200px;
    width: 400px;
    margin: 10px;
}
.header2{
    font-size:15px;
    color: #000;
    width: 150px;
    height: 200px;
    margin: 10px;
    box-sizing: border-box;
    padding: 20px;
    margin-left: 0px;
    background: #fff;
    text-align: center;
    text-transform: uppercase
}
h2{
    text-transform: uppercase;
    font-size: 15px;
    padding: 10px;
    background: #79AEA3;
    color: #fff;
    text-align: center;
    margin: 0px;
    margin-top: -10px
}
.teach{
    background: rgba(250,250,250,0.2);
    border: 1px solid (0,0,0,0.2);
    padding: 10px;
    width: 280px;
    height: 50px;
    text-align: right;
    color: #fff;
    font-size: 10px;
    margin: 0px 20px
}
h3{
    font-size: 10px;
    letter-spacing: 2.5px;
    margin: 0px
}
.lesson{
    background: rgba(250,250,250,0.2);
    border: 1px solid (0,0,0,0.2);
    padding: 20px;
    text-align: justify;
    font-size: 12px;
    color: #fff;
    margin: 0px 20px;
    width: 250px
}
ul {
    padding-left:0px;
    font-size: 20px
}
    ul li {
        list-style-type:none;
        font-size: 12px
    }
    ul li:before {
          content: "— ";
          text-indent: -5px
    }

b, i{
    color: #79AEA3
}
</style>
<div class="body"><div style="display:flex">
<div class="header"></div><div class="header2">
<h2>Ah, the screaming of children</h2>
<br>Year 69, Week 420</div></div>
<div class="text">
<h2>lesson:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <i>Morbi leo urna molestie at elementum eu facilisis. Fringilla urna porttitor rhoncus dolor purus non.</i> Pellentesque pulvinar pellentesque habitant morbi tristique. Dui nunc mattis enim ut. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Eget nunc lobortis mattis aliquam faucibus purus in. Vitae aliquet nec ullamcorper sit amet. Magna fringilla urna porttitor rhoncus dolor purus non enim praesent. Neque sodales ut etiam sit. Donec pretium vulputate sapien nec.

<p>Diam sollicitudin tempor id eu nisl nunc mi. Sed cras ornare arcu dui vivamus arcu felis bibendum. Augue lacus viverra vitae congue eu. Arcu bibendum at varius vel pharetra. At augue eget arcu dictum varius duis. Proin fermentum leo vel orci porta non pulvinar neque. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere. Nibh tellus molestie nunc non blandit massa enim. Sit amet purus gravida quis blandit turpis. Pellentesque habitant morbi tristique senectus et.

<p>Faucibus nisl tincidunt eget nullam non nisi est. <b>Sem viverra aliquet eget sit amet tellus cras adipiscing.</b> In ornare quam viverra orci. Eu nisl nunc mi ipsum faucibus. Cras adipiscing enim eu turpis egestas pretium aenean. Pellentesque nec nam aliquam sem et tortor consequat. Tellus id interdum velit laoreet id. Id diam maecenas ultricies mi eget mauris pharetra. Sed risus ultricies tristique nulla aliquet enim tortor. Dictum sit amet justo donec enim diam vulputate. Massa tincidunt dui ut ornare lectus sit. Volutpat blandit aliquam etiam erat velit. Eu turpis egestas pretium aenean pharetra magna. Mattis enim ut tellus elementum. Morbi tincidunt ornare massa eget egestas purus viverra accumsan.

<p>Sit amet risus nullam eget felis. Suspendisse faucibus interdum posuere lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Volutpat lacus laoreet non curabitur gravida arcu. Euismod nisi porta lorem mollis. Cras fermentum odio eu feugiat pretium. Cras fermentum odio eu feugiat pretium nibh ipsum. Gravida neque convallis a cras semper auctor neque vitae. Ligula ullamcorper malesuada proin libero nunc consequat. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet.

<p>Amet luctus venenatis lectus magna. Neque sodales ut etiam sit amet.
</div>
<div style="display: flex; margin-bottom: 20px;">
<div>
<div class="teach">
<img src="https://64.media.tumblr.com/8d9c3918b9243fed26d0d96380a14665/94ff0083adfb8b94-26/s400x600/2f745696752846f6911e60420b982eabae0793f8.pnj" style="height: 45px; height: 45px; object-fit:cover; border-radius:10px; float: left; margin-right: 10px">
<h3>professor monke man</h3>
if you have any questions, message me or my minions lol
<br>(so perish)
</div>
<div class="lesson" style="width: 260px; margin-top: 10px">
    <h2>requirements:</h2>
    <ul>
        <li>must have letter, number, and special character</li>
        <li>give your security number</li>
    </ul>
</div>
</div>
<div class="lesson" style="margin-left: 0px">
    <h2>homework:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Amet luctus venenatis lectus magna. Neque sodales ut etiam sit amet. Faucibus nisl tincidunt eget nullam non nisi est.
</div>
</div><center><p><a href="https://finchscodes.tumblr.com" style="text-decoration: none; color: #fff; font-size: 10px;" target="_blank">CODED BY FINCH</a></center>
</div>