<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<span class="breaking-label">
        BREAKING
      </span>

<div class="breaking-story">
        Global markets climb as investors react to new economic data
      </div>

</div>
  </div>

</div>

<a class="active" href="#">
          Top Stories
        </a>

<a href="#">
          World
        </a>

<a href="#">
          Politics
        </a>

<a href="#">
          Business
        </a>

<a href="#">
          Technology
        </a>

<a href="#">
          Science
        </a>

<a href="#">
          Health
        </a>

<a href="#">
          Culture
        </a>

</div>

</nav>

</header>

<span>SEARCH NEWSWIRE</span>

<button>
          Search
        </button>
      </div>

</div>

<div class="mobile-logo">
      NEWSWIRE
    </div>

<a href="#">Top Stories</a>
    <a href="#">U.S.</a>
    <a href="#">World</a>
    <a href="#">Politics</a>
    <a href="#">Business</a>
    <a href="#">Technology</a>
    <a href="#">Science</a>
    <a href="#">Health</a>
    <a href="#">Culture</a>

</aside>

<main>

<span>
        TUESDAY, SEPTEMBER 15
      </span>

<span>
        Morning Edition
      </span>

</div>

<span class="category-tag">
            POLITICS
          </span>

</a>

<h1>
            Leaders face a changing political landscape as new priorities reshape the national debate
          </h1>

<p>
            Officials are navigating a rapidly evolving environment
            as economic, technology and security issues move to the
            center of the national conversation.
          </p>

<div class="story-meta">
            <span>By NewsWire Staff</span>
            <span>32 min ago</span>
          </div>

</div>

</article>

<span class="story-category">
            BUSINESS
          </span>

<h2>
            Markets rally as investors digest the latest economic outlook
          </h2>

</article>

<span class="story-category">
            TECHNOLOGY
          </span>

<h2>
            The next wave of AI infrastructure is transforming the technology industry
          </h2>

</article>

</div>

</section>

<h2>
          Latest News
        </h2>

</div>

<h3>
            Cities rethink how downtown districts will evolve over the next decade
          </h3>

<p>
            New approaches to housing, transportation and public spaces
            are reshaping urban centers.
          </p>

</article>

<span class="story-category">
            CLIMATE
          </span>

<h3>
            New climate data reveals another year of remarkable global temperatures
          </h3>

<p>
            Researchers are examining changing weather patterns
            across several continents.
          </p>

</article>

<span class="story-category">
            SCIENCE
          </span>

<h3>
            Scientists unveil new tools for observing our rapidly changing planet
          </h3>

<p>
            Advanced satellites and sensors are giving researchers
            unprecedented amounts of information.
          </p>

</article>

<h3>
            Robotics enters a new era as intelligent machines move beyond the laboratory
          </h3>

<p>
            Companies are testing a new generation of machines
            designed to work alongside people.
          </p>

</article>

</div>

</section>

<h2>
            NewsWire Live
          </h2>

<p>
            Breaking news, analysis and reporting from around the world.
          </p>

<button>
            Watch Live
            <span>▶</span>
          </button>

</div>

</div>

</section>

<h2>
          Around the World
        </h2>

</div>

<span class="story-category">
            EUROPE
          </span>

<h2>
            European capitals prepare for a new period of economic and political change
          </h2>

<p>
            Governments across the continent are confronting
            questions about growth, energy and security.
          </p>

</article>

<h3>
                Asian technology centers compete to attract the next generation of innovators
              </h3>

</article>

<div>
              <span>ENVIRONMENT</span>

<h3>
                Conservation projects show promising results across vulnerable ecosystems
              </h3>

</article>

<div>
              <span>GLOBAL ECONOMY</span>

<h3>
                Major cities are emerging as new centers of global investment
              </h3>

</article>

</div>

</section>

<h2>
            Trending
          </h2>

</div>

<div>
              <span>TECHNOLOGY</span>

