[Proyecto] Un poco de lo que hicimos en la primera parte del curso HTML | HTML5 y CSS3 parte 1: Mi primera página web | Alura Latam

<head>
    <meta charset="UTF-8">
    <title>Lo-fi</title>
    <link rel = "stylesheet" href="style.css">
</head>


<body>

    <!--Titulo de la pagina-->
    <header>
        <h1 class="titulo-principal">Hola mundo Lo-Fi !!  </h1>
    </header>

    <img id="banner" src="banner/banner.jpg">
    <div class="principal">
        <h2 class="titulo-Centralizado">¿QUÉ ES EL «LO-FI»?</h2>

        <p> Se trata de un estilo musical que destaca por ser grabado
        con métodos caseros y que ha alcanzado su máximo exponente
        en YouTube acompañado de ilustraciones o gifs en bucle.</p>

        <p>Quizás lo desconozcas, pero millones de usuarios en el mundo
        viven las 24 horas del día con la música <strong>«Lo-Fi»</strong> como banda
        sonora de sus vidas. Se trata de un fenómeno que comenzó en los 90,
        pero que ha alcanzado su máximo exponente en la actualidad acompañado
        de ilustraciones anime y gifs en bucle. </p>    

        <!--selector id = es identificar mision , propiedad id..
          <p style="font-size: 20px ">
        -->
        <p id="mision"> <em>Día tras día, no deja de suma seguidores que buscan huir del estrés cotidiano… 
        Pero, <strong>¿qué es el «Lo-Fi»?</strong></em></p>

    </div>


    <div class="diferenciales">
        <!--Listas -->
        <h3 class="titulo-Centralizado">Diferenciales</h3>
        <ul> <!--etiqueta de LISTA de contenido-->
            <!--etiqueta de punto en lista -->
            <li class="items">Atención personalizada a los clientes</li>
            <li class="items">Espacio diferenciado</li>
            <li class="items">Localización</li>
            <li class="items">Profesionales calificados</li>
        </ul>
        <img src="diferenciales/diferenciales/diferenciales.jpg" class="imagenDiferenciales">

    </div>

</body>

--------------------------------------------------------- CSS-------------------------------------------------

/* modificar todas las etiquetas que sean P */ .titulo-principal{ padding-left: 30px; }

#banner{ width: 100%; }

.principal{ background: #ffffff; padding: 20px; /espacio interno de bloques/ }

h1{

text-align: center;

}

p { text-align: center; background : #CCCCCC; }

/*1) Etiquetas en cascada */ em strong {

color: red;

}

/*2) identificador de etiqueta */

#mision {

font-size: 20px;

}

.diferenciales{ background: #ffffff; padding: 30px; }

.titulo-Centralizado{ text-align: center; }

/* 3) clases llamada items, me permite referenciar punto y nombre = .items */

.items{ font-style: italic;}

/modificar espacio de las listas para subir la foto izq/ ul{ display: inline-block; vertical-align: top; width: 20%; /ancho/ margin-right: 15%; /distancia de lista imagen/ }

.imagenDiferenciales{ width: 50%; }