mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
61 lines
1.2 KiB
HTML
61 lines
1.2 KiB
HTML
<div class="card">
|
|
<div class="img"></div>
|
|
<div class="info">
|
|
<span>John Doe</span>
|
|
<p>Web Dev</p>
|
|
</div>
|
|
<a href="#">Button</a>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by benjimich - Tags: neumorphism, card */
|
|
.card {
|
|
width: 190px;
|
|
height: 254px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: #f2f2f3;
|
|
border-radius: 12px;
|
|
box-shadow: inset 5px 5px 10px #a9a9aa77,
|
|
inset -5px -5px 10px #ffffff7e;
|
|
}
|
|
|
|
.card .img {
|
|
height: 100px;
|
|
margin-top: 1.6em;
|
|
aspect-ratio: 1;
|
|
border-radius: 30%;
|
|
background: #f2f2f3;
|
|
margin-bottom: 0.4em;
|
|
box-shadow: -5px -5px 8px #ffffff7a,
|
|
5px 5px 8px #a9a9aa7a;
|
|
}
|
|
|
|
.card .info {
|
|
text-align: center;
|
|
margin-top: 0.4em;
|
|
background: linear-gradient(120deg, rgba(0,194,255,1) 0%, rgba(0,86,255,1) 100%);
|
|
background-clip: border-box;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.card .info > span {
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.card a {
|
|
margin-top: 1em;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
background: linear-gradient(90deg, rgba(0,194,255,1) 0%, rgba(0,86,255,1) 100%);
|
|
padding: .5em 2em;
|
|
border-radius: 0.7em;
|
|
}
|
|
|
|
.card a:active {
|
|
box-shadow: inset 3px 3px 3px #0056ff,
|
|
inset -3px -3px 3px #00c2ff;
|
|
}
|
|
</style>
|