Card by NlghtM4re

Made by

@NlghtM4re

Theme:

Light

#blue#card#theme#sun#water#colorful

#e8e8e8

71 views

CSSAdd prefixes

1.card {
2  width: 190px;
3  height: 254px;
4  border-radius: 5px;
5  background: lightblue;
6  border: 2px solid rgb(49, 161, 198);
7}
8
9.wave {
10  transform: translate(0,161px);
11}
12
13.sun {
14  transform: translate(-45px, -143px);
15}
16
17.sun-shadow {
18  position: absolute;
19  width: 190px;
20  height: 190px;
21  display: flex;
22  justify-content: center;
23  transform: rotate(-90deg) translate(253px,0);
24  border-radius: 10px;
25  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%);
26}
27
28.sun-ring {
29  width: 5px;
30  height: 20px;
31  position: absolute;
32  background-color: rgb(249, 215, 46);
33  border-radius: 5px;
34}
35
36.sun-ring-container {
37  transform: translate(48px,-217px);
38}
39
40.sun-ring:nth-child(1) {
41  transform: translate(0,40px);
42}
43
44.sun-ring:nth-child(2) {
45  transform: translate(25px,32px)  rotate(-35deg);
46}
47
48.sun-ring:nth-child(3) {
49  transform: translate(40px,5px)  rotate(-80deg);
50}
51
52.sun-ring:nth-child(4) {
53  transform: translate(37px,-25px)  rotate(-120deg);
54}
55
56.sun-ring:nth-child(5) {
57  transform: translate(-25px,34px)  rotate(35deg);
58}
59
60.sun-ring:nth-child(6) {
61  transform: translate(-38px,13px)  rotate(75deg) scaleY(0.7);
62}
63
64.sun-ring:nth-child(7) {
65  transform: translate(-38px,-17px)  rotate(110deg) scaleY(0.7);
66}
67
68.sun-ring:nth-child(8) {
69  transform: translate(-20px,-35px)  rotate(160deg) scaleY(0.7);
70}
71
72.sun-ring:nth-child(9) {
73  transform: translate(10px,-37px)  rotate(195deg) scaleY(0.51);
74}

.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);
}

HTML

1<div class="card">
2    <div class="wave">
3      <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>
4    </div>
5    <div class="sun">
6      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path transform="rotate(
7                  0,
8                  100,
9                  100
10              ) translate(
11                  70
12                  70
13              )" fill="#FADB5F" d="M 0, 30
14                  C 0, 11.700000000000001 11.700000000000001, 0 30, 0
15                  S 60, 11.700000000000001 60, 30
16                      48.3, 60 30, 60
17                      0, 48.3 0, 30"></path></svg>
18    </div>
19</div>
20<div class="sun-shadow"></div>
21<div class="sun-ring-container">
22    <div class="sun-ring"></div>
23    <div class="sun-ring"></div>
24    <div class="sun-ring"></div>
25    <div class="sun-ring"></div>
26    <div class="sun-ring"></div>
27    <div class="sun-ring"></div>
28    <div class="sun-ring"></div>
29    <div class="sun-ring"></div>
30    <div class="sun-ring"></div>
31</div>

<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>