thya's article - color BG

<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:#e6e6fa;padding:5%;background-size:cover">
<div style="background-color:rgba(255, 255, 255, 0.3);padding:5%;border:2px solid">
<center>
<htitle>Article Title Here</htitle>
<p>
<stitle>- Subtitle Right Here -</stitle></center>

<hr style="border:double;border-width:thin;">
<span><marquee direction="right">Edition #01 - DD/MM/YY</marquee>
<hr style="border:double;border-width:thin;">


<p>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>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/c4/1d/1e/c41d1ebbe5f83eb1b93ea3cc8c454c23.jpg" style="width:150px;height:150px;margin-left:2px;margin-right:10px;margin-top:10px;margin-bottom: 10px;border: #000 5px double;position:relative;object-fit:cover">
<img src="https://i.pinimg.com/474x/bc/9a/f4/bc9af4c2074cd1e679031a593d1e5b8d.jpg" style="float:left;width:150px;height:150px;margin-left:20px;margin-right:10px;margin-top:10px;margin-bottom: 10px;border: #000 5px double;position:relative;object-fit:cover">
<img src="https://i.pinimg.com/474x/b8/19/f4/b819f43a9aead63eea147d9f25352bcc.jpg" style="float:left;width:150px;height:150px;margin-left:2px;margin-right:10px;margin-top:10px;margin-bottom: 10px;border: #000 5px double;position:relative;object-fit:cover">
<img src="https://i.pinimg.com/474x/2e/a9/8d/2ea98d73615ab74bac6306562e8f3a53.jpg" style="float:left;width:150px;height:150px;margin-left:2px;margin-right:10px;margin-top:10px;margin-bottom: 10px;border: #000 5px double;position:relative;object-fit:cover">

<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="border:double;border-width:thin;">
✩ 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>


<p>
<hr style="border:double;border-width:thin;">
<span><marquee direction="right">Advertisement Slogan | Advertisement Here | Contact</marquee>
<hr style="border:double;border-width:thin;">

<center><img src="https://64.media.tumblr.com/d6a6ad767f9506b3d29936e18d921ba7/tumblr_pjmsotDW2F1wzypxlo1_500.gifv" style="border-radius:0%;width:120px;height:120px;object-fit:cover"><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>