Página de destino - Aviso

1,916 Andev.web

Abrir en el editor Publica tu código

Recomendado

27 June 2025

Un código de Mete

28 May 2025

Un código de Metehan

25 June 2025

Un código de Mete

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