Quise hacer un carrusel con carros, la idea es añadir java script para agregar mas, y poder navegar entre diferentes estilos, además de esto al cliquear saber mas información de cada elección
Lo hice aplicando un fondo al cuerpo del HTML luego aplique una imagen y junto a esta agregue estilos para que no tuviera márgenes a los lados y acomode el tamaño de la imagen, la centre usan diferentes tipos de background.
Luego acomode el section organizando los elementos que este tenia, dándole posición y tamaño etc; Luego de esto le di tamaño alas cards que estaban dentro de el, les di posicionamiento y le agregue sombras y transiciones a estas mismas cards :3
recomendaciones ??
* {
box-sizing: border-box;
transition: all 0.3s ease-in-out;
}
body {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background: url(https://i.pinimg.com/originals/dc/c4/9a/dcc49a4c1561a7a0d30411b6ba4cfb42.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center center;
}
section {
width: 100%;
display: flex;
justify-content: center;
}
.card {
width: 400px;
height: 400px;
background: papayawhip;
border-radius: 20px;
overflow: hidden;
position: absolute;
top: 15%;
transition: transform 0.5s ease, border-radius 0.5s ease;
box-shadow: 18px18px30px#000, -9px-9px16pxrgba(66, 65, 65, 0.8);
}
.card:hover,
.cardtwo:hover,
.cardthree:hover {
transform: translateY(-20px) scale(1.1);
border-radius: 20px;
}
.cardtwo {
width: 400px;
height: 400px;
background: papayawhip;
border-radius: 20px;
overflow: hidden;
position: absolute;
top: 20%;
left: 10%;
transition: transform 0.5s ease, border-radius 0.5s ease;
box-shadow: 18px18px30px#000, -9px-9px16pxrgba(66, 65, 65, 0.8);
}
.cardthree {
width: 400px;
height: 400px;
background: papayawhip;
border-radius: 20px;
overflow: hidden;
position: absolute;
right: 10%;
top: 20%;
transition: transform 0.5s ease, border-radius 0.5s ease;
box-shadow: 18px18px30px#000, -9px-9px16pxrgba(66, 65, 65, 0.8);
}
.cardimg,
.cardtwoimg,
.cardthreeimg {
width: 100%;
height: 100%;
}
<body>
<section>
<divclass="card">
<img
src="https://i.pinimg.com/736x/48/a5/65/48a5653e2e9d5ec90213cc7c93f8f400.jpg"
alt=""
/>
div>
<divclass="cardtwo">
<img
src="https://i.pinimg.com/736x/86/6d/e2/866de230f553aebfc471b334337d7233.jpg"
alt=""
/>
div>
<divclass="cardthree">
<img
src="https://i.pinimg.com/736x/38/3f/0f/383f0fa9e69086f5f64282f3c254ad68.jpg"
alt=""
/>
div>
section>
body>```
