Skip to main content
se añadieron 14412 caracteres en el cuerpo
Origen Enlace

(Nuevo): Muchas gracias por su apoyo, chicos. Este es el código HTML:

<body>
    <header>
        <div class="Encabezado">
            <img src="Imagenes/001_ATe_Cuido_LOGO.svg" alt="Logo de TeCuido" class="Encabezado__Logo">
        </div>
        <nav>
            <div class="seccion-menu">
                <ul>
                    <li class="menu__items"><a href="index.html" 
                     class="menu__hipervinculos-inicio">Inicio</a></li>
                    <li class="menu__items"><a href="servicios.html" 
                     class="menu__hipervinculos">Servicios</a></li>
                    <li class="menu__items"><a href="nosotros.html" 
                     class="menu__hipervinculos">Sobre nosotros</a></li>
                </ul>
            </div>
            <div class="menu-contenedor">

                <input type="checkbox" id="generador">
                <label for="generador" class="boton"></label>

                <nav class="nav-menu-boton">
                    <a href="index.html">Inicio</a>
                    <a href="servicios.html">Servicios</a>
                    <a href="nosotros.html">Sobre nosotros</a>
                </nav>

            </div>
        </nav>
    </header>
    <main>
        <div class="contenedor animate__animated animate__fadeIn">
            <section class="contenedor__slider">
                <div class="contenedor__slider__contenido">
                    <div>
                        <h2>Somos una empresa que se preocupa por tu salud y 
                         comodidad </h2>
                    </div>
                    <img src="Imagenes/undraw_medicine_b1ol.svg" alt="Imagen 
                         de doctores">
                </div>
                <div class="contenedor__slider__contenido">
                    <div>
                        <h2>Realizamos consultas y teleconsultas de la mano 
                     de excelentes profesionales en el campo</h2>
                    </div>
                    <img src="Imagenes/undraw_doctors_hwty.svg" alt="Imagen 
                     de doctores">
                </div>
                <div class="contenedor__slider__contenido">
                    <div>
                        <h2>Realizamos pruebas rápidas de COVID-19 a 
                        domicilio y a las empresas que lo soliciten</h2>
                    </div>
                    <img src="Imagenes/undraw_medical_care_movn.svg" 
                        alt="Imagen de doctores">
                </div>
                <div class="contenedor__slider__contenido">
                    <div>
                        <h2>Somos una empresa que se preocupa por tu salud y 
                            comodidad</h2>
                    </div>
                    <img src="Imagenes/undraw_medicine_b1ol.svg" alt="Imagen 
                    de doctores">
                </div>
        </div>
        </div>
        <section>
            <div class="confiar animate__animated animate__fadeInLeft">
                <article class="confiar__info">
                    <h2>¿Por qué confiar en nosotros?</h2>
                    <ul class="confiar__razones">
                        <li>Somos un equipo de profesionales altamente 
                            capacitados trabajando en los principales
                            hospitales del país, como el Hospital Nacional 
                            Edgardo Rebagliati Martins y el Instituto
                            Nacional de
                            Salud del Niño San Borja.</li>
                        <li>Contamos con amplia experiencia en el tratamiento 
                        de diversas enfermedades.<br></li>
                        <li>Brindamos un excelente servicio en la comodidad 
                            de tu hogar con todos los protocolos de
                            seguridad necesarios.</li>
                    </ul>
                </article>
                <aside>
                    <figure>
                        <img loading="lazy" src="Imagenes/medico index.webp" 
                            alt="Imagen de doctor"
                            class=" confiar__imagen animate__animated 
                            animate__fadeInRight">
                    </figure>

                </aside>
            </div>
        </section>

        <section>
            <div class="consejo animate__animated animate__fadeInLeft">
                <div class="consejo__info">
                    <h3 class="consejo__titulo">Consejo médico</h3>
                    <p>
                        Consume pescado 3 o más veces por semana, este nos 
                        aporta ácidos grasos y tiene una alta
                        cantidad de proteínas.
                    </p>
                </div>
            </div>
        </section>
    </main>
    <footer class="pie">
        <div class="redes__container animate__animated animate__fadeIn">
            <ul>
                <li><a href="https://www.facebook.com/TeCuidoEnfermera" 
                 target="#blank"
                        class="redes__container-facebook"><i class="fab fa- 
                               facebook-f"></i></a></li>
                <li><a href="mailto:[email protected]" 
                     class="redes__container-gmail"><i class="far          
                     fa-envelope"></i></a></li>
            </ul>
        </div>
        <h4 class="pie__copyright animate__animated 
         animate__fadeIn">Copyright 2020 © TeCuido Todos los derechos
            reservados</h4>
    </footer>
    <script src="main.js"></script>
</body>
</html>

Y el código CSS es este:

::selection {
    background-color: rgb(16, 82, 100);
    color: rgb(255, 255, 255);
}

.Encabezado {
    background: #f1efed;
    padding-left: 7em;
    padding-right: 7em;
    width: 100%;
}

.Encabezado__Logo {
    display: block;
    height: 12.375em;
    margin: auto;
    margin-bottom: 2.8em;
    padding: 0.3em;
    width: 27.375em;
}

ul {
    padding: 0.74em;
    text-align: center;
}

.seccion-menu {
    background: #f1efed;
    height: 2.8rem;
    margin-top: -2.8em;
    width: 100%;
}

.menu__items {
    display: inline-block;
}

.menu__hipervinculos,
.menu__hipervinculos-inicio {
    color: #8b7e78;
    font-family: Montserrat;
    font-size: 1.2rem;
    font-weight: lighter;
    text-decoration: none;
    margin-left: 5em;
    margin-right: 2.8em;
}

.menu__hipervinculos:hover,
.menu__hipervinculos-inicio:hover {
    color: rgb(41, 122, 116);
    transition: all 0.3s;
}

.menu__hipervinculos:active,
.menu__hipervinculos-inicio:active {
    color: rgb(30, 87, 83);
    transition: all 0.20s;
}

/*Sección menú desplegable*/
.menu-contenedor,
.boton,
.nav-menu-boton {
    position: absolute;
}

.menu-contenedor {
    margin: auto;
    top: 10%;
    left: 50%;
    margin-left: -20px;
}

#generador {
    display: none;
}

.boton {
    z-index: 999;
    margin-top: 9em;
    width: 43px;
    height: 43px;
    background: rgb(68, 219, 224);
    border-radius: 100%;
    transition: all 0.5s ease-in-out;
    box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.boton:before {
    position: absolute;
    top: 20px;
    left: 9px;
    content: '';
    width: 25px;
    height: 2px;
    background: #fff;
    transform: rotate(90deg);
}

.boton:after {
    position: absolute;
    top: 20px;
    left: 9px;
    content: '';
    width: 25px;
    height: 2px;
    background: #fff;
}

.nav-menu-boton {
    transform: translateY(-10%);
    opacity: 0;
    top: 10.875rem;
    left: -50px;
    transition: all 0.5s ease-in-out;
    background: white;
    margin: auto;
    margin-left: -8em;
    width: 25rem;
    border-radius: 5px;
    transform: translateY(0%);
    box-shadow: 2px 3px 10px 0 rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.nav-menu-boton a {
    text-align: center;
    font-size: 1.25rem;
    display: block;
    margin: 20px 0;
    color: rgb(68, 219, 224);
    text-decoration: none;
    font-family: Montserrat;
    transition: all 300ms;
}

.nav-menu-boton a:hover {
    color: rgb(73, 198, 202);
}

.nav-menu-boton a:active {
    color: rgb(69, 178, 182);
}

#generador:checked~.nav-menu-boton {
    opacity: 1;
    transform: translateY(10%);
}

#generador:checked~.boton {
    transform: rotate(135deg);
    box-shadow: 0 0 0 0 transparent;
}

.contenedor {
    width: 100%;
    overflow: hidden
}

.contenedor__slider {
    width: 100%;
    display: flex;
    margin-bottom: 2em;
}

.contenedor__slider__contenido {
    width: 100%;
    height: 20.5rem;
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-shrink: 0;
    margin-top: 3em;
}

.contenedor__slider__contenido>img {
    width: 25rem;
}

.contenedor__slider__contenido>div {
    width: 40%;
}

