<div class="newspaper">
<div class="header">
<div class="header__banner">
<div class="header__banner__left">★ ★ ★ ★ ★</div>
<div class="header__banner__title">HELL CONVENTION IN TOWN</div>
<div class="header__banner__right">★ ★ ★ ★ ★</div>
</div>
<div class="header__title">
<span>The</span>
<span>Scranton</span>
<span>Times</span>
</div>
<div class="newspaper__subheader">
<div class="divider"></div>
<div class="newspaper__subheader__content">
<span>Scranton, Pennsylvania</span>
<span>Wednesday March 25</span>
<span>7 Pages</span>
</div>
<div class="divider"></div>
</div>
</div>
<h1 class="newspaper__title">
<div class="newspaper__line newspaper__line--first"><span>Scranton</span><span>Area</span><span>Paper</span></div>
<div class="newspaper__line newspaper__line--second">
<span>Company</span>
<span>Dunder</span>
<span>Mifflin</span> </div>
<div class="newspaper__line newspaper__line--third">
<span>Apologizes</span>
<span>To</span>
<span>Valued</span>
<span>Client</span>
</div>
<div class="newspaper__line newspaper__line--fourth">
<span>Some</span>
<span>Companies</span>
<span>Still</span>
<span>Know</span>
</div>
<div class="newspaper__line newspaper__line--fifth">
<span>How</span>
<span>Business</span>
<span>Is</span>
<span>Done</span>
</div>
</h1>
<div class="divider"></div>
<div class="newspaper__grid">
<div>
<div class="newspaper__header--2">Serial Strangler</div>
<h3 class="newspaper__header--1">Scranton Strangler Strikes Again</h3>
<author class="newspaper__author">by William M. Buttlicker</author>
<div class="newspaper__author__title">Chief Editor</div>
<p>SCRATON, PA, * Scranton area police are investigating a third strangling that took place last night. Police were called to the 900 block of Slough Avenue around 10:30 pm after finally officers were unable to locate the victim. The vitcims identity has been released though a spokesman for the police department said they expect to in the coming days.
</p>
<p>Police are beginning to suspect that the city may be witnessing their first serial killer and is warning its residents to remain vigilant. Investigators are currently testing DNA evidence from the most recent strangling in an attempt to link the three murders.</p>
<p>"We cannot confirm at this point that this is a repeat offender but we are looking into the similarties of the victims and hop to verify if a DNA link exists." Scranton Police Chief Spud Williams said at a press conference, CONT'D PAGE 4</p>
<div class="first-column-img"></div>
</div>
<div>
<blockquote>"They are trying to make me an escape goat. If I am fired, I swear to God, that every single piece of copier paper in this town is going to have the F-word on it. The F-word. You have one day " - Michael Scott, Regional Manager Dunder Mifflin Scranton</blockquote>
<div class="main-image"></div>
<div>
<author class="newspaper__author">by Chad Light</author>
<div class="newspaper__author__title">News Staff Writer</div>
</div>
<div class="newspaper__threecolumn">
<div>
<p>SCRANTON, PA * Dunder Mifflin Paper Products was thurst into damage control early Thursday morning as the company reported that 500 cases of 24lb cream letter stock paper had been shipped with an obscene watermak feature beloved cartoon mouse and a duck.
</p>
<p> Dunder Mifflin Alleges that a disgruntled employee at the manufacturer the produces the paper palced the watermark on select cases before being shipped to Dunder Mifflin for delivery to their customers. Dunmore High School was one of the local organizations affected by the watermark as they sent out their prom invitations on the cream colored paper.</p>
<p>
Michael Scott, the regional manger for dunder Mifflin Scranton, elevated his team to threat level midnight. He also had his accounting department
</p>
</div>
<div>
<p>
assit efforst to help customers affected by the crisis. "When a company scews up, best thing to do is call a press conference. Alert the media and you control the story. Wait for them to find out and the story controls you. That's what happened to OJ," said Scott.
</p>
<p>
Creed Bratton, Director of Quality Assurance for Dunder Mifflin Scranton, stated that he was scheduled to meet with Debbie Brown, a representative at the paper manufacturer, for a quality check the week prior but was informed that she was out with the flu, or for an emergency dentist appointment, preventing Bratton from catching the mistake. Calls to Debbie Brown were not returned. The Times later learned that Brown had been relieved of her duties at the paper manufacturer as a result of the watermakr situation.
</p>
<p>
Barbara Allen, one of Dunder
</p>
</div>
<div>
<p>
Mifflin's important and most tenured clients, was invited to the branch for a formal apology by Michael Scott. "Mrs. Allen is our most important client, because every client is our most important client, even though she's a pretty unimportant client," said Scott.
</p>
<p>
"And so, with the eyes of the nation upon us, I would like to say that Dunder Mifflin truly regrets this unfortunate incident and, as a gesture of gratitude for your continued loyalty, Mrs. Allen, I would like to present
</p>
<div class="check-img"></div>
</div>
</div>
</div>
<div>
<p>you with this noveltly check for six months of free paper, or 25 reams, whichever comes first."
</p>
<p>
Allen, clearly upset and frustrated with the "watermark boner," demanded that Scott resign his position to satisfy her after being asked how the company could make the situation right. Allen then state that as she headof the company Scott should lose his position. "You should lose your job!" scolded ALlen. Scott refused resignation, stating to Allen that "it wasn't my fault, it was the guys at the paper mill."
</p>
<p> Dwight Schrute, Assistant to the Regional Manager and Senior Sales Associate, state that the "sex appeared to be consensual as both animals were smiling."
</p>
<p>
Allen threatened to contact the Better Business Bureau as she was asked to leave to which Scott retorted that he would be calling the "ungrateful beyotch hotline."
</p>
<p>
In a panic, Scott released an apology video that was posted online. In it, Scott states that "it wasn't me (referencing who put the watermark on the paper). They are trying to make me an escape goat."
</p>
<p>
The Scranton Branch of Dunder Mifflin Paper recently merged with the Stamford, CT branch as the company looked to cut costs. Dunder Mifflin also has branches in Buffalo Albany, Utica, Yonkers, Akron, Camden, binghamton and Nashua. The closure of the Stamford branch folows a closure in Pittsfield, MA due to employees possible unionization. As of press time, David Wallace, Chief Financial Officer, and Jan Levison, VP of Northeast Sales, did not respond to several requests for comment on this story.
</p>
</div>
</div>
<div class="newspaper__bottom">
<div>
<div class="newspaper__bottom__subtitle">Hell Convention in Town</div>
<div class="newspaper__bottom__title">Hotels are "all booked up"</div>
<div class="newspaper__bottom__text">"As a hell convention decends upon the Scranton area this weekend, hotels are reporting they're completely sold out and expect this week," SEE STORY PAGE 2</div>
</div>
<div class="newspaper__bottom__vacancy">
</div>
<div class="vertical-divider"></div>
<div>
<div class="newspaper__bottom__subtitle">Flasher Sought</div>
<div class="newspaper__bottom__title newspaper__bottom__title--2">Police Seek man in coat for flashing</div>
<div class="newspaper__bottom__text">Police are seeking information on a man who is suspected of flashing a woman," SEE STORY, PAGE 5</div>
</div>
<div class="vertical-divider"></div>
<div>
<div class="newspaper__bottom__subtitle">Lake Scranton</div>
<div class="newspaper__bottom__title">Lake Scranton is the eight largest</div>
<div class="newspaper__bottom__text">"Lake Scranton officially becomes the eigth largest indigenuous body of water," SEE STORY PAGE 12</div>
</div>
<div class="vertical-divider"></div>
<div>
<div class="newspaper__bottom__subtitle">Weather Today</div>
<div class="newspaper__bottom__title">Rainy Weekend</div>
<div class="newspaper__bottom__weather">
<div>
<div class="cloud"></div>
<div class="weather__text">8 am</div>
<div class="weather__text">79°</div>
</div>
<div>
<div class="cloud"></div>
<div class="weather__text">Noon</div>
<div class="weather__text">85°</div>
</div>
<div>
<div class="cloud"></div>
<div class="weather__text">4 pm</div>
<div class="weather__text">88°</div>
</div>
<div>
<div class="cloud"></div>
<div class="weather__text">8 pm</div>
<div class="weather__text">81°</div>
</div>
</div>
<div class="copyright">2015. All rights reserved.</div>
</div>
</div>
</div>@import url("https://fonts.googleapis.com/css?family=UnifrakturCook:700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');
body {
background: #222;
margin: 0;
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
}
.divider {
height: 1px;
width: 100%;
background: #999;
}
.newspaper {
background: #fff8ed;
width: 1120px;
min-height: 600px;
margin: 40px 0;
border-radius: 2px;
padding: 65px 90px;
background: linear-gradient(
to bottom,
rgba(204, 205, 191, 1) 0%,
rgba(226, 222, 210, 1) 20%,
rgba(226, 222, 210, 1) 67%,
rgba(204, 205, 191, 1) 100%
);
box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.75);
}
.header {
position: relative;
z-index: 1;
}
.header__banner {
position: relative;
max-width: calc(100% - 375px);
margin: 0 auto;
display: block;
height: 35px;
text-align: center;
color: white;
background: #bf5750;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.15) inset, 0 6px 10px rgba(0, 0, 0, 0.15);
}
.header__banner__title {
font-size: 33px;
letter-spacing: 1.5px;
display: flex;
align-self: center;
align-items: center;
justify-content: center;
height: 100%;
font-weight: 900;
color: #e6e6e6;
}
.header__banner::before,
.header__banner::after {
content: "";
display: inline-block;
position: absolute;
z-index: -1;
left: -190px;
top: 10px;
display: block;
width: 200px;
height: 0px;
color: #e6e6e6;
border: 17.5px solid #bf5750;
border-right: 10px solid #bf5750;
border-bottom-color: #bf5750;
border-left-color: transparent;
}
.header__banner::after {
left: auto;
right: -190px;
border-left: 10px solid #c65a58;
border-right: 15px solid transparent;
}
.header__banner__left,
.header__banner__right {
position: absolute;
top: 10px;
left: -160px;
font-size: 25px;
height: 40px;
}
.header__banner__right {
left: auto;
right: -160px;
}
.header__banner__left::after,
.header__banner__right::after {
content: "";
z-index: 1;
position: absolute;
right: -48px;
bottom: 5px;
height: 0;
width: 0;
border-top: 10px solid #a54846;
border-left: 37.5px solid transparent;
}
.header__banner__right::after {
left: -45px;
bottom: 5px;
border-top: 10px solid #a54846;
border-right: 37.5px solid transparent;
border-left: none;
}
.header__title {
font-family: "UnifrakturCook";
font-size: 144px;
font-weight: 200;
margin: 0;
display: flex;
justify-content: space-between;
width: 100%;
color: #333;
letter-spacing: 1px;
}
.newspaper__subheader {
margin-bottom: 20px;
}
.newspaper__subheader__content {
font-size: 14px;
padding: 2px 0px;
color: #555;
display: flex;
justify-content: space-between;
}
.newspaper__subheader__content span {
flex: 1;
}
.newspaper__subheader__content span:nth-child(2) {
text-align: center;
}
.newspaper__subheader__content span:nth-child(3) {
text-align: right;
}
.newspaper__title {
text-transform: uppercase;
text-align: justify;
font-weight: 900;
font-family: Impact, "Oswald", sans-serif;
font-size: 65px;
letter-spacing: 1px;
line-height: 0.85;
color: #333;
margin: 0;
margin-top: 8px;
margin-bottom: 20px;
}
.newspaper__line span {
-webkit-text-size-adjust: 100%;
}
.newspaper__line {
display: grid;
width: 1120px;
max-width: 1120px;
grid-column-gap: 20px;
grid-row-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
-webkit-text-size-adjust: 100%;
}
.newspaper__line--first {
font-size: 123.3px;
}
.newspaper__line--second {
font-size: 106.3px;
}
.newspaper__line--third {
font-size: 92.3px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.newspaper__line--fourth {
font-size: 92.5px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.newspaper__line--fifth {
font-size: 120.9px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.newspaper__grid {
display: grid;
grid-template-columns: 208px 1fr 208px;
grid-gap: 20px;
margin-top: 20px;
}
.newspaper__header--1 {
font-weight: 700;
font-size: 38px;
margin: 4px 0px 8px 0px;
font-family: Impact, "Oswald", sans-serif;
line-height: 38px;
}
.newspaper__header--2 {
font-size: 25px;
color: #af3f50;
font-weight: 700;
letter-spacing: 0.5px;
margin-bottom: 0px;
font-family: sans-serif;
}
.newspaper__author {
font-weight: 800;
font-family: Impact, "Oswald", sans-serif;
font-size: 11px;
}
.newspaper__author__title {
font-style: italic;
font-size: 13px;
margin-bottom: 8px;
}
.newspaper__grid p {
text-align: justify;
text-indent: 10px;
margin: 0;
line-height: 16px;
}
.newspaper__grid blockquote {
text-align: center;
font-style: italic;
margin: 0;
font-size: 19px;
margin-bottom: 8px;
}
.newspaper__threecolumn {
display: grid;
grid-template-columns: 208px 208px 208px;
grid-gap: 20px;
}
.first-column-img {
background-image: url(https://d3aya7xwz8momx.cloudfront.net/wp-content/uploads/2018/01/Police-tape.jpg);
width: 208px;
height: 208px;
background-size: cover;
background-position-x: -45px;
background-repeat: no-repeat;
filter: saturate(0.7);
margin-top: 8px;
}
.column-img {
width: 208px;
object-fit: stretch;
}
.check-img {
width: 208px;
height: 188px;
margin-top: 4px;
background-image: url(https://i.imgur.com/ll51JF4.png);
background-size: cover;
background-repeat: no-repeat;
}
.main-image {
display: block;
margin: auto;
width: 100%;
height: 315px;
background-image: url(https://i.imgur.com/JNjIbMB.jpg);
background-size: cover;
}
.newspaper__bottom {
display: grid;
grid-template-columns: 270px 100px 1px 240px 1px 240px 1px 208px;
grid-gap: 10px;
margin-top: 30px;
}
.newspaper__bottom__subtitle {
font-size: 20px;
color: #af3f50;
font-weight: 900;
letter-spacing: 0.5px;
margin-bottom: 0px;
font-family: sans-serif;
line-height: 20px;
}
.newspaper__bottom__title {
font-weight: 700;
font-size: 25.5px;
margin: 8px 0px 14px 0px;
font-family: Impact, "Oswald", sans-serif;
line-height: 25.5px;
}
.newspaper__bottom__title--2 {
margin: 8px 0px 10px 0px;
}
.newspaper__bottom__text {
text-align: justify;
margin: 0;
line-height: 16px;
}
.newspaper__bottom__vacancy {
background-image: url(https://live.staticflickr.com/2079/2226165923_7ac2bcf5bc_z.jpg);
width: 100%;
height: 134px;
background-size: cover;
background-position-x: -25px;
filter: saturate(0.45);
}
.vertical-divider {
height: 100%;
width: 1px;
background: #adadad;
}
.newspaper__bottom__weather {
display: grid;
grid-template-columns: repeat(4, 45px);
grid-gap: 0px;
}
.cloud {
width: 20px;
height: 12.45px;
background: #4883a4;
border-radius: 200px;
position: relative;
z-index: 0;
margin-top: 8px;
margin-bottom: 8px;
}
.cloud:after {
content: "";
background: #4883a4;
position: absolute;
border-radius: 100px;
transform: rotate(30deg);
width: 11.88px;
height: 11.88px;
top: -5px;
left: 4px;
right: auto;
}
.weather__text {
font-size: 12px;
font-weight: bold;
line-height: 12px;
font-family: sans-serif;
}
.copyright {
font-family: sans-serif;
font-weight: bold;
margin-top: 8px;
font-size: 13px;
}
@media (max-width: 1340px) {
.newspaper {
transform: scale(0.85) translateY(-100px);
}
}
@media (max-width: 1140px) {
.newspaper {
transform: scale(0.75) translateY(-300px);
}
}
@media (max-width: 1019px) {
.newspaper {
transform: scale(0.65) translateY(-500px);
}
}
@media (max-width: 900px) {
.newspaper {
transform: scale(0.55) translateY(-800px);
}
}
@media (max-width: 769px) {
.newspaper {
transform: scale(0.45) translateY(-1200px);
}
}
@media (max-width: 620px) {
.newspaper {
transform: scale(0.35) translateY(-1850px);
}
.newspaper__line {
text-align: justify;
}
.newspaper__line span {
display: block;
width: 100%;
margin: 0px 10px;
text-align: justify;
}
.newspaper__line span:first-child {
margin-left: 0;
}
.newspaper__line span:last-child {
margin-right: 0;
}
.newspaper__line--first {
font-size: 114px;
}
.newspaper__line--second {
font-size: 99.5px;
}
.newspaper__line--third {
font-size: 84px;
}
.newspaper__line--fourth {
font-size: 87px;
}
.newspaper__line--fifth {
font-size: 113px;
}
}
@media (max-width: 480px) {
.newspaper {
transform: scale(0.25) translateY(-3000px);
}
}
@media (max-width: 340px) {
.newspaper {
transform: scale(0.20) translateY(-4000px);
}
}
body {
filter: blur(2px);
}/*
This is a poor recreation of a newspaper design by datemike1 in CSS
https://www.etsy.com/listing/739942336/the-office-scranton-times-newspaper
*/
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.