Webleb - Extraits de Code

HTML CSS JS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aranza - Sitio Web Personal</title>
    <style>
        /* --- ESTILOS GENERALES (CSS) --- */
        
        /* Reset básico para quitar márgenes por defecto */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            /* Fondo con degradado suave como en la imagen */
            background: linear-gradient(180deg, #e6eef7 0%, #dbe4ee 100%);
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            color: #333;
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* Asegura que el footer esté abajo si hay poco contenido */
            align-items: center;
        }

/* --- ENCABEZADO (Barra superior) --- */
        header {
            width: 100%;
            background-color: #f8fafd; /* Un gris muy azulado muy claro */
            padding: 20px 0;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Sombra suave */
            margin-bottom: 40px;
        }

header h1 {
            font-size: 2.5rem;
            color: #4a5568; /* Gris azulado oscuro */
            font-weight: 400;
            letter-spacing: 1px;
            text-transform: uppercase; /* Todo en mayúsculas */
        }

/* --- TARJETA PRINCIPAL (Contenedor blanco) --- */
        .main-container {
            flex: 1; /* Ocupa el espacio disponible */
            display: flex;
            justify-content: center;
            align-items: flex-start; /* Alinea la tarjeta arriba */
            padding: 0 20px;
            width: 100%;
            max-width: 1200px;
        }

.profile-card {
            background-color: #ffffff;
            border-radius: 20px; /* Bordes muy redondeados */
            box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Sombra difuminada */
            width: 100%;
            max-width: 600px; /* Ancho máximo de la tarjeta */
            overflow: hidden; /* Para que la imagen respete los bordes redondeados */
            text-align: center;
            padding-bottom: 40px;
        }

/* Estilos de la Imagen */
        .landscape-image {
            width: 100%;
            height: auto;
            display: block;
            /* Si tienes una imagen muy alta, puedes usar estas líneas para recortarla: */
            /* height: 300px; object-fit: cover; */
        }

/* Estilos del Texto */
        .profile-content {
            padding: 30px 40px;
        }

.profile-content h2 {
            font-size: 2rem;
            color: #1a202c; /* Casi negro */
            margin-bottom: 15px;
            font-weight: 600;
        }

.profile-content p {
            font-size: 1.1rem;
            color: #718096; /* Gris medio */
            line-height: 1.6;
            margin-bottom: 30px;
            font-weight: 300;
        }

/* Estilos del Botón */
        .btn-more {
            display: inline-block;
            background-color: #8c8389; /* Color gris violáceo del botón */
            color: white;
            text-decoration: none; /* Quita el subrayado */
            padding: 12px 35px;
            border-radius: 25px; /* Botón ovalado */
            font-size: 1rem;
            font-weight: 500;
            transition: background-color 0.3s ease, transform 0.2s ease;
            border: none;
            cursor: pointer;
        }

/* Efecto al pasar el ratón por encima del botón */
        .btn-more:hover {
            background-color: #766d73;
            transform: translateY(-2px); /* Se eleva ligeramente */
        }

/* --- PIE DE PÁGINA (Footer) --- */
        footer {
            width: 100%;
            text-align: center;
            padding: 20px 0;
            color: #718096;
            font-size: 0.9rem;
            margin-top: 40px;
        }

</style>
</head>
<body>

<header>
        <h1>ARANZA</h1>
    </header>

<div class="main-container">
        <div class="profile-card">
            
            
            
            <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=1000&auto=format&fit=crop" alt="Paisaje de montaña con lago" class="landscape-image">
            
            
            <div class="profile-content">
                <h2>¡Hola, soy Aranza!</h2>
                <p>Bienvenido a mi sitio web personal. Aquí puedes aprender un poco más sobre mí, mis proyectos y lo que me apasiona.</p>
                
                
                <a href="#" class="btn-more">Saber más</a>
            </div>
        </div>
    </div>

<footer>
        <p>© 2026 Aranza. Todos los derechos reservados.</p>
    </footer>

</body>
</html>

Preview

Open Advanced Editor Full Screen