HTML5 y CSS3 pt. 4: Avanzando en CSS 03

Mejora de semantica con nuevos divisores 'div', uso de mas pseudo-clases css,
background degaradado, uso de mas pseudo-elementos.

004_primeras_paginas/README.md

@@ -325,6 +325,6 @@ utilizar [style.css](./html_css_parte4/style.css).
     - [Noto Music](https://fonts.google.com/noto/specimen/Noto+Music)
 </details>
 
-- [Mapa](./html_css_parte4/index.html#L51) incrustado (embedded) y [estilo](./html_css_parte4/style.css#L215).
+- [Mapa](./html_css_parte4/index.html#L52) incrustado (embedded) y [estilo](./html_css_parte4/style.css#L234).
-- [Video](./html_css_parte4/index.html#L70) incrustado y [estilo](./html_css_parte4/style.css#L228).
+- [Video](./html_css_parte4/index.html#L73) incrustado y [estilo](./html_css_parte4/style.css#L284).
 

004_primeras_paginas/html_css_parte4/index.html

@@ -48,29 +48,34 @@
             <section class="mapa">
                 <h3 class="titulo-principal">Donde estamos</h3>
                 <p>Estamos ubicados en el centro de la cuidad</p>
-                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.449840047712!2d-46.63683801114504!3d-23.5881948!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Education%20and%20Innovation!5e0!3m2!1ses-419!2scl!4v1681402707968!5m2!1ses-419!2scl"
+                <div class="mapa-contenido">
-                width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"
+                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.449840047712!2d-46.63683801114504!3d-23.5881948!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Education%20and%20Innovation!5e0!3m2!1ses-419!2scl!4v1681402707968!5m2!1ses-419!2scl"
-                referrerpolicy="no-referrer-when-downgrade"></iframe>
+                    width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"
+                    referrerpolicy="no-referrer-when-downgrade"></iframe>
+                </div>
             </section>
 
             <section class="diferencias">
-                <h3 class="titulo-principal">Lo que nos diferencia</h2>
+                <h3 class="titulo-principal">Lo que nos diferencia</h3>
-                <ul>
+                <div class="contenido-diferenciales">
-                    <li class="items">Atención personalizada para cada cliente</li>
+                    <ul class="lista-diferenciales">
-                    <li class="items">Espacio diferenciado</li>
+                        <li class="items">Atención personalizada</li>
-                    <li class="items">Localización</li>
+                        <li class="items">Espacio diferenciado</li>
-                    <li class="items">Profesionales calificados</li>
+                        <li class="items">Localización</li>
-                </ul>
+                        <li class="items">Profesionales calificados</li>
-                <img class="imagen_diferencias"
+                        <li class="items">Puntualidad</li>
-                     src="diferenciales/diferenciales.jpg"
+                        <li class="items">Higiene</li>
-                     alt="hombre sentado en barbería al que le cortan la barba con tijeras"/>
+                    </ul><img class="imagen-diferenciales"
+                         src="diferenciales/diferenciales.jpg"
+                         alt="hombre sentado en barbería al que le cortan la barba con tijeras"/>
+                </div>
+                <div class="video">
+                    <iframe width="560" height="315" src="https://www.youtube.com/embed/TnJ_ObLRM9w"
+                    title="YouTube video player" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    allowfullscreen></iframe>
+                </div>
             </section>
-
-            <div class="video">
-                <iframe width="560" height="315" src="https://www.youtube.com/embed/TnJ_ObLRM9w"
-                title="YouTube video player" frameborder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                allowfullscreen></iframe>
         </main>
         <footer>
             <img src="./imagenes/logo-blanco.png">

004_primeras_paginas/html_css_parte4/style.css

@@ -98,11 +98,6 @@ footer {
     font-size: 14px;
 }
 
-main {
-    width: 80%;
-    margin: 0 auto;
-}
-
 form {
     margin: 50px 0%;
 }
@@ -181,12 +176,19 @@ p.test {
 
 /* la configuración de stilo inline sobrescribe todo */
 
-/* CSS para index.html */
+/* CSS para el home - index.html */
 
 .banner {
     width: 100%;
 }
 
+.principal {
+    padding: 3em;
+    background: #046dfc;
+    width: 940px;
+    margin: 0 auto;
+}
+
 .titulo-principal {
     text-align: center;
     font-size: 2em;
@@ -194,6 +196,23 @@ p.test {
     clear:left;
 }
 
+/* Alterando estilos con psudo-clases
+.titulo-principal:first-letter {
+    font-weight: bold;
+}
+
+.titulo-principal:before {
+    content: "[";
+}
+
+.titulo-principal:after {
+    content: "]";
+}
+
+p:first-line {
+    font-style: italic;
+}*/
+
 .principal p{
     margin: 0 0 1em;
 }
@@ -214,6 +233,7 @@ p.test {
 
 .mapa {
     padding: 3em 0;
+    background: linear-gradient(#046dfc, #cd4f39, #888888);
 }
 
 .mapa p {
@@ -221,7 +241,43 @@ p.test {
     text-align: center;
 }
 
-.imagen_diferencias {
+.mapa-contenido {
+    width: 940px;
+    margin: 0 auto;
+}
+
+.diferencias {
+    padding: 3em 0;
+    background: #888888;
+}
+
+.contenido-diferenciales {
+    width: 640px;
+    margin: 0 auto;
+}
+
+.lista-diferenciales {
+    width: 40%;
+    display: inline-block;
+    vertical-align: top;
+    margin-right: auto;
+}
+
+.items {
+    line-height: 1.5;
+}
+
+.items:before {
+    content: "✦ ";
+}
+
+/* .items:nt-child(2) item 2*/
+/* .items:nt-child(2n) item pares */
+.items:first-child {
+    font-weight: bold;
+}
+
+.imagen-diferenciales {
     width: 60%;
 }