Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>vnexpressX - News</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| background-color: #f4f4f4; | |
| } | |
| header { | |
| background-color: #333; | |
| color: #fff; | |
| padding: 10px 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| header h1 { | |
| margin: 0; | |
| } | |
| header nav ul { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| display: flex; | |
| } | |
| header nav ul li { | |
| margin: 0 10px; | |
| } | |
| header nav ul li a { | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| main { | |
| padding: 20px; | |
| } | |
| .article { | |
| background: #fff; | |
| margin: 20px 0; | |
| padding: 15px; | |
| border-radius: 5px; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| display: flex; | |
| } | |
| .article-image { | |
| width: 150px; | |
| height: 150px; | |
| border-radius: 5px; | |
| margin-right: 15px; | |
| object-fit: cover; | |
| } | |
| .article-content { | |
| flex: 1; | |
| } | |
| .article-title { | |
| margin: 0; | |
| font-size: 1.5em; | |
| } | |
| .article-title a { | |
| text-decoration: none; | |
| color: #333; | |
| } | |
| .article-title a:hover { | |
| color: #007BFF; | |
| } | |
| .article-description { | |
| color: #666; | |
| } | |
| footer { | |
| text-align: center; | |
| padding: 10px 0; | |
| background: #333; | |
| color: #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>vnexpressX</h1> | |
| <nav> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">Technology</a></li> | |
| <li><a href="#">Health</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <main> | |
| <section id="news-container"></section> | |
| </main> | |
| <footer> | |
| <p>© 2025 vnexpressX. All rights reserved.</p> | |
| </footer> | |
| <script> | |
| const articles = [ | |
| { | |
| title: "Breaking News: Major Event Happens", | |
| description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", | |
| url: "#", | |
| image: "https://via.placeholder.com/150", | |
| }, | |
| { | |
| title: "Tech Trends: New Innovations in 2025", | |
| description: "Curabitur vel erat in ligula bibendum sollicitudin.", | |
| url: "#", | |
| image: "https://via.placeholder.com/150", | |
| }, | |
| { | |
| title: "Health Tips: Staying Fit During Winter", | |
| description: "Pellentesque habitant morbi tristique senectus et netus.", | |
| url: "#", | |
| image: "https://via.placeholder.com/150", | |
| }, | |
| ]; | |
| function renderArticles() { | |
| const newsContainer = document.getElementById("news-container"); | |
| articles.forEach((article) => { | |
| const articleElement = document.createElement("div"); | |
| articleElement.className = "article"; | |
| articleElement.innerHTML = ` | |
| <img src="${article.image}" alt="${article.title}" class="article-image" /> | |
| <div class="article-content"> | |
| <h2 class="article-title"><a href="${article.url}">${article.title}</a></h2> | |
| <p class="article-description">${article.description}</p> | |
| </div> | |
| `; | |
| newsContainer.appendChild(articleElement); | |
| }); | |
| } | |
| document.addEventListener("DOMContentLoaded", () => { | |
| renderArticles(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |