[Duda] Problema con fuentes externas y mas | HTML5 y CSS3 parte 4: Avanzando en CSS | Alura Latam

3
respuestas

Referente al curso HTML5 y CSS3 parte 4: Avanzando en CSS, en el capítulo Contenido externo y actividad Fuentes Externas

por Estudiante

| 99.8k xp | 45 posts

Espero por favor alguien me pueda ayudar, tengo los siguientes problemas y nos e como corregir. 1) Al agregar el font externo y no respeta los formatos de bold and italic. 2) Ahora en la caja de productos al usar el hover se extiende el tamaño de uno de ellos tal vez porque la letra es mas grande.3) Otro problema que tengo es que en la pagina de productos no estan centrados.

Agradeceria si alguien me puede ayudar ya que he invertido tiempo y no he podido encontrar el porque, por lo siguente no eh podido avanzar. comparto el codigo y foto

<head>

    <meta charset= "UTF-8">
    <title>Barberia Alura</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">

</head>

<body>
    <header>
        <div class="caja">
            <h1> <img src="imagenes/logo.png"> </h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="productos.html">Productos</a></li>
                    <li><a href=contactos.html>Contactos</a></li>
                </ul>
            </nav>
        </div>  
    </header> 

    <img class="banner" src="banner/banner.jpg">

    <main>
        <section class="principal">

            <h2 class="titulo-principal">Sobre la Barbería Alura</h2>

            <img class="utencilios" src="imagenes/utensilios.jpg" alt="Utencilios 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>"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="diferenciales">

            <h3 class="titulo-principal">Diferenciales</h3>

            <ul>
                <li class="items">Atencion personalizada a clientes.</li>
                <li class="items">Espacio diferenciado.</li>
                <li class="items">Excelente hubicacion.</li>    
                <li class="items">Personal calificado.</li>    
            </ul>

            <img src="banner/diferenciales.jpg" class="imagenDiferenciales">
        </section>
    </main>

    <footer>
        <img src="imagenes/logo-blanco.png">
        <p class="copyright"> &copy Copyright Barbería Alura - 2023</p>
    </footer>  

</body>

3 respuestas

por Estudiante

| 99.8k xp | 45 posts

05/05/2023

CSS


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

header{
    background-color: #bbbbbb;
    padding: 20px 0;
}
.caja{
    width: 940px;
    position: relative;
    margin: 0 auto;

}
nav{
    position: absolute;
    top: 110px;
    right: 0px;
}
nav li{
    display: inline; 
    margin: 0 0 0 15px;
}

nav a{
    text-transform: uppercase;
    color:#000000;
    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 20px;
    box-sizing: border-box;  
    border: 2px solid #000000;
    border-radius: 10px;
}

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

.productos li:active{
    border-color:#088c19;
}

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

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

.producto-descripcion{
    font-size: 18px;
}

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

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

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

main{
    width: 940px;
    margin: 0 auto;
} 
form{
    margin: 40px 0;
}

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

.inputpadron{ 
    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: orange;
    border: none;
    border-radius: 5px;
    transition: 1s all;
    cursor: pointer;
}

.enviar:hover{
    background: darkorange;
    transform: scale(1.2) rotate(180deg);
}

table{
    margin: 40px 40px;
}

thead{
    background: #555555;
    color: white;
    font-weight: bold;
}

td, th{
    border: 1px solid #000000;
    padding: 8px 15px;
}

/* Aqui inicia CSS para home */

.banner{
    width: 100%;
}

.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;
}

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

.imagenDiferenciales{
    width: 60%;
}

por Estudiante

| 99.8k xp | 45 posts

05/05/2023

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

por Axel Huerta Hernández

| 199.1k xp | 229 posts

06/05/2023

Para el primer problema si estas usando Google Fonts también debes de importar la versión de la fuente para bold e italic, por ejemplo yo suelo seleccionar bold 700