1- Preview after installation
2- Open ( PAGE_CONTAINER ) template and find the code
3- Add the following code below it
4- Open ( extra.less ) template and add the below code
2- Open ( PAGE_CONTAINER ) template and find the code
Code:
<footer class="p-footer" id="footer">3- Add the following code below it
CSS:
<div class="bubbles">
<div class="bubble" style="--size:2.056923460238962rem; --distance:2.913038106676411rem; --position:17.345301321401656%; --time:3.8136593460003714s; --delay:-2.7589945169302794s;"></div>
<div class="bubble" style="--size:2.113447931142039rem; --distance:2.242236215424754rem; --position:102.40385367239837%; --time:3.12833765716838s; --delay:-3.4303333447787803s;"></div>
<div class="bubble" style="--size:4.350560041318857rem; --distance:2.8611141860516485rem; --position:5.026609393032082%; --time:2.8463566416050905s; --delay:-3.8853744364571337s;"></div>
<div class="bubble" style="--size:2.0085156514347355rem; --distance:2.14081274132416rem; --position:20.407324942224474%; --time:2.441558907416295s; --delay:-2.837476112495373s;"></div>
<div class="bubble" style="--size:2.6939809319841705rem; --distance:2.379317818433995rem; --position:67.9423493574693%; --time:2.4993545547391554s; --delay:-3.952531203422522s;"></div>
<div class="bubble" style="--size:2.4227432553309924rem; --distance:1.570612323282478rem; --position:10.549829234434156%; --time:2.2727659068672446s; --delay:-3.3444005649539896s;"></div>
<div class="bubble" style="--size:5.077676910937976rem; --distance:3.539770980178846rem; --position:54.50354831455937%; --time:2.135970169299389s; --delay:-3.9334341105088835s;"></div>
<div class="bubble" style="--size:2.794874110746383rem; --distance:4.659222691473756rem; --position:89.04749762298927%; --time:3.902507010302537s; --delay:-2.5934661353683994s;"></div>
<div class="bubble" style="--size:2.25541336865735rem; --distance:2.423376561540529rem; --position:32.87097195744197%; --time:2.7884770406767156s; --delay:-2.5112193800804676s;"></div>
<div class="bubble" style="--size:3.4934413323056237rem; --distance:3.483016729490156rem; --position:8.211289184875096%; --time:2.5567845768028277s; --delay:-2.242597169210005s;"></div>
<div class="bubble" style="--size:4.8805803657931754rem; --distance:2.398554799785222rem; --position:-2.574446417870224%; --time:2.0382271639554768s; --delay:-2.4498377375637355s;"></div>
<div class="bubble" style="--size:5.385112713712082rem; --distance:1.029025973592775rem; --position:42.43904097973941%; --time:2.079188918339094s; --delay:-3.9720436559812624s;"></div>
<div class="bubble" style="--size:5.075372790187501rem; --distance:1.50865034797343rem; --position:93.4736145286856%; --time:3.274782922383479s; --delay:-2.934613239825341s;"></div>
<div class="bubble" style="--size:3.2306845678148557rem; --distance:3.524743365062726rem; --position:27.814152247117377%; --time:3.0860885147119785s; --delay:-2.3594865587989178s;"></div>
<div class="bubble" style="--size:2.9267275897475047rem; --distance:2.119594251586104rem; --position:86.20877295455509%; --time:3.6280718478630076s; --delay:-2.4003327406179493s;"></div>
<div class="bubble" style="--size:3.623942622365071rem; --distance:1.965596394822846rem; --position:7.977961213245457%; --time:3.066549460858325s; --delay:-2.2270332684261076s;"></div>
<div class="bubble" style="--size:5.108060992104075rem; --distance:4.820532410222828rem; --position:30.156278949828213%; --time:2.281950832592985s; --delay:-2.9918561086035598s;"></div>
<div class="bubble" style="--size:3.945591521270563rem; --distance:3.83841119678391rem; --position:38.09607321142424%; --time:3.718799842414551s; --delay:-2.6329948690831273s;"></div>
<div class="bubble" style="--size:3.9817046892140615rem; --distance:2.504003672979063rem; --position:19.134217101196363%; --time:2.3673392454510065s; --delay:-3.741935441132066s;"></div>
<div class="bubble" style="--size:5.210229032726425rem; --distance:4.660520541992124rem; --position:25.482286453738535%; --time:2.7309191089431493s; --delay:-2.579280452205611s;"></div>
<div class="bubble" style="--size:2.9855337901529655rem; --distance:1.19645236739389rem; --position:26.80878784886781%; --time:3.8060995654516616s; --delay:-2.1699761682277257s;"></div>
<div class="bubble" style="--size:2.4271120610225854rem; --distance:3.336606314631151rem; --position:90.12545776153796%; --time:2.604336028635655s; --delay:-3.828638905806547s;"></div>
<div class="bubble" style="--size:4.73455287568906rem; --distance:3.33573332509496rem; --position:5.92363417980266%; --time:2.520322992033619s; --delay:-2.437773320813718s;"></div>
<div class="bubble" style="--size:5.871069217440009rem; --distance:4.033135439574327rem; --position:15.855448510153774%; --time:3.2930422640264676s; --delay:-2.061911004507652s;"></div>
<div class="bubble" style="--size:2.2349146258083543rem; --distance:4.022276300068189rem; --position:103.26299941748472%; --time:2.2661268939617503s; --delay:-2.2685708957932507s;"></div>
<div class="bubble" style="--size:4.705724562244616rem; --distance:4.709584895779752rem; --position:92.60484688076659%; --time:2.741301268711369s; --delay:-2.5964686736572222s;"></div>
<div class="bubble" style="--size:4.098666945322471rem; --distance:4.223174103081075rem; --position:-3.4172412714550515%; --time:3.8384793165229514s; --delay:-2.1361710965421907s;"></div>
<div class="bubble" style="--size:3.0007594715665338rem; --distance:4.100361151722751rem; --position:15.469645612789005%; --time:2.1180736784094356s; --delay:-2.3529193527724437s;"></div>
<div class="bubble" style="--size:3.1937606005811885rem; --distance:1.678007264029841rem; --position:5.830247906733874%; --time:3.728425487341562s; --delay:-2.0969707447824035s;"></div>
<div class="bubble" style="--size:5.405237214141463rem; --distance:2.062877449211678rem; --position:13.261924840116556%; --time:3.7742756731947806s; --delay:-3.486424080882563s;"></div>
<div class="bubble" style="--size:3.8203345124502768rem; --distance:2.495464126511789rem; --position:82.96507352306743%; --time:3.919566250137956s; --delay:-3.760971747703423s;"></div>
<div class="bubble" style="--size:4.2714431389214305rem; --distance:2.683737806937264rem; --position:29.610964426627746%; --time:3.6405839721572164s; --delay:-2.7981855639682713s;"></div>
<div class="bubble" style="--size:2.8594419971711007rem; --distance:3.381172555141397rem; --position:22.84534370664867%; --time:3.249296969967027s; --delay:-2.9798533043902413s;"></div>
<div class="bubble" style="--size:5.795301944755257rem; --distance:1.746296704390143rem; --position:51.93150024369175%; --time:2.67377877003912s; --delay:-2.297393311106867s;"></div>
<div class="bubble" style="--size:3.36394746488282rem; --distance:2.571855585581067rem; --position:45.81242560083581%; --time:2.2870040446462627s; --delay:-2.112197008572411s;"></div>
<div class="bubble" style="--size:5.839574753040952rem; --distance:2.347390975542725rem; --position:62.63147557099359%; --time:3.1610353884846925s; --delay:-2.450229928219222s;"></div>
<div class="bubble" style="--size:3.650110611043253rem; --distance:1.818867870273355rem; --position:3.9782275443237136%; --time:2.054016625884519s; --delay:-2.1967840299444927s;"></div>
<div class="bubble" style="--size:4.864650086589759rem; --distance:4.85620944325731rem; --position:104.96192953992579%; --time:3.894954200516346s; --delay:-2.8063016927932383s;"></div>
<div class="bubble" style="--size:5.379887725993327rem; --distance:1.538654387022695rem; --position:47.41330860260232%; --time:2.8519413979372885s; --delay:-2.150327689754554s;"></div>
<div class="bubble" style="--size:5.672501365158675rem; --distance:2.040318836715256rem; --position:73.50365083179227%; --time:2.5233854566237155s; --delay:-2.206109507172964s;"></div>
<div class="bubble" style="--size:5.456036816701099rem; --distance:2.984273302720117rem; --position:20.89880330264233%; --time:3.881257461811266s; --delay:-2.5517276619371954s;"></div>
<div class="bubble" style="--size:4.19221125938484rem; --distance:3.379150067584547rem; --position:30.325933715414322%; --time:2.1420182812460196s; --delay:-2.9837124924570344s;"></div>
<div class="bubble" style="--size:5.374156818186442rem; --distance:1.208377196091461rem; --position:31.34361280168909%; --time:3.0632974671638777s; --delay:-2.5267619191526745s;"></div>
<div class="bubble" style="--size:2.690253211852478rem; --distance:3.55882158225338rem; --position:95.15953472187006%; --time:2.712712066133493s; --delay:-3.4850735778077526s;"></div>
<div class="bubble" style="--size:3.061397386259153rem; --distance:4.485494678674002rem; --position:69.24750574986805%; --time:3.3149232525259764s; --delay:-3.9009258671057454s;"></div>
<div class="bubble" style="--size:3.325691729368428rem; --distance:2.8944801664243185rem; --position:78.19758553606847%; --time:2.4045423375533383s; --delay:-2.6340695950160673s;"></div>
<div class="bubble" style="--size:4.7310556399795205rem; --distance:1.180049874625095rem; --position:62.129875980822135%; --time:3.9298850006639245s; --delay:-2.8646688513180023s;"></div>
<div class="bubble" style="--size:3.2001828353715966rem; --distance:4.794405849105974rem; --position:76.04570044083157%; --time:2.4814911968265148s; --delay:-2.9933569413628835s;"></div>
<div class="bubble" style="--size:3.623525212287121rem; --distance:3.560515275450165rem; --position:64.01974001225094%; --time:3.996958968126248s; --delay:-3.359512553754988s;"></div>
<div class="bubble" style="--size:5.644793377932602rem; --distance:1.849295349982296rem; --position:38.851475658921196%; --time:2.1380055565284852s; --delay:-2.28679116356367s;"></div>
<div class="bubble" style="--size:5.913613228876819rem; --distance:1.296202086331731rem; --position:72.03579538245793%; --time:2.048645890805923s; --delay:-2.7315611623382745s;"></div>
<div class="bubble" style="--size:5.136950748834202rem; --distance:4.12144913603267rem; --position:5.197093561885307%; --time:2.597634460783605s; --delay:-2.8460434000571206s;"></div>
<div class="bubble" style="--size:4.8428800511592405rem; --distance:1.34796610474513rem; --position:46.39236940998801%; --time:3.980296757675631s; --delay:-3.839516253756288s;"></div>
<div class="bubble" style="--size:4.747171748187489rem; --distance:2.053103461416065rem; --position:43.04804640533789%; --time:2.18466525812666s; --delay:-2.372356735025816s;"></div>
<div class="bubble" style="--size:5.996032609987121rem; --distance:2.5951441340231005rem; --position:72.31108762771777%; --time:3.313570139788326s; --delay:-2.61188181267681s;"></div>
<div class="bubble" style="--size:2.1769432670139004rem; --distance:4.761211256894075rem; --position:23.80647295270452%; --time:2.8852371600909565s; --delay:-3.2395238102672375s;"></div>
<div class="bubble" style="--size:3.8561552039794895rem; --distance:3.341813321252424rem; --position:94.38647769602503%; --time:3.663581526244923s; --delay:-2.013516711094422s;"></div>
<div class="bubble" style="--size:2.1328615505076467rem; --distance:1.397017509346352rem; --position:94.12287905853614%; --time:2.4800362016196056s; --delay:-3.6923470527433655s;"></div>
<div class="bubble" style="--size:3.0735638762866984rem; --distance:3.755944811351387rem; --position:16.364650110161772%; --time:2.217456722675962s; --delay:-3.272783406572452s;"></div>
<div class="bubble" style="--size:5.704301514052196rem; --distance:3.336342741730384rem; --position:39.29950041259247%; --time:2.1910397810204505s; --delay:-3.0478367744529984s;"></div>
<div class="bubble" style="--size:3.9532727663052736rem; --distance:3.198394044651003rem; --position:34.21427767935011%; --time:3.8763695134468903s; --delay:-3.2083113657077s;"></div>
<div class="bubble" style="--size:4.46493433279365rem; --distance:2.421348269329105rem; --position:24.38042717379974%; --time:2.0146999652159088s; --delay:-2.2698114877891724s;"></div>
<div class="bubble" style="--size:2.456551667889789rem; --distance:2.554675751939493rem; --position:88.59070086322572%; --time:2.8444156261611964s; --delay:-2.12387889065379s;"></div>
<div class="bubble" style="--size:3.4472695578491894rem; --distance:1.442537455193423rem; --position:91.32438530017767%; --time:3.7682647985935755s; --delay:-2.73552781826267s;"></div>
<div class="bubble" style="--size:5.538982999194752rem; --distance:1.28842910785685rem; --position:5.234253361709095%; --time:2.24934389657023s; --delay:-3.818306655177823s;"></div>
<div class="bubble" style="--size:2.206967343418386rem; --distance:3.616884833171254rem; --position:54.9062650511421%; --time:3.671803468771644s; --delay:-2.279061434029475s;"></div>
<div class="bubble" style="--size:4.153163670627545rem; --distance:1.23797304427354rem; --position:10.779327123368805%; --time:2.8189669282293046s; --delay:-3.9630376614444245s;"></div>
<div class="bubble" style="--size:5.386595866021154rem; --distance:3.510823494350268rem; --position:103.56399977153441%; --time:2.733048202286344s; --delay:-2.3318160874926077s;"></div>
<div class="bubble" style="--size:3.032011608827492rem; --distance:3.444306351442684rem; --position:1.8759022572036592%; --time:2.059621464282391s; --delay:-2.028082151173712s;"></div>
<div class="bubble" style="--size:5.484340598391627rem; --distance:2.561307785183214rem; --position:66.77611961543323%; --time:3.4514864656837845s; --delay:-3.9596669413984427s;"></div>
<div class="bubble" style="--size:3.330649894119593rem; --distance:4.717766884835797rem; --position:58.09730626328892%; --time:3.139932854911204s; --delay:-3.3043023699503276s;"></div>
<div class="bubble" style="--size:2.234066117328304rem; --distance:4.191666789916836rem; --position:89.06076913625772%; --time:2.2483761398224194s; --delay:-2.8394011690848786s;"></div>
<div class="bubble" style="--size:2.420589652505436rem; --distance:3.68283884628974rem; --position:6.797414198338878%; --time:3.081301028546547s; --delay:-3.8235615421672757s;"></div>
<div class="bubble" style="--size:4.211491552263592rem; --distance:4.242900690827586rem; --position:10.321417089237183%; --time:3.222445592615165s; --delay:-2.5376429511234746s;"></div>
<div class="bubble" style="--size:2.09373706084281rem; --distance:3.458976679374626rem; --position:20.311222044191556%; --time:3.377462170933839s; --delay:-3.8042820508332333s;"></div>
<div class="bubble" style="--size:5.650222180870028rem; --distance:3.832459796515007rem; --position:77.22286793655348%; --time:3.6923722797155873s; --delay:-3.5698279582044408s;"></div>
<div class="bubble" style="--size:2.5669175165808316rem; --distance:1.043282953070409rem; --position:23.967313025810768%; --time:3.699865371399745s; --delay:-3.205739539071922s;"></div>
<div class="bubble" style="--size:2.5758802427118637rem; --distance:4.666865028696563rem; --position:4.985551043619761%; --time:2.8880409116243695s; --delay:-2.1313460975421643s;"></div>
<div class="bubble" style="--size:3.34545384253929rem; --distance:3.916894429322326rem; --position:62.46414290153062%; --time:2.47196462357091s; --delay:-3.828972648316849s;"></div>
<div class="bubble" style="--size:2.729525552614641rem; --distance:3.390833075451368rem; --position:11.841415416477275%; --time:2.7419609732839274s; --delay:-2.627072611396361s;"></div>
<div class="bubble" style="--size:2.596333579285173rem; --distance:1.60051742201465rem; --position:70.68763682714909%; --time:3.6353419489208854s; --delay:-2.3372338510743296s;"></div>
<div class="bubble" style="--size:4.413620173932199rem; --distance:3.852741255902936rem; --position:-1.9840158369185978%; --time:2.6978230260050005s; --delay:-3.156604001637492s;"></div>
<div class="bubble" style="--size:4.4035650874556715rem; --distance:4.923047525434644rem; --position:18.41031508565902%; --time:3.5001349574170018s; --delay:-3.5002742320925195s;"></div>
<div class="bubble" style="--size:5.79587075652022rem; --distance:1.277034348557223rem; --position:8.886909937459453%; --time:3.1267127113659465s; --delay:-2.9782063489403083s;"></div>
<div class="bubble" style="--size:4.460215778043466rem; --distance:4.4640828332779rem; --position:52.02396564610494%; --time:3.0876702836201977s; --delay:-2.650317516820187s;"></div>
<div class="bubble" style="--size:3.4559919930454726rem; --distance:4.155110731707769rem; --position:99.3129401002377%; --time:3.741939281904097s; --delay:-3.438172478352527s;"></div>
<div class="bubble" style="--size:2.4063641966802507rem; --distance:1.379085887845339rem; --position:41.20329206544761%; --time:2.2207532967603427s; --delay:-3.3154229816038354s;"></div>
<div class="bubble" style="--size:4.5109796909227216rem; --distance:1.895750138442044rem; --position:69.46728022526665%; --time:3.6208876030461368s; --delay:-3.3519985221538264s;"></div>
<div class="bubble" style="--size:4.323351842864605rem; --distance:1.9732241778897475rem; --position:60.33348344498296%; --time:3.9310406012584136s; --delay:-2.9720432938012675s;"></div>
<div class="bubble" style="--size:5.515948016681816rem; --distance:4.907203866876861rem; --position:27.845115357434032%; --time:2.6803658669317674s; --delay:-3.9220120733473207s;"></div>
<div class="bubble" style="--size:3.7906321651216857rem; --distance:3.615805216052262rem; --position:85.94952019812648%; --time:2.37630278329656s; --delay:-3.4544831157411973s;"></div>
<div class="bubble" style="--size:3.4257473074323084rem; --distance:2.485968466918022rem; --position:63.60273561936786%; --time:3.701615834131019s; --delay:-2.8471186552508003s;"></div>
<div class="bubble" style="--size:3.421564548002534rem; --distance:3.403193323592731rem; --position:14.479393056661081%; --time:3.4304339918333078s; --delay:-3.1828863743198608s;"></div>
<div class="bubble" style="--size:2.4479829014413914rem; --distance:3.885979748219707rem; --position:61.03048044592916%; --time:2.886608675487225s; --delay:-2.7454780859261767s;"></div>
<div class="bubble" style="--size:5.692702655233839rem; --distance:2.765281565057443rem; --position:61.83654821715939%; --time:2.2642492751065433s; --delay:-2.4596225028303667s;"></div>
<div class="bubble" style="--size:2.565645812468727rem; --distance:2.719835014945911rem; --position:54.1577427422799%; --time:2.3778671844679193s; --delay:-3.8515342074084407s;"></div>
<div class="bubble" style="--size:2.3222993761447404rem; --distance:4.843098189061067rem; --position:13.882237323801963%; --time:3.1406160145824074s; --delay:-3.1464846514221914s;"></div>
<div class="bubble" style="--size:2.1890278144764865rem; --distance:1.1285727450434715rem; --position:76.2527513017552%; --time:2.5034325023380437s; --delay:-2.5471963243413893s;"></div>
<div class="bubble" style="--size:4.410441212809659rem; --distance:2.125822820258502rem; --position:77.83307170578404%; --time:2.165928749332698s; --delay:-2.2609636677534017s;"></div>
<div class="bubble" style="--size:4.267394373706387rem; --distance:3.512826950593439rem; --position:37.624957044184484%; --time:3.8125980309062473s; --delay:-2.6989402345152618s;"></div>
<div class="bubble" style="--size:5.914744995524409rem; --distance:4.203424183602866rem; --position:64.83969974935606%; --time:3.2028701216706557s; --delay:-3.0168844995487825s;"></div>
<div class="bubble" style="--size:2.949316097652317rem; --distance:2.945728664157848rem; --position:-3.4899533844816366%; --time:3.5958940268138786s; --delay:-3.1393676680282074s;"></div>
<div class="bubble" style="--size:3.6281400725988915rem; --distance:1.089857270808021rem; --position:37.11862010985229%; --time:2.6876776812145398s; --delay:-2.841765718297095s;"></div>
<div class="bubble" style="--size:2.382248960071288rem; --distance:1.65416543574155rem; --position:34.12439773399143%; --time:2.0520113599203276s; --delay:-3.1731457221771033s;"></div>
<div class="bubble" style="--size:2.8419788580167253rem; --distance:3.960028705609744rem; --position:25.99131259937012%; --time:3.18681535378337s; --delay:-3.2052677325546886s;"></div>
<div class="bubble" style="--size:2.899823762891822rem; --distance:3.115056582826789rem; --position:0.6985351018748531%; --time:2.2927095139522105s; --delay:-3.5956678130108894s;"></div>
<div class="bubble" style="--size:5.77189068530817rem; --distance:4.624920775465025rem; --position:22.134319297841564%; --time:3.3790961283912866s; --delay:-3.4982359860093637s;"></div>
<div class="bubble" style="--size:3.5524708854182983rem; --distance:4.510601155811019rem; --position:94.3531755585022%; --time:2.7827497456611283s; --delay:-2.883697258385957s;"></div>
<div class="bubble" style="--size:5.490610499487793rem; --distance:4.68276466016624rem; --position:10.997179473053185%; --time:3.2266958537967305s; --delay:-3.0529089560566085s;"></div>
<div class="bubble" style="--size:4.579754708068105rem; --distance:4.839312475933678rem; --position:41.94649655904202%; --time:3.1866245410257314s; --delay:-3.8252365766226317s;"></div>
<div class="bubble" style="--size:3.6470313503724308rem; --distance:1.4330151593269775rem; --position:3.5877492114316247%; --time:2.8830903705819413s; --delay:-2.818737039550445s;"></div>
<div class="bubble" style="--size:5.671397662236699rem; --distance:1.971863143197358rem; --position:6.749356888835612%; --time:2.4410567554862497s; --delay:-3.665080061232513s;"></div>
<div class="bubble" style="--size:5.493072604492601rem; --distance:1.787754641418377rem; --position:18.698913335706123%; --time:3.356689848842311s; --delay:-3.6034234386891786s;"></div>
<div class="bubble" style="--size:3.840320626878385rem; --distance:1.6999800581766005rem; --position:75.15937659330582%; --time:2.917074176613399s; --delay:-3.0725174608231693s;"></div>
<div class="bubble" style="--size:3.6320846460185496rem; --distance:4.587134369996395rem; --position:40.77764981313048%; --time:3.899836417489278s; --delay:-2.731107656087379s;"></div>
<div class="bubble" style="--size:5.549129348922161rem; --distance:2.031219376110459rem; --position:45.23188019460279%; --time:2.909088672391081s; --delay:-2.2628367255623965s;"></div>
<div class="bubble" style="--size:3.620884512122709rem; --distance:1.717104159274523rem; --position:28.303705855652304%; --time:3.866495742047219s; --delay:-2.328205713457003s;"></div>
<div class="bubble" style="--size:4.135854386450004rem; --distance:1.932922171486034rem; --position:6.764788908465803%; --time:2.677403321842446s; --delay:-2.498007165655702s;"></div>
<div class="bubble" style="--size:5.525157229214914rem; --distance:4.622757542832534rem; --position:57.16603813719121%; --time:3.18984936106027s; --delay:-2.8540194981654907s;"></div>
<div class="bubble" style="--size:4.648303203996398rem; --distance:2.722904522737653rem; --position:62.77704464157233%; --time:2.1415843683328712s; --delay:-3.6125412599821534s;"></div>
<div class="bubble" style="--size:3.637193062801206rem; --distance:3.978637263190892rem; --position:99.49348998319851%; --time:2.5434773043894063s; --delay:-2.639993883047095s;"></div>
<div class="bubble" style="--size:2.814648688485411rem; --distance:4.058036637481795rem; --position:48.04665214240934%; --time:3.32704426452321s; --delay:-3.7239687573302027s;"></div>
<div class="bubble" style="--size:3.963533894836605rem; --distance:2.7994879822588015rem; --position:40.64476886761791%; --time:3.4840740309107714s; --delay:-3.4190805874839687s;"></div>
<div class="bubble" style="--size:2.3616409887866237rem; --distance:1.1966422462489525rem; --position:27.131811977041664%; --time:2.4567290508584594s; --delay:-2.9360268185776874s;"></div>
<div class="bubble" style="--size:2.402227081413531rem; --distance:3.191176359175198rem; --position:33.74269595478287%; --time:3.034996109478497s; --delay:-2.8735882504884573s;"></div>
<div class="bubble" style="--size:3.33753955027508rem; --distance:3.769929668030052rem; --position:14.784924645297146%; --time:3.867050038384289s; --delay:-2.295120214308994s;"></div>
<div class="bubble" style="--size:2.6547746115445383rem; --distance:2.349517037159519rem; --position:-1.9345889301391783%; --time:2.182705706097784s; --delay:-2.710490057892127s;"></div>
<div class="bubble" style="--size:5.486192499391617rem; --distance:4.532184317501496rem; --position:15.857284765560546%; --time:2.872307715131752s; --delay:-3.3014600437668737s;"></div>
</div>4- Open ( extra.less ) template and add the below code
CSS:
#footer {
--footer-background: #0B4065;
position: relative;
grid-area: footer;
min-height:110px;
}
#footer .p-footer-inner {
z-index: 1;
position: inherit
}
#footer .bubbles {
position: absolute;
top: 35px;
left: 0;
right: 0;
-webkit-filter: url("#blob");
filter: url("#blob");
}
#footer .bubbles .bubble {
position: absolute;
left: var(--position, 50%);
background: var(--footer-background);
border-radius: 100%;
-webkit-animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s),bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s),bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
-webkit-transform: translate(-50%, 100%);
transform: translate(-50%, 100%)
}
@-webkit-keyframes bubble-size {
0%,75% {
width: var(--size, 4rem);
height: var(--size, 4rem)
}
100% {
width: 0rem;
height: 0rem
}
}
@keyframes bubble-size {
0%,75% {
width: var(--size, 4rem);
height: var(--size, 4rem)
}
100% {
width: 0rem;
height: 0rem
}
}
@-webkit-keyframes bubble-move {
0% {
bottom: 2rem
}
100% {
bottom: var(--distance, 10rem)
}
}
@keyframes bubble-move {
0% {
bottom: 2rem
}
100% {
bottom: var(--distance, 10rem)
}
}