<h3>
                How artificial intelligence is changing everyday work
              </h3>
            </div>
          </article>

<div>
              <span>BUSINESS</span>

<h3>
                Investors watch markets after a volatile week
              </h3>
            </div>
          </article>

<div>
              <span>SCIENCE</span>

<h3>
                A new generation of telescopes is coming online
              </h3>
            </div>
          </article>

<div>
              <span>CULTURE</span>

<h3>
                The changing ways audiences discover entertainment
              </h3>
            </div>
          </article>

</div>

</section>

<h2>
          More Top Stories
        </h2>

</div>

<span>TRAVEL</span>

<h3>
            Destinations seeing a new wave of travelers this year
          </h3>

</article>

<span>HEALTH</span>

<h3>
            Researchers study the habits associated with healthier lives
          </h3>

</article>

<span>DESIGN</span>

<h3>
            Architecture is adapting to a rapidly changing urban world
          </h3>

</article>

</div>

</section>

</main>

<p>
        Independent reporting for a connected world.
      </p>

</div>

<div>
        <strong>News</strong>
        <a href="#">U.S.</a>
        <a href="#">World</a>
        <a href="#">Politics</a>
        <a href="#">Business</a>
      </div>

<div>
        <strong>Topics</strong>
        <a href="#">Technology</a>
        <a href="#">Science</a>
        <a href="#">Health</a>
        <a href="#">Culture</a>
      </div>

<div>
        <strong>NewsWire</strong>
        <a href="#">About</a>
        <a href="#">Contact</a>
        <a href="#">Careers</a>
        <a href="#">Newsletters</a>
      </div>

</div>

<div class="container copyright">
      © 2026 NewsWire. Demo news interface.
    </div>

</footer>

</div>

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

background: #fff;

color: #101114;

font-family:
    "Inter",
    Arial,
    sans-serif;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color:
    transparent;
}

a {
  color: inherit;

text-decoration: none;
}

img {
  display: block;

width: 100%;

object-fit: cover;
}

.container {
  width: min(1180px, calc(100% - 48px));

margin: auto;
}

/* =========================
   BREAKING
========================= */

.breaking-bar {
  background: #c90016;

color: white;
}

.breaking-inner {
  min-height: 38px;

display: flex;

align-items: center;

gap: 15px;

font-size: 11px;
}

.breaking-label {
  padding-right: 15px;

border-right:
    1px solid rgba(255,255,255,.35);

font-size: 9px;
  font-weight: 800;

letter-spacing: 1.5px;
}

.breaking-story {
  flex: 1;

font-weight: 600;
}

.breaking-time {
  opacity: .65;

font-size: 9px;
}

/* =========================
   HEADER
========================= */

.header {
  position: sticky;

top: 0;

z-index: 500;

background:
    rgba(255,255,255,.97);

box-shadow:
    0 1px 0 #e5e5e5;

backdrop-filter:
    blur(15px);
}

.header-main {
  height: 76px;

display: grid;

grid-template-columns:
    1fr auto 1fr;

align-items: center;
}

.logo,
.footer-logo {
  font-family:
    "Libre Franklin",
    sans-serif;

font-size: 27px;
  font-weight: 800;

letter-spacing: -2px;
}

.logo span,
.footer-logo span {
  color: #c90016;
}

.menu-button {
  width: 34px;

display: flex;

flex-direction: column;

gap: 5px;

padding: 8px 5px;

border: 0;

background: none;

cursor: pointer;
}

.menu-button span {
  width: 21px;
  height: 2px;

background: #111;
}

.header-actions {
  display: flex;

justify-content: flex-end;

align-items: center;

gap: 12px;
}

.search-button {
  width: 38px;
  height: 38px;

display: grid;

place-items: center;

border: 0;

border-radius: 50%;

background: #f4f4f4;

cursor: pointer;
}

.search-button svg {
  width: 17px;

fill: none;

stroke: #111;

stroke-width: 2;
}

