Página de destino - Aviso

2,203 Andev.web

Abrir en el editor Publica tu código

Recomendado

18 December 2025

Código HTML5 del juego de rompecabezas Block Blast

16 November 2024

Tarjeta con degradado HTML

16 June 2025

Un código de daniel_pindou_7

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Global Daily News</title>
    <style>
        /* General Styles */
        body {
            font-family: 'Georgia', serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

/* Header */
        header {
            background-color: #fff;
            border-bottom: 1px solid #e2e2e2;
            padding: 10px 0;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo {
            font-family: 'Times New Roman', serif;
            font-size: 2.5rem;
            font-weight: bold;
        }
        nav ul {
            list-style-type: none;
            padding: 0;
            display: flex;
        }
        nav ul li {
            margin-right: 20px;
        }
        nav ul li a {
            text-decoration: none;
            color: #333;
            font-weight: bold;
            transition: color 0.3s ease;
        }
        nav ul li a:hover {
            color: #1a1a1a;
        }

/* Main Section */
        main {
            padding: 40px 0;
        }
        .headline {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        .article {
            margin-bottom: 40px;
            border: 1px solid #e2e2e2;
            padding: 20px;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .article img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
        }
        .article h2 {
            font-size: 1.8rem;
            margin: 20px 0 10px;
        }
        .article-meta {
            font-style: italic;
            color: #666;
            margin-bottom: 10px;
        }
        .article-content {
            font-size: 1.1rem;
            line-height: 1.8;
        }

/* Footer */
        footer {
            background-color: #f8f8f8;
            border-top: 1px solid #e2e2e2;
            padding: 20px 0;
            text-align: center;
        }

/* Responsive */
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                align-items: flex-start;
            }
            nav ul {
                flex-direction: column;
                margin-top: 10px;
            }
            nav ul li {
                margin-right: 0;
                margin-bottom: 10px;
            }
            .headline {
                font-size: 2rem;
            }
            .article h2 {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container header-content">
            <div class="logo">Global Daily</div>
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#politics">Politics</a></li>
                    <li><a href="#economy">Economy</a></li>
                    <li><a href="#world">World</a></li>
                    <li><a href="#culture">Culture</a></li>
                </ul>
            </nav>
        </div>
    </header>

<main class="container">
        <h1 class="headline">Breaking News</h1>

<article class="article">
            <img src="https://loremflickr.com/640/480/nature" alt="Climate Change">
            <h2>Major Advances in the Fight Against Climate Change</h2>
            <div class="article-meta">By John Smith | December 4, 2024</div>
            <div class="article-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>
            </div>
        </article>

<article class="article">
            <img src="https://loremflickr.com/640/480/technology" alt="Artificial Intelligence">
            <h2>AI Revolution: New Model Passes the Turing Test</h2>
            <div class="article-meta">By Jane Doe | December 3, 2024</div>
            <div class="article-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>
            </div>
        </article>
    </main>

CSS