i'm a legit snack | article

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<style>
::-webkit-scrollbar {width: 5px; background: #eee;}
::-webkit-scrollbar-thumb {background: #6b6b6b}
.body{
	width: 600px;
    background: #fff;
    margin: auto;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.2);
    font-family: 'Poppins'
}
.title{
	display: flex;
    justify-content: center;
    padding: 10px;
    background: linear-gradient(138deg, rgba(107,107,107,1) 25%, rgba(141,176,121,1) 75%);
    color: #fff;
    font-weight:bold;
    text-transform: uppercase;
    border: 1px solid rgba(0,0,0,0.2);
    margin-bottom: 10px
}
.title2{
	color: #6b6b6b;
    border-bottom: 5px solid #8DB079;
  	text-transform: uppercase;
    font-size: 25px
}
.picture{
    width: 180px;
    border: 1px solid rgba(0,0,0,0.2);
    height: 220px;
    display: flex;
   	align-items: flex-end;
    justify-content: center;
    font-family: 'Poppins'
}
.caption{
	background: #6b6b6b;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    padding: 10px;
    width: 100%;
    font-size: 20px;
    font-family: 'Poppins';
    font-weight: bold;
    position: relative;
    z-index: 3
}
img{
	outline: 1px solid #fff;
    outline-offset: -10px;
    border: 1px solid rgba(0,0,0,0.2);
    object-fit: cover;
}
.text{
	text-align: justify;
    font-size: 12px;
    color: #000;
    font-family: 'Montserrat'
}
.text:first-letter{
	color: #8DB079;
    font-size: 25px;
    font-weight: bold;
    float: left;
    margin-right: 10px
}
.challenge{
	float: right;
    padding-left: 10px;
    color: #8DB079;
    margin: 15px 20px 0px 10px;
    font-size: 25px;
    font-weight: uppercase;
    text-shadow: 1px 1px 5px #6b6b6b;
    border-left: 5px solid #8DB079;
    line-height: 80%;
    width: 100px
}
</style>
<div class="body">
<div class="title">the good place</div>
<div class="text">
<div class="picture" style="background: url(https://www.bu.edu/lernet/artemis/years/2019/projects/StudentWebsites/Artemis_Websites2019/KatiesAboutMeWebsite/pictures/peepchili.gif)center; background-size: cover; float: left;margin-right: 10px">
<div class="caption"><div style="border-bottom: 5px solid #fff">your name</div></div>
</div>
<p>Lorem ipsum dolor sit amet, errem recteque splendide eum ad, ex has erant ceteros explicari, ut putent vituperatoribus vel. Nam denique tractatos eu, mel ex adipisci praesent facilisis. Vix tantas propriae prodesset id. Agam lucilius consequat eam id, exerci maluisset in mei.

<p>Id quo postea tritani, no qui iriure appellantur comprehensam. Urbanitas adolescens cu mel, quem perpetua definiebas vix ex. Tollit tibique no sed. Aeterno scripta quaerendum qui ut, no ocurreret evertitur duo. Sed ne epicuri volutpat expetenda, pri stet oblique in. Has ut ceteros efficiantur, vero pericula an eam. Ne populo dissentiet est.

</div>
<div style="display: flex; margin-bottom: 10px">
<div style="width: 50%">
<img src="https://i.pinimg.com/originals/55/b3/c3/55b3c34c21ec7a3727e4cd5b7f811323.gif" style="height: 290px;">
</div>
<div style="width: 50%;margin-left: 10px; position: relative">
<div class="title">is this a cry</div>
<div class="text" style="overflow: auto; height: 235px; padding: 0px 10px;">
<p>Lorem ipsum dolor sit amet, errem recteque splendide eum ad, ex has erant ceteros explicari, ut putent vituperatoribus vel. Nam denique tractatos eu, mel ex adipisci praesent facilisis. Vix tantas propriae prodesset id. Agam lucilius consequat eam id, exerci maluisset in mei.
<p>Id quo postea tritani, no qui iriure appellantur comprehensam. Urbanitas adolescens cu mel, quem perpetua definiebas vix ex. Tollit tibique no sed. Aeterno scripta quaerendum qui ut, no ocurreret evertitur duo. Sed ne epicuri volutpat expetenda, pri stet oblique in. Has ut ceteros efficiantur, vero pericula an eam. Ne populo dissentiet est.
</div>
</div>
</div>
<div class="title2">You’re devastated right now</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, vim viris homero no. Vel graecis intellegebat eu, voluptaria consetetur pro ex. Dicam postea percipit quo ut. Expetendis concludaturque ea ius, at cibo meis. Ne pri assentior expetendis, mei et reque porro reprimique. Ea eos equidem accusam, pro alii ullum an, rebum movet timeam an has.

<p>Duo eu quem feugiat, fastidii perfecto qualisque ei vis. At vix case augue omittam. Purto phaedrum ei ius. Ad sea civibus voluptatibus, vis ne sanctus similique. Dolorem lobortis ea has, amet nullam iudicabit ut ius, an nulla clita vis. Veri eripuit mnesarchum at qui, ex vim fabellas assentior disputando, ea vel vivendum voluptaria inciderint. Id assueverit theophrastus quo, quem iisque invidunt nam in.

<p>Ei mea prompta expetendis. Democritum deterruisset ne mei, nec utamur adipisci et, oblique deleniti gubergren vel no. Mea mucius alterum ea. Per no meis dolore oporteat, suas nonumes pertinax cu mel, iudico elaboraret est id. Mel eius laoreet debitis et, in autem corrumpit has, no dignissim moderatius mei. Te mei veri reque complectitur, ea illum ridens aliquando nec, pri alii propriae disputationi ut.
</div>
<div class="text" style="border-top: 1px solid rgba(0,0,0,0.2); border-bottom: 1px solid rgba(0,0,0,0.2);margin-bottom: 10px">
<div class="challenge">challenge for the week:</div>
<p>TOUCH SOME GRASS JESUS CHRIST Lorem ipsum dolor sit amet, vim viris homero no. Vel graecis intellegebat eu, voluptaria consetetur pro ex. Dicam postea percipit quo ut. Expetendis concludaturque ea ius, at cibo meis.
</div>
<img src="https://66.media.tumblr.com/8e904d0d2be818c2e6bcfd43461fe185/7c3edca82a82fc0d-f3/s540x810/32945c67ee86787c6d7ffa059707212c796770b2.gifv" style="width: 100%; height: 100px">
<div style="margin-top: 10px; font-size: 15px;text-align: center; font-family: 'Poppins';text-transform: uppercase;"><a href="https://finchscodes.tumblr.com" style="text-decoration: none;color: #6b6b6b;" target="_blank"> Coded by Finch</a></div>
</div>