Sample News Headline
Short summary of the news article goes here.
Here is an HTML5 boilerplate with a header, a main nav, a footer, and a footer nav, formatted for a news website but can be tailored to any theme.
Webpage Code Below:.........................
Header Advertisement (728x90)
Latest News
Another Breaking Story
Short summary of the news article goes here.
Technology Update
Short summary of the news article goes here.
Lifestyles Story
Short summary of the news article goes here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Network World News</title>
<style>
/* ===== RESET ===== */
*{margin:0;padding:0;box-sizing:border-box;}
body{
font-family: Arial, Helvetica, sans-serif;
background:#f1f1f1;
color:#222;
line-height:1.6;
}
/* ===== CONTAINER ===== */
.container{
width:95%;
max-width:1200px;
margin:auto;
}
/* ===== TOP BAR ===== */
.topbar{
background:#000;
color:#aaa;
font-size:13px;
padding:6px 0;
text-align:center;
}
/* ===== HEADER ===== */
.site-header{
background:#111;
padding:20px 0;
text-align:center;
}
/* LOGO */
.logo img{
max-height:70px;
}
/* HEADER AD */
.header-ad{
margin-top:15px;
}
.ad-placeholder{
background:#2a2a2a;
color:#bbb;
padding:18px;
font-size:14px;
}
/* ===== NAV ===== */
.nav-wrap{
background:#1a1a1a;
position:sticky;
top:0;
z-index:9999;
border-top:1px solid #2a2a2a;
border-bottom:1px solid #2a2a2a;
}
.main-nav ul{
list-style:none;
display:flex;
justify-content:center;
flex-wrap:wrap;
}
.main-nav li{
margin:0;
}
.main-nav a{
display:block;
padding:14px 18px;
color:#fff;
text-decoration:none;
font-weight:600;
font-size:15px;
transition:.2s ease;
}
.main-nav a:hover{
background:#00bfff;
color:#000;
}
/* ===== MAIN ===== */
main{
background:#fff;
padding:40px 20px;
min-height:65vh;
}
/* ===== NEWS GRID PLACEHOLDER ===== */
.news-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
margin-top:25px;
}
.card{
background:#fafafa;
border:1px solid #e5e5e5;
padding:15px;
}
.card img{
width:100%;
height:auto;
margin-bottom:10px;
}
.card h3{
font-size:18px;
margin-bottom:8px;
}
/* ===== FOOTER ===== */
.site-footer{
background:#111;
color:#ccc;
padding:40px 0;
text-align:center;
margin-top:40px;
}
.footer-logo img{
max-height:55px;
margin-bottom:15px;
}
.footer-menu{
margin:15px 0;
}
.footer-menu a{
color:#ccc;
text-decoration:none;
margin:0 12px;
font-size:14px;
}
.footer-menu a:hover{
color:#00bfff;
}
.copyright{
font-size:13px;
opacity:.7;
margin-top:15px;
}
/* ===== MOBILE ===== */
@media (max-width:600px){
.main-nav a{
padding:12px 10px;
font-size:14px;
}
.logo img{
max-height:55px;
}
}
</style>
</head>
<body>
<!-- ===== TOP BAR ===== -->
<div class="topbar">
Breaking News • Latest Updates • Trusted Reporting
</div>
<!-- ===== HEADER ===== -->
<header class="site-header">
<div class="container">
<!-- LOGO -->
<div class="logo">
<img src="logo.png" alt="Network World News">
</div>
<!-- HEADER AD SLOT -->
<div class="header-ad">
<div class="ad-placeholder">
Header Advertisement (728x90)
</div>
</div>
</div>
</header>
<!-- ===== NAV ===== -->
<div class="nav-wrap">
<div class="container">
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Top Stories</a></li>
<li><a href="#">U.S.</a></li>
<li><a href="#">World</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Guides</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
<!-- ===== MAIN ===== -->
<main>
<div class="container">
<h1>Latest News</h1>
<!-- NEWS GRID -->
<div class="news-grid">
<article class="card">
<img src="https://placehold.co/400x220" alt="">
<h3>Sample News Headline</h3>
<p>Short summary of the news article goes here.</p>
</article>
<article class="card">
<img src="https://placehold.co/400x220" alt="">
<h3>Another Breaking Story</h3>
<p>Short summary of the news article goes here.</p>
</article>
<article class="card">
<img src="https://placehold.co/400x220" alt="">
<h3>Technology Update</h3>
<p>Short summary of the news article goes here.</p>
</article>
<article class="card">
<img src="https://placehold.co/400x220" alt="">
<h3>Lifestyles Story</h3>
<p>Short summary of the news article goes here.</p>
</article>
</div>
</div>
</main>
<!-- ===== FOOTER ===== -->
<footer class="site-footer">
<div class="container">
<div class="footer-logo">
<img src="logo.png" alt="Footer Logo">
</div>
<div class="footer-menu">
<a href="#">About</a>
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Advertise</a>
<a href="#">Contact</a>
<a href="#">Sitemap</a>
</div>
<div class="copyright">
© 2026 Your Website. All rights reserved.
</div>
</div>
</footer>
</body>
</html>
Was this article helpful?