Academia MasterWeb

CSS

/* General */
                body {
                    font-family: Arial, sans-serif;
                    margin: 0;
                    padding: 0;
                    box-sizing: border-box;
                    background-color: #f4f4f4;
                }

/* Header */
                .header {
                    background-color: #4CAF50;
                    color: white;
                    text-align: center;
                    padding: 20px 0;
                }

.header h1 {
                    margin: 0;
                    font-size: 2.5em;
                }

.header p {
                    margin: 10px 0 0;
                    font-size: 1.2em;
                }

/* Main content */
                .main-content {
                    display: flex;
                    justify-content: space-between;
                    padding: 20px;
                }

/* Sidebar */
                .sidebar {
                    width: 25%;
                    background-color: #e0e0e0;
                    padding: 15px;
                    border-radius: 8px;
                }

.sidebar h2 {
                    font-size: 1.8em;
                    margin-bottom: 10px;
                }

.sidebar ul {
                    list-style-type: none;
                    padding: 0;
                }

.sidebar ul li {
                    margin: 10px 0;
                }

.sidebar a {
                    text-decoration: none;
                    color: #4CAF50;
                    font-weight: bold;
                }

.sidebar a:hover {
                    color: #333;
                }

/* Content */
                .content {
                    width: 70%;
                    padding: 20px;
                    background-color: white;
                    border-radius: 8px;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                }

.content h2 {
                    font-size: 2em;
                    margin-bottom: 20px;
                }

.content p {
                    font-size: 1.1em;
                    line-height: 1.6;
                }

/* Footer */
                .footer {
                    background-color: #333;
                    color: white;
                    text-align: center;
                    padding: 10px;
                    position:;
                    bottom: 0;
                    width: 100%;
                }

.footer p {
                    margin: 10;
                }

HTML

<div class="header">
                    <h1>Mi Página Web</h1>
                    <p>Bienvenidos a mi página web de ejemplo.</p>
                </div>

<div class="main-content">
                    <div class="sidebar">
                        <h2>Barra Lateral</h2>
                        <p>Aquí hay algunos enlaces interesantes:</p>
                        <ul>
                            <li><a href="#">Enlace 1</a></li>
                            <li><a href="#">Enlace 2</a></li>
                            <li><a href="#">Enlace 3</a></li>
                        </ul>
                    </div>
                    <div class="content">
                        <h2>Contenido Principal</h2>
                        <p>Este es el contenido principal de la página. Puedes agregar aquí cualquier cosa como texto, imágenes o cualquier otro tipo de contenido.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                </div>
                <div class="footer">
                    <p>© 2025 Mi Página Web. Todos los derechos reservados.</p>
                </div>

Indicaciones

CSS

HTML

VISTA PREVIA