[FTU CODE] - Newspaper (CODE)

<div class="container col-lg-10" style="margin: 0 auto; font-family: 'Times New Roman', Times, serif; color: #050404;">

<div class="row">

<!--FIRST PAGE-->

<div class="col p-4" style="background-image: url('https://images.unsplash.com/photo-1604147706283-d7119b5b822c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80'); background-size:cover; box-shadow: inset -3px 0px 6px -2px #888; ">

<h1 style=" border-bottom: 2px double black;"><b>BREAKING NEWS</b></h1>

<div class="justify-content-between">

<!--HEADLINE IMAGE-->

<div class="col-lg-7" style="background-image: url('https://via.placeholder.com/200?text=Image+Here'); height: 200px; background-size: cover;"> </div>

<!--BASIC INFO-->

<div class="col-lg-5" style="">

<h7 ><b>Basic Info</b></h7>

<HR style="margin:0px; margin-bottom:5px; border: 1px solid black;">

<!--INFO-->

<div style="margin:0px; padding:0px; border-bottom:1px solid black;" class="justify-content-between">

<p style="margin:0px;">Name:</p>

<p style="margin:0px;">content</p>

</div>

<div style="margin:0px; padding:0px; border-bottom:1px solid black;" class="justify-content-between">

<p style="margin:0px;">Gender:</p>

<p style="margin:0px;">content</p>

</div>

<div style="margin:0px; padding:0px; border-bottom:1px solid black;" class="justify-content-between">

<p style="margin:0px;">Age:</p>

<p style="margin:0px;">content</p>

</div>                    

<div style="margin:0px; padding:0px; border-bottom:1px solid black;" class="justify-content-between">

<p style="margin:0px;">Orientation:</p>

<p style="margin:0px;">content</p>

</div>

<div style="margin:0px; padding:0px; border-bottom:1px solid black;" class="justify-content-between">

<p style="margin:0px;">Species:</p>

<p style="margin:0px;">content</p>

</div>                    

<div style="margin:0px; padding:0px; border-bottom:1px solid black;" class="justify-content-between">

<p style="margin:0px;">Occupation:</p>

<p style="margin:0px;">content</p>

</div>                    

<div style="margin:0px; padding:0px; border-bottom:1px solid black;" class="justify-content-between">

<p style="margin:0px;">Worth:</p>

<p style="margin:0px;">content</p>

</div>

<div style="margin:0px; padding:0px; border-bottom:1px solid black;" class="justify-content-between">

<p style="margin:0px;">Status:</p>

<p style="margin:0px;">content</p>

</div>                    

</div><!--END BASIC INFO-->

</div><!--END FIRST SECTION-->

<div class="justify-content-between col-lg-15" style="">

<div><!--lIKES DISLIKES-->

<div class="col-lg-12 justify-content-between " style="">

<!--lIKES -->

<div class="">

<p style="margin:0px;"><b>Likes</b></p>

<HR style="margin:0px; margin-bottom:5px; border: 1px solid black;">

<p>

• content <br>

• content <br>

• content <br>

• content <br>

</p>

</div>

<!--DISLIKES-->

<div>

<p style="font-family: 'Diplomata', ; margin:0px;"><b>Dislikes</b></p>

<HR style="margin:0px; margin-bottom:5px; border: 1px solid black;">

<p style="margin-left: 10px">

• content <br>

• content <br>

• content <br>

• content <br>

</p>

</div>

</div>                    

<!--DESIGN NOTES-->    

<div>

<h7 style="font-family: 'Diplomata', "><b>Design</b></h7>

<HR style="margin:0px; margin-bottom:5px; border: 1px solid black;">              

<!--COLORS-->

<div class="content">

<div class="row" style="border: 5px solid black;">

<div class="col" style="background-color: #ffffff"> </div>

<div class="col" style="background-color: #808080"> </div>

<div class="col" style="background-color: #ffffff"> </div>

<div class="col" style="background-color: #808080"> </div>

<div class="col" style="background-color: #ffffff"> </div>

