mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
83 lines
1.9 KiB
HTML
83 lines
1.9 KiB
HTML
<div class="card">
|
|
<div class="card__content">
|
|
<div class="card__content-heading">
|
|
<h2>Title</h2>
|
|
<br>
|
|
</div>
|
|
<div class="card__content-body">
|
|
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
|
</p>
|
|
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
|
</p>
|
|
</div>
|
|
<div class="card__content-footer">
|
|
<button> Yes
|
|
</button>
|
|
<button> No
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by alexreyes091 - Tags: card */
|
|
.card {
|
|
width: 190px;
|
|
height: 254px;
|
|
padding: 2%;
|
|
background: rgb(255, 255, 255);
|
|
border-bottom: 2px solid blueviolet;
|
|
border-right: 2px solid blueviolet;
|
|
border-top: 2px solid white;
|
|
border-left: 2px solid white;
|
|
transition-duration: 1s;
|
|
transition-property: border-top,
|
|
border-left,
|
|
border-bottom,
|
|
border-right,
|
|
box-shadow;
|
|
}
|
|
|
|
.card:hover {
|
|
border-top: 2px solid blueviolet;
|
|
border-left: 2px solid blueviolet;
|
|
border-bottom: 2px solid rgb(238, 103, 238);
|
|
border-right: 2px solid rgb(238, 103, 238);
|
|
box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;
|
|
}
|
|
|
|
.card__content {
|
|
font-size: small;
|
|
text-align: center;
|
|
}
|
|
|
|
.card__content-heading {
|
|
color: blueviolet;
|
|
}
|
|
|
|
.card__content-body p {
|
|
color: rgb(118, 104, 128);
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.card__content-footer button {
|
|
background-color: rgb(255, 255, 255);
|
|
color: grey;
|
|
font-weight: 700;
|
|
border-radius: .2rem;
|
|
border: 1px solid grey;
|
|
padding: .5rem;
|
|
margin: 1rem;
|
|
transition-duration: 1s;
|
|
transition-property: background-color, color, border;
|
|
}
|
|
|
|
button:hover {
|
|
color: white;
|
|
background-color: rgb(238, 103, 238);
|
|
border: 1px solid white;
|
|
box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
|
|
}
|
|
|
|
|
|
|
|
</style>
|