2
respuestas

[Duda] font-family: Montserrat

por Estudiante
| 46k xp | 2 posts

Buenas dias, tardes o noche, tengo una duda con respecto a ese tipo de letras. El problema que me surgió, que tras seguir los videos de HTML y CSS, y colocar este tipo de letras en el body, para que todas las letras tomaran ese tipo de letras, en el index.html no me lo toma, pero en los demas html, como productos.html y contacto.html, si me los toma.

Intenté buscar el error y la unica manera que encontré para solucionarlo, es crear un class dentro del nav que contenia el Home y los demas titulos, pero solo fue una solucion momentanea. Alguien sabe que podría estar pasando?

Adjunto codigos de CSS y home.html, para que puedan ver mejor

[code]

Logo de la Barberia Alura 

<img class="banner" src="banner/banner.jpg" alt="">
<main>
    <section class="principal">
        <h2 class="titulo-principal">Sobre la Barbería Alura</h2>

        <img class="utensilios" src="/Segunda pagina/imagenes/utensilios[1].jpg" alt="Utensilios de un Barbero">

        <p>Ubicada en el corazón de la ciudad, la <strong>Barbería Alura</strong> trae para el mercado lo que hay de mejor para su cabello y barba. 
        Fundada en 2020, la Barbería Alura ya es destaque en la ciudad y conquista nuevos clientes diariamente.
        </p>
        
        <p id="mision"><em>Nuestra misión es: <strong id="1">"Proporcionar autoestima y calidad de vida a nuestros clientes</strong>".</em></p>
        
        <p>Ofrecemos profesionales experimentados que están constantemente observando los cambios y movimiento en el mundo de la moda,
            para así ofrecer a nuestros clientes las últimas tendencias. El atendimiento posee un padrón de excelencia y agilidad, 
            garantizando calidad y satisfacción de nuestros clientes. 
        </p>
    </section>
    <section class="mapa">
        <h3 class="titulo-principal">Nuestra Ubicacion</h3>
        <p>Nuestro establecimiento en esta el corazón de la ciudad</p>
        <div class="mapa-contenido">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.4078407285383!2d-46.6372130250296!3d-23.589701978780393!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5bd9bb943bf5%3A0x6f642995c970f0fe!2scaelum%20alura!5e0!3m2!1ses-419!2sar!4v1705843825377!5m2!1ses-419!2sar" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </section>

    <section class= "diferenciales">

        <h3 class="titulo-principal">Diferenciales</h3>
        <div class="contenido-diferenciales">
            <ul class="lista-diferenciales">
                <li class="items">Atencion profesonalizada a los clientes</li>
                <li class="items">Espacios diferenciados</li>
                <li class="items">Localización</li>
                <li class="items">Profesionales calificados</li>
                <li class="items">Puntualidad</li>
                <li class="items">Limpieza</li>
            </ul><img class="img-diferenciales" src="diferenciales/diferenciales.jpg" alt="">
        </div>
        <div class="video">
            <iframe width="100%" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY?si=tSckXaRbar93nPOg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
        </div>                
    </section>

</main>
<footer>
    <img src="/Segunda pagina/imagenes/logo-blanco.png" alt="Logo de la Barbería Alura">
    <p class="copyright">&copy; Copyright Barbería Alura - 2020</p>
</footer>
[/code]
2 respuestas
por Estudiante
| 46k xp | 2 posts

/Estilo gral/ body { font-family: 'Montserrat', sans-serif; }

/Estilos de productos.html/

header{ background-color: #bbbbbb; padding: 20px 0; }

.caja{ width: 940px; position: relative; margin: 0 auto; }

nav{ position: absolute; top:110px; right: 0; }

nav li{ display: inline; margin: 0 0 0 15px;}

nav a{ text-transform: uppercase; color: black; font-weight: bold; font-size: 22px; text-decoration: none;

}

nav a:hover{ color: #c78c19; text-decoration: underline; }

.productos{ width: 940px; margin:0 auto; padding: 50px; }

.productos li{ display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 1.5%; padding: 30px 2px; box-sizing: border-box; border: 2px solid black; border-radius: 15px; }

.productos li:hover{ border-color: #c78c19; }

.productos li:active{ border-color: green; }

.productos h2{ font-size: 30px; font-weight: bold; }

.productos li:hover h2{ font-size: 33px; }

.descripcion{ font-size: 16px; }

.preducto-precio{ font-size: 20px; font-weight: bold; margin-top: 10px;

}

footer{ text-align: center; background: url(imagenes/bg.jpg); padding: 40px; }

.copyright{ color: white; font-size: 13px; margin: 20px; }

/Estilos de contactos.html/

form{ margin: 40px 0;

}

form label, form legend{ display: block; font-size: 20px; margin: 0 0 10px;

}

.input-padron{ display: block; margin: 0 0 20px; padding: 10px 25px; width: 50%;

}

.checkbox{ margin: 20px 0; }

.enviar{ width: 40%; padding: 15px 0; font-size: 18px; font-weight: bold; color: white; background-color: orange; border: none; border-radius: 5px; transition: 0.5s all; cursor: pointer; } .enviar:hover{ background-color: darkorange; transform: scale(1.2); }

table{ margin: 40px 40px;

}

thead{ background-color: #555555; color: white; font-weight: bold; } td, th{ border: 1px solid black; padding: 8px 15px; }

/Css Para home.html/

.banner{ width: 100%; }

.principal{ background-color: #fefefe; padding: 3em 0; width:940px; margin: 0 auto; }

.titulo-principal{ text-align: center; font-size: 2em; margin: 0 0 1em; clear: left; }

.principal p{ margin: 0 0 1em; }

.principal strong{ font-weight: bold; }

.principal em{ font-style: italic; }

.utensilios{ width: 120px; float: left; margin: 0 20px 20px 0; }

.mapa{ padding: 3em 0; background: linear-gradient(#fefefe,#888888); }

.mapa p{ margin: 0 0 1em; text-align: center; }

.mapa-contenido{ width: 940px; margin: 0 auto;

}

.diferenciales{ background-color: #888888 ; padding: 3em 0; }

.contenido-diferenciales{ width: 640px; margin: 0 auto; }

.lista-diferenciales{ width: 40%; display: inline-block; vertical-align: top; } .items{ line-height: 1.5; }

.items:before{ content: "★";

}

.items:first-child{ font-weight: bold; }

.img-diferenciales{ width: 60%; transition: 400ms; box-shadow: 10px 10px 25px 10px #000000;

}

.img-diferenciales:hover{ opacity: 0.3;

}

.video{ width: 560px; margin: 1em auto; }

por Brenda Souza
| 2375.1k xp | 8251 posts
Alura Scuba Team Scuba

¡Hola Estudiante, espero que estés bien!

Parece que estás teniendo un problema interesante con la fuente Montserrat en tu proyecto de HTML y CSS. Después de revisar tu código, noté que estás enlazando la fuente correctamente en tu archivo HTML, pero puede haber un problema con la forma en que estás aplicando la fuente en tu CSS.

Una posible solución para asegurarte de que la fuente Montserrat se aplique correctamente a todas las páginas, incluida la página index.html, es asegurarte de que estás utilizando la regla font-family correctamente en tu archivo CSS. Aquí tienes un ejemplo de cómo podrías aplicar la fuente Montserrat al cuerpo de tu página:

body {
    font-family: 'Montserrat', sans-serif;
}

Asegúrate de que esta regla esté presente en tu archivo style.css y que esté siendo enlazado correctamente en todas las páginas. Además, verifica que el enlace a tu archivo style.css sea correcto en el archivo index.html.

Espero que esta sugerencia te ayude a solucionar el problema con la fuente Montserrat. Si sigues experimentando dificultades, no dudes en compartir más detalles para que pueda ayudarte mejor. ¡Buena suerte y sigue adelante con tu proyecto! Espero haber ayudado y buenos estudios!