Rising Star [Article]

<!--
 ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
   Thank you for using my code!
 ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝
Rules to Follow:

✶ Do not EVER delete or remove the credits of the coder or claim this code as your own.
✶ Do not redistribute this code, no matter how much you edited it as a base or otherwise!
✶ If you need any help in fixing codes, contact me on Discord (Kawaii-lau#4770).
✶ If you like to share this code, send to your friends the link of my blog, https://kawaii-lau.tumblr.com , and support me!

If you like a custom code, check out my blog to see if requests are open!
XOXO, Lauren.
 ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
   2021 © Coding by Kawaii-Lau
 ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝ -->

<style>
  :root {
    --articleBgColor:rgb(232, 228, 216);
    --articleBoxDark:#cfcbc2;
    --articleImgPosition:-20px; /* Adjust position of header image so the newspaper name/logo wont cover it */

    --fontFamily:serif;
    --textColor:rgb(20, 20, 20);
    --firstLetterColor:black;
  }

  .mainBox {
    max-width:600px; min-height:1000px;
    background:var(--articleBgColor);
    box-shadow:0px 2px 5px black;
    margin:15px auto;
    box-sizing:border-box;
    position:relative;

    font-family:var(--fontFamily);
    color:var(--textColor);
  }

  .newspaperName {
    position:relative;
    top:5px;
    z-index:10;
  }

  .articleImg {
    position:relative;
    z-index:8;
    top:var(--articleImgPosition);
  }

  .articleTitle {
    max-width:490px;
    margin:0px auto;
    position:relative;
    z-index:10;
    top:-10px;
    box-sizing:border-box;
    padding:0px 20px;
  }

  .article {padding:5px 10px; text-align:justify;}
  p.nd::first-letter {
    font-size:102px;
    line-height:0px;
    font-weight:bold;
    font-style:italic;
    float:left;
    padding:25px 10px 30px 0px;
    color:var(--firstLetterColor);
  }

  .fold {
    position:relative;
    width:100px;
    box-sizing:border-box;
    padding:10px;
    background:var(--articleBoxDark);
    text-align:left;
  }
  .author {
    float:left;
    margin:10px 10px 0px 0px;
  }
</style>


<main class="mainBox">
  <header class="newspaperName"><!-- NEWSPAPER -->
    <img src="https://fontmeme.com/permalink/210810/ba90e75938acd6affc37094edce95c38.png" style="width:95%; margin:0px auto; display:block;"/>
  </header>

  <header class="articleImg"><!-- HEADER IMAGE -->
    <img src="https://newyorkstyleguide.com/wp-content/uploads/2018/12/Selena-Gomez-Lifestyle-Photos-2018.jpg" style="width:100%; margin:0px auto; display:block; filter:brightness(140%);"/>
  </header>

  <article>

    <div class="articleTitle">
      <!-- TITLE -->
      <h1 style="font-size:42px; margin:0px; text-align:justify; line-height:34px;  color:black;"><i>Selena Gomez</i> talks about politics, faith, and the making of music of her career</h1>


      <!-- INTRODUCTION PARAGRAPH / FIRST PARAGRAPH -->
      <p style="margin-top:4px"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </b></p>
    </div>

    <!-- THE REST OF THE ARTICLE -->
    <div class="article">
      <p  class="nd">Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec. Integer quis auctor elit sed vulputate mi sit amet. In massa tempor nec feugiat nisl. Massa eget egestas purus viverra accumsan in nisl. Odio tempor orci dapibus ultrices in iaculis nunc sed. Non blandit massa enim nec dui nunc mattis enim.<br><br>

Sollicitudin ac orci phasellus egestas tellus rutrum tellus. Sit amet nisl purus in mollis nunc sed id semper. Vestibulum sed arcu non odio euismod. At tellus at urna condimentum mattis pellentesque id. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Sapien pellentesque habitant morbi tristique senectus et netus et. Aliquam purus sit amet luctus venenatis lectus magna. Aliquam ut porttitor leo a diam sollicitudin tempor id. Magna ac placerat vestibulum lectus mauris ultrices eros in. Erat velit scelerisque in dictum non consectetur a erat.<br><br>

Arcu felis bibendum ut tristique et egestas quis. Suspendisse in est ante in nibh. Proin libero nunc consequat interdum varius sit. Risus nullam eget felis eget. Dignissim suspendisse in est ante in nibh mauris. Mauris augue neque gravida in fermentum. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Sociis natoque penatibus et magnis dis. A lacus vestibulum sed arcu non odio euismod. Est placerat in egestas erat imperdiet. Tincidunt eget nullam non nisi. Pulvinar sapien et ligula ullamcorper malesuada proin. Adipiscing at in tellus integer feugiat. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Adipiscing elit duis tristique sollicitudin nibh. Tristique nulla aliquet enim tortor at auctor urna nunc. Erat imperdiet sed euismod nisi porta lorem mollis aliquam.</p>

   <footer class="author">
      <div class="fold">
        <img src="https://hindutrend.com/wp-content/uploads/2021/03/beautiful-girls-images-for-dp.jpg" style="width:100%"/>
        <p style="margin:0px;">
          <span style="color:#00888a; font-size:18px;"><b>Author<br> Name</b></span></p>
            <p style="font-size:14px;">Issue No. #000<br>
              MONTH DD, YEAR</p>
      </div>
    </footer>

      <!-- LAST PARAGRAPH -->
<p>Suspendisse potenti nullam ac tortor vitae purus faucibus. Id neque aliquam vestibulum morbi. Purus ut faucibus pulvinar elementum integer enim. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Urna neque viverra justo nec ultrices dui sapien. Bibendum at varius vel pharetra vel turpis. Sociis natoque penatibus et magnis dis parturient. Vitae sapien pellentesque habitant morbi tristique senectus et netus. Eget magna fermentum iaculis eu non. Ac auctor augue mauris augue neque gravida in.</p>
      <br><hr>

      <!--♡♡♡ DO NOT REMOVE CREDITS OR I WILL SUBMERGE YOU IN A LAKE FOR FAR TOO LONG ♡♡♡-->
      <p style="font-size:14px;">2021 &copy; Coding by <a href="https://kawaii-lau.tumblr.com/" target="_blank" style="color:#5e6141; text-decoration:none;"><b>Kawaii-Lau</b></a></p>
    </div>
  </article>
</main>