<div class="col" style="background-color: #808080"> </div>          

<!--YOU CAN ADD/DELETE AS MUCH AS YOU WANT-->

</div>

</div>

<!--NOTES-->

<div>

<p>

<center style="border-bottom: 2px solid black;"><span style="font-family: 'Diplomata', ; " > <b>Notes</b> <span style="float: right;"></span></span></center>

•  note <span style="float: right; ">•  trivia </span><br>

•  note <span style="float: right;">•  trivia </span><br>

•  note <span style="float: right;">•  trivia </span><br>  

•  note <span style="float: right;">•  trivia </span><br>

•  note <span style="float: right;">•  trivia </span><br>

</P>

<div class="clear" style="clear: both;"></div>

</div>

</div>

</div>

<!--DESIGN NOTES-->

<div class="col-lg-1"></div>

<!--PERSONALITY-->

<div class="col-lg-5" >

<h7 style="font-family: 'Diplomata', ;"><b>Personality</b></h7>

<HR style="margin:0px; margin-bottom:5px; border: 1px solid black;">

<p style=" overflow-y: auto; height:300px ">

This box will scroll!<br><br>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.

</p>

</div>

</div><!--END SECOND SECTION-->

</div><!--END FIRST PAGE-->

<!--SECOND PAGE-->

<div class="col p-4" style="background-image: url('https://images.unsplash.com/photo-1604147706283-d7119b5b822c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80'); background-size:cover; box-shadow: inset 3px 0px 5px -2px #888;">

<div class="justify-content-between" style="">

<div class="col-lg-8">

<h7 style="font-family: 'Diplomata', ;"><b>Story</b></h7>

<HR style="margin:0px; margin-bottom:5px; border: 1px solid black;">

<p style=" overflow-y: auto; height:150px ">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.

</p>

</div><!--STORY-->

<div class="col-lg-4" style="background-image: url('https://via.placeholder.com/200?text=Image+Here'); height: 200px; background-size: cover; background-position: center"> </div>

</div><!--STORY + IMAGE-->

<!--QUOTE-->

<div style="text-align: right;">

<center>

<h2 style="margin: 0px"><b>"Unbelievable"</b></h2>

</center>

<p>- Some random</p>

</div>

<!--RELATIONSHIPS || WILL SCROLL-->

<div class="content " style="">

<h7 style="font-family: 'Diplomata', ;"><b>Relationships</b></h7>

<HR style="margin:0px; margin-bottom:5px; border: 1px solid black;">                

<div style="overflow-y: auto; overflow-x: hidden; height: 300px">

<!--FIRST RELATIONSHIP-->

<div class="row justify-content-between">

<div class="col col-lg-8" style="">

<p><span style="font-family: 'Diplomata', ; font-size:10px">Name</span> | relationship</p>

<p style="overflow-y: auto; height: 80px; font-size: 12px">Write about their relationship here!<br> This box will scroll, but the scroll wont appear before three sentences. </p>

</div>

<div class="col col-lg-4" style=" background-image: url('https://via.placeholder.com/200?text=Image+Here'); height: 100px; background-size: cover; background-position: center"></div>

</div>

<!--FIRST RELATIONSHIP-->

<div class="row justify-content-between">

<div class="col col-lg-4" style=" background-image: url('https://via.placeholder.com/200?text=Image+Here'); height: 100px; background-size: cover; background-position: center"></div>

<div class="col col-lg-8" style="text-align: right;">

<p><span style="font-family: 'Diplomata', ; font-size:10px">Name</span> | relationship</p>

<p style="overflow-y: auto; height: 80px; font-size: 12px">Write about their relationship here!<br> This box will scroll, but the scroll wont appear before three sentences. Lorem ipsum sit dolor amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>

</div>

</div>                    

</div><!--ALL REALTIONSHIPS END-->

</div>

<a style="Color:black;" href="https://toyhou.se/13582400.-ftu-code-newspaper">

<i class="fal fa-code"></i>

</a>

</div><!--END SECOND PAGE-->

</div><!--row-->

</div><!--END bg-->