.contenedor__slider__contenido h2 {
    color: #333333;
    font-weight: 800;
    font-family: Montserrat;
    font-size: 1.65rem;
    text-align: justify;
    line-height: 1.875em;
}

.contenedor__slider__contenido a {
    color: bisque;
    text-decoration: none;
    background-color: cadetblue;
    width: 6.25rem;
    display: block;
    padding: 0.9375em 0;
    text-align: center;
    border-radius: 0.1875rem;
    margin-top: 1.25rem;
}

.confiar {
    display: flex;
    margin-top: 3em;
    width: 100%;
}

.confiar__info>h2 {
    color: #4f7070;
    font-family: Montserrat;
    font-size: 2.5rem;
    font-weight: lighter;
    line-height: 1.2em;
    margin: 0.75em;
    margin-bottom: .5em;
    margin-top: -.1em;
    padding-left: 1.15em;
    text-align: center;
}

.confiar__info {

    color: #474747;
    border-radius: 0.3em;
    font-family: Montserrat;
    font-size: 1.25rem;
    line-height: 1.7em;
    margin-top: -.7em;
    padding-right: 1em;
    margin-left: 4em;
    padding-left: 1em;
    padding-top: 2em;
    text-align: justify;
    width: 70%;
    height: 31.5rem;
}

.confiar__razones {
    text-align: justify;
}

.confiar__imagen {
    border-radius: 0.3em;
    height: 30rem;
    margin-left: auto;
    margin-right: 1.5em;
    margin-top: 1.5em;
    width: 63%;
}

.consejo__titulo {
    color: rgb(89, 151, 155);
    font-family: Sansita;
    font-size: 2.5rem;
    margin: 0.125em;
    margin-bottom: .6em;
    padding: 0.3em;
    text-align: center;
}

