Skip to content

Instantly share code, notes, and snippets.

@codigoconjuan
Created December 15, 2022 19:33
Show Gist options
  • Save codigoconjuan/5a30a088add0c9dd77c3309ae586db37 to your computer and use it in GitHub Desktop.
Save codigoconjuan/5a30a088add0c9dd77c3309ae586db37 to your computer and use it in GitHub Desktop.
CSS para Guitarra
.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;
}
@Nico235711
Copy link

gracias

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment