Untitled
unknown
plain_text
a year ago
2.8 kB
4
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Your News Website</title> <style> /* Reset some default styles */ body, h1, h2, h3, p, ul, li { margin: 0; padding: 0; } body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; background-color: #f5f5f5; } .container { width: 80%; margin: 0 auto; overflow: hidden; } header { background-color: #333; color: #fff; padding: 20px 0; } nav { display: flex; justify-content: space-between; align-items: center; } nav a { color: #fff; text-decoration: none; margin: 0 15px; font-weight: bold; transition: color 0.3s ease-in-out; } nav a:hover { color: #ffd700; /* Change color on hover */ } .main-content { display: flex; flex-wrap: wrap; } .article { width: 70%; padding: 20px; box-sizing: border-box; background-color: #fff; margin: 10px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .sidebar { width: 30%; padding: 20px; box-sizing: border-box; background-color: #f5f5f5; margin: 10px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .footer { background-color: #333; color: #fff; text-align: center; padding: 10px 0; position: fixed; width: 100%; bottom: 0; } /* Responsive design */ @media screen and (max-width: 768px) { .article, .sidebar { width: 100%; margin: 10px 0; } } </style> </head> <body> <header> <div class="container"> <h1>Your News Website</h1> <nav> <a href="#">Home</a> <a href="#">Politics</a> <a href="#">Science</a> <a href="#">Technology</a> <a href="#">Entertainment</a> </nav> </div> </header> <div class="container main-content"> <div class="article"> <h2>Breaking News Title</h2> <p>Published on January 7, 2024</p> <p>This is a sample article text. Replace it with your actual news content.</p> </div> <div class="sidebar"> <h3>Latest News</h3> <ul> <li><a href="#">News 1</a></li> <li><a href="#">News 2</a></li> <li><a href="#">News 3</a></li> <li><a href="#">News 4</a></li> </ul> </div> </div> <div class="footer"> <p>© 2024 Your News Website. All rights reserved.</p> </div> </body> </html>
Editor is loading...
Leave a Comment