.live-button {
  padding:
    10px 14px;

border: 0;

background: #111;

color: white;

font-size: 9px;
  font-weight: 700;

letter-spacing: .5px;

cursor: pointer;
}

.live-dot {
  width: 6px;
  height: 6px;

display: inline-block;

margin-right: 6px;

border-radius: 50%;

background: #f0162f;

animation:
    livePulse 1.5s infinite;
}

@keyframes livePulse {

50% {
    box-shadow:
      0 0 0 5px
      rgba(240,22,47,.18);
  }

}

/* =========================
   NAV
========================= */

.main-nav {
  border-top:
    1px solid #eee;
}

.nav-inner {
  display: flex;

justify-content: center;

overflow-x: auto;

scrollbar-width: none;
}

.nav-inner::-webkit-scrollbar {
  display: none;
}

.nav-inner a {
  position: relative;

flex-shrink: 0;

padding:
    13px 16px;

color: #555;

font-size: 10px;
  font-weight: 600;
}

.nav-inner a:hover {
  color: #c90016;
}

.nav-inner a.active {
  color: #111;
}

.nav-inner a.active::after {
  content: "";

position: absolute;

left: 16px;
  right: 16px;
  bottom: 0;

height: 3px;

background: #c90016;
}

/* =========================
   DATE
========================= */

.date-row {
  display: flex;

justify-content: space-between;

padding:
    25px 0 12px;

border-bottom:
    1px solid #ddd;

color: #777;

font-size: 8px;
  font-weight: 700;

letter-spacing: 1px;
}

/* =========================
   HERO
========================= */

.hero-grid {
  display: grid;

grid-template-columns:
    2fr 1fr;

gap: 28px;

padding-top: 26px;
}

.hero-image {
  position: relative;

display: block;

overflow: hidden;
}

.hero-image img {
  height: 430px;

transition:
    transform .5s ease;
}

.hero-image:hover img {
  transform:
    scale(1.025);
}

.category-tag {
  position: absolute;

left: 0;
  bottom: 0;

padding:
    8px 12px;

background: #c90016;

color: white;

font-size: 8px;
  font-weight: 800;

letter-spacing: 1px;
}

.hero-content h1 {
  max-width: 850px;

margin:
    18px 0 10px;

font-family:
    "Libre Franklin",
    sans-serif;

font-size:
    clamp(30px, 4vw, 50px);

line-height: 1.02;

letter-spacing: -2.5px;
}

.hero-content p {
  max-width: 780px;

margin: 0;

color: #626262;

font-family: Georgia, serif;

font-size: 15px;

line-height: 1.55;
}

.story-meta {
  display: flex;

gap: 18px;

margin-top: 15px;

color: #999;

font-size: 8px;

text-transform: uppercase;

letter-spacing: .7px;
}

/* =========================
   SIDE STORIES
========================= */

.hero-side {
  display: grid;

gap: 25px;
}

.side-story {
  border-bottom:
    1px solid #ddd;

padding-bottom: 23px;
}

.side-story img {
  height: 180px;
}

.story-category,
.world-list span,
.more-grid span {
  display: block;

margin-top: 12px;

color: #c90016;

font-size: 8px;
  font-weight: 800;

letter-spacing: 1px;
}

.side-story h2 {
  margin:
    7px 0 10px;

font-family:
    "Libre Franklin",
    sans-serif;

font-size: 19px;

line-height: 1.12;

letter-spacing: -.7px;
}

.story-time {
  color: #999;

font-size: 8px;
}

/* =========================
   SECTIONS
========================= */

.section {
  padding:
    60px 0;
}

.section-heading {
  display: flex;

align-items: center;

gap: 16px;

margin-bottom: 23px;
}

.section-heading h2 {
  margin: 0;

font-family:
    "Libre Franklin",
    sans-serif;

font-size: 22px;

letter-spacing: -.7px;
}

.heading-line {
  flex: 1;

height: 1px;

background: #ddd;
}

.section-heading a {
  color: #777;

font-size: 9px;

font-weight: 600;
}

/* =========================
   NEWS GRID
========================= */

.news-grid {
  display: grid;

grid-template-columns:
    repeat(4, 1fr);

gap: 22px;
}

.news-card img {
  height: 165px;
}

.news-card h3 {
  margin:
    7px 0 8px;

font-family:
    "Libre Franklin",
    sans-serif;

font-size: 16px;

line-height: 1.18;

letter-spacing: -.5px;
}

.news-card p {
  margin:
    0 0 10px;

color: #777;

font-family: Georgia, serif;

font-size: 11px;

line-height: 1.5;
}

/* =========================
   LIVE
========================= */

.live-banner {
  padding:
    55px 0;

background: #111319;

color: white;
}

.live-banner-inner {
  display: grid;

grid-template-columns:
    .8fr 1.2fr;

gap: 50px;

align-items: center;
}

.live-kicker {
  color: #ff4055;

font-size: 8px;
  font-weight: 800;

letter-spacing: 1.4px;
}

.live-kicker i {
  width: 7px;
  height: 7px;

display: inline-block;

margin-right: 6px;

border-radius: 50%;

background: #f31c35;
}

.live-copy h2 {
  margin:
    10px 0;

font-family:
    "Libre Franklin",
    sans-serif;

font-size: 38px;

letter-spacing: -1.5px;
}

.live-copy p {
  max-width: 390px;

color: #9699a1;

font-size: 12px;

line-height: 1.6;
}

.live-copy button {
  margin-top: 15px;

padding:
    12px 17px;

border: 0;

background: #d20c23;

color: white;

font-size: 9px;
  font-weight: 700;

cursor: pointer;
}

.live-copy button span {
  margin-left: 10px;
}

.live-image {
  position: relative;

overflow: hidden;
}

.live-image img {
  height: 330px;

opacity: .82;
}

.play-button {
  position: absolute;

left: 50%;
  top: 50%;

width: 60px;
  height: 60px;

display: grid;

place-items: center;

transform:
    translate(-50%, -50%);

border:
    1px solid rgba(255,255,255,.5);

border-radius: 50%;

background:
    rgba(0,0,0,.45);

backdrop-filter:
    blur(8px);
}

/* =========================
   WORLD
========================= */

.world-layout {
  display: grid;

grid-template-columns:
    1.35fr 1fr;

gap: 35px;
}

.world-feature img {
  height: 380px;
}

.world-feature h2 {
  margin:
    8px 0;

font-family:
    "Libre Franklin",
    sans-serif;

font-size: 27px;

line-height: 1.08;

letter-spacing: -1px;
}

.world-feature p {
  color: #777;

font-family: Georgia, serif;

font-size: 12px;

line-height: 1.55;
}

.world-list {
  display: flex;

flex-direction: column;
}

.list-story {
  display: grid;

grid-template-columns:
    145px 1fr;

gap: 16px;

padding:
    0 0 18px;

margin-bottom: 18px;

border-bottom:
    1px solid #ddd;
}

.list-story img {
  height: 105px;
}

.world-list span {
  margin-top: 0;
}

.list-story h3 {
  margin:
    6px 0 8px;

font-family:
    "Libre Franklin",
    sans-serif;

font-size: 14px;

line-height: 1.2;
}

.list-story small {
  color: #aaa;

font-size: 8px;
}

/* =========================
   TRENDING
========================= */

.trending-section {
  padding:
    48px 0;

background: #17191e;

color: white;
}

.section-heading.light
.heading-line {
  background: #3b3d43;
}

.trending-grid {
  display: grid;

grid-template-columns:
    repeat(2, 1fr);

column-gap: 50px;
}

.trending-grid article {
  display: grid;

grid-template-columns:
    65px 1fr;

gap: 15px;

padding:
    20px 0;

border-bottom:
    1px solid #35373c;
}

.number {
  color: #c90016;

font-family:
    "Libre Franklin",
    sans-serif;

font-size: 31px;
  font-weight: 800;
}

.trending-grid article div > span {
  color: #888b92;

font-size: 7px;
  font-weight: 700;

letter-spacing: 1px;
}

.trending-grid h3 {
  margin:
    5px 0 0;

font-family:
    "Libre Franklin",
    sans-serif;

font-size: 16px;

line-height: 1.2;
}

/* =========================
   MORE
========================= */

.more-grid {
  display: grid;

grid-template-columns:
    repeat(3, 1fr);

gap: 24px;
}

.more-grid img {
  height: 210px;
}

.more-grid h3 {
  margin:
    7px 0;

font-family:
    "Libre Franklin",
    sans-serif;

font-size: 17px;

line-height: 1.2;
}

/* =========================
   FOOTER
========================= */

footer {
  padding:
    45px 0 25px;

background: #08090c;

color: white;
}

.footer-top {
  padding-bottom: 30px;

border-bottom:
    1px solid #292a2e;
}

.footer-top p {
  color: #777b84;

font-size: 10px;
}

.footer-links {
  display: grid;

grid-template-columns:
    repeat(3, 1fr);

gap: 30px;

padding:
    30px 0;
}

.footer-links strong,
.footer-links a {
  display: block;
}

.footer-links strong {
  margin-bottom: 12px;

font-size: 10px;
}

.footer-links a {
  margin:
    8px 0;

color: #777b84;

font-size: 9px;
}

.footer-links a:hover {
  color: white;
}

.copyright {
  padding-top: 20px;

border-top:
    1px solid #292a2e;

color: #555960;

font-size: 8px;
}

/* =========================
   SEARCH
========================= */

.search-overlay {
  position: fixed;

inset: 0;

z-index: 2000;

display: grid;

place-items: start center;

padding-top: 120px;

background:
    rgba(5,6,8,.92);

opacity: 0;

visibility: hidden;

transition:
    .25s ease;
}

.search-overlay.open {
  opacity: 1;

visibility: visible;
}

.search-panel {
  position: relative;

width: min(750px, 90vw);

color: white;
}

.search-panel > span {
  color: #999;

font-size: 8px;

letter-spacing: 1.5px;
}

.large-search {
  display: flex;

margin-top: 15px;

border-bottom:
    2px solid white;
}

.large-search input {
  flex: 1;

padding:
    15px 0;

border: 0;

outline: 0;

background: none;

color: white;

font-size: 26px;
}

.large-search button {
  border: 0;

background: none;

color: #e31a32;

font-weight: 700;

cursor: pointer;
}

.close-search {
  position: absolute;

right: 0;
  top: -60px;

border: 0;

background: none;

color: white;

font-size: 30px;

cursor: pointer;
}

/* =========================
   MOBILE MENU
========================= */

.mobile-menu {
  position: fixed;

top: 0;
  left: 0;

z-index: 2200;

width: min(340px, 85vw);
  height: 100vh;

display: flex;

flex-direction: column;

padding:
    35px;

background: #101116;

color: white;

transform:
    translateX(-105%);

transition:
    transform .3s ease;

box-shadow:
    20px 0 60px
    rgba(0,0,0,.35);
}

.mobile-menu.open {
  transform:
    translateX(0);
}

.mobile-logo {
  margin-bottom: 35px;

font-size: 23px;
  font-weight: 800;
}

.mobile-menu a {
  padding:
    13px 0;

border-bottom:
    1px solid #292b30;

font-size: 13px;
}

.close-menu {
  position: absolute;

top: 20px;
  right: 20px;

border: 0;

background: none;

color: white;

font-size: 25px;

cursor: pointer;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 850px) {

.hero-grid,
  .world-layout,
  .live-banner-inner {
    grid-template-columns:
      1fr;
  }

.hero-side {
    grid-template-columns:
      repeat(2, 1fr);
  }

.news-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

.hero-image img {
    height: 350px;
  }

.nav-inner {
    justify-content:
      flex-start;
  }

}

