Nuevo

Proyecto Práctico 2: Crear un Diseño Responsive

Ejemplo de HTML y CSS para un sitio web de una empresa que vende artículos de oficina. Incluye un menú lateral vertical, es responsivo y utiliza una paleta de colores en tonos de azul, celeste y blanco, con degradados.

Estructura HTML (`index.html`):

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OficinaPro - Artículos de Oficina</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <aside class="sidebar">
            <div class="logo">
                <h1>OficinaPro</h1>
            </div>
            <nav class="nav">
                <ul>
                    <li><a href="#">Inicio</a></li>
                    <li><a href="#">Productos</a></li>
                    <li><a href="#">Servicios</a></li>
                    <li><a href="#">Contacto</a></li>
                </ul>
            </nav>
        </aside>

        <main class="content">
            <section class="hero">
                <h2>Bienvenido a OficinaPro</h2>
                <p>Tu mejor opción en artículos de oficina.</p>
            </section>

            <section class="features">
                <div class="feature-item">
                    <h3>Amplia Variedad</h3>
                    <p>Tenemos todo lo que necesitas para tu oficina.</p>
                </div>
                <div class="feature-item">
                    <h3>Calidad Garantizada</h3>
                    <p>Productos de las mejores marcas.</p>
                </div>
                <div class="feature-item">
                    <h3>Entrega Rápida</h3>
                    <p>Recibe tus pedidos en tiempo récord.</p>
                </div>
            </section>
        </main>
    </div>
</body>
</html>

Estilos CSS (`styles.css`):

/* Reset de márgenes y paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Contenedor principal */
.container {
    display: flex;
    min-height: 100vh;
}

/* Estilos del menú lateral */
.sidebar {
    background: linear-gradient(180deg, #0d47a1, #42a5f5);
    color: white;
    width: 250px;
    padding: 20px;
}

.sidebar .logo {
    margin-bottom: 30px;
    text-align: center;
}

.sidebar .nav ul {
    list-style: none;
}

.sidebar .nav ul li {
    margin: 20px 0;
}

.sidebar .nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    display: block;
    transition: color 0.3s;
}

.sidebar .nav ul li a:hover {
    color: #bbdefb;
}

/* Estilos del contenido principal */
.content {
    flex-grow: 1;
    background-color: #f5f5f5;
    padding: 40px;
}

/* Hero Section */
.hero {
    background: linear-gradient(180deg, #42a5f5, #bbdefb);
    color: white;
    padding: 60px;
    border-radius: 10px;
    text-align: center;
}

.hero h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.hero p {
    font-size: 20px;
}

/* Features Section */
.features {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.feature-item {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    width: 30%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.feature-item h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #0d47a1;
}

.feature-item p {
    color: #666;
}

/* Responsividad */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        text-align: center;
    }

    .features {
        flex-direction: column;
    }

    .feature-item {
        width: 100%;
        margin-bottom: 20px;
    }
}

Descripción del diseño:

Menú lateral: Colocado a la izquierda con un fondo degradado de azul oscuro a celeste.
Hero Section: Área destacada en la parte superior con un degradado celeste.
Sección de características: Tres bloques alineados horizontalmente con información clave sobre la empresa.
Responsividad: En dispositivos móviles, el menú lateral se desplaza hacia arriba y las características se alinean en una columna.

#image_title

#image_title

Este diseño es limpio, profesional y adecuado para una empresa de artículos de oficina, con énfasis en la simplicidad y la organización del contenido.

Dejá un comentario Cancelar respuesta