mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
57 lines
1.1 KiB
HTML
57 lines
1.1 KiB
HTML
<div class="card">
|
|
<div class="card-image"></div>
|
|
<p class="card-title">Card title</p>
|
|
<p class="card-body">
|
|
Nullam ac tristique nulla, at convallis quam. Integer consectetur mi nec magna tristique, non lobortis.
|
|
</p>
|
|
<p class="footer">Written by <span class="by-name">John Doe</span> on <span class="date">25/05/23</span></p>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by Sashank02 - Tags: neumorphism, card, box-shadow */
|
|
.card {
|
|
padding: 20px;
|
|
width: 330px;
|
|
min-height: 370px;
|
|
border-radius: 20px;
|
|
background: #e8e8e8;
|
|
box-shadow: 5px 5px 6px #dadada,
|
|
-5px -5px 6px #f6f6f6;
|
|
transition: 0.4s;
|
|
}
|
|
|
|
.card:hover {
|
|
translate: 0 -10px;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #2e54a7;
|
|
margin: 15px 0 0 10px;
|
|
}
|
|
|
|
.card-image {
|
|
min-height: 170px;
|
|
background-color: #c9c9c9;
|
|
border-radius: 15px;
|
|
box-shadow: inset 8px 8px 10px #c3c3c3,
|
|
inset -8px -8px 10px #cfcfcf;
|
|
}
|
|
|
|
.card-body {
|
|
margin: 13px 0 0 10px;
|
|
color: rgb(31, 31, 31);
|
|
font-size: 15px;
|
|
}
|
|
|
|
.footer {
|
|
float: right;
|
|
margin: 28px 0 0 18px;
|
|
font-size: 13px;
|
|
color: #636363;
|
|
}
|
|
|
|
.by-name {
|
|
font-weight: 700;
|
|
}
|
|
</style>
|