moosic | article

<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: #fff;
    font-family: 'Montserrat'
}
.text{
    padding: 10px;
    margin: 10px;
    text-align: justify;
    font-size: 12px;
    color: #000;
    border-top: 1px solid rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(0,0,0,0.2)
}
.header{
    color: #B75D69;
    text-align: center;
    font-family:'georgia';
    font-size: 40px;
    font-weight: bold;
    font-style: italic;
    margin: 20px
}
.subheader{
    font-size: 10px;
    text-transform: uppercase;
    font-weight: normal;
    font-style: normal;
    color: #000;
    margin-top: -5px;
    font-family: 'Montserrat';
}
.moosic{
    -webkit-mask-image: url(https://i.postimg.cc/FRxnDMTB/oop.png);
    background: url(https://images.pexels.com/photos/934067/pexels-photo-934067.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500)center;
    background-size: cover;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 150px;
    -webkit-mask-size: 100% 100%;
    border-bottom: 4px solid rgba(0,0,0,0.2)
}
    ul {
    padding-left:15px;
    font-size: 20px
}
    ul li {
        list-style-type:none;
        font-size: 12px
    }
    ul li:before {
          content: "— ";
          text-indent: -5px
    }
</style>
<div class="body"><div class="moosic"></div>
<div class="header">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Simple_Music.svg/600px-Simple_Music.svg.png" style="; margin-right: 10px; height: 30px">
<br>music
<div class="subheader"> ah, screaming children | year 69, week 420</div></div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi leo urna molestie at elementum eu facilisis. Fringilla urna porttitor rhoncus dolor purus non. 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. Sem viverra aliquet eget sit amet tellus cras adipiscing. 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. Nulla at volutpat diam ut venenatis tellus in metus. Tortor vitae purus faucibus ornare suspendisse sed nisi lacus sed. Turpis egestas maecenas pharetra convallis posuere morbi leo urna molestie. Condimentum id venenatis a condimentum vitae sapien pellentesque habitant. Turpis egestas maecenas pharetra convallis posuere. Mauris rhoncus aenean vel elit scelerisque. Amet aliquam id diam maecenas ultricies mi eget mauris pharetra. Diam vel quam elementum pulvinar etiam. Suspendisse ultrices gravida dictum fusce ut placerat. Sed nisi lacus sed viverra tellus in. Eu lobortis elementum nibh tellus molestie nunc. Sed lectus vestibulum mattis ullamcorper. Tincidunt dui ut ornare lectus sit amet est placerat in. Enim nec dui nunc mattis enim ut tellus. At volutpat diam ut venenatis tellus in. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Interdum velit laoreet id donec ultrices. Faucibus turpis in eu mi bibendum neque egestas congue.
</div>
            <ul>LESSON:
                <li>one</li>
                <li>two</li>
                <li>you</li>
            </ul>
            <ul>REQUIREMENTS:
                <li>one</li>
                <li>two</li>
                <li>you</li>
            </ul>
<center>if you have any questions, perish
<div style="display:flex; padding: 20px"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/Huey_Long_Signature.svg/1280px-Huey_Long_Signature.svg.png" style="width: 400px;"><img src="https://64.media.tumblr.com/eced3886cf943ce7bba6a0e23adb4bbf/20638eb9ea1f1a8c-0e/s400x600/7019cc2a362e911fc9fb362ff96d28e95d22af2e.gifv" style="height: 100px; width: 100px; object-fit: cover; border-radius: 50%; border: 1px solid rgba(0,0,0,0.2); margin-left: 20px"></div></center>
            <div class="subheader" style="margin: 10px 0px; text-align: center"> <a href="https://finchscodes.tumblr.com" style="text-decoration: none;color: #000; " target="_blank">CODED BY FINCH</a></div>
<div class="moosic" style="transform: rotate(180deg)"></div>