mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
74 lines
1.5 KiB
HTML
74 lines
1.5 KiB
HTML
<div class="card">
|
|
<div class="card__image"></div>
|
|
<div class="card__content">
|
|
<span class="title">Title card</span>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit vitae orci quis dignissim.</p>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by Javierrocadev - Tags: card, cart, card hover */
|
|
.card {
|
|
width: 300px;
|
|
height: 350px;
|
|
background: #ffd166;
|
|
color: #073b4c;
|
|
font-weight: 600;
|
|
padding: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: left;
|
|
position: relative;
|
|
transition: all .5s ease;
|
|
}
|
|
|
|
.card::before {
|
|
content: "32,99$";
|
|
position: absolute;
|
|
width: 75px;
|
|
height: 75px;
|
|
top: 35%;
|
|
right: 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
background-color: #ef476f;
|
|
color: aliceblue;
|
|
font-weight: 800;
|
|
transition: all .5s ease;
|
|
}
|
|
|
|
.card__image {
|
|
width: initial;
|
|
height: 150px;
|
|
background: rgb(6,214,160);
|
|
background: linear-gradient(163deg, #06d6a0 18%, rgba(17,138,178,1) 79%);
|
|
transition: all .5s ease;
|
|
}
|
|
|
|
.title {
|
|
font-weight: 800;
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
.card__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
flex-grow: 1;
|
|
gap: 10px;
|
|
}
|
|
|
|
.card:hover {
|
|
border-top-left-radius: 35px;
|
|
box-shadow: 5px 5px 0px 0px #06d6a0, 10px 10px 0px 0px #118ab2, 15px 15px 0px 0px #06d6a0, 5px 5px 15px 5px rgba(0,0,0,0);
|
|
}
|
|
|
|
.card:hover .card__image {
|
|
border-top-left-radius: 25px;
|
|
}
|
|
|
|
.card:hover::before {
|
|
transform: scale(1.3) rotate(-30deg);
|
|
}
|
|
</style>
|