Página de destino - Aviso

Abrir en el editor Publica tu código

Recomendado

22 December 2024

Ejemplo de página web de portafolio

6 October 2024

<!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>

Página de destino - Aviso

Recomendado

directorios de coches

Ejemplo de página web de portafolio

Etiqueta de entrada

HTML

CSS

JS

Recomendado

directorios de coches

Ejemplo de página web de portafolio

Etiqueta de entrada

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS