Haz lo que hicimos en el aula | HTML5 y CSS3 parte 1: Mi primera página web | Alura Latam

HTML

<!DOCTYPE html>
<!--
    La etiqueta DOCTYPE sirve para informar al navegador cuál versión de HTML estamos usando.
-->
<html lang="es"> <!--Se define el lengaje en el que se esta publicado la pagina, facilita la traduccion de texto del pagina a otros-->
    <head><!--Esta etiqueta permite colocar informacion que se le pasa al navegador-->
        <meta charset="UTF-8"><!--Permite reconocer los caracteres especiales como: ñ,í -->
        <title>Barbería Alura</title>

        <!--En este caso enlazamos nuestro a htm con nuestro archivo css esto fuciona de la misma manera que la etiqueta style-->
        <link rel="stylesheet" href="./style.css">


        <!--En este style nostros centramos todas nuestras etiquetas p les damos la propiedad 
        en la que se alinea el texto 


        <style>



            p{
                text-align: center;
            }
        </style>
        -->

    </head>

    <body><!--Esta etiqueta permite colocar el contenido visible de la pagina-->

        <!--Encabezado-->
        <header>
            <h1 class="titulo-principal">Barbería Alura</h1>
        </header>

        <!--Agregando imagenes-->
        <img id="banner" src="./templates/images/barber.png" alt="">
        <div class="principal">
            <h2 class="titulo-centralizado">Sobre la Barbería Alura</h2> 
            <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>
        </div>
        <div class="diferenciales">
            <h3 class="titulo-centralizado">Diferenciales</h3>
            <ul>
                <li class="items">Atencion personlaizada</li>
                <li class="items">Espacio diferenciado</li>
                <li class="items">Localizacion</li>
                <li class="items">profesionales calificados</li>
            </ul>

            <img src="./templates/images/diferenciales.png" class="imgDiferenciales">


        </div>
    </body>

</html>

CSS

/*
En CSS se debe tener muy presente que existen etiquetas padres e hijas, por ejemplo el body es una etiqueta padre 
que contiene varias etiquetas diferentes y estas etiquetas se denominan hijas 
*/

/*
Los colores hexadecimales es una manera de optimizar recursos 
por ejemplo:

background-color: #c083836b; code hexadecimal
color: rgb(255,255,255); code rgb rango 0-255
color: white; Usando el nombre del color

*/
body{
    background-color: #ffffff;
}

div.principal{
    background-color: #c083836b; 
    padding: 20px; /*pading realiza un espaciamiento interno*/
}

p{

    text-align: center;

}
.titulo-principal{
    padding-left: 30px;
}
.titulo-centralizado{
    text-align: center;
}

p#mision{
    font-size: 20px;
}
em strong{
    color: red;
}

img#banner{
    width: 100%;
}
div.diferenciales{
    background: #ffffff;
    padding: 30px;
}

h2{
    text-align: center;
}

/*¿Cuándo debemos usar una class en nuestro código?
Cuando queremos repetir el estilo CSS en varios elementos.*/
li.items{
    font-style: italic;
}

ul{
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
}

img.imgDifereciales{
    width: 50%;
}