Design for AIMarco polaroid
Marco polaroid: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
CSS
.card-086 {
width: 220px;
margin: 0;
padding: 12px 12px 36px;
background: #fff;
box-shadow: 0 6px 18px rgba(0,0,0,.18);
transform: rotate(3deg);
font-family: "Segoe Print","Bradley Hand",cursive;
color: #374151;
transition: transform .3s,box-shadow .3s
}
.card-086:hover {
transform: rotate(0) translateY(-4px);
box-shadow: 0 14px 30px rgba(0,0,0,.22)
}
.card-086__photo {
height: 196px;
background: linear-gradient(180deg,#fdba74 0,#f97316 45%,#1e3a8a 46%,#0f172a);
filter: saturate(.9) contrast(1.05)
}
.card-086 figcaption {
margin-top: 14px;
text-align: center;
font-size: 15px
}
HTML
<figure class="card-086">
<div class="card-086__photo"></div>
<figcaption>Lisbon, March</figcaption>
</figure>Prompt
Crea una tarjeta de foto estilo polaroid de 220px: marco blanco con padding 12px en tres lados y 36px abajo, sin radio, sombra 0 6px 18px rgba(0,0,0,.18), rotada 3deg y enderezándose con una elevación de 4px en hover. La foto es un bloque de 196px con un degradado de horizonte duro (#fdba74 a #f97316 hasta el 45%, luego #1e3a8a a #0f172a) con un ligero filtro de saturación y contraste. Pie de foto "Lisbon, March" centrado debajo en una fuente estilo manuscrito, 15px, #374151.