Pagina's Medium
News — Tabloid / Popular Daily Landing
A loud, high-contrast tabloid front page for the fictional Daily Blast in black, bold red and screaming yellow. A sticky breaking-news ticker rotates headlines, a half-screen all-caps splash sits over a duotone press photo with a red EXCLUSIVE flash, and a yellow DON'T MISS strip carries a paged teaser carousel. Below sit a sensational secondary-story row, a showbiz and back-page sport rail with live scores, and a bold WIN giveaway box with email validation, drop caps, pull quotes and captioned figures throughout.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
/* Tabloid palette */
--black: #0d0d0d;
--ink-2: #2a2724;
--ink-3: #4a443b;
--muted: #6f6a62;
--white: #ffffff;
--paper: #f6f3ec;
--newsprint: #efe9da;
--red: #e2231a;
--red-d: #b6160f;
--yellow: #ffd400;
--yellow-d: #e6bf00;
--rule: rgba(13, 13, 13, 0.16);
--rule-2: rgba(13, 13, 13, 0.34);
--rule-hair: rgba(13, 13, 13, 0.1);
--r-sm: 4px;
--r-md: 8px;
--display: "Inter", system-ui, sans-serif;
--serif: "Playfair Display", "Times New Roman", Georgia, serif;
--body: "Inter", system-ui, sans-serif;
}
* {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--newsprint);
color: var(--black);
font-family: var(--body);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
:focus-visible {
outline: 3px solid var(--red);
outline-offset: 2px;
}
/* ============ TICKER ============ */
.ticker {
display: flex;
align-items: stretch;
background: var(--black);
color: var(--white);
border-bottom: 3px solid var(--red);
position: sticky;
top: 0;
z-index: 40;
}
.ticker__flash {
background: var(--red);
color: var(--white);
font-family: var(--display);
font-weight: 900;
letter-spacing: 0.06em;
font-size: 0.78rem;
display: flex;
align-items: center;
padding: 0 0.9rem;
flex-shrink: 0;
animation: flash 1.1s steps(1) infinite;
}
@keyframes flash {
0%,
60% {
background: var(--red);
}
61%,
100% {
background: var(--red-d);
}
}
.ticker__viewport {
flex: 1;
overflow: hidden;
display: flex;
align-items: center;
padding: 0.45rem 0.9rem;
min-width: 0;
}
.ticker__line {
margin: 0;
font-family: var(--display);
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity 0.35s ease;
}
.ticker__line b {
color: var(--yellow);
}
.ticker__btn {
background: transparent;
border: 0;
border-left: 1px solid rgba(255, 255, 255, 0.2);
color: var(--white);
cursor: pointer;
padding: 0 0.85rem;
font-family: var(--display);
font-weight: 900;
flex-shrink: 0;
}
.ticker__btn:hover {
background: rgba(255, 255, 255, 0.12);
}
/* ============ MASTHEAD ============ */
.masthead {
background: var(--paper);
border-bottom: 4px solid var(--black);
}
.masthead__inner {
max-width: 1180px;
margin: 0 auto;
padding: 0.9rem 1.1rem 0.7rem;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
}
.masthead__date {
display: flex;
flex-direction: column;
gap: 0.15rem;
font-family: var(--display);
}
.masthead__day {
font-weight: 800;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.masthead__price {
font-size: 0.72rem;
color: var(--muted);
font-weight: 600;
}
.masthead__logo {
text-decoration: none;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
line-height: 0.82;
}
.masthead__the {
font-family: var(--display);
font-weight: 800;
font-size: 0.78rem;
letter-spacing: 0.42em;
text-indent: 0.42em;
color: var(--black);
}
.masthead__blast {
font-family: var(--display);
font-weight: 900;
font-size: clamp(2.6rem, 9vw, 5rem);
letter-spacing: -0.03em;
color: var(--red);
-webkit-text-stroke: 2px var(--black);
text-shadow: 4px 4px 0 var(--yellow);
}
.masthead__nav {
display: flex;
gap: 0.4rem;
justify-content: flex-end;
flex-wrap: wrap;
}
.masthead__nav a {
text-decoration: none;
font-family: var(--display);
font-weight: 900;
font-size: 0.74rem;
letter-spacing: 0.04em;
background: var(--black);
color: var(--white);
padding: 0.32rem 0.6rem;
border-radius: var(--r-sm);
}
.masthead__nav a:hover {
background: var(--red);
}
.masthead__strap {
background: var(--black);
color: var(--yellow);
font-family: var(--display);
font-weight: 800;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-align: center;
padding: 0.32rem;
text-transform: uppercase;
}
main {
max-width: 1180px;
margin: 0 auto;
padding: 0 1.1rem 2rem;
background: var(--paper);
}
/* ============ HERO ============ */
.hero {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 1.6rem;
padding: 1.4rem 0 1.6rem;
border-bottom: 5px double var(--black);
}
.hero__media {
margin: 0;
position: relative;
}
.hero__photo {
aspect-ratio: 4 / 5;
border: 3px solid var(--black);
background:
radial-gradient(120% 90% at 50% 8%, rgba(255, 212, 0, 0.5), transparent 45%),
radial-gradient(60% 40% at 30% 70%, rgba(226, 35, 26, 0.45), transparent 60%),
linear-gradient(180deg, #1c2230 0%, #2a3550 35%, #0d0f17 100%);
position: relative;
overflow: hidden;
}
.hero__photo::after {
content: "";
position: absolute;
inset: 0;
background:
repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 5px),
radial-gradient(80% 30% at 50% 100%, rgba(0, 0, 0, 0.6), transparent 70%);
}
.hero__flash {
position: absolute;
top: -10px;
left: -10px;
background: var(--red);
color: var(--white);
font-family: var(--display);
font-weight: 900;
font-size: 1.15rem;
letter-spacing: 0.04em;
padding: 0.5rem 0.9rem;
transform: rotate(-7deg);
box-shadow: 4px 4px 0 var(--black);
z-index: 3;
}
.hero__price-blob {
position: absolute;
bottom: 14px;
right: -8px;
width: 96px;
height: 96px;
background: var(--yellow);
border: 3px solid var(--black);
border-radius: 50%;
display: grid;
place-content: center;
text-align: center;
font-family: var(--display);
font-weight: 900;
font-size: 0.78rem;
line-height: 1.1;
letter-spacing: 0.02em;
transform: rotate(8deg);
box-shadow: 3px 3px 0 var(--black);
z-index: 3;
}
.hero__caption {
font-family: var(--serif);
font-size: 0.82rem;
color: var(--ink-3);
padding-top: 0.4rem;
border-top: 1px solid var(--rule-hair);
margin-top: 0.4rem;
}
.credit {
font-family: var(--display);
font-weight: 700;
font-size: 0.62rem;
letter-spacing: 0.08em;
color: var(--muted);
text-transform: uppercase;
}
.kicker {
font-family: var(--display);
font-weight: 900;
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--red);
margin: 0 0 0.4rem;
}
.hero__head {
font-family: var(--display);
font-weight: 900;
font-size: clamp(3.4rem, 11vw, 6.6rem);
line-height: 0.84;
letter-spacing: -0.035em;
margin: 0 0 0.7rem;
text-transform: uppercase;
}
.hero__head--hot {
display: block;
color: var(--red);
-webkit-text-stroke: 2px var(--black);
text-shadow: 5px 5px 0 var(--yellow);
}
.hero__deck {
font-family: var(--display);
font-weight: 700;
font-size: 1.18rem;
line-height: 1.22;
margin: 0 0 0.7rem;
}
.hero__deck strong {
background: var(--yellow);
padding: 0 0.18em;
}
.byline {
font-family: var(--display);
font-size: 0.8rem;
margin: 0 0 0.7rem;
padding-bottom: 0.6rem;
border-bottom: 2px solid var(--black);
}
.byline strong {
text-transform: uppercase;
letter-spacing: 0.02em;
}
.byline__time {
color: var(--muted);
font-weight: 500;
}
.hero__lede {
font-family: var(--serif);
font-size: 1.02rem;
line-height: 1.5;
margin: 0 0 0.8rem;
text-align: justify;
hyphens: auto;
}
.hero__lede::first-letter {
font-family: var(--serif);
font-weight: 900;
font-size: 3.4rem;
float: left;
line-height: 0.78;
padding: 0.06em 0.12em 0 0;
color: var(--red);
}
.pullquote {
margin: 1rem 0;
padding: 0.6rem 0 0.6rem 1rem;
border-left: 5px solid var(--red);
font-family: var(--serif);
font-weight: 800;
font-size: 1.5rem;
line-height: 1.16;
font-style: italic;
}
.pullquote cite {
display: block;
margin-top: 0.4rem;
font-family: var(--display);
font-style: normal;
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--muted);
}
.hero__body {
font-family: var(--serif);
font-size: 0.98rem;
line-height: 1.5;
text-align: justify;
hyphens: auto;
margin: 0 0 1rem;
}
.btn-blast {
display: inline-block;
font-family: var(--display);
font-weight: 900;
font-size: 0.92rem;
letter-spacing: 0.04em;
background: var(--red);
color: var(--white);
border: 3px solid var(--black);
padding: 0.7rem 1.2rem;
border-radius: var(--r-sm);
cursor: pointer;
box-shadow: 4px 4px 0 var(--black);
transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}
.btn-blast:hover {
background: var(--red-d);
}
.btn-blast:active {
transform: translate(4px, 4px);
box-shadow: 0 0 0 var(--black);
}
.btn-blast--yellow {
background: var(--yellow);
color: var(--black);
}
.btn-blast--yellow:hover {
background: var(--yellow-d);
}
/* ============ TEASER STRIP ============ */
.teasers {
margin: 0 0 1.4rem;
}
.teasers__bar {
background: var(--yellow);
border: 3px solid var(--black);
border-radius: var(--r-sm);
display: flex;
align-items: stretch;
overflow: hidden;
}
.teasers__label {
background: var(--black);
color: var(--yellow);
font-family: var(--display);
font-weight: 900;
font-size: 0.82rem;
letter-spacing: 0.06em;
display: flex;
align-items: center;
padding: 0 1rem;
flex-shrink: 0;
writing-mode: horizontal-tb;
}
.teasers__track {
flex: 1;
display: flex;
gap: 0;
min-width: 0;
}
.teaser {
flex: 1;
min-width: 0;
padding: 0.6rem 0.9rem;
border-right: 2px dashed rgba(13, 13, 13, 0.35);
text-decoration: none;
color: var(--black);
display: flex;
flex-direction: column;
gap: 0.15rem;
transition: background 0.15s ease;
}
.teaser:hover {
background: rgba(13, 13, 13, 0.07);
}
.teaser__kick {
font-family: var(--display);
font-weight: 900;
font-size: 0.62rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--red-d);
}
.teaser__txt {
font-family: var(--display);
font-weight: 800;
font-size: 0.86rem;
line-height: 1.12;
}
.teaser__pg {
font-family: var(--display);
font-weight: 700;
font-size: 0.7rem;
margin-top: auto;
color: var(--ink-2);
}
.teasers__nav {
display: flex;
flex-direction: column;
border-left: 3px solid var(--black);
flex-shrink: 0;
}
.teasers__arrow {
flex: 1;
background: var(--black);
color: var(--yellow);
border: 0;
cursor: pointer;
font-weight: 900;
font-family: var(--display);
padding: 0 0.7rem;
font-size: 0.9rem;
}
.teasers__arrow + .teasers__arrow {
border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.teasers__arrow:hover {
background: var(--red);
color: var(--white);
}
/* ============ SECONDARY ROW ============ */
.secondary {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 1.2rem;
padding: 0 0 1.6rem;
border-bottom: 3px solid var(--black);
margin-bottom: 1.6rem;
}
.scard {
display: flex;
flex-direction: column;
}
.scard + .scard {
border-left: 1px solid var(--rule);
padding-left: 1.2rem;
}
.scard__fig {
margin: 0 0 0.6rem;
}
.scard__photo {
aspect-ratio: 16 / 10;
border: 2px solid var(--black);
}
.scard--lead .scard__photo {
aspect-ratio: 16 / 9;
}
.scard__photo--court {
background:
radial-gradient(70% 50% at 50% 0%, rgba(255, 212, 0, 0.35), transparent 60%),
linear-gradient(180deg, #3a3530 0%, #5a4f44 40%, #241f1a 100%);
}
.scard__photo--ufo {
background:
radial-gradient(40% 30% at 50% 22%, rgba(120, 255, 170, 0.85), transparent 60%),
radial-gradient(60% 40% at 50% 22%, rgba(40, 200, 120, 0.5), transparent 70%),
linear-gradient(180deg, #0a1018 0%, #122036 60%, #060912 100%);
}
.scard__photo--heat {
background:
radial-gradient(90% 70% at 50% 90%, rgba(255, 80, 30, 0.7), transparent 60%),
linear-gradient(180deg, #ffb800 0%, #e2231a 55%, #7a1208 100%);
}
.scard__fig figcaption {
font-family: var(--serif);
font-size: 0.74rem;
font-style: italic;
color: var(--ink-3);
padding-top: 0.3rem;
}
.tag {
align-self: flex-start;
font-family: var(--display);
font-weight: 900;
font-size: 0.66rem;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--black);
color: var(--yellow);
padding: 0.2rem 0.5rem;
border-radius: 3px;
margin-bottom: 0.4rem;
}
.tag--shock {
background: var(--red);
color: var(--white);
}
.scard__head {
font-family: var(--display);
font-weight: 900;
font-size: 1.32rem;
line-height: 1.04;
letter-spacing: -0.01em;
margin: 0 0 0.4rem;
}
.scard:not(.scard--lead) .scard__head {
font-size: 1.08rem;
}
.scard__by {
font-family: var(--display);
font-size: 0.74rem;
font-weight: 600;
color: var(--muted);
margin: 0 0 0.4rem;
}
.scard__sum {
font-family: var(--serif);
font-size: 0.9rem;
line-height: 1.45;
margin: 0;
text-align: justify;
hyphens: auto;
}
.more {
font-family: var(--display);
font-weight: 800;
font-style: normal;
color: var(--red);
white-space: nowrap;
}
/* ============ RAILS ============ */
.rail-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.6rem;
margin-bottom: 1.8rem;
}
.rail__head {
display: flex;
align-items: baseline;
justify-content: space-between;
border-bottom: 3px solid var(--black);
padding-bottom: 0.35rem;
margin-bottom: 0.9rem;
}
.rail__title {
font-family: var(--display);
font-weight: 900;
font-size: 1.5rem;
letter-spacing: -0.01em;
margin: 0;
text-transform: uppercase;
}
.rail__amp {
color: var(--red);
}
.rail--sport .rail__amp {
color: var(--black);
background: var(--yellow);
padding: 0 0.25em;
}
.rail__all {
font-family: var(--display);
font-weight: 800;
font-size: 0.72rem;
letter-spacing: 0.04em;
text-decoration: none;
color: var(--red);
}
.rail__all:hover {
text-decoration: underline;
}
.rail__list {
list-style: none;
margin: 0;
padding: 0;
}
.rail__item {
display: grid;
grid-template-columns: 64px 1fr;
gap: 0.8rem;
padding: 0.7rem 0;
border-bottom: 1px solid var(--rule);
align-items: start;
}
.rail__item:last-child {
border-bottom: 0;
}
.rail__thumb {
width: 64px;
height: 64px;
border: 2px solid var(--black);
}
.rail__thumb--a {
background: radial-gradient(60% 60% at 40% 30%, rgba(255, 120, 200, 0.9), transparent 70%), linear-gradient(135deg, #d81b8c, #3a0d2a);
}
.rail__thumb--b {
background: radial-gradient(60% 60% at 40% 30%, rgba(255, 220, 120, 0.9), transparent 70%), linear-gradient(135deg, #c89414, #2a1f08);
}
.rail__thumb--c {
background: radial-gradient(60% 60% at 40% 30%, rgba(180, 140, 255, 0.9), transparent 70%), linear-gradient(135deg, #6a3bd8, #1a0d3a);
}
.rail__kick {
font-family: var(--display);
font-weight: 900;
font-size: 0.62rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--red);
}
.rail__item h3 {
font-family: var(--display);
font-weight: 800;
font-size: 1rem;
line-height: 1.1;
margin: 0.1rem 0 0.2rem;
}
.rail__item p {
font-family: var(--serif);
font-size: 0.82rem;
margin: 0;
color: var(--ink-2);
}
/* sport lead */
.sport-lead {
margin-bottom: 0.9rem;
}
.sport-lead__photo {
aspect-ratio: 16 / 7;
border: 2px solid var(--black);
margin-bottom: 0.5rem;
background:
radial-gradient(40% 60% at 70% 50%, rgba(0, 0, 0, 0.55), transparent 60%),
repeating-linear-gradient(90deg, #1f6f3a 0 28px, #237a40 28px 56px);
}
.sport-lead__head {
font-family: var(--display);
font-weight: 900;
font-size: 1.5rem;
line-height: 0.98;
letter-spacing: -0.01em;
margin: 0.3rem 0 0.3rem;
text-transform: uppercase;
}
.sport-lead p {
font-family: var(--serif);
font-size: 0.9rem;
margin: 0;
}
.rail__list--scores .score {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid var(--rule);
}
.score__teams {
font-family: var(--display);
font-weight: 700;
font-size: 0.92rem;
}
.score__teams b {
font-weight: 900;
font-size: 1.05rem;
}
.score__tag {
font-family: var(--display);
font-weight: 800;
font-size: 0.66rem;
letter-spacing: 0.06em;
background: var(--black);
color: var(--white);
padding: 0.12rem 0.4rem;
border-radius: 3px;
}
.score__tag--live {
background: var(--red);
animation: flash 1.1s steps(1) infinite;
}
/* ============ WIN PROMO ============ */
.win {
border: 4px solid var(--black);
border-radius: var(--r-md);
background:
repeating-linear-gradient(45deg, var(--yellow) 0 22px, var(--yellow-d) 22px 44px);
overflow: hidden;
}
.win__inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 1.4rem;
align-items: center;
padding: 1.4rem 1.6rem;
}
.win__flash {
display: inline-block;
font-family: var(--display);
font-weight: 900;
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
background: var(--red);
color: var(--white);
padding: 0.25rem 0.6rem;
transform: rotate(-2deg);
margin-bottom: 0.6rem;
}
.win__head {
font-family: var(--display);
font-weight: 900;
font-size: clamp(2.2rem, 7vw, 3.6rem);
line-height: 0.9;
letter-spacing: -0.02em;
margin: 0 0 0.5rem;
text-transform: uppercase;
}
.win__amount {
color: var(--red);
-webkit-text-stroke: 1.5px var(--black);
}
.win__sub {
font-family: var(--display);
font-weight: 700;
font-size: 1rem;
max-width: 36ch;
margin: 0 0 0.9rem;
}
.win__form {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.win__form input {
flex: 1;
min-width: 200px;
font-family: var(--body);
font-size: 0.95rem;
padding: 0.7rem 0.8rem;
border: 3px solid var(--black);
border-radius: var(--r-sm);
background: var(--white);
}
.win__form input:focus-visible {
outline-offset: 0;
}
.win__form input[aria-invalid="true"] {
border-color: var(--red);
background: #fff2f1;
}
.win__terms {
font-family: var(--display);
font-size: 0.68rem;
color: var(--ink-2);
margin: 0.7rem 0 0;
}
.win__token {
width: 130px;
height: 130px;
background: var(--black);
color: var(--yellow);
border-radius: 50%;
display: grid;
place-content: center;
text-align: center;
border: 4px dashed var(--yellow);
outline: 4px solid var(--black);
transform: rotate(-6deg);
flex-shrink: 0;
}
.win__token-no {
font-family: var(--display);
font-weight: 900;
font-size: 2.2rem;
line-height: 1;
}
.win__token-lbl {
font-family: var(--display);
font-weight: 800;
font-size: 0.6rem;
letter-spacing: 0.1em;
}
/* ============ FOOTER ============ */
.foot {
max-width: 1180px;
margin: 0 auto;
padding: 1.4rem 1.1rem 2.2rem;
text-align: center;
}
.foot__logo {
font-family: var(--display);
font-weight: 900;
font-size: 1.4rem;
letter-spacing: 0.04em;
color: var(--red);
-webkit-text-stroke: 1px var(--black);
margin: 0 0 0.3rem;
}
.foot__note {
font-family: var(--serif);
font-size: 0.82rem;
font-style: italic;
color: var(--ink-3);
margin: 0;
}
/* ============ TOAST ============ */
.toast {
position: fixed;
left: 50%;
bottom: 1.2rem;
transform: translate(-50%, 1.5rem);
background: var(--black);
color: var(--white);
font-family: var(--display);
font-weight: 800;
font-size: 0.9rem;
padding: 0.7rem 1.2rem;
border-radius: var(--r-sm);
border: 2px solid var(--yellow);
box-shadow: 4px 4px 0 var(--red);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
z-index: 60;
max-width: 90vw;
text-align: center;
}
.toast.is-on {
opacity: 1;
transform: translate(-50%, 0);
}
/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
.hero {
grid-template-columns: 1fr;
}
.hero__media {
max-width: 460px;
}
.secondary {
grid-template-columns: 1fr 1fr;
}
.scard--lead {
grid-column: 1 / -1;
}
.scard + .scard {
border-left: 0;
padding-left: 0;
}
.scard:not(.scard--lead) {
border-top: 1px solid var(--rule);
padding-top: 0.9rem;
}
}
@media (max-width: 720px) {
.masthead__inner {
grid-template-columns: 1fr;
text-align: center;
gap: 0.5rem;
}
.masthead__nav {
justify-content: center;
}
.rail-wrap {
grid-template-columns: 1fr;
}
.teasers__bar {
flex-direction: column;
}
.teasers__label {
padding: 0.4rem;
justify-content: center;
}
.teasers__track {
flex-direction: column;
}
.teaser {
border-right: 0;
border-bottom: 2px dashed rgba(13, 13, 13, 0.35);
}
.teasers__nav {
flex-direction: row;
border-left: 0;
border-top: 3px solid var(--black);
}
.teasers__arrow + .teasers__arrow {
border-top: 0;
border-left: 1px solid rgba(255, 255, 255, 0.25);
}
.win__inner {
grid-template-columns: 1fr;
justify-items: start;
}
}
@media (max-width: 480px) {
.secondary {
grid-template-columns: 1fr;
}
.scard:not(.scard--lead) {
border-top: 1px solid var(--rule);
padding-top: 0.9rem;
}
.hero__head {
font-size: clamp(3rem, 16vw, 4.6rem);
}
}
@media (prefers-reduced-motion: reduce) {
.ticker__flash,
.score__tag--live {
animation: none;
}
* {
transition: none !important;
}
}(function () {
"use strict";
/* ---------- tiny toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer = null;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-on");
window.clearTimeout(toastTimer);
toastTimer = window.setTimeout(function () {
toastEl.classList.remove("is-on");
}, 2600);
}
/* ---------- today's date in masthead ---------- */
var dateEl = document.getElementById("todayDate");
if (dateEl) {
try {
dateEl.textContent = new Date().toLocaleDateString(undefined, {
weekday: "long",
day: "numeric",
month: "long",
});
} catch (e) {
/* leave fallback text */
}
}
/* ---------- breaking-headline ticker ---------- */
var tickerLine = document.getElementById("tickerLine");
var tickerToggle = document.getElementById("tickerToggle");
var headlines = [
"<b>BREAKING:</b> Pop icon ‘walks out’ mid-gig — 60,000 left in the dark",
"<b>JUST IN:</b> TV chef admits soup was ‘straight from a tin’ in court drama",
"<b>WEATHER:</b> 99° HEATWAVE to roast Britain this Bank Holiday weekend",
"<b>TRANSFER:</b> City eye shock £90m move for the ‘Wizard’",
"<b>BIZARRE:</b> ‘UFO’ spotted hovering over seaside bingo hall",
"<b>WIN:</b> Grab today’s golden token — £50,000 up for grabs!",
];
var tIndex = 0;
var tPaused = false;
var tTimer = null;
function showHeadline(i) {
if (!tickerLine) return;
tickerLine.style.opacity = "0";
window.setTimeout(function () {
tickerLine.innerHTML = headlines[i];
tickerLine.style.opacity = "1";
}, 250);
}
function advanceTicker() {
tIndex = (tIndex + 1) % headlines.length;
showHeadline(tIndex);
}
function startTicker() {
window.clearInterval(tTimer);
tTimer = window.setInterval(function () {
if (!tPaused) advanceTicker();
}, 3800);
}
if (tickerLine) {
showHeadline(0);
startTicker();
}
if (tickerToggle) {
tickerToggle.addEventListener("click", function () {
tPaused = !tPaused;
tickerToggle.setAttribute("aria-pressed", String(tPaused));
tickerToggle.setAttribute("aria-label", tPaused ? "Play ticker" : "Pause ticker");
var ico = tickerToggle.querySelector(".ticker__btn-ico");
if (ico) ico.textContent = tPaused ? "▶" : "II";
toast(tPaused ? "Ticker paused" : "Ticker running");
});
}
/* ---------- teaser carousel ---------- */
var teaserData = [
{ kick: "ROYALS", txt: "Palace ‘in meltdown’ over the missing corgi", pg: "PAGE 2" },
{ kick: "DIET", txt: "Lose a stone eating CHIPS — the doc says yes!", pg: "PAGE 10" },
{ kick: "TELLY", txt: "Soap legend QUITS after 30 years on the cobbles", pg: "PAGE 14" },
{ kick: "MONEY", txt: "The 5 bills you’re overpaying RIGHT NOW", pg: "PAGE 19" },
{ kick: "SHOCK", txt: "Lottery winner buys an island… then loses the key", pg: "PAGE 21" },
{ kick: "HEALTH", txt: "Doctors’ one tip to sleep like a baby tonight", pg: "PAGE 25" },
{ kick: "GADGET", txt: "Robot vac ‘adopts’ family cat as its own", pg: "PAGE 27" },
{ kick: "FOOTIE", txt: "Keeper saves penalty… with his BACKSIDE", pg: "BACK PAGE" },
];
var track = document.getElementById("teaserTrack");
var prevBtn = document.getElementById("teaserPrev");
var nextBtn = document.getElementById("teaserNext");
var page = 0;
function perPage() {
return window.matchMedia("(max-width: 720px)").matches ? 2 : 4;
}
function renderTeasers() {
if (!track) return;
var n = perPage();
var pages = Math.ceil(teaserData.length / n);
if (page >= pages) page = 0;
if (page < 0) page = pages - 1;
var start = page * n;
var slice = teaserData.slice(start, start + n);
track.innerHTML = "";
slice.forEach(function (t) {
var a = document.createElement("a");
a.className = "teaser";
a.href = "#top";
a.setAttribute("role", "listitem");
a.innerHTML =
'<span class="teaser__kick">' + t.kick + "</span>" +
'<span class="teaser__txt">' + t.txt + "</span>" +
'<span class="teaser__pg">→ ' + t.pg + "</span>";
a.addEventListener("click", function (ev) {
ev.preventDefault();
toast("Story " + t.pg + " — demo only");
});
track.appendChild(a);
});
}
if (nextBtn) {
nextBtn.addEventListener("click", function () {
page++;
renderTeasers();
});
}
if (prevBtn) {
prevBtn.addEventListener("click", function () {
page--;
renderTeasers();
});
}
var resizeTimer = null;
window.addEventListener("resize", function () {
window.clearTimeout(resizeTimer);
resizeTimer = window.setTimeout(renderTeasers, 150);
});
renderTeasers();
/* auto-advance teasers slowly, pause on hover/focus */
var teaserAuto = window.setInterval(function () {
if (track && (track.matches(":hover") || track.contains(document.activeElement))) return;
page++;
renderTeasers();
}, 6500);
window.addEventListener("beforeunload", function () {
window.clearInterval(teaserAuto);
});
/* ---------- read full story button ---------- */
var readBtn = document.getElementById("readFull");
if (readBtn) {
readBtn.addEventListener("click", function () {
toast("Continued on pages 4–9 — fictional demo");
});
}
/* ---------- WIN form ---------- */
var winForm = document.getElementById("winForm");
var winEmail = document.getElementById("winEmail");
if (winForm && winEmail) {
winForm.addEventListener("submit", function (ev) {
ev.preventDefault();
var val = winEmail.value.trim();
var ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
if (!ok) {
winEmail.setAttribute("aria-invalid", "true");
winEmail.focus();
toast("Pop in a valid email to enter!");
return;
}
winEmail.removeAttribute("aria-invalid");
winEmail.value = "";
toast("You're in the draw — good luck! (demo)");
});
winEmail.addEventListener("input", function () {
if (winEmail.getAttribute("aria-invalid") === "true") {
winEmail.removeAttribute("aria-invalid");
}
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>THE DAILY BLAST — Tabloid Front Page</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Playfair+Display:wght@500;600;700;800;900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- BREAKING TICKER -->
<div class="ticker" role="region" aria-label="Breaking news ticker">
<span class="ticker__flash" aria-hidden="true">BREAKING</span>
<div class="ticker__viewport">
<p class="ticker__line" id="tickerLine" aria-live="polite">
Loading the latest blasts…
</p>
</div>
<button class="ticker__btn" id="tickerToggle" type="button" aria-pressed="false" aria-label="Pause ticker">
<span class="ticker__btn-ico" aria-hidden="true">II</span>
</button>
</div>
<!-- MASTHEAD -->
<header class="masthead">
<div class="masthead__inner">
<div class="masthead__date">
<span class="masthead__day" id="todayDate">Monday</span>
<span class="masthead__price">35p • No. 14,902</span>
</div>
<a class="masthead__logo" href="#top">
<span class="masthead__the">THE DAILY</span>
<span class="masthead__blast">BLAST</span>
</a>
<nav class="masthead__nav" aria-label="Sections">
<a href="#showbiz">SHOWBIZ</a>
<a href="#sport">SPORT</a>
<a href="#win">WIN!</a>
</nav>
</div>
<div class="masthead__strap">YOUR No.1 FOR GOSSIP, GOALS & GIVEAWAYS</div>
</header>
<main id="top">
<!-- HERO -->
<section class="hero" aria-labelledby="heroHead">
<figure class="hero__media">
<div class="hero__photo" role="img" aria-label="A dramatic floodlit stadium at night, crowd silhouettes in the stands"></div>
<span class="hero__flash">EXCLUSIVE</span>
<span class="hero__price-blob" aria-hidden="true">PLUS<br />32 PAGES<br />INSIDE</span>
<figcaption class="hero__caption">
<em>Lights, camera… chaos:</em> the scene at Wemberley last night. <span class="credit">PICTURE: BLAST WIRE</span>
</figcaption>
</figure>
<div class="hero__copy">
<p class="kicker">WORLD EXCLUSIVE • PAGES 4–9</p>
<h1 class="hero__head" id="heroHead">
IT’S A
<span class="hero__head--hot">SCANDAL!</span>
</h1>
<p class="hero__deck">
Pop superstar storms off mid-show as 60,000 fans are left
<strong>STUNNED</strong> — and we’ve got the backstage texts they
DIDN’T want you to read.
</p>
<p class="byline">
By <strong>MAXINE TROTTER</strong>, Chief Showbiz Reporter
<span class="byline__time">• 6 min read • 12:04am</span>
</p>
<p class="hero__lede">
The biggest tour of the decade hit the rocks last night when the
headline act vanished from the stage after just four songs, leaving
a sold-out crowd chanting for a refund and a security team scrambling
for the exits. Within minutes, screenshots were flying across group
chats, agents were “unavailable for comment”, and a
source close to the band was whispering the two words nobody in the
camp wanted to hear: it’s over.
</p>
<blockquote class="pullquote">
“I’ve never seen anything like it — one minute fireworks, the
next minute fury.”
<cite>— a stunned fan, front row</cite>
</blockquote>
<p class="hero__body">
Insiders say tensions had been building for weeks behind the velvet
curtain, with rows over set lists, surprise guests and a mystery
rider request that left promoters “tearing their hair out”.
The Blast can reveal the full timeline of how a triumphant homecoming
turned into the most talked-about meltdown of the year — turn to
pages 4 to 9 for every jaw-dropping detail.
</p>
<button class="btn-blast" id="readFull" type="button">READ THE FULL STORY →</button>
</div>
</section>
<!-- YELLOW TEASER STRIP / CAROUSEL -->
<section class="teasers" aria-label="Today's top teasers">
<div class="teasers__bar">
<span class="teasers__label">DON’T MISS</span>
<div class="teasers__track" id="teaserTrack" role="list" aria-live="polite"></div>
<div class="teasers__nav">
<button class="teasers__arrow" id="teaserPrev" type="button" aria-label="Previous teasers">←</button>
<button class="teasers__arrow" id="teaserNext" type="button" aria-label="Next teasers">→</button>
</div>
</div>
</section>
<!-- SECONDARY SENSATIONAL ROW -->
<section class="secondary" aria-label="More front-page shockers">
<article class="scard scard--lead">
<figure class="scard__fig">
<div class="scard__photo scard__photo--court" role="img" aria-label="Stone steps outside a grand courthouse"></div>
<figcaption>The hearing drew crowds at dawn. <span class="credit">BLAST WIRE</span></figcaption>
</figure>
<span class="tag tag--shock">SHOCK</span>
<h2 class="scard__head">‘I FAKED THE LOT’: TV chef’s soup empire crumbles in court</h2>
<p class="scard__by">By <strong>DEREK FALLOW</strong>, Crime Desk</p>
<p class="scard__sum">
The nation’s favourite ladle-wielder admitted his “nan’s
secret recipe” came from a tin all along, as a packed gallery
gasped and one juror reportedly fainted. <span class="more">— page 11</span>
</p>
</article>
<article class="scard">
<figure class="scard__fig">
<div class="scard__photo scard__photo--ufo" role="img" aria-label="Green glowing lights over a quiet rooftop skyline at night"></div>
<figcaption>Witnesses filmed the lights for nine minutes. <span class="credit">READER PIC</span></figcaption>
</figure>
<span class="tag">WORLD GONE MAD</span>
<h2 class="scard__head">UFO over the bingo hall — and it WON the jackpot!</h2>
<p class="scard__sum">
Stunned players say the “saucer” called the final number itself.
<span class="more">— page 17</span>
</p>
</article>
<article class="scard">
<figure class="scard__fig">
<div class="scard__photo scard__photo--heat" role="img" aria-label="A shimmering red and orange heat haze over a city street"></div>
<figcaption>Forecasters warn of a record weekend. <span class="credit">BLAST GRAPHICS</span></figcaption>
</figure>
<span class="tag tag--shock">PHEW!</span>
<h2 class="scard__head">99° SCORCHER: Britain set to MELT this Bank Holiday</h2>
<p class="scard__sum">
Pack the factor 50 — and your brolly, because thunder follows by
teatime. <span class="more">— weather, page 23</span>
</p>
</article>
</section>
<!-- SHOWBIZ + SPORT RAIL -->
<div class="rail-wrap">
<section class="rail" id="showbiz" aria-labelledby="showbizHead">
<header class="rail__head">
<h2 id="showbizHead" class="rail__title">SHOWBIZ <span class="rail__amp">RED HOT</span></h2>
<a class="rail__all" href="#showbiz">ALL THE GOSS →</a>
</header>
<ul class="rail__list">
<li class="rail__item">
<div class="rail__thumb rail__thumb--a" role="img" aria-label="Sparkly pink stage portrait"></div>
<div>
<span class="rail__kick">SOAP STAR</span>
<h3>Tina ties the knot — for the FIFTH time!</h3>
<p>And guess who caught the bouquet…</p>
</div>
</li>
<li class="rail__item">
<div class="rail__thumb rail__thumb--b" role="img" aria-label="Golden duotone portrait"></div>
<div>
<span class="rail__kick">REALITY ROW</span>
<h3>Villa villains reunite — and it’s WAR</h3>
<p>Sun-loungers at dawn in the £4m mansion.</p>
</div>
</li>
<li class="rail__item">
<div class="rail__thumb rail__thumb--c" role="img" aria-label="Purple spotlight portrait"></div>
<div>
<span class="rail__kick">CHART NEWS</span>
<h3>Boyband’s comeback single… from a barn</h3>
<p>“The acoustics were moo-velous,” says drummer.</p>
</div>
</li>
</ul>
</section>
<section class="rail rail--sport" id="sport" aria-labelledby="sportHead">
<header class="rail__head">
<h2 id="sportHead" class="rail__title">BACK PAGE <span class="rail__amp">SPORT</span></h2>
<a class="rail__all" href="#sport">FULL-TIME →</a>
</header>
<article class="sport-lead">
<div class="sport-lead__photo" role="img" aria-label="Floodlit green pitch with a lone striker"></div>
<span class="tag tag--shock">TRANSFER BOMBSHELL</span>
<h3 class="sport-lead__head">£90M GAFFER GAMBLE: City swoop for the ‘Wizard’</h3>
<p>Done deal by Friday, says our man at the training ground — and the fans are already dreaming.</p>
</article>
<ul class="rail__list rail__list--scores">
<li class="score"><span class="score__teams">Rovers <b>3</b> – <b>1</b> United</span><span class="score__tag">FT</span></li>
<li class="score"><span class="score__teams">Athletic <b>0</b> – <b>0</b> County</span><span class="score__tag">FT</span></li>
<li class="score"><span class="score__teams">Town <b>2</b> – <b>2</b> Albion</span><span class="score__tag score__tag--live">87’</span></li>
</ul>
</section>
</div>
<!-- WIN PROMO -->
<section class="win" id="win" aria-labelledby="winHead">
<div class="win__inner">
<div class="win__left">
<span class="win__flash">FREE FOR READERS</span>
<h2 class="win__head" id="winHead">WIN <span class="win__amount">£50,000</span> CASH!</h2>
<p class="win__sub">
Plus a dream villa break for FOUR. Collect today’s golden token
on page 28 — it could be YOU!
</p>
<form class="win__form" id="winForm" novalidate>
<label class="sr-only" for="winEmail">Email address</label>
<input id="winEmail" type="email" placeholder="[email protected]" autocomplete="email" required />
<button class="btn-blast btn-blast--yellow" type="submit">ENTER NOW!</button>
</form>
<p class="win__terms" id="winNote">No purchase necessary. 18+. Fictional prize for demo only.</p>
</div>
<div class="win__token" aria-hidden="true">
<span class="win__token-no">No.7</span>
<span class="win__token-lbl">GOLDEN TOKEN</span>
</div>
</div>
</section>
</main>
<footer class="foot">
<p class="foot__logo">THE DAILY BLAST</p>
<p class="foot__note">
A fictional tabloid front page built for demonstration. Every name,
headline and prize is invented.
</p>
</footer>
<!-- TOAST -->
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Tabloid / Popular Daily Landing
A deliberately loud front page for The Daily Blast, a fictional popular daily, built in a black, bold-red and screaming-yellow palette with heavy condensed Inter display and a serif only for body copy. A sticky breaking-news ticker pins to the top and cycles through a stack of punchy headlines, with a pause/play control and a flashing BREAKING badge. The masthead pairs a stroked-and-shadowed nameplate with a dateline that fills in today’s date and a row of section chips.
The hero takes half the screen: a massive all-caps IT'S A SCANDAL! splash sits beside a duotone
“press photo” built entirely from CSS gradients, complete with a rotated red EXCLUSIVE flash, a
yellow inside-pages blob and an italic caption with a credit line. A drop cap opens the lead
paragraph, an oversized serif pull quote breaks up the column, and a byline carries a read-time and
timestamp. Underneath, a yellow DON’T MISS strip runs a teaser carousel with page numbers that pages
forward and back, auto-advances, and adapts how many teasers it shows on small screens.
A three-up sensational secondary row, a SHOWBIZ rail and a BACK PAGE SPORT rail with a transfer lead
and live-updating scores follow, before a striped WIN box offers £50,000 in a giveaway form with
inline email validation and friendly toast feedback. Every interaction is vanilla JS with no
libraries, the layout collapses cleanly to a single column under ~720px and works down to ~360px,
and motion respects prefers-reduced-motion.
Illustrative UI only — masthead, headlines, bylines, and articles are fictional; not a real news publication.