<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern News Ticker</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.header {
background-color: #384d48;
color: white;
padding: 20px;
text-align: center;
}
.navbar {
display: flex;
justify-content: center;
background-color: #8B8149;
padding: 10px 0;
}
.navbar a {
color: white;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
transition: color 0.3s;
}
.navbar a:hover {
color: #D4D5D9;
}
.news-ticker-container {
position: relative;
background-color: #333;
color: white;
overflow: hidden;
height: 50px;
display: flex;
align-items: center;
}
.news-ticker-label {
background-color: #e74c3c;
padding: 10px;
font-weight: bold;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.news-ticker {
margin-left: 150px;
display: flex;
align-items: center;
white-space: nowrap;
}
.news-ticker span {
display: inline-block;
padding-left: 100%;
animation: ticker 20s linear infinite;
}
@keyframes ticker {
0% { transform: translateX(100%); }
50% { transform: translateX(50%); }
100% { transform: translateX(-100%); }
}
.news-ticker-item {
margin-right: 50px;
}
</style>
</head>
<body>
<div class="header">
<h1>News CodezillaYe</h1>
</div>
<div class="navbar">
<a href="#">Home</a>
<a href="#">World</a>
<a href="#">Politics</a>
<a href="#">Business</a>
<a href="#">Technology</a>
<a href="#">Sports</a>
<a href="#">Entertainment</a>
<a href="#">Health</a>
</div>
<div class="news-ticker-container">
<div class="news-ticker-label">Breaking News</div>
<div class="news-ticker">
<span>
<span class="news-ticker-item">Why CodezillaYe??</span>
<span class="news-ticker-item">-Save you time and effort.</span>
<span class="news-ticker-item">-Keep up with everything new.</span>
<span class="news-ticker-item">-It is constantly updated and developed.</span>
<span class="news-ticker-item">-Its services are free.</span>
</span>
</div>
</div>
</body>
</html>