Ejemplo2

by detoxparaelexito@gmail.com diciembre 17, 2025

written by detoxparaelexito@gmail.com diciembre 17, 2025

Texto de ejemplo para el diseño

detoxparaelexito@gmail.com

previous post

Podcast 2

<!-- FOOTER DETOX PARA EL ÉXITO -->
<footer class="footer-detox">
    <div class="footer-inner">
        <!-- Logo a la izquierda -->
        <div class="footer-left">
            <h2 class="footer-logo">DETOX PARA EL ÉXITO</h2>
        </div>

        <!-- Columnas a la derecha -->
        <div class="footer-right">
            <div class="footer-column">
                <h4>Sobre</h4>
                <ul>
                    <li><a href="#">Sobre Detox</a></li>
                    <li><a href="#">Prensa</a></li>
                    <li><a href="#">Carreras</a></li>
                    <li><a href="#">Conferencias</a></li>
                    <li><a href="#">Contacto</a></li>
                    <li><a href="#">Advertencia de seguridad</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h4>Cursos</h4>
                <ul>
                    <li><a href="#">Haz que suceda</a></li>
                    <li><a href="#">Toma el control</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h4>Descargas</h4>
                <ul>
                    <li><a href="#">Guías gratuitas</a></li>
                    <li><a href="#">Recursos PDF</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>

<!-- ESTILOS -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

/* Footer a ancho completo */
.footer-detox {
    width: 100%;
    background-color: #F4F4EE;
    padding: 60px 0;
    font-family: 'Montserrat', sans-serif;
    color: #000;
}

/* Contenedor interno sin límite de ancho */
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: none;
    padding: 0 60px;
}

/* Logo a la izquierda */
.footer-left {
    display: flex;
    align-items: center;
}

.footer-logo {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0;
}

/* Columnas a la derecha */
.footer-right {
    display: flex;
    flex-wrap: wrap;
}

.footer-column {
    margin-left: 60px;
    min-width: 160px;
}

.footer-column h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    text-decoration: none;
    color: #000;
    font-weight: 400;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: #f5a623;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-inner {
        flex-direction: column;
        padding: 40px 20px;
    }
    .footer-right {
        flex-direction: column;
        margin-top: 30px;
    }
    .footer-column {
        margin-left: 0;
        margin-bottom: 30px;
    }
}
</style>

-

00:00

00:00

Queue

Update Required Flash plugin

-

00:00

00:00