devfzn/Oracle_One-Alura_Latam
devfzn/Oracle_One-Alura_Latam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

HTML5 y CSS3 pt. 2: Posic. listas y navegación 06

Browse Source 
Uso de pseudo-clases CSS 'hover' y 'active'
This commit is contained in:
devfzn 2023-04-11 10:56:20 -04:00
parent 8cece2e6fa
commit 8f95486cfd
Signed by: devfzn
GPG Key ID: E070ECF4A754FDB1
1 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
004_primeras_paginas/html_css_parte2/productos.css
View File

@ -28,6 +28,11 @@ nav a{
text-decoration: none; text-decoration: none;
} }
nav a:hover{
color: #cd4f39;
text-decoration: underline;
}
.productos{ .productos{
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
@ -39,22 +44,34 @@ nav a{
text-align: center; text-align: center;
width: 30%; width: 30%;
vertical-align: top; vertical-align: top;
/*background: #cd4f39;*/ /*background: #cd4f39; <- se usó para visualizar modificaciones */
margin: 0 1.5%; margin: 0 1.5%;
padding: 30px 20px; padding: 30px 20px;
box-sizing: border-box; box-sizing: border-box;
/*border-width: 2px; /*border-width: 2px; <- estas 3 propiedades se
border-style: solid; border-style: solid; <- pueden reemplazar con la
border-color: #cd4f39;*/ border-color: #cd4f39; <- propiedad de abajo */
border: 2px solid #cd4f39; border: 2px solid #cd4f39;
border-radius: 10px; border-radius: 10px;
} }
.productos li:hover{
border-color: #046dfc;
}
.productos li:active{
border-color: #088C19;
}
.productos h2{ .productos h2{
font-size: 26px; font-size: 26px;
font-weight: bold; font-weight: bold;
} }
.productos li:hover h2{
font-size: 32px;
}
.prod_descripcion { .prod_descripcion {
font-size: 18px; font-size: 18px;
} }