mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
57 lines
2 KiB
HTML
57 lines
2 KiB
HTML
<div class="card">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 409 436" height="130" width="130">
|
|
<path fill="#C28F2B" d="M25.29 133.28C9.63001 161.66 0.720001 194.16 0.720001 228.72C0.720001 263.28 9.63001 295.81 25.29 324.19V133.28Z"></path>
|
|
<path fill="#C28F2B" d="M204.72 28.1802C188.17 28.1802 172.11 30.1802 156.7 33.8102V65.3702C171.96 61.0702 188.05 58.7102 204.72 58.7102C300.22 58.7102 377.65 134.59 377.65 228.21C377.65 270.37 361.9 308.93 335.91 338.59L330.98 355.89L320.07 394.18C373.61 358.04 408.75 297.43 408.75 228.77C408.72 117.96 317.39 28.1802 204.72 28.1802Z"></path>
|
|
<path fill="#C28F2B" d="M156.7 332.8H313.17H316.59C343.07 305.6 359.38 268.77 359.38 228.21C359.38 144.49 290.15 76.6401 204.73 76.6401C187.96 76.6401 171.84 79.3101 156.71 84.1201V332.8H156.7Z"></path>
|
|
<path fill="#C28F2B" d="M138.2 0.680176H21.8L43.78 45.5402V391.05L21.8 435.88H288.93L313.16 350.98H138.2V0.680176Z"></path>
|
|
</svg>
|
|
<p class="text">League of legends
|
|
</p></div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by chethan025 - Tags: white, card, hover effect */
|
|
.card {
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
justify-content: center;
|
|
background: rgba(65, 21, 115, 1);
|
|
box-shadow: 0px 145px 58px rgba(233, 182, 27, 0.01),
|
|
0px 82px 49px rgba(233, 182, 27, 0.05),
|
|
0px 36px 36px rgba(233, 182, 27, 0.09),
|
|
0px 9px 20px rgba(233, 182, 27, 0.1),
|
|
0px 0px 0px rgba(233, 182, 27, 0.1);
|
|
width: 254px;
|
|
height: 254px;
|
|
margin: 40px;
|
|
border-radius: 28px;
|
|
position: relative;
|
|
font-family: 'Montserrat';
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
font-size: 42px;
|
|
line-height: 28px;
|
|
color: #41157300;
|
|
letter-spacing: 0.1em;
|
|
transition: 300ms ease-in;
|
|
}
|
|
|
|
.card:hover {
|
|
background: rgba(233, 182, 27, 1);
|
|
box-shadow: 0px 112px 45px rgba(65, 21, 115, 0.01),
|
|
0px 63px 38px rgba(65, 21, 115, 0.05),
|
|
0px 28px 28px rgba(65, 21, 115, 0.09),
|
|
0px 7px 15px rgba(65, 21, 115, 0.1),
|
|
0px 0px 0px rgba(65, 21, 115, 0.1);
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.svg {
|
|
opacity: 80%;
|
|
}
|
|
|
|
.text {
|
|
margin: auto;
|
|
position: absolute;
|
|
}
|
|
</style>
|