mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
51 lines
1.1 KiB
HTML
51 lines
1.1 KiB
HTML
<div class="card">
|
|
<div class="top">
|
|
<p class="title">
|
|
TITLE HERE
|
|
</p>
|
|
</div>
|
|
<p class="desc">
|
|
This is the description of this card.<br>You can enter anything here.
|
|
</p>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by reshades - Tags: gradient, card, clean */
|
|
.card {
|
|
width: 290px;
|
|
height: 404px;
|
|
background: linear-gradient(10deg, rgba(38,146,255,1) 0%, rgba(0,63,255,1) 100%);
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
|
backdrop-filter: blur(10.5px);
|
|
-webkit-backdrop-filter: blur(10.5px);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.top {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
|
backdrop-filter: blur(10.5px);
|
|
-webkit-backdrop-filter: blur(10.5px);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
width: 290px;
|
|
height: 300px;
|
|
}
|
|
|
|
.top .title {
|
|
color: #fff;
|
|
font-weight: bolder;
|
|
font-size: x-large;
|
|
margin-left: 10px;
|
|
margin-top: 90%
|
|
}
|
|
|
|
.card .desc {
|
|
color: #fff;
|
|
opacity: 75%;
|
|
font-size: small;
|
|
font-weight: lighter;
|
|
margin-left: 10px;
|
|
margin-top: 2%
|
|
}
|
|
</style>
|