mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
108 lines
6.4 KiB
HTML
108 lines
6.4 KiB
HTML
<div class="card">
|
|
<div class="wave">
|
|
<svg class="transition duration-300 ease-in-out delay-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 690" id="svg" height="100%" width="100%"><path class="transition-all duration-300 ease-in-out delay-150 path-0" fill-opacity="0.265" fill="#0693e3" stroke-width="0" stroke="none" d="M 0,700 C 0,700 0,140 0,140 C 49.78660747317794,111.80801578493032 99.57321494635588,83.61603156986065 154,95 C 208.42678505364412,106.38396843013935 267.49374768775436,157.34388950548774 318,162 C 368.50625231224564,166.65611049451226 410.4517943026267,125.00841040818842 457,125 C 503.5482056973733,124.99158959181158 554.6990751017388,166.62246886175853 622,169 C 689.3009248982612,171.37753113824147 772.7519052904181,134.50171414477742 828,138 C 883.2480947095819,141.49828585522258 910.2933037365889,185.37067455913183 958,184 C 1005.7066962634111,182.62932544086817 1074.0748797632264,136.01558761869526 1126,133 C 1177.9251202367736,129.98441238130474 1213.4071772105067,170.56697496608706 1263,179 C 1312.5928227894933,187.43302503391294 1376.2964113947467,163.71651251695647 1440,140 C 1440,140 1440,700 1440,700 Z"></path><path class="transition-all duration-300 ease-in-out delay-150 path-1" fill-opacity="0.4" fill="#0693e3" stroke-width="0" stroke="none" d="M 0,700 C 0,700 0,280 0,280 C 62.90669626341102,299.99447527438645 125.81339252682204,319.98895054877295 186,328 C 246.18660747317796,336.01104945122705 303.6531261561229,332.03867307929465 349,318 C 394.3468738438771,303.96132692070535 427.5741028486866,279.85635713404855 469,280 C 510.4258971513134,280.14364286595145 560.0504624491306,304.535898384511 619,296 C 677.9495375508694,287.464101615489 746.224047354791,246.0000493279073 810,241 C 873.775952645209,235.9999506720927 933.0533481317054,267.46390430385986 979,280 C 1024.9466518682946,292.53609569614014 1057.5625601183872,286.1443334566531 1111,273 C 1164.4374398816128,259.8556665433469 1238.6964113947465,239.95876186952768 1297,240 C 1355.3035886052535,240.04123813047232 1397.6517943026267,260.02061906523613 1440,280 C 1440,280 1440,700 1440,700 Z"></path><path class="transition-all duration-300 ease-in-out delay-150 path-2" fill-opacity="0.53" fill="#0693e3" stroke-width="0" stroke="none" d="M 0,700 C 0,700 0,420 0,420 C 57.217906030336664,427.6082870884203 114.43581206067333,435.21657417684054 176,435 C 237.56418793932667,434.78342582315946 303.47465778764337,426.7419903810581 349,423 C 394.52534221235663,419.2580096189419 419.6655567887532,419.8154642989271 473,410 C 526.3344432112468,400.1845357010729 607.8631150573436,379.99615242323347 667,380 C 726.1368849426564,380.00384757676653 762.8819829818719,400.1999260081391 813,420 C 863.1180170181281,439.8000739918609 926.6089530151683,459.2041435442102 982,448 C 1037.3910469848317,436.7958564557898 1084.6822049574546,394.9834998150203 1127,375 C 1169.3177950425454,355.0165001849797 1206.6622271550127,356.86185719570847 1258,368 C 1309.3377728449873,379.13814280429153 1374.6688864224936,399.56907140214577 1440,420 C 1440,420 1440,700 1440,700 Z"></path><path class="transition-all duration-300 ease-in-out delay-150 path-3" fill-opacity="1" fill="#0693e3" stroke-width="0" stroke="none" d="M 0,700 C 0,700 0,560 0,560 C 56.23090393390059,560.0061166605007 112.46180786780118,560.0122333210013 171,564 C 229.53819213219882,567.9877666789987 290.38367246269576,575.9571833764952 346,570 C 401.61632753730424,564.0428166235048 452.00350228141565,544.1590331730176 502,537 C 551.9964977185844,529.8409668269824 601.6023184116415,535.4066839314343 648,537 C 694.3976815883585,538.5933160685657 737.5872240720187,536.2142311012456 782,540 C 826.4127759279813,543.7857688987544 872.0487853002836,553.7363916635837 933,548 C 993.9512146997164,542.2636083364163 1070.2176347268467,520.8402022444197 1136,528 C 1201.7823652731533,535.1597977555803 1257.0806757923294,570.9027993587372 1306,581 C 1354.9193242076706,591.0972006412628 1397.4596621038354,575.5486003206314 1440,560 C 1440,560 1440,700 1440,700 Z"></path></svg>
|
|
</div>
|
|
<div class="sun">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path transform="rotate(
|
|
0,
|
|
100,
|
|
100
|
|
) translate(
|
|
70
|
|
70
|
|
)" fill="#FADB5F" d="M 0, 30
|
|
C 0, 11.700000000000001 11.700000000000001, 0 30, 0
|
|
S 60, 11.700000000000001 60, 30
|
|
48.3, 60 30, 60
|
|
0, 48.3 0, 30"></path></svg>
|
|
</div>
|
|
</div>
|
|
<div class="sun-shadow"></div>
|
|
<div class="sun-ring-container">
|
|
<div class="sun-ring"></div>
|
|
<div class="sun-ring"></div>
|
|
<div class="sun-ring"></div>
|
|
<div class="sun-ring"></div>
|
|
<div class="sun-ring"></div>
|
|
<div class="sun-ring"></div>
|
|
<div class="sun-ring"></div>
|
|
<div class="sun-ring"></div>
|
|
<div class="sun-ring"></div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by NlghtM4re - Tags: blue, card, theme, sun, water, colorful */
|
|
.card {
|
|
width: 190px;
|
|
height: 254px;
|
|
border-radius: 5px;
|
|
background: lightblue;
|
|
border: 2px solid rgb(49, 161, 198);
|
|
}
|
|
|
|
.wave {
|
|
transform: translate(0,161px);
|
|
}
|
|
|
|
.sun {
|
|
transform: translate(-45px, -143px);
|
|
}
|
|
|
|
.sun-shadow {
|
|
position: absolute;
|
|
width: 190px;
|
|
height: 190px;
|
|
display: flex;
|
|
justify-content: center;
|
|
transform: rotate(-90deg) translate(253px,0);
|
|
border-radius: 10px;
|
|
background: linear-gradient(90deg, rgba(156,224,254,0) 0%, rgba(87,201,251,0) 33%, rgba(250,251,87,0.11545868347338939) 65%, rgba(149,140,0,0.23030462184873945) 100%);
|
|
}
|
|
|
|
.sun-ring {
|
|
width: 5px;
|
|
height: 20px;
|
|
position: absolute;
|
|
background-color: rgb(249, 215, 46);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.sun-ring-container {
|
|
transform: translate(48px,-217px);
|
|
}
|
|
|
|
.sun-ring:nth-child(1) {
|
|
transform: translate(0,40px);
|
|
}
|
|
|
|
.sun-ring:nth-child(2) {
|
|
transform: translate(25px,32px) rotate(-35deg);
|
|
}
|
|
|
|
.sun-ring:nth-child(3) {
|
|
transform: translate(40px,5px) rotate(-80deg);
|
|
}
|
|
|
|
.sun-ring:nth-child(4) {
|
|
transform: translate(37px,-25px) rotate(-120deg);
|
|
}
|
|
|
|
.sun-ring:nth-child(5) {
|
|
transform: translate(-25px,34px) rotate(35deg);
|
|
}
|
|
|
|
.sun-ring:nth-child(6) {
|
|
transform: translate(-38px,13px) rotate(75deg) scaleY(0.7);
|
|
}
|
|
|
|
.sun-ring:nth-child(7) {
|
|
transform: translate(-38px,-17px) rotate(110deg) scaleY(0.7);
|
|
}
|
|
|
|
.sun-ring:nth-child(8) {
|
|
transform: translate(-20px,-35px) rotate(160deg) scaleY(0.7);
|
|
}
|
|
|
|
.sun-ring:nth-child(9) {
|
|
transform: translate(10px,-37px) rotate(195deg) scaleY(0.51);
|
|
}
|
|
</style>
|