@media (max-width: 600px) {

.container {
    width:
      calc(100% - 28px);
  }

.breaking-time {
    display: none;
  }

.breaking-inner {
    min-height: 44px;
  }

.header-main {
    height: 65px;
  }

.logo {
    font-size: 22px;
  }

.live-button {
    display: none;
  }

.hero-grid {
    padding-top: 18px;
  }

.hero-image img {
    height: 240px;
  }

.hero-content h1 {
    font-size: 30px;

letter-spacing: -1.4px;
  }

.hero-side,
  .news-grid,
  .more-grid,
  .trending-grid,
  .footer-links {
    grid-template-columns:
      1fr;
  }

.side-story {
    display: grid;

grid-template-columns:
      120px 1fr;

column-gap: 14px;
  }

.side-story img {
    grid-row:
      1 / span 4;

height: 100px;
  }

.side-story
  .story-category {
    margin-top: 0;
  }

.side-story h2 {
    font-size: 14px;
  }

.world-feature img {
    height: 250px;
  }

.list-story {
    grid-template-columns:
      110px 1fr;
  }

.list-story img {
    height: 90px;
  }

.live-image img {
    height: 220px;
  }

.section {
    padding:
      40px 0;
  }

.date-row {
    padding-top: 18px;
  }

}

/* =========================
   ELEMENTS
========================= */

const menuButton =
  document.getElementById(
    "menuButton"
  );

const mobileMenu =
  document.getElementById(
    "mobileMenu"
  );

const closeMenu =
  document.getElementById(
    "closeMenu"
  );

const searchButton =
  document.getElementById(
    "searchButton"
  );

const searchOverlay =
  document.getElementById(
    "searchOverlay"
  );

const closeSearch =
  document.getElementById(
    "closeSearch"
  );

/* =========================
   MOBILE MENU
========================= */

menuButton.addEventListener(
  "click",
  function() {

mobileMenu.classList.add(
      "open"
    );

}
);

closeMenu.addEventListener(
  "click",
  function() {

mobileMenu.classList.remove(
      "open"
    );

}
);

/* =========================
   SEARCH
========================= */

searchButton.addEventListener(
  "click",
  function() {

searchOverlay.classList.add(
      "open"
    );

setTimeout(
      function() {

searchOverlay
          .querySelector("input")
          .focus();

},
      200
    );

}
);

closeSearch.addEventListener(
  "click",
  function() {

searchOverlay.classList.remove(
      "open"
    );

}
);

/* =========================
   ESCAPE KEY
========================= */

document.addEventListener(
  "keydown",
  function(event) {

if (
      event.key === "Escape"
    ) {

mobileMenu.classList.remove(
        "open"
      );

searchOverlay.classList.remove(
        "open"
      );

}

}
);

/* =========================
   IMAGE HOVER EFFECT
========================= */

const storyImages =
  document.querySelectorAll(
    ".news-card img, .side-story img, .more-grid img"
  );

storyImages.forEach(
  function(image) {

image.addEventListener(
      "mouseenter",
      function() {

image.style.filter =
          "brightness(.92)";

}
    );

image.addEventListener(
      "mouseleave",
      function() {

image.style.filter =
          "";

}
    );

}
);

/* =========================
   LIVE BUTTON
========================= */

const liveButtons =
  document.querySelectorAll(
    ".live-button, .live-copy button"
  );

liveButtons.forEach(
  function(button) {

button.addEventListener(
      "click",
      function() {

button.animate(
          [
            {
              transform:
                "scale(1)"
            },

{
              transform:
                "scale(.96)"
            },

{
              transform:
                "scale(1)"
            }
          ],
          {
            duration: 220
          }
        );

}
    );

}
);

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground