lo que hicimos en aula | HTML5 y CSS3 parte 4: Avanzando en CSS | Alura Latam

codigo HTML

<!DOCTYPE html>
<html lang="es">
    <head>

        <meta charset="UTF-8">
        <title>Barberia Alura</title>
        <link rel="stylesheet" href="style/style.css">
        <link rel="stylesheet" href="style/reset .css">
    </head>

    <body>
        <header>

            <div class="box">
                <h1 class="h1"><img src="images/logo.png" alt="Imagen del logo de Alura"></h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="productos.html">Productos</a></li>
                        <li><a href="contacts.html">Contacto</a></li>
                    </ul>
                </nav>    
            </div>

        </header>
        <img class="banner" src="images/banner.jpg">
        <main>

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

                <img class="Utensils"src="images/bannerr.jpg" alt="hairdressing utensils">

                <p>Ubicada en el corazón de la ciudad 
                    <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="principal-title">Diferenciales</h3>

                <ul>
                    <li class="item">Atencion personalizada a los clientes</li>
                    <li class="item">Espacios diferenciado</li>
                    <li class="item">Localizacion</li>
                    <li class="item">Profecionales certificados</li>
                </ul>

                <img src="images/diferenciales.jpg" class="differential-image">

            </section> 

        </main>


        <footer>
            <img src="images/logo-blanco.png">
            <p class="copyright">&copy; Copyright Barberìa Alura-2022</p>
        </footer>


    </body>


</html>

Código Css



form{
    margin: 40px 0;
    font-size: 20px;


}
form label,form legend{
    display: block;
    margin: 0 0 15px 0;
}
.input-padrom{
    display: block;
    margin: 0 0 20px 0;
    padding: 10px 25px;
    width: 50%;
}

.checkbox{
    margin-top: 30px;
}
.send{
    margin-top: 30px;
    width: 56%;
    padding: 10px 0;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    background: #000000;
    border-radius: 15px;
    transition: 1s all;
    cursor:grab;
}
.send:hover{
    font-size: 20px;
    color:#000000;
    background: #BBBBBB;
    transform: scale(1.2);
    /* transform: rotate(360deg); */

}

table{
    margin: 40px 180px; 
}
thead{
    background: #555555;
    color: #FFFFFF;
    font-weight: bold;
}
td,th{
    border: 1px solid #000000;
    padding: 8px 15px;
}
/* Aqui inicia el css para nuestra paguina inicial HOME*/
.banner{
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
}
.principal-title{
    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;
}
.differential-image{
    width: 60%;
}
.Utensils{
    width: 120px;
   float: left;
   margin: 0 20px 20px 0;
}