made with love || article

♡ hello friendo! so i made this article code for my lovely friend Thya. she needed one for a recipe article. it was a quick edit. the code is very adjustable, so it may or may not look wonky on a code tester. so you'll have to play around with the images and extra box at the bottom for it to fit to your needs. The overall code is 100% automatically adjusted to the space's width. just look out for the text, images, and box. ♡

best dreams,
kay <3


--CODE STARTS BELOW THIS TEXT--
<html>
<link href="https://fonts.cdnfonts.com/css/beauregard" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/abasterrules" rel="stylesheet">

<style>
/*Scrollbar*/
::-webkit-scrollbar {width: 0px;}
::-webkit-scrollbar-thumb {background: #fff;}
::-webkit-scrollbar-thumb:hover {background: #fff;}

@font-face {
font-family: 'Beauregard' sans-serif;
src: url('https://fonts.cdnfonts.com/css/beauregard')
}
htitle {
font-family:'Beauregard';
  font-size:50px;
  font-weight:light;
  }

@font-face {
font-family: 'ABasterRules', sans-serif;
src: url('https://fonts.cdnfonts.com/css/abasterrules')
}
stitle {
font-family: 'ABasterRules';
  font-size:30px;
  font-weight:light;
  letter-spacing:2px
  }

</style>

<div style="background:url(https://i.pinimg.com/474x/79/f7/f6/79f7f6da573aef63788da5cba0526bdf.jpg);padding:5%;background-size:cover">
<div style="background-color:rgba(255, 255, 255, 0.8);padding:5%;border:2px solid">
<center>
<htitle>Article Title Here</htitle>
<p>
<stitle>- Subtitle Right Here -</stitle></center>

<hr style="height:2px;border-width:0;color:#000;background-color:#000">
<span><marquee direction="right">Edition #01 - DD/MM/YY</marquee>
<hr style="height:2px;border-width:0;color:#000;background-color:#000">

<img src="https://i.pinimg.com/474x/c4/1d/1e/c41d1ebbe5f83eb1b93ea3cc8c454c23.jpg" style="float:left;width:150px;height:150px;margin-left:2px;margin-right:5px;margin-top:10px;margin-bottom: 20px;border: #000 5px double;object-fit:cover;position:relative">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet mauris lacus. Aliquam non arcu vitae ante cursus dictum. Integer eu ex purus. Phasellus imperdiet cursus lacinia. Nam mi velit, consectetur ut libero ut, semper varius risus. Fusce sit amet nisl finibus, porta ligula vel, ultricies libero. In convallis, magna non sollicitudin volutpat, dui orci tincidunt nisl, in ultrices est leo eu dui. Fusce vitae justo posuere, hendrerit orci eget, tempus nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet mauris lacus. Aliquam non arcu vitae ante cursus dictum. Integer eu ex purus. Phasellus imperdiet cursus lacinia. Nam mi velit, consectetur ut libero ut, semper varius risus. Fusce sit amet nisl finibus, porta ligula vel, ultricies libero. In convallis, magna non sollicitudin volutpat, dui orci tincidunt nisl, in ultrices est leo eu dui. Fusce vitae justo posuere, hendrerit orci eget, tempus nisl.

<p>
<img src="https://i.pinimg.com/474x/bc/9a/f4/bc9af4c2074cd1e679031a593d1e5b8d.jpg" style="float:right;width:150px;height:150px;margin-left:2px;margin-right:5px;margin-top:10px;margin-bottom: 10px;border: #000 5px double;object-fit:cover">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet mauris lacus. Aliquam non arcu vitae ante cursus dictum. Integer eu ex purus. Phasellus imperdiet cursus lacinia. Nam mi velit, consectetur ut libero ut, semper varius risus. Fusce sit amet nisl finibus, porta ligula vel, ultricies libero. In convallis, magna non sollicitudin volutpat, dui orci tincidunt nisl, in ultrices est leo eu dui. Fusce vitae justo posuere, hendrerit orci eget, tempus nisl.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet mauris lacus. Aliquam non arcu vitae ante cursus dictum. Integer eu ex purus. Phasellus imperdiet cursus lacinia. Nam mi velit, consectetur ut libero ut, semper varius risus. Fusce sit amet nisl finibus, porta ligula vel, ultricies libero. In convallis, magna non sollicitudin volutpat, dui orci tincidunt nisl, in ultrices est leo eu dui. Fusce vitae justo posuere, hendrerit orci eget, tempus nisl.
<p>
<center>

</center>

<center>
<div style="background: rgba(255, 255, 255, 0.0);padding:5%;border:#000 2px double;width:650px;margin-right:-3px;margin-left:4px">
<center>
<htitle style="font-size:30px">subtitle here</htitle>

<hr style="height:2px;border-width:0;color:#000;background-color:#000;">
✩ Add Topic Here<br>
✩ Add Topic Here<br>
<p>
✩ Add Topic Here<br>
✩ Add Topic Here<br>
<p>
✩ Add Topic Here<br>
✩ Add Topic Here
</center>
</div>

</center>
<p>
<hr style="height:2px;border-width:0;color:#000;background-color:#000">
<span><marquee direction="right">Advertisement Slogan | Advertisement Here | Contact</marquee></span>
<hr style="height:2px;border-width:0;color:#000;background-color:#000">

<center><img src="https://thumbs.gfycat.com/PastDimpledAmericanratsnake-max-1mb.gif" style="border-radius:0%;width:120px;height:120px;object-fit:cover;border: #000 double 5px"><p>

<span style="font-size:10px;">written by:</span><br><stitle>your name here</stitle></span></div>
    </div>
  <center><a href="https://kkodes.wixsite.com/dreamer" style="color:#000;font-size:12px;"><b><u>kay kodes</u></b></a></center>