Created
December 15, 2022 19:33
-
-
Save codigoconjuan/5a30a088add0c9dd77c3309ae586db37 to your computer and use it in GitHub Desktop.
CSS para Guitarra
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.guitarra { | |
display: grid; | |
grid-template-columns: 2fr 3fr; | |
gap: 1rem; | |
align-items: center; | |
max-width: 70rem; | |
margin: 0 auto; | |
} | |
.contenido { | |
padding: 1rem; | |
} | |
.contenido h3 { | |
font-size: 3rem; | |
text-transform: uppercase; | |
color: var(--primary); | |
} | |
.descripcion { | |
display: -webkit-box; | |
-webkit-box-orient: vertical; | |
-webkit-line-clamp: 6; | |
overflow: hidden; | |
font-size: 1.8rem; | |
} | |
.precio { | |
color: var(--primary); | |
font-size: 4rem; | |
margin: 0; | |
font-weight: 900; | |
} | |
.enlace { | |
margin-top: 2rem; | |
display: block; | |
background-color: var(--black); | |
color: var(--white); | |
text-decoration: none; | |
padding: 1rem; | |
text-align: center; | |
text-transform: uppercase; | |
font-size: 1.4rem; | |
font-weight: 700; | |
transition-property: background-color; | |
transition-duration: 300ms; | |
} | |
.enlace:hover { | |
background-color: var(--primary); | |
} | |
.formulario { | |
margin-top: 4rem; | |
display: flex; | |
gap: 1rem; | |
flex-direction: column; | |
} | |
.formulario label { | |
font-size: 2.2rem; | |
} | |
.formulario select { | |
border: 1px solid var(--black); | |
padding: 1rem; | |
text-align: center; | |
border-radius: 1rem; | |
} | |
.formulario input[type="submit"] { | |
display: block; | |
width: 100%; | |
text-transform: uppercase; | |
font-weight: bold; | |
border: none; | |
padding: 1.4rem; | |
background-color: var(--black); | |
color: var(--white); | |
transition-property: background-color; | |
transition-duration: 300ms; | |
} | |
.formulario input[type="submit"]:hover { | |
background-color: var(--primary); | |
cursor: pointer; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
gracias