-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
63 lines (55 loc) · 40.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Birthday</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/css/index.css">
</head>
<body>
<div class="first--slide">
<div class="slide--content">
<h1>hi,I'm</h1>
<h2>KAOUTHER</h2>
<span class="top"></span>
<span class="right"></span>
<span class="bottom"></span>
<span class="left"></span>
</div>
<div class="slide--content--one">
<h1 class="first">today</h1>
<h2 class="first">is</h2>
<h2 class="second">My</h2>
<h1 class="second">Special day</h1>
<h2 class="second">01/01/2005</h2>
<div class="circle--stuff">
<svg viewBox="0 0 288 48" width="288" height="48" style="overflow: visible;"><g transform="translate(144 0)"><g transform="translate(-276.566 421.129)"><rect width="12.608460234942264" height="12.608460234942264" fill="#F87B7C" transform="rotate(72.60145421789896)"></rect><animateTransform attributeName="transform" type="translate" from="-147.31692562790084 0" to="-294.6338512558017 480" dur="1.2580507927982927s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.2580507927982927s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(269.756 389.735)"><rect width="6.6024317861213895" height="6.6024317861213895" fill="#FFC107" transform="rotate(38.02803143466206)"></rect><animateTransform attributeName="transform" type="translate" from="148.876375621307 0" to="297.752751242614 480" dur="1.500721309571935s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.500721309571935s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(174.705 169.205)"><rect width="5.852897883045647" height="5.852897883045647" fill="#F65A5B" transform="rotate(28.456635184965855)"></rect><animateTransform attributeName="transform" type="translate" from="129.17077622623987 0" to="258.34155245247973 480" dur="1.0529970168710006s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.0529970168710006s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-130.903 64.4332)"><rect width="10.500608397273465" height="10.500608397273465" fill="#F65A5B" transform="rotate(33.518702042612105)"></rect><animateTransform attributeName="transform" type="translate" from="-115.41033595665428 0" to="-230.82067191330856 480" dur="1.9569807707276798s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.9569807707276798s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(255.222 435.243)"><rect width="5.741483052387249" height="5.741483052387249" fill="#39D1B4" transform="rotate(46.49147792751984)"></rect><animateTransform attributeName="transform" type="translate" from="133.85114085517338 0" to="267.70228171034677 480" dur="1.3036790452656355s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.3036790452656355s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(31.0162 15.9351)"><rect width="6.80101713474188" height="6.80101713474188" fill="#FFC107" transform="rotate(11.204022894474395)"></rect><animateTransform attributeName="transform" type="translate" from="30.019648010959024 0" to="60.03929602191805 480" dur="1.0387121585702985s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.0387121585702985s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-3.09286 202.201)"><rect width="10.607425290967909" height="10.607425290967909" fill="#F65A5B" transform="rotate(73.47039150769439)"></rect><animateTransform attributeName="transform" type="translate" from="-2.17615538500645 0" to="-4.3523107700129 480" dur="1.4662807556935682s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.4662807556935682s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(206.722 332.232)"><rect width="7.636912663465038" height="7.636912663465038" fill="#F65A5B" transform="rotate(18.036591826355995)"></rect><animateTransform attributeName="transform" type="translate" from="122.16550975510404 0" to="244.33101951020808 480" dur="1.4353281745859594s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.4353281745859594s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(137.252 313.902)"><rect width="9.58640372808878" height="9.58640372808878" fill="#FA9C9D" transform="rotate(84.9299171174362)"></rect><animateTransform attributeName="transform" type="translate" from="82.98382665184931 0" to="165.96765330369863 480" dur="1.5673910658448071s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.5673910658448071s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(112.875 188.052)"><rect width="12.224275888715743" height="12.224275888715743" fill="#F65A5B" transform="rotate(56.958868320425424)"></rect><animateTransform attributeName="transform" type="translate" from="81.10118787423545 0" to="162.2023757484709 480" dur="1.1256263736515593s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.1256263736515593s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-44.0883 105.22)"><rect width="7.3193707683479285" height="7.3193707683479285" fill="#39D1B4" transform="rotate(29.61901015919562)"></rect><animateTransform attributeName="transform" type="translate" from="-36.161416073732816 0" to="-72.32283214746563 480" dur="1.0534095913396215s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.0534095913396215s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(201.372 372.671)"><rect width="5.544510601155997" height="5.544510601155997" fill="#F65A5B" transform="rotate(2.2963703425883897)"></rect><animateTransform attributeName="transform" type="translate" from="113.35963017076664 0" to="226.71926034153327 480" dur="1.030518978123618s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.030518978123618s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(131.495 87.179)"><rect width="10.759076659212255" height="10.759076659212255" fill="#FFC107" transform="rotate(87.32528953957524)"></rect><animateTransform attributeName="transform" type="translate" from="111.2837754504788 0" to="222.5675509009576 480" dur="1.6733003196858514s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.6733003196858514s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(168.916 8.31682)"><rect width="13.053827089343216" height="13.053827089343216" fill="#FFC107" transform="rotate(41.59319430819056)"></rect><animateTransform attributeName="transform" type="translate" from="166.0388449718487 0" to="332.0776899436974 480" dur="1.167328833970436s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.167328833970436s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-246.023 361.539)"><rect width="9.438843277640762" height="9.438843277640762" fill="#FA9C9D" transform="rotate(77.07547908665653)"></rect><animateTransform attributeName="transform" type="translate" from="-140.32757933557534 0" to="-280.6551586711507 480" dur="1.8215214067142032s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.8215214067142032s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-19.4778 411.261)"><rect width="5.155137368313447" height="5.155137368313447" fill="#F65A5B" transform="rotate(63.68358494554056)"></rect><animateTransform attributeName="transform" type="translate" from="-10.489996883997884 0" to="-20.97999376799577 480" dur="1.938744964010533s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.938744964010533s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-193.329 253.053)"><rect width="12.572461872186224" height="12.572461872186224" fill="#FA9C9D" transform="rotate(18.14043778713332)"></rect><animateTransform attributeName="transform" type="translate" from="-126.5912529949043 0" to="-253.1825059898086 480" dur="1.7608957790386608s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.7608957790386608s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(132.362 64.3945)"><rect width="11.962171698190868" height="11.962171698190868" fill="#F87B7C" transform="rotate(66.5452938923993)"></rect><animateTransform attributeName="transform" type="translate" from="116.70535383045883 0" to="233.41070766091767 480" dur="1.2748012693059791s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.2748012693059791s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(23.7278 28.7318)"><rect width="5.809294053959366" height="5.809294053959366" fill="#39D1B4" transform="rotate(12.777973190620841)"></rect><animateTransform attributeName="transform" type="translate" from="22.387744172095072 0" to="44.775488344190144 480" dur="1.990394651793788s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.990394651793788s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-166.194 338.268)"><rect width="5.155192084927991" height="5.155192084927991" fill="#F87B7C" transform="rotate(65.13887033072942)"></rect><animateTransform attributeName="transform" type="translate" from="-97.49050856733884 0" to="-194.98101713467767 480" dur="1.5205048549215163s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.5205048549215163s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-31.4654 122.618)"><rect width="10.368127452931883" height="10.368127452931883" fill="#39D1B4" transform="rotate(44.25401495643392)"></rect><animateTransform attributeName="transform" type="translate" from="-25.062944124981968 0" to="-50.125888249963936 480" dur="1.7807724976183688s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.7807724976183688s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-42.2511 41.8627)"><rect width="14.103528131335075" height="14.103528131335075" fill="#FFC107" transform="rotate(72.09281246475781)"></rect><animateTransform attributeName="transform" type="translate" from="-38.861764593079066 0" to="-77.72352918615813 480" dur="1.837076713482284s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.837076713482284s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-160.068 86.1509)"><rect width="10.983279923644469" height="10.983279923644469" fill="#F87B7C" transform="rotate(42.54113201739413)"></rect><animateTransform attributeName="transform" type="translate" from="-135.71076835776705 0" to="-271.4215367155341 480" dur="1.4617462130029035s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.4617462130029035s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-29.8295 464.828)"><rect width="9.161711928973633" height="9.161711928973633" fill="#FA9C9D" transform="rotate(15.34556142284818)"></rect><animateTransform attributeName="transform" type="translate" from="-15.154273359641607 0" to="-30.308546719283214 480" dur="1.4337419826765745s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.4337419826765745s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-178.317 128.014)"><rect width="13.686769327961251" height="13.686769327961251" fill="#FFC107" transform="rotate(45.07414220309329)"></rect><animateTransform attributeName="transform" type="translate" from="-140.77315685616557 0" to="-281.54631371233114 480" dur="1.3309859125988193s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.3309859125988193s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(219.727 410.159)"><rect width="12.764074026565211" height="12.764074026565211" fill="#FFC107" transform="rotate(83.87363030859562)"></rect><animateTransform attributeName="transform" type="translate" from="118.48317389639978 0" to="236.96634779279955 480" dur="1.3039269158524756s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.3039269158524756s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(111.389 357.596)"><rect width="8.285457717371177" height="8.285457717371177" fill="#FFC107" transform="rotate(55.18291720980784)"></rect><animateTransform attributeName="transform" type="translate" from="63.83361358999828 0" to="127.66722717999656 480" dur="1.8032664697360352s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.8032664697360352s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(75.6214 475.193)"><rect width="13.200638456623885" height="13.200638456623885" fill="#FFC107" transform="rotate(73.51717550864369)"></rect><animateTransform attributeName="transform" type="translate" from="38.00101769286111 0" to="76.00203538572222 480" dur="1.9478787303213856s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.9478787303213856s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(274.856 432.139)"><rect width="8.968495048926354" height="8.968495048926354" fill="#FFC107" transform="rotate(66.02890800046019)"></rect><animateTransform attributeName="transform" type="translate" from="144.6387866106216 0" to="289.2775732212432 480" dur="1.1950311173221444s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.1950311173221444s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-73.9908 129.708)"><rect width="11.469532088642811" height="11.469532088642811" fill="#FA9C9D" transform="rotate(23.880882117170138)"></rect><animateTransform attributeName="transform" type="translate" from="-58.25017828281587 0" to="-116.50035656563173 480" dur="1.7631218650889633s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.7631218650889633s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(195.443 148.666)"><rect width="10.462121786336729" height="10.462121786336729" fill="#FFC107" transform="rotate(26.548226340406018)"></rect><animateTransform attributeName="transform" type="translate" from="149.22492086385515 0" to="298.4498417277103 480" dur="1.0624958491755168s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.0624958491755168s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-58.6732 432.261)"><rect width="14.377316164643027" height="14.377316164643027" fill="#39D1B4" transform="rotate(56.99518347171379)"></rect><animateTransform attributeName="transform" type="translate" from="-30.871770620846135 0" to="-61.74354124169227 480" dur="1.637228355700252s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.637228355700252s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-139.405 326.431)"><rect width="10.089588480012424" height="10.089588480012424" fill="#FFC107" transform="rotate(53.39693328651522)"></rect><animateTransform attributeName="transform" type="translate" from="-82.97623670735247 0" to="-165.95247341470494 480" dur="1.6240260735518415s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.6240260735518415s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-42.9264 14.5082)"><rect width="5.605522069860404" height="5.605522069860404" fill="#39D1B4" transform="rotate(86.567326362837)"></rect><animateTransform attributeName="transform" type="translate" from="-41.66699732647694 0" to="-83.33399465295388 480" dur="1.3729834448841063s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.3729834448841063s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-83.4398 23.0919)"><rect width="13.569223440454884" height="13.569223440454884" fill="#39D1B4" transform="rotate(86.28047320362091)"></rect><animateTransform attributeName="transform" type="translate" from="-79.60989820810235 0" to="-159.2197964162047 480" dur="1.6981444705695712s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.6981444705695712s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-127.497 372.59)"><rect width="12.966533291639399" height="12.966533291639399" fill="#F65A5B" transform="rotate(83.52931885276857)"></rect><animateTransform attributeName="transform" type="translate" from="-71.77965589119036 0" to="-143.55931178238072 480" dur="1.8029830839013916s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.8029830839013916s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-109.582 323.12)"><rect width="6.691190217900216" height="6.691190217900216" fill="#FA9C9D" transform="rotate(47.43597820627009)"></rect><animateTransform attributeName="transform" type="translate" from="-65.49394850207734 0" to="-130.9878970041547 480" dur="1.5469645527476263s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.5469645527476263s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-158.75 116.733)"><rect width="9.96375744984303" height="9.96375744984303" fill="#FFC107" transform="rotate(9.149378353079351)"></rect><animateTransform attributeName="transform" type="translate" from="-127.69522448692736 0" to="-255.39044897385472 480" dur="1.2743070249499613s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.2743070249499613s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(39.8691 45.2325)"><rect width="11.598710036991175" height="11.598710036991175" fill="#FA9C9D" transform="rotate(76.22294910874258)"></rect><animateTransform attributeName="transform" type="translate" from="36.43558234995789 0" to="72.87116469991578 480" dur="1.8183696696850091s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.8183696696850091s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-63.98 101.214)"><rect width="8.703156709522599" height="8.703156709522599" fill="#F65A5B" transform="rotate(55.22678231532443)"></rect><animateTransform attributeName="transform" type="translate" from="-52.83832435013566 0" to="-105.67664870027131 480" dur="1.0351788944422509s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.0351788944422509s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-207.586 325.836)"><rect width="12.7674090818734" height="12.7674090818734" fill="#F87B7C" transform="rotate(53.2099971109075)"></rect><animateTransform attributeName="transform" type="translate" from="-123.6496687354237 0" to="-247.2993374708474 480" dur="1.3801286184806891s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.3801286184806891s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-14.1761 359.014)"><rect width="8.999663539806251" height="8.999663539806251" fill="#F65A5B" transform="rotate(63.059129707808076)"></rect><animateTransform attributeName="transform" type="translate" from="-8.110149853597672 0" to="-16.220299707195345 480" dur="1.5332334897832933s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.5332334897832933s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(186.115 110.245)"><rect width="8.846869993590271" height="8.846869993590271" fill="#39D1B4" transform="rotate(48.39105816056324)"></rect><animateTransform attributeName="transform" type="translate" from="151.35248674639698 0" to="302.70497349279395 480" dur="1.8171209491047406s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.8171209491047406s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-44.9409 372.92)"><rect width="5.787671588835311" height="5.787671588835311" fill="#39D1B4" transform="rotate(25.736018869681374)"></rect><animateTransform attributeName="transform" type="translate" from="-25.291483926677277 0" to="-50.58296785335455 480" dur="1.294870187978929s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.294870187978929s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-123.417 253.899)"><rect width="14.005292966639402" height="14.005292966639402" fill="#FA9C9D" transform="rotate(78.53166980312068)"></rect><animateTransform attributeName="transform" type="translate" from="-80.71953249258353 0" to="-161.43906498516705 480" dur="1.502501770041541s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.502501770041541s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-230.289 330.106)"><rect width="9.768355026891115" height="9.768355026891115" fill="#39D1B4" transform="rotate(6.20830045074041)"></rect><animateTransform attributeName="transform" type="translate" from="-136.4494736963528 0" to="-272.8989473927056 480" dur="1.9617639114021732s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.9617639114021732s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(265.433 381.927)"><rect width="8.740484652817603" height="8.740484652817603" fill="#FA9C9D" transform="rotate(33.112914915491366)"></rect><animateTransform attributeName="transform" type="translate" from="147.81721881818615 0" to="295.6344376363723 480" dur="1.4463132494751758s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.4463132494751758s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(39.8835 208.371)"><rect width="8.478693141673741" height="8.478693141673741" fill="#F65A5B" transform="rotate(70.4322873768517)"></rect><animateTransform attributeName="transform" type="translate" from="27.810725423849558 0" to="55.621450847699116 480" dur="1.0435485904484305s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.0435485904484305s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-196.946 256.686)"><rect width="14.772557082522477" height="14.772557082522477" fill="#FFC107" transform="rotate(12.70748308933365)"></rect><animateTransform attributeName="transform" type="translate" from="-128.3237418055129 0" to="-256.6474836110258 480" dur="1.7522213600748298s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.7522213600748298s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(150.191 478.423)"><rect width="10.628106842047844" height="10.628106842047844" fill="#FA9C9D" transform="rotate(17.776604987264612)"></rect><animateTransform attributeName="transform" type="translate" from="75.21931197943222 0" to="150.43862395886444 480" dur="1.59286850157008s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.59286850157008s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-176.485 147.986)"><rect width="12.61672667417864" height="12.61672667417864" fill="#F87B7C" transform="rotate(64.26109092904363)"></rect><animateTransform attributeName="transform" type="translate" from="-134.89599168313967 0" to="-269.79198336627934 480" dur="1.2136136152047012s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.2136136152047012s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(2.63655 133.571)"><rect width="12.0983843373292" height="12.0983843373292" fill="#FA9C9D" transform="rotate(77.1811483234397)"></rect><animateTransform attributeName="transform" type="translate" from="2.0625914867788224 0" to="4.125182973557645 480" dur="1.5838470702401857s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.5838470702401857s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-153.787 280.623)"><rect width="12.877019817907263" height="12.877019817907263" fill="#39D1B4" transform="rotate(23.860842745005897)"></rect><animateTransform attributeName="transform" type="translate" from="-97.04875569413277 0" to="-194.09751138826553 480" dur="1.6101299293674471s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.6101299293674471s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(81.0715 431.883)"><rect width="9.117118916187268" height="9.117118916187268" fill="#FA9C9D" transform="rotate(35.95068552997413)"></rect><animateTransform attributeName="transform" type="translate" from="42.674704554766656 0" to="85.34940910953331 480" dur="1.4115420356298163s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.4115420356298163s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-139.629 392.8)"><rect width="7.313004295500736" height="7.313004295500736" fill="#FA9C9D" transform="rotate(58.02215575282054)"></rect><animateTransform attributeName="transform" type="translate" from="-76.78938850387553 0" to="-153.57877700775106 480" dur="1.0129214483440876s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.0129214483440876s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-273.198 299.716)"><rect width="12.585063692234112" height="12.585063692234112" fill="#FFC107" transform="rotate(23.141937462371192)"></rect><animateTransform attributeName="transform" type="translate" from="-168.1829769087535 0" to="-336.365953817507 480" dur="1.0221483989192268s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.0221483989192268s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(35.4281 298.09)"><rect width="6.923794981974305" height="6.923794981974305" fill="#F65A5B" transform="rotate(3.7746840564447925)"></rect><animateTransform attributeName="transform" type="translate" from="21.85541553457417 0" to="43.71083106914834 480" dur="1.841477233909523s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.841477233909523s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-33.0682 476.788)"><rect width="7.5732528577320535" height="7.5732528577320535" fill="#39D1B4" transform="rotate(77.7718996598293)"></rect><animateTransform attributeName="transform" type="translate" from="-16.58958353532071 0" to="-33.17916707064142 480" dur="1.3473653905171072s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.3473653905171072s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-283.314 326.701)"><rect width="12.2603815691265" height="12.2603815691265" fill="#F87B7C" transform="rotate(40.61186413835374)"></rect><animateTransform attributeName="transform" type="translate" from="-168.57637773029137 0" to="-337.15275546058274 480" dur="1.0104588510243326s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.0104588510243326s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-184.995 236.299)"><rect width="14.208468465595544" height="14.208468465595544" fill="#F65A5B" transform="rotate(3.823136008517254)"></rect><animateTransform attributeName="transform" type="translate" from="-123.9672518900931 0" to="-247.9345037801862 480" dur="1.008151763575754s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.008151763575754s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-16.0432 153.69)"><rect width="14.13951789919437" height="14.13951789919437" fill="#FA9C9D" transform="rotate(42.619301927043715)"></rect><animateTransform attributeName="transform" type="translate" from="-12.152238276917666 0" to="-24.304476553835332 480" dur="1.976559708932348s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.976559708932348s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-177.155 156.185)"><rect width="5.133505938536141" height="5.133505938536141" fill="#FA9C9D" transform="rotate(21.39834732398235)"></rect><animateTransform attributeName="transform" type="translate" from="-133.6627946033307 0" to="-267.3255892066614 480" dur="1.7626435353614347s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.7626435353614347s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-298.208 442.713)"><rect width="10.836267006261" height="10.836267006261" fill="#F87B7C" transform="rotate(72.30364731432881)"></rect><animateTransform attributeName="transform" type="translate" from="-155.129444591013 0" to="-310.258889182026 480" dur="1.897024023744813s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.897024023744813s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(84.2279 92.2677)"><rect width="7.121515445378002" height="7.121515445378002" fill="#F65A5B" transform="rotate(6.357404543570042)"></rect><animateTransform attributeName="transform" type="translate" from="70.64765751330808 0" to="141.29531502661615 480" dur="1.8647485817543341s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.8647485817543341s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(190.66 379.05)"><rect width="6.809910365652707" height="6.809910365652707" fill="#FA9C9D" transform="rotate(81.16530403759086)"></rect><animateTransform attributeName="transform" type="translate" from="106.5323927443129 0" to="213.0647854886258 480" dur="1.8784567579243676s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.8784567579243676s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-242.452 323.151)"><rect width="14.074355906122618" height="14.074355906122618" fill="#F65A5B" transform="rotate(48.409224917371716)"></rect><animateTransform attributeName="transform" type="translate" from="-144.9007558049375 0" to="-289.801511609875 480" dur="1.237222291333915s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.237222291333915s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-133.488 171.588)"><rect width="9.246056340066431" height="9.246056340066431" fill="#FFC107" transform="rotate(43.8327821758391)"></rect><animateTransform attributeName="transform" type="translate" from="-98.33540134965875 0" to="-196.6708026993175 480" dur="1.7118575625304209s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.7118575625304209s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-212.338 477.609)"><rect width="10.206275708067604" height="10.206275708067604" fill="#F87B7C" transform="rotate(3.5180713953336706)"></rect><animateTransform attributeName="transform" type="translate" from="-106.43416329622404 0" to="-212.86832659244808 480" dur="1.0388271083528573s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.0388271083528573s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(242.416 313.93)"><rect width="6.474600901177441" height="6.474600901177441" fill="#FA9C9D" transform="rotate(17.332006714008447)"></rect><animateTransform attributeName="transform" type="translate" from="146.5614830699091 0" to="293.1229661398182 480" dur="1.1725354605029232s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.1725354605029232s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(192.019 277.818)"><rect width="9.48876350160013" height="9.48876350160013" fill="#F87B7C" transform="rotate(80.4424860466377)"></rect><animateTransform attributeName="transform" type="translate" from="121.62468336575408 0" to="243.24936673150816 480" dur="1.7604495247076903s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.7604495247076903s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(279.76 449.142)"><rect width="12.739962236214819" height="12.739962236214819" fill="#39D1B4" transform="rotate(41.421608567353125)"></rect><animateTransform attributeName="transform" type="translate" from="144.5253960453657 0" to="289.0507920907314 480" dur="1.9807597601629032s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.9807597601629032s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-108.772 462.209)"><rect width="5.912076935930544" height="5.912076935930544" fill="#F65A5B" transform="rotate(49.583326900563826)"></rect><animateTransform attributeName="transform" type="translate" from="-55.41304570703835 0" to="-110.8260914140767 480" dur="1.487324922186101s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.487324922186101s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-191.159 422.45)"><rect width="14.584811421858316" height="14.584811421858316" fill="#F65A5B" transform="rotate(27.837753606260925)"></rect><animateTransform attributeName="transform" type="translate" from="-101.67483313139012 0" to="-203.34966626278023 480" dur="1.285104860483476s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.285104860483476s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-187.329 333.699)"><rect width="11.468429979820034" height="11.468429979820034" fill="#FFC107" transform="rotate(36.27812415313309)"></rect><animateTransform attributeName="transform" type="translate" from="-110.50521774347041 0" to="-221.01043548694082 480" dur="1.6387655937208296s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.6387655937208296s" begin="-10s" repeatCount="indefinite"></animate></g><g transform="translate(-19.3892 203.962)"><rect width="9.690275881619304" height="9.690275881619304" fill="#F65A5B" transform="rotate(36.271222002843615)"></rect><animateTransform attributeName="transform" type="translate" from="-13.607219250650084 0" to="-27.21443850130017 480" dur="1.3155557725809395s" begin="-10s" repeatCount="indefinite"></animateTransform><animate attributeType="CSS" attributeName="opacity" values="1;0" dur="1.3155557725809395s" begin="-10s" repeatCount="indefinite"></animate></g><animate attributeType="CSS" attributeName="opacity" values="0;1" dur="1s" repeatCount="1" begin="DOMNodeInserted"></animate></g><g opacity="0" style="transition: opacity 0.5s ease-out;"><path fill="#FFC107" d="M126.099 11.24l5 8.661 8.66-5-5-8.66z"></path><path fill="#F65A5B" d="M264.76 21.24l-8.661 5 5 8.661 8.66-5zM204.929 47.071v-10h-10v10z"></path><path fill="#FFC107" d="M58.807 21.193l-6.928 4 4 6.928 6.928-4z"></path><path fill="#F65A5B" d="M282.171 18.828v4h4v-4z"></path><path fill="#F87B7C" d="M261.586 7l-1.414 1.414 1.414 1.414L263 8.414zM212.586 24l-1.414 1.414 1.414 1.414L214 25.414z"></path><path fill="#F65A5B" d="M154.586 9l-1.414 1.414 1.414 1.414L156 10.414z"></path><path fill="#F65A5B" d="M187.586 1l-1.414 1.414 1.414 1.414L189 2.414zM113.586 4l-1.414 1.414 1.414 1.414L115 5.414z"></path><path fill="#FFC107" d="M69.586 9l-1.414 1.414 1.414 1.414L71 10.414z"></path><path fill="#FFC107" d="M1.586 24L.172 25.414l1.414 1.414L3 25.414z"></path><path fill="#FFC107" d="M131.586 31l-1.414 1.414 1.414 1.414L133 32.414zM18.76.24l-8.661 5 5 8.661 8.66-5zM171.343 14l-5.657 5.657 5.657 5.657L177 19.657z"></path><path fill="#39D1B4" d="M206.807 5.193l-6.928 4 4 6.928 6.928-4zM98.343 36.414l-4.242 4.243 4.242 4.243 4.243-4.243z"></path><path fill="#FFC107" d="M93.44 11.096l-2 3.464 3.463 2 2-3.464zM49.172 4l-2.829 2.828 2.829 2.828L52 6.828zM27.172 39l-2.829 2.828 2.829 2.828L30 41.828z"></path><path fill="#F65A5B" d="M227.343 3.829l-2.828 2.828 2.828 2.828 2.829-2.828z"></path></g></svg>
</div>
</div>
</div>
<div class="second--canvas">
<div class="content">
<h2>let's</h2>
<h2>celebrate</h2>
<h2>Together</h2>
</div>
<div class="canvas--remove"></div>
</div>
<div class="third--canvas">
<div class="star--bg">
<img src="src/images/amusement-park.png" alt="" id="b1" />
<img src="src/images/amusement-park.png" alt="" id="b2" />
</div>
<div class="center--line">
<img src="src/images/balloons.png" id="bl--right" alt="" />
<img src="src/images/balloons.png" id="bl--left" alt="" />
<h1><span>h</span><span>a</span><span>p</span><span>p</span><span>y</span>
<span>b</span><span>i</span><span>r</span><span>t</span><span>h</span><span>d</span><span>a</span><span>y</span></h1>
</div>
<img src="src/images/gift.png" alt="" id="gf1"/>
<img src="src/images/gift.png" alt="" id="gf2"/>
<img src="src/images/gift.png" alt="" id="gf3"/>
</div>
<script src="src/js/index.js"></script>
</body>
</html>