Rising Star [Interview]

<!--
 ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
   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;
  }

  .interviewRow {
    width:100%;
    padding:10px; box-sizing:border-box;
    margin:10px 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://townsquare.media/site/252/files/2018/05/selena-gomez0back-to-you.png" 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">


      <div class="interviewRow" style="background-color:#f7f7f2; margin-top:-10px;">
        <img src="https://pbs.twimg.com/profile_images/892295415500025856/y9E8PvLe.jpg" style="width:100px; height:100px; float:left; margin:0px 10px 10px 0px"/>
        <p><b>Interviewer</b></p>
        <p>Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Urna neque viverra justo nec ultrices dui sapien. Urna neque viverra justo nec ultrices dui sapien. Bibendum at varius vel pharetra vel turpis. Sociis natoque penatibus et magnis dis parturient. </p>
      </div>

      <div class="interviewRow" style="background-color:#f7f7f2; text-align:right">
        <img src="https://i.pinimg.com/564x/d3/40/33/d34033f4e836b49ee49454fa13f949ab.jpg" style="width:100px; height:100px; float:right; margin:0px 0px 10px 10px"/>
        <p><b>Selena Gomez</b></p>
        <p>Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Urna neque viverra justo nec ultrices dui sapien. Urna neque viverra justo nec ultrices dui sapien. Bibendum at varius vel pharetra vel turpis. Sociis natoque penatibus et magnis dis parturient. </p>
      </div>


      <div class="interviewRow" style="background-color:#f7f7f2;">
        <img src="https://pbs.twimg.com/profile_images/892295415500025856/y9E8PvLe.jpg" style="width:100px; height:100px; float:left; margin:0px 10px 10px 0px"/>
        <p><b>Interviewer</b></p>
        <p>Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Urna neque viverra justo nec ultrices dui sapien. Urna neque viverra justo nec ultrices dui sapien. Bibendum at varius vel pharetra vel turpis. Sociis natoque penatibus et magnis dis parturient. </p>
      </div>

      <div class="interviewRow" style="background-color:#f7f7f2; text-align:right">
        <img src="https://i.pinimg.com/564x/d3/40/33/d34033f4e836b49ee49454fa13f949ab.jpg" style="width:100px; height:100px; float:right; margin:0px 0px 10px 10px"/>
        <p><b>Selena Gomez</b></p>
        <p>Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Urna neque viverra justo nec ultrices dui sapien. Urna neque viverra justo nec ultrices dui sapien. Bibendum at varius vel pharetra vel turpis. Sociis natoque penatibus et magnis dis parturient. </p>
      </div>


      <br>

   <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>