fullib-js
Version:
Full Javascript Animation Library
713 lines (670 loc) • 37.9 kB
HTML
<html lang="en" translate="no">
<head>
<meta charset="UTF-8">
<title>fullib-js</title>
<meta name="description" content="fullib-js - Javascript library for easy animations on your website">
<!-- Meta Description -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
body {
overflow-x: hidden;
}
.row, h1 {
text-align: center;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link href="./training1.css" rel="stylesheet">
<body id="index" class="" style="overflow-x: hidden">
<!-- HTML -->
<nav class="fixed-top navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="https://dev-florian.github.io/fullib-js/">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="https://dev-florian.github.io/fullib-js/pages/scroll">Scroll</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="https://dev-florian.github.io/fullib-js/pages/lottie">Lottie</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="https://dev-florian.github.io/fullib-js/pages/carousel">Carousel</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="https://dev-florian.github.io/fullib-js/pages/cursor">Cursor</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="big-content" style="overflow: hidden; width: 100%; position: relative">
<div style="background: #0D0C1D;">
<div class="circlewhite"></div>
<div class="container mt-5 position-relative">
<div class="row pt-5">
<div class="col-12 text-center mx-auto col-lg-4">
<img class="blobed" alt="blob" width="320" height="320"
src="https://outsmartlabs.com/medias/images/redcharlie-fCRFjmM8Ll4-unsplash.jpg">
</div>
<div class="mt-5 mt-lg-0 col-12 col-lg-8 d-flex align-items-center justify-content-center">
<h2 class="text4 text-white" data-text="AND LAX JS !" style="font-weight: bold"><span><b>PURE ANIMATION JS CSS</b></span>
</h2>
</div>
</div>
<div class="row mt-5 mt-lg-0">
<div class="col-12 col-lg-6 d-flex align-items-center justify-content-center">
<h2 class="text-white text5" style="font-weight: bold"><b>ALL IN ONE BIG LIBRARY</b></h2>
</div>
<div class="col-12 col-lg-6">
<div class="doublecards">
<div class="firstcard mousemove" data-speed="3">
<img alt="firstcard" width="50" height="50"
src="https://images.freeimages.com/images/large-previews/08e/up-close-personal-2-1359478.jpg">
<b>Je suis un test</b><br>
text mini
</div>
<div class="mt-5 mt-lg-0 secondcard mousemove" data-speed="6">
<img alt="secondcard" class="mw-100"
src="https://images.freeimages.com/images/large-previews/651/working-and-trust-1215529.jpg">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wave">
<svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#0D0C1D" fill-opacity="1"
d="M0,64L48,80C96,96,192,128,288,160C384,192,480,224,576,240C672,256,768,256,864,224C960,192,1056,128,1152,112C1248,96,1344,128,1392,144L1440,160L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path>
</svg>
</div>
<div class="mycontainer container-fluid mt-5 position-relative">
<div class="generate-bulb"></div>
<div class="row">
<h2 class="text-center w-100" style="color: #F2F4F3"><b>ROCKET ¨POWER</b></h2>
<svg id="ez9uiemj3kbq1" class="text-center mx-auto" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 -512 512 1024"
shape-rendering="geometricPrecision"
text-rendering="geometricPrecision">
<style>
#ez9uiemj3kbq2_to {
animation: ez9uiemj3kbq2_to__to 6000ms linear infinite normal forwards
}
@keyframes ez9uiemj3kbq2_to__to {
0% {
transform: translate(256px, 267px)
}
50% {
transform: translate(256px, 256px)
}
100% {
transform: translate(256px, 256px)
}
}
#ez9uiemj3kbq3_to {
animation: ez9uiemj3kbq3_to__to 6000ms linear infinite normal forwards
}
@keyframes ez9uiemj3kbq3_to__to {
0% {
transform: translate(255.101892px, 529.528487px)
}
8.333333% {
transform: translate(255.359596px, 414.260625px)
}
16.666667% {
transform: translate(255.101892px, 294.355340px)
}
28.333333% {
transform: translate(257.407951px, 171.551236px)
}
38.333333% {
transform: translate(256.343616px, 72.272374px)
}
50% {
transform: translate(253.223776px, -91.383935px)
}
58.333333% {
transform: translate(253.864321px, -135.255847px)
}
66.666667% {
transform: translate(253.864321px, -81.061131px)
}
83.333333% {
transform: translate(253.864321px, 251.849263px)
}
100% {
transform: translate(253.864321px, 515.809240px)
}
}
#ez9uiemj3kbq3_ts {
animation: ez9uiemj3kbq3_ts__ts 6000ms linear infinite normal forwards
}
@keyframes ez9uiemj3kbq3_ts__ts {
0% {
transform: skewX(1deg) skewY(1deg) scale(1, 1)
}
8.333333% {
transform: skewX(1deg) skewY(1deg) scale(0.820000, 1.510000)
}
100% {
transform: skewX(1deg) skewY(1deg) scale(0.820000, 1.510000)
}
}
#ez9uiemj3kbq3 {
animation: ez9uiemj3kbq3_c_o 6000ms linear infinite normal forwards
}
@keyframes ez9uiemj3kbq3_c_o {
0% {
opacity: 1
}
3.333333% {
opacity: 0.120000
}
8.333333% {
opacity: 1
}
13.333333% {
opacity: 0.620000
}
18.333333% {
opacity: 1
}
23.333333% {
opacity: 0.260000
}
30% {
opacity: 0.660000
}
35% {
opacity: 0.100000
}
43.333333% {
opacity: 0.840000
}
50% {
opacity: 0.120000
}
55% {
opacity: 0.460000
}
58.333333% {
opacity: 0.180000
}
61.666667% {
opacity: 0.520000
}
66.666667% {
opacity: 0.200000
}
71.666667% {
opacity: 0.340000
}
75% {
opacity: 0.140000
}
80% {
opacity: 0.300000
}
83.333333% {
opacity: 0.700000
}
90% {
opacity: 0.500000
}
93.333333% {
opacity: 0.660000
}
98.333333% {
opacity: 0.420000
}
100% {
opacity: 1
}
}
#ez9uiemj3kbq4_to {
animation: ez9uiemj3kbq4_to__to 6000ms linear infinite normal forwards
}
@keyframes ez9uiemj3kbq4_to__to {
0% {
transform: translate(196.029297px, 457.476563px)
}
50% {
transform: translate(196.029297px, -149.296908px)
}
58.333333% {
transform: translate(196.669842px, -193.168820px)
}
66.666667% {
transform: translate(196.669842px, -138.974104px)
}
83.333333% {
transform: translate(196.669842px, 193.936290px)
}
100% {
transform: translate(196.669842px, 457.896266px)
}
}
#ez9uiemj3kbq5_to {
animation: ez9uiemj3kbq5_to__to 6000ms linear infinite normal forwards
}
@keyframes ez9uiemj3kbq5_to__to {
0% {
transform: translate(166.215705px, 407.541234px)
}
50% {
transform: translate(166.215705px, -199.232237px)
}
58.333333% {
transform: translate(166.856250px, -243.104149px)
}
66.666667% {
transform: translate(166.856250px, -188.909433px)
}
83.333333% {
transform: translate(166.856250px, 144.000961px)
}
100% {
transform: translate(166.856250px, 407.960938px)
}
}
#ez9uiemj3kbq6_to {
animation: ez9uiemj3kbq6_to__to 6000ms linear infinite normal forwards
}
@keyframes ez9uiemj3kbq6_to__to {
0% {
transform: translate(159.030158px, 407.541234px)
}
50% {
transform: translate(159.030158px, -199.232237px)
}
58.333333% {
transform: translate(159.670703px, -243.104149px)
}
66.666667% {
transform: translate(159.670703px, -188.909433px)
}
83.333333% {
transform: translate(159.670703px, 144.000961px)
}
100% {
transform: translate(159.670703px, 407.960938px)
}
}
#ez9uiemj3kbq7_to {
animation: ez9uiemj3kbq7_to__to 6000ms linear infinite normal forwards
}
@keyframes ez9uiemj3kbq7_to__to {
0% {
transform: translate(294.537971px, 423.568578px)
}
50% {
transform: translate(294.537971px, -183.204893px)
}
58.333333% {
transform: translate(295.178516px, -227.076805px)
}
66.666667% {
transform: translate(295.178516px, -172.882089px)
}
83.333333% {
transform: translate(295.178516px, 160.028305px)
}
100% {
transform: translate(295.178516px, 423.988282px)
}
}
#ez9uiemj3kbq10_to {
animation: ez9uiemj3kbq10_to__to 6000ms linear infinite normal forwards
}
@keyframes ez9uiemj3kbq10_to__to {
0% {
transform: translate(228.071174px, 491.453344px)
}
50% {
transform: translate(228.071174px, -115.320127px)
}
58.333333% {
transform: translate(228.711719px, -159.192039px)
}
66.666667% {
transform: translate(228.711719px, -104.997323px)
}
83.333333% {
transform: translate(228.711719px, 227.913071px)
}
100% {
transform: translate(228.711719px, 491.873048px)
}
}
#ez9uiemj3kbq11_to {
animation: ez9uiemj3kbq11_to__to 6000ms linear infinite normal forwards
}
@keyframes ez9uiemj3kbq11_to__to {
0% {
transform: translate(255.360237px, 369.521703px)
}
50% {
transform: translate(255.360237px, -237.251768px)
}
58.333333% {
transform: translate(256.000781px, -281.123680px)
}
66.666667% {
transform: translate(256.000781px, -226.928964px)
}
83.333333% {
transform: translate(256.000781px, 105.981430px)
}
100% {
transform: translate(256.000781px, 369.941407px)
}
}
#ez9uiemj3kbq12_to {
animation: ez9uiemj3kbq12_to__to 6000ms linear infinite normal forwards
}
@keyframes ez9uiemj3kbq12_to__to {
0% {
transform: translate(195.871955px, 369.521703px)
}
50% {
transform: translate(195.871955px, -237.251768px)
}
58.333333% {
transform: translate(196.512500px, -281.123680px)
}
66.666667% {
transform: translate(196.512500px, -226.928964px)
}
83.333333% {
transform: translate(196.512500px, 105.981430px)
}
100% {
transform: translate(196.512500px, 369.941407px)
}
}
#ez9uiemj3kbq13_to {
animation: ez9uiemj3kbq13_to__to 6000ms linear infinite normal forwards
}
@keyframes ez9uiemj3kbq13_to__to {
0% {
transform: translate(255.360237px, 271.414281px)
}
50% {
transform: translate(255.360237px, -335.359190px)
}
58.333333% {
transform: translate(256.000781px, -379.231102px)
}
66.666667% {
transform: translate(256.000781px, -325.036386px)
}
83.333333% {
transform: translate(256.000781px, 7.874008px)
}
100% {
transform: translate(256.000781px, 271.833985px)
}
}
#ez9uiemj3kbq14_to {
animation: ez9uiemj3kbq14_to__to 6000ms linear infinite normal forwards
}
@keyframes ez9uiemj3kbq14_to__to {
0% {
transform: translate(234.707893px, 271.414281px)
}
50% {
transform: translate(234.707893px, -335.359190px)
}
58.333333% {
transform: translate(235.348438px, -379.231102px)
}
66.666667% {
transform: translate(235.348438px, -325.036386px)
}
83.333333% {
transform: translate(235.348438px, 7.874008px)
}
100% {
transform: translate(235.348438px, 271.833985px)
}
}
#ez9uiemj3kbq15_to {
animation: ez9uiemj3kbq15_to__to 6000ms linear infinite normal forwards
}
@keyframes ez9uiemj3kbq15_to__to {
0% {
transform: translate(255.358283px, 215.959203px)
}
50% {
transform: translate(255.358283px, -390.814268px)
}
58.333333% {
transform: translate(255.998828px, -434.686180px)
}
66.666667% {
transform: translate(255.998828px, -380.491464px)
}
83.333333% {
transform: translate(255.998828px, -47.581070px)
}
100% {
transform: translate(255.998828px, 216.378907px)
}
}
#ez9uiemj3kbq16_to {
animation: ez9uiemj3kbq16_to__to 6000ms linear infinite normal forwards
}
@keyframes ez9uiemj3kbq16_to__to {
0% {
transform: translate(228.301643px, 215.959203px)
}
50% {
transform: translate(228.301643px, -390.814268px)
}
58.333333% {
transform: translate(228.942188px, -434.686180px)
}
66.666667% {
transform: translate(228.942188px, -380.491464px)
}
83.333333% {
transform: translate(228.942188px, -47.581070px)
}
100% {
transform: translate(228.942188px, 216.378907px)
}
}
#ez9uiemj3kbq17_to {
animation: ez9uiemj3kbq17_to__to 6000ms linear infinite normal forwards
}
@keyframes ez9uiemj3kbq17_to__to {
0% {
transform: translate(255.360229px, 351.230985px)
}
50% {
transform: translate(255.360229px, -255.542486px)
}
58.333333% {
transform: translate(256.000774px, -299.414398px)
}
66.666667% {
transform: translate(256.000774px, -245.219682px)
}
83.333333% {
transform: translate(256.000774px, 87.690712px)
}
100% {
transform: translate(256.000774px, 351.650689px)
}
}
#ez9uiemj3kbq18_to {
animation: ez9uiemj3kbq18_to__to 6000ms linear infinite normal forwards
}
@keyframes ez9uiemj3kbq18_to__to {
0% {
transform: translate(255.360229px, 351.230985px)
}
50% {
transform: translate(255.360229px, -255.542486px)
}
58.333333% {
transform: translate(256.000774px, -299.414398px)
}
66.666667% {
transform: translate(256.000774px, -245.219682px)
}
83.333333% {
transform: translate(256.000774px, 87.690712px)
}
100% {
transform: translate(256.000774px, 351.650689px)
}
}
#ez9uiemj3kbq19_to {
animation: ez9uiemj3kbq19_to__to 6000ms linear infinite normal forwards
}
@keyframes ez9uiemj3kbq19_to__to {
0% {
transform: translate(241.995002px, 351.232641px)
}
50% {
transform: translate(241.995002px, -255.540830px)
}
58.333333% {
transform: translate(242.635547px, -299.412742px)
}
66.666667% {
transform: translate(242.635547px, -245.218026px)
}
83.333333% {
transform: translate(242.635547px, 87.692368px)
}
100% {
transform: translate(242.635547px, 351.652344px)
}
}
</style>
<g id="ez9uiemj3kbq2_to" transform="translate(256,267)">
<circle id="ez9uiemj3kbq2" r="245" transform="translate(0,0)" fill="rgb(26,43,99)" stroke="none"
stroke-width="1"/>
</g>
<g id="ez9uiemj3kbq3_to" transform="translate(255.101892,529.528487)">
<g id="ez9uiemj3kbq3_ts" transform="skewX(1) skewY(1) scale(1,1)">
<path id="ez9uiemj3kbq3"
d="M216.796000,378.925000C229.446000,378.925000,241.100000,385.287000,247.971000,395.945000C248.140000,396.208000,248.424000,396.377000,248.736000,396.400000C248.761000,396.402000,248.787000,396.403000,248.812000,396.403000C249.098000,396.403000,249.371000,396.281000,249.561000,396.065000C259.861000,384.414000,274.669000,377.732000,290.188000,377.732000C295.476000,377.732000,300.584000,378.506000,305.419000,379.925000L287.573000,334.180000L224.427000,334.180000L206.386000,380.424000C209.691000,379.454000,213.182000,378.925000,216.796000,378.925000Z"
transform="translate(-255.902344,-365.291016)" fill="rgb(217,234,252)" stroke="none"
stroke-width="1"/>
</g>
</g>
<g id="ez9uiemj3kbq4_to" transform="translate(196.029297,457.476563)">
<path id="ez9uiemj3kbq4"
d="M223.686000,433.681000C233.121000,433.681000,242.125000,435.516000,250.366000,438.843000C238.943000,430.274000,224.766000,425.177000,209.387000,425.177000C174.952000,425.177000,146.467000,450.623000,141.692000,483.735000C145.715000,485.861000,149.806000,487.875000,153.957000,489.779000C160.964000,457.704000,189.508000,433.681000,223.686000,433.681000Z"
transform="translate(-196.029297,-457.476563)" fill="rgb(26,43,99)" stroke="none"
stroke-width="1"/>
</g>
<g id="ez9uiemj3kbq5_to" transform="translate(166.215705,407.541234)">
<path id="ez9uiemj3kbq5"
d="M179.108000,195.717000C179.108000,187.562000,179.414000,179.429000,179.986000,171.355000C155.926000,184.904000,139.350000,215.088000,139.350000,250.033000C139.350000,268.489000,143.939000,286.090000,152.620000,300.933000C153.435000,302.327000,154.910000,303.124000,156.442000,303.124000C157.002000,303.124000,157.569000,303.018000,158.114000,302.795000C169.523000,298.131000,181.715000,295.735000,194.358000,295.635000C184.375000,264.907000,179.108000,230.591000,179.108000,195.717000Z"
transform="translate(-166.855469,-237.240234)" fill="rgb(254,55,69)" stroke="none"
stroke-width="1"/>
</g>
<g id="ez9uiemj3kbq6_to" transform="translate(159.030158,407.541234)">
<path id="ez9uiemj3kbq6"
d="M150.689000,250.033000C150.689000,221.170000,162.004000,195.566000,179.497000,179.890000C179.631000,177.039000,179.786000,174.193000,179.987000,171.355000C155.927000,184.904000,139.351000,215.088000,139.351000,250.033000C139.351000,268.489000,143.940000,286.090000,152.621000,300.933000C153.436000,302.327000,154.911000,303.124000,156.443000,303.124000C157.003000,303.124000,157.570000,303.018000,158.115000,302.795000C159.995000,302.026000,161.905000,301.342000,163.826000,300.697000C155.233000,285.903000,150.689000,268.392000,150.689000,250.033000Z"
transform="translate(-159.669922,-237.240234)" fill="rgb(183,9,43)" stroke="none"
stroke-width="1"/>
</g>
<g id="ez9uiemj3kbq7_to" transform="translate(294.537971,423.568578)">
<g id="ez9uiemj3kbq7" transform="translate(-295.177734,-253.267578)">
<path id="ez9uiemj3kbq8"
d="M332.013000,171.355000C332.585000,179.430000,332.891000,187.563000,332.891000,195.717000C332.891000,230.590000,327.624000,264.906000,317.640000,295.635000C330.284000,295.735000,342.475000,298.131000,353.884000,302.795000C354.429000,303.018000,354.997000,303.124000,355.556000,303.124000C357.089000,303.124000,358.563000,302.326000,359.378000,300.933000C368.060000,286.090000,372.648000,268.489000,372.648000,250.033000C372.649000,215.088000,356.073000,184.904000,332.013000,171.355000Z"
fill="rgb(254,55,69)" stroke="none" stroke-width="1"/>
<path id="ez9uiemj3kbq9"
d="M217.708000,307.125000L217.708000,330.179000C217.708000,332.929000,219.958000,335.179000,222.708000,335.179000L289.291000,335.179000C292.041000,335.179000,294.291000,332.929000,294.291000,330.179000L294.291000,307.125000L217.708000,307.125000Z"
fill="rgb(254,55,69)" stroke="none" stroke-width="1"/>
</g>
</g>
<g id="ez9uiemj3kbq10_to" transform="translate(228.071174,491.453344)">
<path id="ez9uiemj3kbq10"
d="M234.715000,330.179000L234.715000,307.125000L217.708000,307.125000L217.708000,330.179000C217.708000,332.929000,219.958000,335.179000,222.708000,335.179000L239.715000,335.179000C236.965000,335.179000,234.715000,332.929000,234.715000,330.179000Z"
transform="translate(-228.710938,-321.152344)" fill="rgb(183,9,43)" stroke="none"
stroke-width="1"/>
</g>
<g id="ez9uiemj3kbq11_to" transform="translate(255.360237,369.521703)">
<path id="ez9uiemj3kbq11"
d="M316.854000,90.318000L195.145000,90.318000C183.991000,122.471000,178.108000,158.661000,178.108000,195.717000C178.108000,234.239000,184.497000,272.104000,196.583000,305.217000C197.221000,306.963000,198.881000,308.125000,200.740000,308.125000L311.259000,308.125000C313.118000,308.125000,314.779000,306.963000,315.416000,305.217000C327.502000,272.104000,333.891000,234.239000,333.891000,195.717000C333.892000,158.661000,328.009000,122.472000,316.854000,90.318000Z"
transform="translate(-256,-199.220703)" fill="rgb(238,246,255)" stroke="none"
stroke-width="1"/>
</g>
<g id="ez9uiemj3kbq12_to" transform="translate(195.871955,369.521703)">
<path id="ez9uiemj3kbq12"
d="M210.756000,305.217000C198.669000,272.104000,192.281000,234.239000,192.281000,195.717000C192.281000,158.661000,198.164000,122.471000,209.318000,90.318000L195.146000,90.318000C183.992000,122.471000,178.109000,158.661000,178.109000,195.717000C178.109000,234.239000,184.498000,272.104000,196.584000,305.217000C197.222000,306.963000,198.882000,308.125000,200.741000,308.125000L214.913000,308.125000C213.054000,308.125000,211.394000,306.963000,210.756000,305.217000Z"
transform="scale(1,0) translate(-196.511719,-199.220703)" fill="rgb(217,234,252)"
stroke="none"
stroke-width="1"/>
</g>
<g id="ez9uiemj3kbq13_to" transform="translate(255.360237,271.414281)">
<path id="ez9uiemj3kbq13"
d="M227.179000,90.318000L227.179000,106.912000C227.179000,109.662000,229.429000,111.912000,232.179000,111.912000L279.821000,111.912000C282.571000,111.912000,284.821000,109.662000,284.821000,106.912000L284.821000,90.318000L227.179000,90.318000Z"
transform="translate(-256,-101.113281)" fill="rgb(234,42,61)" stroke="none" stroke-width="1"/>
</g>
<g id="ez9uiemj3kbq14_to" transform="translate(234.707893,271.414281)">
<path id="ez9uiemj3kbq14"
d="M238.517000,106.912000L238.517000,90.318000L227.179000,90.318000L227.179000,106.912000C227.179000,109.662000,229.429000,111.912000,232.179000,111.912000L243.517000,111.912000C240.767000,111.912000,238.517000,109.662000,238.517000,106.912000Z"
transform="translate(-235.347656,-101.113281)" fill="rgb(183,9,43)" stroke="none"
stroke-width="1"/>
</g>
<g id="ez9uiemj3kbq15_to" transform="translate(255.358283,215.959203)">
<path id="ez9uiemj3kbq15"
d="M256,0C255.013000,0,254.027000,0.329000,253.215000,0.986000C230.877000,19.075000,212.061000,46.515000,198.804000,80.340000C197.394000,83.939000,196.069000,87.609000,194.798000,91.318000L317.201000,91.318000C315.930000,87.609000,314.605000,83.939000,313.195000,80.340000C299.938000,46.515000,281.123000,19.075000,258.784000,0.986000C257.973000,0.329000,256.987000,0,256,0Z"
transform="translate(-255.998047,-45.658203)" fill="rgb(254,55,69)" stroke="none"
stroke-width="1"/>
</g>
<g id="ez9uiemj3kbq16_to" transform="translate(228.301643,215.959203)">
<path id="ez9uiemj3kbq16"
d="M263.086000,4.628000C261.667000,3.377000,260.234000,2.160000,258.785000,0.986000C257.973000,0.329000,256.987000,0,256,0C255.013000,0,254.027000,0.329000,253.215000,0.986000C230.877000,19.075000,212.061000,46.515000,198.804000,80.340000C197.394000,83.939000,196.069000,87.609000,194.798000,91.318000L208.970000,91.318000C210.241000,87.609000,211.566000,83.939000,212.976000,80.340000C225.374000,48.709000,242.632000,22.667000,263.086000,4.628000Z"
transform="translate(-228.941406,-45.658203)" fill="rgb(183,9,43)" stroke="none"
stroke-width="1"/>
</g>
<g id="ez9uiemj3kbq17_to" transform="translate(255.360229,351.230985)">
<circle id="ez9uiemj3kbq17" r="51.020000" transform="translate(0.000008,0.000015)"
fill="rgb(68,94,160)"
stroke="none" stroke-width="1"/>
</g>
<g id="ez9uiemj3kbq18_to" transform="translate(255.360229,351.230985)">
<circle id="ez9uiemj3kbq18" r="32.731000" transform="translate(0.000008,0.000015)"
fill="rgb(105,205,255)" stroke="none" stroke-width="1"/>
</g>
<g id="ez9uiemj3kbq19_to" transform="translate(241.995002,351.232641)">
<path id="ez9uiemj3kbq19"
d="M235.268000,180.932000C235.268000,196.959000,246.789000,210.287000,262,213.106000C260.054000,213.466000,258.051000,213.664000,256,213.664000C237.922000,213.664000,223.269000,199.009000,223.269000,180.932000C223.269000,162.855000,237.923000,148.201000,256,148.201000C258.050000,148.201000,260.054000,148.399000,262,148.759000C246.789000,151.578000,235.268000,164.905000,235.268000,180.932000Z"
transform="translate(-242.634766,-180.931641)" fill="rgb(82,187,239)" stroke="none"
stroke-width="1"/>
</g>
</svg>
</div>
</div>
</div>
<div class="" style="height: 100px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
<script src="./build/bundle.js"></script>
<script>
if (window.innerWidth < 991) {
let menuButton = document.querySelector('.navbar-toggler');
let menuContainer = document.getElementById('navbarNav');
menuButton.onclick = function (e) {
menuContainer.classList.toggle('d-block');
}
}
</script>
</body>
</html>