.consejo__info {
    background: #f1efed;
    background: -webkit-linear-gradient(to right, #eeebeb, #f8f8f8);
    background: linear-gradient(to right, #eeebeb, #f8f8f8);
    border-radius: .5em;
    color: rgb(100, 89, 71);
    font-family: Sansita;
    font-size: 1.4rem;
    margin-left: 1.455em;
    margin-right: 1.455em;
    margin-top: 2.6em;
    margin-bottom: 3em;
    padding: .8em;
    text-align: center;
}

.Whatsapp {
    bottom: 2rem;
    height: 3.8rem;
    position: fixed;
    right: 2.5rem;
    width: 3.8rem;
}

.pie {
    margin-top: 1em;
    padding: .5em;
    text-align: center;
    width: 100%;
}

.redes__container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.redes__container ul li {
    display: inline-block;
    margin: 0.3125rem;
    width: 3.125rem;
    height: 3.125rem;
    text-align: center;
}

.redes__container ul li a {
    display: block;
    padding: 0 0.545rem;
    background-color: rgb(117, 106, 106);
    color: #fff;
    line-height: 3rem;
    font-size: 1.35rem;
    box-shadow: 0 0.1875rem 0.3125rem 0 rgba(0, 0, 0, .2);
    transition: .2s;
}

.redes__container ul:hover a {
    filter: blur(2px);
}

.redes__container ul li a:hover {
    transform: translateY(-0.1875rem) scale(1.05);
    box-shadow: 0 0.3125rem 0.3125rem 0 rgba(0, 0, 0, .4);
    filter: none;
}

.redes__container-facebook:hover {
    background-color: rgb(21, 21, 206);
}

.redes__container-whatsapp:hover {
    background-color: rgb(117, 170, 11);
}

.redes__container-gmail:hover {
    background-color: rgb(187, 18, 18);
}

.pie__copyright {
    color: #242424;
    font-size: .8rem;
    font-family: Montserrat;
}

En las primeras líneas sale todo lo que le puse al body(Me guié un poco de lo que me recomendaron, lo que vi e, incluso, de cómo lo tenía hecho Twitter) pero nada :(

(Nuevo): Muchas gracias por su apoyo, chicos. Este es el código HTML:

<body>
    <header>
        <div class="Encabezado">
            <img src="Imagenes/001_ATe_Cuido_LOGO.svg" alt="Logo de TeCuido" class="Encabezado__Logo">
        </div>
        <nav>
            <div class="seccion-menu">
                <ul>
                    <li class="menu__items"><a href="index.html" 
                     class="menu__hipervinculos-inicio">Inicio</a></li>
                    <li class="menu__items"><a href="servicios.html" 
                     class="menu__hipervinculos">Servicios</a></li>
                    <li class="menu__items"><a href="nosotros.html" 
                     class="menu__hipervinculos">Sobre nosotros</a></li>
                </ul>
            </div>
            <div class="menu-contenedor">

                <input type="checkbox" id="generador">
                <label for="generador" class="boton"></label>

                <nav class="nav-menu-boton">
                    <a href="index.html">Inicio</a>
                    <a href="servicios.html">Servicios</a>
                    <a href="nosotros.html">Sobre nosotros</a>
                </nav>

            </div>
        </nav>
    </header>
    <main>
        <div class="contenedor animate__animated animate__fadeIn">
            <section class="contenedor__slider">
                <div class="contenedor__slider__contenido">
                    <div>
                        <h2>Somos una empresa que se preocupa por tu salud y 
                         comodidad </h2>
                    </div>
                    <img src="Imagenes/undraw_medicine_b1ol.svg" alt="Imagen 
                         de doctores">
                </div>
                <div class="contenedor__slider__contenido">
                    <div>
                        <h2>Realizamos consultas y teleconsultas de la mano 
                     de excelentes profesionales en el campo</h2>
                    </div>
                    <img src="Imagenes/undraw_doctors_hwty.svg" alt="Imagen 
                     de doctores">
                </div>
                <div class="contenedor__slider__contenido">
                    <div>
                        <h2>Realizamos pruebas rápidas de COVID-19 a 
                        domicilio y a las empresas que lo soliciten</h2>
                    </div>
                    <img src="Imagenes/undraw_medical_care_movn.svg" 
                        alt="Imagen de doctores">
                </div>
                <div class="contenedor__slider__contenido">
                    <div>
                        <h2>Somos una empresa que se preocupa por tu salud y 
                            comodidad</h2>
                    </div>
                    <img src="Imagenes/undraw_medicine_b1ol.svg" alt="Imagen 
                    de doctores">
                </div>
        </div>
        </div>
        <section>
            <div class="confiar animate__animated animate__fadeInLeft">
                <article class="confiar__info">
                    <h2>¿Por qué confiar en nosotros?</h2>
                    <ul class="confiar__razones">
                        <li>Somos un equipo de profesionales altamente 
                            capacitados trabajando en los principales
                            hospitales del país, como el Hospital Nacional 
                            Edgardo Rebagliati Martins y el Instituto
                            Nacional de
                            Salud del Niño San Borja.</li>
                        <li>Contamos con amplia experiencia en el tratamiento 
                        de diversas enfermedades.<br></li>
                        <li>Brindamos un excelente servicio en la comodidad 
                            de tu hogar con todos los protocolos de
                            seguridad necesarios.</li>
                    </ul>
                </article>
                <aside>
                    <figure>
                        <img loading="lazy" src="Imagenes/medico index.webp" 
                            alt="Imagen de doctor"
                            class=" confiar__imagen animate__animated 
                            animate__fadeInRight">
                    </figure>

                </aside>
            </div>
        </section>

        <section>
            <div class="consejo animate__animated animate__fadeInLeft">
                <div class="consejo__info">
                    <h3 class="consejo__titulo">Consejo médico</h3>
                    <p>
                        Consume pescado 3 o más veces por semana, este nos 
                        aporta ácidos grasos y tiene una alta
                        cantidad de proteínas.
                    </p>
                </div>
            </div>
        </section>
    </main>
    <footer class="pie">
        <div class="redes__container animate__animated animate__fadeIn">
            <ul>
                <li><a href="https://www.facebook.com/TeCuidoEnfermera" 
                 target="#blank"
                        class="redes__container-facebook"><i class="fab fa- 
                               facebook-f"></i></a></li>
                <li><a href="mailto:[email protected]" 
                     class="redes__container-gmail"><i class="far          
                     fa-envelope"></i></a></li>
            </ul>
        </div>
        <h4 class="pie__copyright animate__animated 
         animate__fadeIn">Copyright 2020 © TeCuido Todos los derechos
            reservados</h4>
    </footer>
    <script src="main.js"></script>
</body>
</html>

Y el código CSS es este:

::selection {
    background-color: rgb(16, 82, 100);
    color: rgb(255, 255, 255);
}

.Encabezado {
    background: #f1efed;
    padding-left: 7em;
    padding-right: 7em;
    width: 100%;
}

.Encabezado__Logo {
    display: block;
    height: 12.375em;
    margin: auto;
    margin-bottom: 2.8em;
    padding: 0.3em;
    width: 27.375em;
}

ul {
    padding: 0.74em;
    text-align: center;
}

.seccion-menu {
    background: #f1efed;
    height: 2.8rem;
    margin-top: -2.8em;
    width: 100%;
}

.menu__items {
    display: inline-block;
}

.menu__hipervinculos,
.menu__hipervinculos-inicio {
    color: #8b7e78;
    font-family: Montserrat;
    font-size: 1.2rem;
    font-weight: lighter;
    text-decoration: none;
    margin-left: 5em;
    margin-right: 2.8em;
}

.menu__hipervinculos:hover,
.menu__hipervinculos-inicio:hover {
    color: rgb(41, 122, 116);
    transition: all 0.3s;
}

.menu__hipervinculos:active,
.menu__hipervinculos-inicio:active {
    color: rgb(30, 87, 83);
    transition: all 0.20s;
}

/*Sección menú desplegable*/
.menu-contenedor,
.boton,
.nav-menu-boton {
    position: absolute;
}

.menu-contenedor {
    margin: auto;
    top: 10%;
    left: 50%;
    margin-left: -20px;
}

#generador {
    display: none;
}

.boton {
    z-index: 999;
    margin-top: 9em;
    width: 43px;
    height: 43px;
    background: rgb(68, 219, 224);
    border-radius: 100%;
    transition: all 0.5s ease-in-out;
    box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.boton:before {
    position: absolute;
    top: 20px;
    left: 9px;
    content: '';
    width: 25px;
    height: 2px;
    background: #fff;
    transform: rotate(90deg);
}

.boton:after {
    position: absolute;
    top: 20px;
    left: 9px;
    content: '';
    width: 25px;
    height: 2px;
    background: #fff;
}

.nav-menu-boton {
    transform: translateY(-10%);
    opacity: 0;
    top: 10.875rem;
    left: -50px;
    transition: all 0.5s ease-in-out;
    background: white;
    margin: auto;
    margin-left: -8em;
    width: 25rem;
    border-radius: 5px;
    transform: translateY(0%);
    box-shadow: 2px 3px 10px 0 rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.nav-menu-boton a {
    text-align: center;
    font-size: 1.25rem;
    display: block;
    margin: 20px 0;
    color: rgb(68, 219, 224);
    text-decoration: none;
    font-family: Montserrat;
    transition: all 300ms;
}

.nav-menu-boton a:hover {
    color: rgb(73, 198, 202);
}

.nav-menu-boton a:active {
    color: rgb(69, 178, 182);
}

#generador:checked~.nav-menu-boton {
    opacity: 1;
    transform: translateY(10%);
}

#generador:checked~.boton {
    transform: rotate(135deg);
    box-shadow: 0 0 0 0 transparent;
}

.contenedor {
    width: 100%;
    overflow: hidden
}

.contenedor__slider {
    width: 100%;
    display: flex;
    margin-bottom: 2em;
}

.contenedor__slider__contenido {
    width: 100%;
    height: 20.5rem;
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-shrink: 0;
    margin-top: 3em;
}

.contenedor__slider__contenido>img {
    width: 25rem;
}

.contenedor__slider__contenido>div {
    width: 40%;
}

.contenedor__slider__contenido h2 {
    color: #333333;
    font-weight: 800;
    font-family: Montserrat;
    font-size: 1.65rem;
    text-align: justify;
    line-height: 1.875em;
}

.contenedor__slider__contenido a {
    color: bisque;
    text-decoration: none;
    background-color: cadetblue;
    width: 6.25rem;
    display: block;
    padding: 0.9375em 0;
    text-align: center;
    border-radius: 0.1875rem;
    margin-top: 1.25rem;
}

.confiar {
    display: flex;
    margin-top: 3em;
    width: 100%;
}

.confiar__info>h2 {
    color: #4f7070;
    font-family: Montserrat;
    font-size: 2.5rem;
    font-weight: lighter;
    line-height: 1.2em;
    margin: 0.75em;
    margin-bottom: .5em;
    margin-top: -.1em;
    padding-left: 1.15em;
    text-align: center;
}

.confiar__info {

    color: #474747;
    border-radius: 0.3em;
    font-family: Montserrat;
    font-size: 1.25rem;
    line-height: 1.7em;
    margin-top: -.7em;
    padding-right: 1em;
    margin-left: 4em;
    padding-left: 1em;
    padding-top: 2em;
    text-align: justify;
    width: 70%;
    height: 31.5rem;
}

.confiar__razones {
    text-align: justify;
}

.confiar__imagen {
    border-radius: 0.3em;
    height: 30rem;
    margin-left: auto;
    margin-right: 1.5em;
    margin-top: 1.5em;
    width: 63%;
}

.consejo__titulo {
    color: rgb(89, 151, 155);
    font-family: Sansita;
    font-size: 2.5rem;
    margin: 0.125em;
    margin-bottom: .6em;
    padding: 0.3em;
    text-align: center;
}

.consejo__info {
    background: #f1efed;
    background: -webkit-linear-gradient(to right, #eeebeb, #f8f8f8);
    background: linear-gradient(to right, #eeebeb, #f8f8f8);
    border-radius: .5em;
    color: rgb(100, 89, 71);
    font-family: Sansita;
    font-size: 1.4rem;
    margin-left: 1.455em;
    margin-right: 1.455em;
    margin-top: 2.6em;
    margin-bottom: 3em;
    padding: .8em;
    text-align: center;
}

.Whatsapp {
    bottom: 2rem;
    height: 3.8rem;
    position: fixed;
    right: 2.5rem;
    width: 3.8rem;
}

.pie {
    margin-top: 1em;
    padding: .5em;
    text-align: center;
    width: 100%;
}

.redes__container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.redes__container ul li {
    display: inline-block;
    margin: 0.3125rem;
    width: 3.125rem;
    height: 3.125rem;
    text-align: center;
}

.redes__container ul li a {
    display: block;
    padding: 0 0.545rem;
    background-color: rgb(117, 106, 106);
    color: #fff;
    line-height: 3rem;
    font-size: 1.35rem;
    box-shadow: 0 0.1875rem 0.3125rem 0 rgba(0, 0, 0, .2);
    transition: .2s;
}

.redes__container ul:hover a {
    filter: blur(2px);
}

.redes__container ul li a:hover {
    transform: translateY(-0.1875rem) scale(1.05);
    box-shadow: 0 0.3125rem 0.3125rem 0 rgba(0, 0, 0, .4);
    filter: none;
}

.redes__container-facebook:hover {
    background-color: rgb(21, 21, 206);
}

.redes__container-whatsapp:hover {
    background-color: rgb(117, 170, 11);
}

.redes__container-gmail:hover {
    background-color: rgb(187, 18, 18);
}

.pie__copyright {
    color: #242424;
    font-size: .8rem;
    font-family: Montserrat;
}

En las primeras líneas sale todo lo que le puse al body(Me guié un poco de lo que me recomendaron, lo que vi e, incluso, de cómo lo tenía hecho Twitter) pero nada :(

Origen Enlace

No puedo quitar el espacio en blanco de mi página web por ningún método

He estado haciendo un pequeño proyecto pero, al hacerlo responsive, he visto que se crea un espacio en blanco al llegar a los 400 píxeles el cual se hace cada vez más grande si se reduce la pantalla. He probado con todo lo que he encontrado aquí y en otros lados (como el wisth en html y body, por ejemplo) pero sigue sin salirme nada. Esto es lo que sucede: Error

Eso es todo, sería de grandísima ayuda si me pueden ayudar, muchas gracias por su tiempo :')