Build a Newspaper Article-Lab (DAILY BUGLE)

I Built This
1 
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="styles.css">
      <title>Newspaper Article</title>
    </head>
    <body>
      <div class="newspaper">
    <div class="skybox">
      <div class="skybox-item">
        <p class="skybox-title">A Hard Season for<br>New York's Homeless</p>
        <p class="skybox-subtitle">Cardboard Living: Page 11</p>
      </div>
      <div class="skybox-item">
        <p class="skybox-title">Individual Rights<br>Going Up in Smoke</p>
        <p class="skybox-subtitle">The Last Word: Page 14</p>
      </div>
    </div>
      <div class="tagdate">
      <p class="tagline tiny">New York's Favorite Newspaper Since 1932</p>
      <p class="date tiny">October 5, 2026</p>
      </div>
      <div class="bugle-border">
  <div class="masthead">
    <span class="masthead-text"><i>DAILY</i></span>
    <img src="https://1000logos.net/wp-content/uploads/2024/09/Daily-Bugle-Emblem-500x281.png" class="logo" alt="Daily Bugle emblem" />
    <span class="masthead-text"><i>BUGLE</i></span>
  </div>
      </div>

    <div class="folio tiny">
      <p class="folio">MORNING FINAL / Cloudy / Weather: Page 42</p>
      <p class="folio">www.dailybugle.com — 50¢</p>
    </div>

    <div class="content">
       <h1 class="headline">VIGILANTE</h1>

  <div class="story-row">
    <div class="story-left">
      <h2 class="sub-headline">EVADES<br>POLICE!</h2>
      <div class="pull-quote">
        <p>"FORCE MUST<br>NET THE BUG"<br>SAYS MAYOR</p>
      </div>
      <p class="teaser">Blow-by-Blow<br>Bugle Report</p>
    </div>

    <div class="story-right">
      <img src="https://i.redd.it/7nrhxjc7yi5a1.jpg" class="image" alt="Spiderman with a thief swinging" />
    </div>
  </div>

  <p class="author">By J. Jonah Jameson</p>

  <p class="text">Once again, the streets of our great city have become a circus for this so-called 'hero' — if you can call a reckless vigilante in red spandex a hero. Witnesses report the masked menace swinging between buildings at breakneck speed last night, dodging police barricades like they were nothing more than an afterthought.</p><p class="text">This reporter has said it before and will say it again: this wall-crawling nuisance does more damage in one night than the criminals he claims to stop. Who authorized him? Who elected him judge, jury, and executioner of New York's streets?</p>

  <div class="end">POLICE CHIEF SPEAKS OUT: PAGE 2</div>

</div>
  </div>
    </body>
  </html>

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@600&display=swap');

.newspaper {
  display: block;
  background-color: #f0ede4;
  box-sizing: border-box;
  width: 800px;
  margin: 0 auto;
  padding: 15px;
}

.skybox {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin: 10px 0 0;
}

.skybox-item {
  flex: 1;
  border: 2px solid #000000;
}

.skybox-title {
  text-align: center;
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 24px;
  padding: 4px;
  margin: 0;
  line-height: 1.1;
}

.skybox-subtitle {
  text-align: center;
  font-family: Oswald, sans-serif;
  font-size: 16px;
  padding: 2px;
  margin: 0;
  background-color: #000;
  color: #fff;
}

.tagdate {
  display: flex;
  justify-content:space-between;
}

.tiny {
  font-size: 10px;
}

.tagline, .date {
  font-family: Arial, sans-serif;
  font-weight: bold;
  margin: 0;
}

.bugle-border {
    background:inherit;
    box-sizing: content-box;
    border-top: 4px solid black;
    border-bottom: 4px solid black;
}

.masthead {
  background-color: #a30d0d;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  box-sizing: border-box;
  margin: 3px;
}

.logo {
  background: #000000;
  margin: 0 10px;
  padding: 1px;
  height: 130px;
  box-sizing: border-box;
  transform: skewX(-8deg);
}

.masthead-text {
  font-family: Anton, sans-serif;
  font-size: 80px;
  color: #ffffff;
  -webkit-text-stroke: 2px #000000;
  text-shadow: 4px 4px 0px #000000;
  letter-spacing: 1px;
}

.folio {
  display: flex;
  justify-content:space-between;
   font-family: Arial, sans-serif;
  font-weight: bold;
  margin: 0;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.headline {
  font-family: Anton, sans-serif;
  font-size: 210px;
  line-height: 0.85;
  color: #1a1a1a;
  margin: 10px 0;
  width: 100%;
  text-align: center;
}

.story-row {
  display: flex;
  text-align: center;
  justify-content: space-evenly;
  width: 100%;
  margin-bottom: 1px;
}

.story-left {
  flex: 1;
  min-width: 0;
}

.sub-headline {
  font-family: Anton, sans-serif;
  font-size: 100px;
  line-height: 1.1;
  margin: 0 0 10px;
}

.pull-quote {
  background-color: #000;
  color: #fff;
  border: 3px solid #fff;
  outline: 3px solid #000;
  padding: 10px ;
  margin-bottom: 10px;
}

.pull-quote p {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 30px;
  margin: 0;
  line-height: 1.2;
}

.teaser {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 28px;
  margin: 0;
}

.story-right {
  flex: 0 0 55%;
}

.image {
  width: 90%;
  height: auto;
  object-fit: cover;
  border: 2px solid black;
  display: block;
  margin-left: auto;
}

.author {
  font-weight: bold;
  margin: 10px 0 5px;
}

.text {
  font-family: Georgia, serif;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 1px;
}

.end {
  width:auto;
  font: Oswald, sans-serif;
  font-size: 32px;
  text-align: center;
  color:#f0ede4;
  background-color:#a30d0d;
  margin-top: 2px;
}

newspaper
newspaper608×958 301 KB

Look what I build …it’s not gonna accepted by lab for sure.I know theirs room for improvement but see its better than nothing…If anyone know how to make old paper with chipped borders I’l like to learn …

2

Here’s an article that could help you make random or jagged edges on elements in pure CSS:

1 Like
3

This is actually a pretty solid attempt, especially considering you’re focusing on recreating the newspaper layout rather than just making a basic page.

The overall structure is clear, and I like how you separated the masthead, headline, story section, image, and article text. The typography also does a good job of giving it that old newspaper/comic feel.

A few things I’d look at next:

  • The fixed 800px width will make the page difficult to use on smaller screens. A responsive max-width with a fluid width could help.

  • The 210px headline and 100px sub-headline look good on desktop, but they could overflow on mobile. clamp() would be useful here.

  • For the chipped/old-paper border effect, you could experiment with CSS clip-path, pseudo-elements, or a repeating radial/linear gradient rather than manually creating every edge.

  • I’d also add a little more spacing between the article sections. The content is quite dense in places.

  • Since you’re using external images, make sure you’re comfortable with their licensing/usage terms if this project will be published publicly.

  • For accessibility, descriptive alt text is already a good start. You could also make sure the layout still makes sense if the decorative images fail to load.

For the lab specifically, I wouldn’t worry too much about whether the result looks exactly like a professional newspaper. Getting the required HTML/CSS concepts working cleanly is more important. You can always keep improving the visual design after the lab passes.

And honestly, “better than nothing” is underselling it — you’ve already built a recognizable newspaper layout rather than just following the minimum requirements.