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.
This commit is contained in:
parent
edfb89ab04
commit
e28f979870
GPG Key ID:
E070ECF4A754FDB1
@ -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).
|
||||
- [Video](./html_css_parte4/index.html#L70) incrustado y [estilo](./html_css_parte4/style.css#L228).
|
||||
- [Mapa](./html_css_parte4/index.html#L52) incrustado (embedded) y [estilo](./html_css_parte4/style.css#L234).
|
||||
- [Video](./html_css_parte4/index.html#L73) incrustado y [estilo](./html_css_parte4/style.css#L284).
|
||||
|
||||
|
||||
@ -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"
|
||||
width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"
|
||||
referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
<div class="mapa-contenido">
|
||||
<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"
|
||||
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>
|
||||
<ul>
|
||||
<li class="items">Atención personalizada para cada cliente</li>
|
||||
<li class="items">Espacio diferenciado</li>
|
||||
<li class="items">Localización</li>
|
||||
<li class="items">Profesionales calificados</li>
|
||||
</ul>
|
||||
<img class="imagen_diferencias"
|
||||
src="diferenciales/diferenciales.jpg"
|
||||
alt="hombre sentado en barbería al que le cortan la barba con tijeras"/>
|
||||
<h3 class="titulo-principal">Lo que nos diferencia</h3>
|
||||
<div class="contenido-diferenciales">
|
||||
<ul class="lista-diferenciales">
|
||||
<li class="items">Atención personalizada</li>
|
||||
<li class="items">Espacio diferenciado</li>
|
||||
<li class="items">Localización</li>
|
||||
<li class="items">Profesionales calificados</li>
|
||||
<li class="items">Puntualidad</li>
|
||||
<li class="items">Higiene</li>
|
||||
</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">
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user