Newspaper layouts are the ultimate test for any web developer. You have to balance information density with readability, manage complex grids, and ensure it looks good on a phone screen.
I recently decided to take on this challenge. I wanted to build a News Portal Homepage that rivals the likes of the BBC or The New York Times. But I didn’t want to stop at just one design.
I wanted to prove a point: HTML is the structure, but CSS is the soul.
So, I built one single HTML structure, but I created two completely different CSS versions for it. In this post, I’m sharing the source code for both.
The Concept: 2 Styles, 1 Codebase
The HTML and JavaScript remain exactly the same for both versions. You only need to swap the CSS file to completely transform the vibe of the website.
Version 1: The “Classic” Daily
This version focuses on density and familiarity. It uses standard serif fonts (Merriweather), compact spacing, and a traditional layout. It feels like a trusty morning broadsheet—perfect for hard news and information-heavy sites.
Version 2: The “Modern” Premium
For the second version, I upgraded the CSS to feel more like a digital magazine (think Medium or Apple News).
- Typography: Switched to Playfair Display for a luxurious feel.
- Design: Added hover-lift effects, smoother shadows, and rounded corners.
- Spacing: Increased whitespace to let the content breathe.
Key Features
- Fully Responsive: Breaks down from a 4-column layout to a single column on mobile.
- CSS Grid & Flexbox: No Bootstrap, no Tailwind—just pure, lightweight CSS.
- Interactive Elements: Includes a breaking news ticker, mobile toggle menu, and hover effects.
- Dynamic Date: A small JS snippet automatically updates the current date.
Get the Source Code
Ready to build this? Create a folder on your computer and add these three files.
1. The HTML (The Skeleton)
Save this as index.html. This structure works for both versions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Daily Chronicle | Global News Portal</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="top-bar">
<div class="container top-bar-inner">
<div id="current-date"></div>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
<header>
<div class="container header-inner">
<div class="menu-icon" onclick="toggleMenu()"><i class="fas fa-bars"></i></div>
<div class="logo">The Daily Chronicle</div>
<div class="search-icon"><i class="fas fa-search"></i></div>
</div>
<nav id="navbar">
<ul class="container">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">World</a></li>
<li><a href="#">Politics</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Health</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Opinion</a></li>
</ul>
</nav>
</header>
<div class="ticker-wrap">
<div class="ticker-heading">BREAKING</div>
<div class="ticker">
<div class="ticker-item">Global markets reach all-time high amidst tech boom.</div>
<div class="ticker-item">New climate policy signed by 50 nations in Geneva.</div>
<div class="ticker-item">SpaceX announces next mission to Mars for 2028.</div>
</div>
</div>
<main class="container">
<section class="hero-section">
<div class="hero-main">
<div class="img-overlay">
<img src="https://images.unsplash.com/photo-1529101091760-61df6be24296?q=80&w=1000" alt="Main News">
</div>
<div class="hero-text">
<span class="category-tag red">Politics</span>
<h1>Historic Summit Ends with Major Agreements on Global Trade</h1>
<p>Leaders from around the world gathered today to finalize the deal that has been in negotiation for over a decade.</p>
</div>
</div>
<div class="hero-sub">
<article class="sub-card">
<img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=500" alt="Sub 1">
<div class="sub-text">
<span class="category-tag blue">Tech</span>
<h3>Cybersecurity Threats on the Rise</h3>
</div>
</article>
<article class="sub-card">
<img src="https://images.unsplash.com/photo-1461896836934-ffe607ba8211?q=80&w=500" alt="Sub 2">
<div class="sub-text">
<span class="category-tag green">Sports</span>
<h3>Championship Finals: What to Expect</h3>
</div>
</article>
</div>
</section>
<div class="content-wrapper">
<div class="main-column">
<section class="category-section">
<div class="section-header">
<h2>Latest News</h2>
<span class="line"></span>
</div>
<div class="news-grid">
<article class="news-card">
<img src="https://images.unsplash.com/photo-1504711434969-e33886168f5c?q=80&w=400" alt="News">
<div class="news-body">
<span class="cat-text">World</span>
<h3>UN Declares New Education Initiative</h3>
<p>Aims to provide digital access to remote areas.</p>
<span class="time">2 hours ago</span>
</div>
</article>
<article class="news-card">
<img src="https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?q=80&w=400" alt="News">
<div class="news-body">
<span class="cat-text">Health</span>
<h3>Breakthrough in Medical Research</h3>
<p>Scientists discover potential cure for rare disease.</p>
<span class="time">4 hours ago</span>
</div>
</article>
<article class="news-card">
<img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?q=80&w=400" alt="News">
<div class="news-body">
<span class="cat-text">Lifestyle</span>
<h3>The Rise of Remote Work Culture</h3>
<p>How digital nomadism is reshaping cities.</p>
<span class="time">5 hours ago</span>
</div>
</article>
</div>
</section>
<section class="tech-section">
<div class="section-header dark-header">
<h2>Technology & Future</h2>
<a href="#">View All</a>
</div>
<div class="tech-grid">
<div class="tech-main">
<img src="https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=600" alt="Tech">
<div class="tech-overlay">
<h3>AI Revolution: Friend or Foe?</h3>
</div>
</div>
<div class="tech-list">
<div class="tech-item">
<img src="https://images.unsplash.com/photo-1550009158-9ebf69173e03?q=80&w=150" alt="T1">
<div>
<h4>New VR Headsets Launching Soon</h4>
<span>Gadgets</span>
</div>
</div>
<div class="tech-item">
<img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=150" alt="T2">
<div>
<h4>Coding for Kids: A New Curriculum</h4>
<span>Education</span>
</div>
</div>
<div class="tech-item">
<img src="https://images.unsplash.com/photo-1563770095-11a13e2a6906?q=80&w=150" alt="T3">
<div>
<h4>Electric Vehicles Sales Spike</h4>
<span>Auto</span>
</div>
</div>
</div>
</div>
</section>
<section class="category-section">
<div class="section-header">
<h2>Sports Highlights</h2>
<span class="line"></span>
</div>
<div class="sports-layout">
<article class="sports-card">
<img src="https://images.unsplash.com/photo-1579952363873-27f3bde9be2e?q=80&w=500" alt="Sports">
<h3>Premier League Update</h3>
</article>
<article class="sports-card">
<img src="https://images.unsplash.com/photo-1541534741688-6078c6bfb5c5?q=80&w=500" alt="Sports">
<h3>Olympic Preparations Begin</h3>
</article>
<article class="sports-card">
<img src="https://images.unsplash.com/photo-1628779238951-be2c9f256544?q=80&w=500" alt="Sports">
<h3>Cricket World Cup Analysis</h3>
</article>
</div>
</section>
</div>
<aside class="sidebar">
<div class="widget">
<h3 class="widget-title">Trending Now</h3>
<ul class="trending-list">
<li>
<span class="number">1</span>
<a href="#">Stock markets crash amidst uncertainty</a>
</li>
<li>
<span class="number">2</span>
<a href="#">New galaxy discovered by James Webb</a>
</li>
<li>
<span class="number">3</span>
<a href="#">Best travel destinations for 2025</a>
</li>
<li>
<span class="number">4</span>
<a href="#">Local elections results announced</a>
</li>
<li>
<span class="number">5</span>
<a href="#">Celebrity gala raises millions</a>
</li>
</ul>
</div>
<div class="widget ad-widget">
<span>Advertisement</span>
</div>
<div class="widget newsletter-widget">
<h3 class="widget-title">Subscribe</h3>
<p>Get the latest news delivered to your inbox daily.</p>
<input type="email" placeholder="Your email address">
<button>Subscribe</button>
</div>
<div class="widget">
<h3 class="widget-title">Opinion</h3>
<div class="opinion-item">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=100" alt="Author">
<div>
<h4>The Climate Crisis</h4>
<span class="author">By Sarah Jenkins</span>
</div>
</div>
<div class="opinion-item">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=100" alt="Author">
<div>
<h4>Economic Reform</h4>
<span class="author">By David Smith</span>
</div>
</div>
</div>
</aside>
</div>
</main>
<footer>
<div class="container footer-content">
<div class="footer-col">
<div class="footer-logo">The Daily Chronicle</div>
<p>Delivering truth and perspective on the world's most important stories since 1990.</p>
</div>
<div class="footer-col">
<h4>Sections</h4>
<ul>
<li><a href="#">World</a></li>
<li><a href="#">Politics</a></li>
<li><a href="#">Tech</a></li>
<li><a href="#">Sports</a></li>
</ul>
</div>
<div class="footer-col">
<h4>About Us</h4>
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Follow Us</h4>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
<div class="copyright">
© 2025 The Daily Chronicle. All Rights Reserved.
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
2. The CSS (Choose Your Style)
Here is where you get to choose. You can use Version 1 for a classic look, or Version 2 for a modern look.
Option A: Version 1 (Classic Style) Best for: Traditional news sites, government portals, archives.
/* --- 1. VARIABLES & RESET --- */
:root {
--primary-color: #111111; /* Deep Black for Headers */
--accent-color: #d93025; /* News Red */
--accent-blue: #1a73e8;
--accent-green: #188038;
--bg-body: #f8f9fa;
--bg-white: #ffffff;
--bg-dark: #1f2023;
--text-main: #202124;
--text-muted: #5f6368;
--border-color: #dadce0;
--font-serif: 'Merriweather', serif;
--font-sans: 'Roboto', sans-serif;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-hover: 0 10px 20px rgba(0,0,0,0.15);
--radius: 8px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font-sans);
background-color: var(--bg-body);
color: var(--text-main);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
ul { list-style: none; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
/* --- 2. TOP BAR & HEADER --- */
.top-bar {
background-color: var(--primary-color);
color: #fff;
font-size: 0.85rem;
padding: 8px 0;
}
.top-bar-inner { display: flex; justify-content: space-between; align-items: center; }
.social-links a { margin-left: 20px; color: #aaa; font-size: 0.9rem; }
.social-links a:hover { color: var(--bg-white); }
header {
background: var(--bg-white);
border-bottom: 1px solid var(--border-color);
padding: 25px 0 0;
position: sticky; top: 0; z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.header-inner { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; }
.logo {
font-family: var(--font-serif);
font-size: 2.8rem;
font-weight: 900;
color: var(--primary-color);
letter-spacing: -1.5px;
text-transform: uppercase;
background: linear-gradient(45deg, #111, #444);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.menu-icon, .search-icon { font-size: 1.4rem; color: var(--text-main); cursor: pointer; display: none; }
/* --- 3. NAVIGATION --- */
nav { border-top: 1px solid var(--border-color); }
nav ul { display: flex; justify-content: center; flex-wrap: wrap; }
nav ul a {
display: block;
padding: 15px 20px;
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
color: var(--text-main);
letter-spacing: 0.5px;
border-bottom: 3px solid transparent;
}
nav ul a:hover, nav ul a.active {
color: var(--accent-color);
border-bottom-color: var(--accent-color);
background-color: rgba(217, 48, 37, 0.05);
}
/* --- 4. NEWS TICKER --- */
.ticker-wrap {
background: var(--primary-color);
color: #fff;
display: flex;
height: 45px;
overflow: hidden;
font-family: var(--font-sans);
}
.ticker-heading {
background: var(--accent-color);
padding: 0 20px;
display: flex;
align-items: center;
font-weight: 800;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 1px;
z-index: 10;
box-shadow: 5px 0 10px rgba(0,0,0,0.2);
}
.ticker {
display: flex;
align-items: center;
animation: ticker 35s linear infinite;
white-space: nowrap;
}
.ticker-item {
padding: 0 40px;
font-size: 0.95rem;
position: relative;
}
.ticker-item::after {
content: '•';
position: absolute;
right: 0;
color: var(--accent-color);
}
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
/* --- 5. HERO SECTION --- */
.hero-section {
display: grid;
grid-template-columns: 2.2fr 1fr;
gap: 20px;
margin-top: 30px;
height: 500px;
}
/* Common Image Overlay Style */
.hero-main, .sub-card {
position: relative;
border-radius: var(--radius);
overflow: hidden;
cursor: pointer;
box-shadow: var(--shadow-sm);
}
.hero-main:hover img, .sub-card:hover img { transform: scale(1.05); }
.img-overlay, .hero-main img, .sub-card img { width: 100%; height: 100%; }
/* Gradient Overlay Text */
.hero-text, .sub-text {
position: absolute; bottom: 0; left: 0; width: 100%;
padding: 30px;
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
color: #fff;
z-index: 2;
}
.hero-text h1 {
font-family: var(--font-serif);
font-size: 2.4rem;
margin: 10px 0;
line-height: 1.2;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.hero-text p { font-size: 1.1rem; opacity: 0.9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-sub { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
.sub-text { padding: 20px; }
.sub-text h3 { font-family: var(--font-serif); font-size: 1.3rem; margin-top: 5px; line-height: 1.3; }
/* Category Tags */
.category-tag {
padding: 4px 10px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
color: #fff;
border-radius: 4px;
display: inline-block;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.red { background: var(--accent-color); }
.blue { background: var(--accent-blue); }
.green { background: var(--accent-green); }
/* --- 6. MAIN CONTENT AREA --- */
.content-wrapper { display: grid; grid-template-columns: 3fr 1fr; gap: 40px; margin: 60px 0; }
.section-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 25px; border-bottom: 2px solid var(--primary-color); padding-bottom: 10px;
}
.section-header h2 { font-family: var(--font-serif); font-size: 1.6rem; color: var(--primary-color); }
.section-header a { font-size: 0.85rem; font-weight: 700; color: var(--accent-color); text-transform: uppercase; }
/* News Grid Cards */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.news-card {
background: var(--bg-white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
border: 1px solid rgba(0,0,0,0.05);
}
.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.news-card img { height: 200px; width: 100%; }
.news-body { padding: 20px; }
.cat-text { color: var(--accent-color); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.news-card h3 {
font-family: var(--font-serif);
font-size: 1.2rem;
margin: 10px 0;
line-height: 1.4;
color: var(--primary-color);
}
.news-card p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 15px; line-height: 1.5; }
.time { font-size: 0.75rem; color: #999; font-style: italic; display: block; text-align: right; }
/* Tech Section (Dark) */
.tech-section {
background: var(--bg-dark);
color: #fff;
padding: 30px;
border-radius: var(--radius);
margin: 50px 0;
box-shadow: var(--shadow-md);
}
.dark-header { border-bottom-color: #444; }
.dark-header h2 { color: #fff; }
.tech-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 25px; margin-top: 20px; }
.tech-main { position: relative; height: 320px; border-radius: var(--radius); overflow: hidden; }
.tech-overlay {
position: absolute; bottom: 0;
padding: 20px;
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
width: 100%;
}
.tech-overlay h3 { font-family: var(--font-serif); font-size: 1.5rem; }
.tech-list { display: flex; flex-direction: column; gap: 20px; }
.tech-item { display: flex; gap: 15px; align-items: center; background: rgba(255,255,255,0.05); padding: 10px; border-radius: var(--radius); transition: 0.3s; }
.tech-item:hover { background: rgba(255,255,255,0.1); }
.tech-item img { width: 90px; height: 70px; border-radius: 4px; }
.tech-item h4 { font-size: 1rem; margin-bottom: 5px; font-weight: 500; }
.tech-item span { font-size: 0.7rem; color: #aaa; text-transform: uppercase; letter-spacing: 1px; }
/* Sports Layout */
.sports-layout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sports-card {
position: relative; height: 220px;
border-radius: var(--radius); overflow: hidden;
box-shadow: var(--shadow-sm); cursor: pointer;
}
.sports-card:hover img { transform: scale(1.1); }
.sports-card h3 {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 15px;
background: linear-gradient(to top, #000 0%, transparent 100%);
color: white; font-size: 1.1rem; font-weight: 700;
}
/* --- 7. SIDEBAR --- */
.sidebar { padding-left: 30px; border-left: 1px solid var(--border-color); }
.widget { margin-bottom: 50px; }
.widget-title {
font-family: var(--font-serif);
font-size: 1.3rem;
border-left: 4px solid var(--primary-color);
padding-left: 15px;
margin-bottom: 25px;
font-weight: 800;
}
/* Trending List */
.trending-list { counter-reset: trend-counter; }
.trending-list li {
display: flex; align-items: baseline;
margin-bottom: 20px; padding-bottom: 15px;
border-bottom: 1px solid #eee;
counter-increment: trend-counter;
}
.trending-list li:last-child { border-bottom: none; }
.number {
font-size: 2.5rem; color: #e0e0e0;
font-weight: 900; margin-right: 20px;
line-height: 0.8; font-style: italic;
font-family: var(--font-serif);
}
.trending-list li::before {
/* Alternative Counter Style if needed, but .number span works better here */
}
.trending-list a { font-size: 1.05rem; font-weight: 600; color: var(--text-main); line-height: 1.4; }
.trending-list a:hover { color: var(--accent-color); }
/* Newsletter */
.newsletter-widget { background: #f1f3f4; padding: 25px; border-radius: var(--radius); text-align: center; }
.newsletter-widget p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 15px; }
.newsletter-widget input {
width: 100%; padding: 12px; margin-bottom: 10px;
border: 1px solid #ccc; border-radius: 4px;
font-family: var(--font-sans);
}
.newsletter-widget button {
width: 100%; padding: 12px;
background: var(--primary-color); color: #fff;
border: none; border-radius: 4px;
font-weight: 700; text-transform: uppercase;
cursor: pointer; transition: 0.3s;
}
.newsletter-widget button:hover { background: var(--accent-color); }
/* Opinion */
.opinion-item {
display: flex; align-items: center; gap: 15px; margin-bottom: 20px;
background: #fff; padding: 10px; border-radius: 50px 8px 8px 50px;
box-shadow: var(--shadow-sm); border: 1px solid #eee; transition: 0.3s;
}
.opinion-item:hover { box-shadow: var(--shadow-md); transform: translateX(5px); }
.opinion-item img { width: 50px; height: 50px; border-radius: 50%; }
.opinion-item h4 { font-size: 0.95rem; margin-bottom: 2px; font-weight: 700; }
.author { font-size: 0.75rem; color: var(--accent-color); font-weight: 600; text-transform: uppercase; }
/* --- 8. FOOTER --- */
footer {
background: var(--bg-dark);
color: #e8eaed;
padding: 70px 0 30px;
margin-top: 50px;
}
.footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px; margin-bottom: 50px; }
.footer-logo {
font-family: var(--font-serif);
font-size: 1.8rem;
font-weight: 900;
color: #fff;
margin-bottom: 20px;
letter-spacing: -1px;
}
.footer-col p { color: #9aa0a6; font-size: 0.9rem; line-height: 1.6; max-width: 300px; }
.footer-col h4 {
color: #fff;
margin-bottom: 20px;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
border-bottom: 2px solid var(--accent-color);
display: inline-block;
padding-bottom: 5px;
}
.footer-col ul li { margin-bottom: 12px; }
.footer-col a { color: #bdc1c6; font-size: 0.9rem; }
.footer-col a:hover { color: #fff; padding-left: 5px; }
.copyright {
text-align: center;
border-top: 1px solid #3c4043;
padding-top: 30px;
font-size: 0.8rem;
color: #9aa0a6;
}
/* --- 9. RESPONSIVE MEDIA QUERIES --- */
/* Tablet & Smaller Laptops */
@media (max-width: 1024px) {
.container { padding: 0 15px; }
.hero-section { height: 400px; }
.news-grid { grid-template-columns: repeat(2, 1fr); }
.content-wrapper { gap: 20px; }
nav ul a { padding: 15px 10px; font-size: 0.75rem; }
}
/* Tablets (Portrait) */
@media (max-width: 900px) {
.content-wrapper { grid-template-columns: 1fr; }
.sidebar {
border-left: none; padding-left: 0;
margin-top: 50px; border-top: 2px solid var(--border-color); padding-top: 50px;
display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
}
.hero-section { grid-template-columns: 1fr; height: auto; }
.hero-main { height: 350px; }
.hero-sub { grid-template-columns: 1fr 1fr; height: 200px; }
.footer-content { grid-template-columns: 1fr 1fr; }
}
/* Mobile Devices */
@media (max-width: 600px) {
.header-inner { flex-wrap: wrap; padding: 15px 0; }
.logo { order: 1; font-size: 2rem; width: 100%; text-align: center; margin-bottom: 10px; }
.menu-icon, .search-icon { display: block; order: 2; font-size: 1.5rem; position: absolute; top: 20px; }
.menu-icon { left: 20px; }
.search-icon { right: 20px; }
/* Mobile Nav */
nav { background: #fff; }
nav ul {
display: none;
flex-direction: column;
width: 100%;
border-top: 1px solid var(--border-color);
}
nav ul.show { display: flex; animation: slideDown 0.3s ease; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
nav ul a { border-bottom: 1px solid #f1f1f1; padding: 15px; text-align: left; padding-left: 20px; }
.hero-sub { grid-template-columns: 1fr; height: auto; gap: 15px; }
.sub-card { height: 200px; }
.news-grid { grid-template-columns: 1fr; }
.news-card { display: flex; height: 120px; align-items: center; }
.news-card img { width: 120px; height: 100%; flex-shrink: 0; }
.news-body { padding: 10px 15px; }
.news-card h3 { font-size: 1rem; margin: 5px 0; }
.news-card p { display: none; } /* Hide excerpt on mobile for compact view */
.tech-grid { grid-template-columns: 1fr; }
.sports-layout { grid-template-columns: 1fr; }
.sidebar { grid-template-columns: 1fr; }
.footer-content { grid-template-columns: 1fr; text-align: center; }
}
Option B: Version 2 (Modern/Premium Style) Best for: Lifestyle magazines, tech blogs, fashion editorials.
/* --- 1. VARIABLES & RESET --- */
:root {
--primary: #111111; /* Jet Black */
--accent: #c0392b; /* News Red */
--accent-blue: #2980b9;
--accent-green: #218c74;
--bg-body: #f8f9fa; /* Very Light Grey */
--bg-card: #ffffff;
--text-main: #2c3e50;
--text-light: #7f8c8d;
--border: #e1e4e8;
--shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
--shadow-md: 0 8px 24px rgba(0,0,0,0.08);
--font-head: 'Merriweather', serif; /* Classic News Font */
--font-sans: 'Roboto', sans-serif;
--transition: all 0.3s ease;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font-sans);
background-color: var(--bg-body);
color: var(--text-main);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; transition: var(--transition); }
img { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--transition); }
ul { list-style: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* --- 2. TOP BAR & HEADER --- */
.top-bar {
background: var(--primary);
color: #fff;
font-size: 0.8rem;
padding: 8px 0;
letter-spacing: 0.5px;
}
.top-bar-inner { display: flex; justify-content: space-between; align-items: center; }
.social-links a { margin-left: 20px; font-size: 0.9rem; opacity: 0.7; }
.social-links a:hover { opacity: 1; color: var(--accent); }
header {
background: var(--bg-card);
border-bottom: 1px solid var(--border);
padding: 25px 0 0;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}
.header-inner { display: flex; justify-content: space-between; align-items: center; padding-bottom: 25px; }
.logo {
font-family: 'Playfair Display', serif; /* Changed to Playfair for luxury look */
font-size: 3rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -1px;
color: var(--primary);
background: -webkit-linear-gradient(45deg, #000, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.menu-icon, .search-icon { font-size: 1.4rem; cursor: pointer; color: var(--text-main); display: none; }
/* Navigation */
nav { border-top: 1px solid var(--border); border-bottom: 4px solid var(--primary); }
nav ul { display: flex; justify-content: center; flex-wrap: wrap; }
nav ul a {
display: block;
padding: 15px 18px;
font-weight: 600;
text-transform: uppercase;
font-size: 0.85rem;
color: var(--primary);
position: relative;
}
/* Nav Underline Animation */
nav ul a::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 0%; height: 3px;
background: var(--accent);
transition: var(--transition);
}
nav ul a:hover::after, nav ul a.active::after { width: 100%; }
/* --- 3. NEWS TICKER --- */
.ticker-wrap {
background: var(--primary);
color: #fff;
display: flex;
align-items: center;
overflow: hidden;
height: 40px;
border-bottom: 1px solid #333;
}
.ticker-heading {
background: var(--accent);
padding: 0 20px;
height: 100%;
display: flex;
align-items: center;
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
z-index: 10;
}
.ticker { display: flex; animation: ticker 30s linear infinite; white-space: nowrap; align-items: center; }
.ticker-item { padding: 0 40px; font-size: 0.9rem; font-weight: 500; }
.ticker-item::before { content: '●'; color: var(--accent); margin-right: 10px; font-size: 0.8rem; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
/* --- 4. HERO SECTION --- */
.hero-section {
display: grid;
grid-template-columns: 2.2fr 1fr;
gap: 8px;
margin-top: 30px;
height: 500px; /* Taller hero */
}
.hero-main, .sub-card {
position: relative;
overflow: hidden;
border-radius: 4px; /* Slight rounded corners */
}
.hero-main { height: 100%; }
.hero-sub { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; height: 100%; }
/* Image Zoom Effect */
.hero-main:hover img, .sub-card:hover img { transform: scale(1.05); }
.img-overlay { height: 100%; width: 100%; }
.img-overlay::after {
content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 60%);
}
.hero-text, .sub-text {
position: absolute; bottom: 0; left: 0;
width: 100%; padding: 30px;
z-index: 2; color: #fff;
}
.category-tag {
padding: 4px 10px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
color: #fff;
display: inline-block;
margin-bottom: 10px;
border-radius: 2px;
}
.red { background: var(--accent); }
.blue { background: var(--accent-blue); }
.green { background: var(--accent-green); }
.hero-text h1 {
font-family: var(--font-head);
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.hero-text p { font-size: 1.1rem; opacity: 0.9; max-width: 90%; }
.sub-text h3 {
font-family: var(--font-head);
font-size: 1.3rem;
line-height: 1.3;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
/* --- 5. MAIN CONTENT LAYOUT --- */
.content-wrapper { display: grid; grid-template-columns: 3fr 1fr; gap: 50px; margin: 60px 0; }
.section-header { display: flex; align-items: center; margin-bottom: 30px; }
.section-header h2 {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 700;
margin-right: 20px;
white-space: nowrap;
color: var(--primary);
}
.line { height: 3px; background: var(--primary); width: 100%; opacity: 0.1; border-radius: 2px; }
/* News Grid */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.news-card {
background: var(--bg-card);
border-radius: 8px;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition);
border: 1px solid #eee;
}
.news-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.news-card img { height: 200px; }
.news-body { padding: 20px; }
.cat-text {
color: var(--accent);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 5px; display: block;
}
.news-card h3 {
font-family: var(--font-head);
font-size: 1.2rem;
font-weight: 700;
margin: 10px 0;
line-height: 1.4;
color: var(--primary);
}
.news-card p { font-size: 0.95rem; color: var(--text-light); margin-bottom: 15px; line-height: 1.6; }
.time { font-size: 0.75rem; color: #999; display: flex; align-items: center; gap: 5px; }
.time::before { content: '\f017'; font-family: 'Font Awesome 6 Free'; font-weight: 400; }
/* Tech Section */
.tech-section {
background: #0f0f0f;
color: #fff;
padding: 40px;
border-radius: 12px;
margin: 60px 0;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.dark-header { border-bottom: 1px solid #333; padding-bottom: 15px; margin-bottom: 30px; }
.dark-header h2 { color: #fff; }
.dark-header a { font-size: 0.9rem; color: #ccc; border-bottom: 1px solid #ccc; }
.tech-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 30px; }
.tech-main { position: relative; height: 350px; border-radius: 8px; overflow: hidden; }
.tech-main:hover img { transform: scale(1.05); }
.tech-overlay {
position: absolute; bottom: 0; left: 0; width: 100%;
padding: 30px;
background: linear-gradient(to top, #000 0%, transparent 100%);
}
.tech-overlay h3 { font-family: var(--font-head); font-size: 1.8rem; margin: 0; }
.tech-list { display: flex; flex-direction: column; gap: 20px; }
.tech-item {
display: flex; gap: 20px; align-items: center;
border-bottom: 1px solid #333; padding-bottom: 20px;
cursor: pointer;
}
.tech-item:last-child { border: none; }
.tech-item:hover h4 { color: var(--accent-blue); }
.tech-item img { width: 100px; height: 75px; border-radius: 6px; }
.tech-item h4 { font-size: 1.1rem; margin-bottom: 5px; font-weight: 500; line-height: 1.3; }
.tech-item span { font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: 1px; }
/* Sports Layout */
.sports-layout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sports-card {
position: relative;
height: 240px;
overflow: hidden;
border-radius: 8px;
box-shadow: var(--shadow-sm);
cursor: pointer;
}
.sports-card:hover img { transform: scale(1.1); }
.sports-card h3 {
position: absolute; bottom: 20px; left: 20px; right: 20px;
background: #fff; color: var(--primary);
padding: 15px;
font-size: 1rem;
font-weight: 700;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
border-radius: 4px;
}
/* --- 6. SIDEBAR WIDGETS --- */
.sidebar { padding-left: 30px; border-left: 1px solid var(--border); }
.widget { margin-bottom: 50px; }
.widget-title {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
border-bottom: 3px solid var(--primary);
padding-bottom: 10px;
margin-bottom: 25px;
display: inline-block;
}
/* Trending List (Styled Numbers) */
.trending-list { counter-reset: trend-counter; }
.trending-list li {
display: flex; align-items: baseline; margin-bottom: 20px;
padding-bottom: 20px; border-bottom: 1px solid #eee;
}
.trending-list li:last-child { border: none; }
.number {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
color: #e0e0e0;
font-weight: 900;
margin-right: 20px;
line-height: 0.8;
min-width: 40px;
}
.trending-list li:hover .number { color: var(--accent); }
.trending-list a {
font-family: var(--font-head);
font-size: 1.1rem;
color: var(--text-main);
font-weight: 700;
line-height: 1.4;
}
.trending-list a:hover { color: var(--accent); }
/* Newsletter */
.newsletter-widget {
background: #f1f2f6;
padding: 30px;
border-radius: 8px;
text-align: center;
}
.newsletter-widget p { font-size: 0.9rem; color: var(--text-light); margin-bottom: 20px; }
.newsletter-widget input {
width: 100%; padding: 12px; margin-bottom: 10px;
border: 1px solid #ddd; border-radius: 4px; outline: none;
}
.newsletter-widget button {
width: 100%; padding: 12px;
background: var(--primary); color: white;
border: none; border-radius: 4px;
font-weight: 700; text-transform: uppercase; cursor: pointer;
transition: var(--transition);
}
.newsletter-widget button:hover { background: var(--accent); }
/* Opinion */
.opinion-item {
display: flex; align-items: center; gap: 20px;
margin-bottom: 25px; cursor: pointer;
}
.opinion-item img {
width: 70px; height: 70px; border-radius: 50%;
border: 3px solid #fff; box-shadow: var(--shadow-sm);
}
.opinion-item h4 { font-size: 1.1rem; margin-bottom: 5px; line-height: 1.3; }
.author { font-size: 0.85rem; color: var(--accent); font-weight: 700; text-transform: uppercase; }
/* --- 7. FOOTER --- */
footer { background: #1a1a1a; color: #aaa; padding: 80px 0 30px; margin-top: 50px; }
.footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 50px; padding-bottom: 50px; border-bottom: 1px solid #333; }
.footer-logo {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
color: #fff;
margin-bottom: 20px;
display: block;
}
.footer-col p { font-size: 0.9rem; line-height: 1.8; margin-bottom: 20px; }
.footer-col h4 {
color: #fff;
margin-bottom: 25px;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.footer-col ul li { margin-bottom: 12px; }
.footer-col a { font-size: 0.95rem; }
.footer-col a:hover { color: var(--white); text-decoration: underline; }
.copyright { text-align: center; padding-top: 30px; font-size: 0.85rem; color: #666; }
/* --- 8. RESPONSIVE DESIGN --- */
@media (max-width: 1024px) {
.hero-section { height: auto; grid-template-columns: 1fr; }
.hero-main { height: 400px; margin-bottom: 8px; }
.hero-sub { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; height: 250px; }
.content-wrapper { grid-template-columns: 1fr; gap: 30px; }
.sidebar { border-left: none; padding-left: 0; margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.header-inner { flex-wrap: wrap; justify-content: space-between; position: relative; }
.logo { font-size: 2.2rem; margin: 0 auto; }
.menu-icon, .search-icon { display: block; position: absolute; top: 0; }
.menu-icon { left: 0; }
.search-icon { right: 0; }
nav { display: none; } /* Hide default nav */
nav ul.show { display: flex; flex-direction: column; background: #fff; width: 100%; position: absolute; top: 100%; left: 0; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.hero-sub { grid-template-columns: 1fr; height: auto; }
.sub-card { height: 250px; }
.news-grid { grid-template-columns: 1fr; }
.tech-grid { grid-template-columns: 1fr; }
.tech-main { height: 250px; }
.sports-layout { grid-template-columns: 1fr; }
.sidebar { grid-template-columns: 1fr; }
.footer-content { grid-template-columns: 1fr; text-align: center; }
}
3. The JavaScript (The Logic)
Save this as script.js. It handles the mobile menu and the dynamic date.
document.addEventListener("DOMContentLoaded", () => {
const dateElement = document.getElementById('current-date');
const today = new Date();
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
dateElement.textContent = today.toLocaleDateString('en-US', options);
});
function toggleMenu() {
const navUl = document.querySelector('nav ul');
navUl.classList.toggle('show');
}
How to Switch Versions
It is super simple. If you saved the Classic CSS as style.css and the Modern CSS as style-modern.css, just change one line in your HTMLtag:
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style-modern.css">
Final Thoughts
This project was a fun experiment in typography and layout. It shows that you don’t always need to rewrite your HTML to get a fresh look—sometimes, a CSS refactor is all you need.
Feel free to download, edit, and use this template for your own projects. Let me know in the comments: Which version do you prefer? The Classic or the Modern?
Happy Coding! 🚀
