mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
79 lines
2.4 KiB
HTML
79 lines
2.4 KiB
HTML
<div class="card">
|
|
<div class="icon">
|
|
<svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M11.984 16.815c2.596 0 4.706-2.111 4.706-4.707 0-1.409-.623-2.674-1.606-3.538-.346-.303-.735-.556-1.158-.748-.593-.27-1.249-.421-1.941-.421s-1.349.151-1.941.421c-.424.194-.814.447-1.158.749-.985.864-1.608 2.129-1.608 3.538 0 2.595 2.112 4.706 4.706 4.706zm.016-8.184c1.921 0 3.479 1.557 3.479 3.478 0 1.921-1.558 3.479-3.479 3.479s-3.479-1.557-3.479-3.479c0-1.921 1.558-3.478 3.479-3.478zm5.223.369h6.777v10.278c0 2.608-2.114 4.722-4.722 4.722h-14.493c-2.608 0-4.785-2.114-4.785-4.722v-10.278h6.747c-.544.913-.872 1.969-.872 3.109 0 3.374 2.735 6.109 6.109 6.109s6.109-2.735 6.109-6.109c.001-1.14-.327-2.196-.87-3.109zm2.055-9h-12.278v5h-1v-5h-1v5h-1v-4.923c-.346.057-.682.143-1 .27v4.653h-1v-4.102c-1.202.857-2 2.246-2 3.824v3.278h7.473c1.167-1.282 2.798-2 4.511-2 1.722 0 3.351.725 4.511 2h7.505v-3.278c0-2.608-2.114-4.722-4.722-4.722zm2.722 5.265c0 .406-.333.735-.745.735h-2.511c-.411 0-.744-.329-.744-.735v-2.53c0-.406.333-.735.744-.735h2.511c.412 0 .745.329.745.735v2.53z"></path>
|
|
</svg>
|
|
</div>
|
|
<strong> Instagram
|
|
</strong>
|
|
<div class="card__body">
|
|
Get UI elements that help you stand out.
|
|
</div>
|
|
<span>Follow us</span>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by satyamchaudharydev - Tags: instagram, card, hover */
|
|
.card {
|
|
--bg: #f7f7f8;
|
|
--hover-bg: #FFE5F4;
|
|
--hover-text: #E50087;
|
|
max-width: 23ch;
|
|
text-align: center;
|
|
background: var(--bg);
|
|
padding: 1.5em;
|
|
padding-block: 1.8em;
|
|
border-radius: 5px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: .3s cubic-bezier(.6,.4,0,1),transform .15s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 1em;
|
|
}
|
|
|
|
.card__body {
|
|
color: #464853;
|
|
line-height: 1.5em;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.card > :not(span) {
|
|
transition: .3s cubic-bezier(.6,.4,0,1);
|
|
}
|
|
|
|
.card > strong {
|
|
display: block;
|
|
font-size: 1.4rem;
|
|
letter-spacing: -.035em;
|
|
}
|
|
|
|
.card span {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: var(--hover-text);
|
|
border-radius: 5px;
|
|
font-weight: bold;
|
|
top: 100%;
|
|
transition: all .3s cubic-bezier(.6,.4,0,1);
|
|
}
|
|
|
|
.card:hover span {
|
|
top: 0;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.card:hover {
|
|
background: var(--hover-bg);
|
|
}
|
|
|
|
.card:hover>div,.card:hover>strong {
|
|
opacity: 0;
|
|
}
|
|
</style>
|