Dalam pembahasan kali ini adalah mengenai tentang bahasa pemrograman javascript.Dimana Jenis bahasa pemrograman yang satu ini banyak dipergunakan dalam pembuatan website.Untuk anda yang ingin dan sedang belajar ngoding,terutama tentang pembuatan website mulai lah dengan pembelajaran tahap awal terlebih dahulu.Mulai lah belajar Html dan Css terlebih dahulu,ketika anda sudah cukup mahir,maka selanjutnya mulai lah belajar tentang bahasa pemrograman javascript.
Pada topik kali ini saya akan membahas mengenai cara membuat tombol pengganti tema menggunakan bahasa pemrograman javascript.Ada beberapa jenis software text editor yang bisa anda gunakan untuk menjalankan jenis bahasa pemrograman yang satu ini seperti,Notepad,Notepad++,Atom,Subleme Text,Vs.Code dan yang lain-lain.
Untuk menjalankan codingan kali ini saya menggunakan software text editor Vs.code.Anda bisa saja menggunakan software text editor yang dibahas sebelumnya.Akan tetapi saya merekomendasikan software text editor Vs.code untuk anda gunakan.Ada beberapa keunggulan yang dimiliki software Vs.code.Selain bersifat open source,software yang satu ini sudah support berbagai macam bahasa pemrograman dan memilki fitur yang berbeda dari software yang lain serta memilki beberapa jenis ekstensi yang dapat diinstal langsung dan dipergunakan.Bagi anda yang belum memilki software yang satu ini,anda dapat mendownload nya dilaman situs website resminya https://code.visualstudio.com/download.Berikut tampilan atau gambar Software Vs.code ketika berhasil diinstall dan dibuka.
Ketika anda sudah berhasil dan membuka software Vs.code maka selanjutnya buka text file yang baru atau tekan tombol CTRL+N pada keyboard anda.Setelah itu anda pilih select language,kemudian pilih bahasa pemrograman yang ingin anda gunakan.Selanjutnya tuliskan code berikut ini.
Berikut Untuk Code HTML nya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Switch</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<label class="switch">
<input type="checkbox" class="check-mode">
<svg class="dark-img" viewBox="0 0 115.016 47.035">
<defs>
<linearGradient id="linear-gradient1" x1="0.5" y1="0.164" x2="0.5" y2="0.647"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#092a40" />
<stop offset="1" stop-color="#3a2f4d" />
</linearGradient>
<linearGradient id="linear-gradient1-2" x1="0.5" y1="0.064" x2="0.5" y2="0.813"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#2f73a0" />
<stop offset="1" stop-color="#174461" />
</linearGradient>
<linearGradient id="linear-gradient1-3" x1="0.51" y1="0.151" x2="0.554" y2="-0.903"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#174461" stop-opacity="0" />
<stop offset="1" stop-color="#3a2f4d" />
</linearGradient>
<linearGradient id="linear-gradient1-4" x1="0.507" y1="0.006" x2="0.551" y2="-1.92"
xlink:href="#linear-gradient1-3" />
<linearGradient id="linear-gradient1-5" x1="0.5" y1="0.778" x2="0.5" y2="-0.044"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#2f73a0" stop-opacity="0" />
<stop offset="0.503" stop-color="#345278" stop-opacity="0.502" />
<stop offset="1" stop-color="#3a2f4d" />
</linearGradient>
<linearGradient id="linear-gradient1-6" x1="0.5" y1="0.385" x2="0.5" y2="-0.877"
xlink:href="#linear-gradient1-5" />
<linearGradient id="linear-gradient1-7" x1="0.222" y1="-0.408" x2="0.507" y2="1.037"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#2f73a0" />
<stop offset="1" stop-color="#3a2f4d" />
</linearGradient>
<linearGradient id="linear-gradient1-8" x1="0.557" y1="0.467" x2="0.171" y2="0.704"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#3a2f4d" stop-opacity="0" />
<stop offset="1" stop-color="#3a2f4d" />
</linearGradient>
<linearGradient id="linear-gradient1-12" x1="0.489" y1="0.777" x2="0.542" y2="-0.41"
xlink:href="#linear-gradient1-3" />
<linearGradient id="linear-gradient1-13" x1="0.468" y1="0.115" x2="0.543" y2="0.96"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#798c00" />
<stop offset="1" stop-color="#1b444f" />
</linearGradient>
<linearGradient id="linear-gradient1-15" x1="0.5" y1="0.05" x2="0.5" y2="0.696"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#988575" />
<stop offset="1" stop-color="#736357" />
</linearGradient>
<linearGradient id="linear-gradient1-16" x1="0.466" y1="0.847" x2="0.802" y2="-3.003"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#754c24" stop-opacity="0" />
<stop offset="1" stop-color="#754c24" />
</linearGradient>
<linearGradient id="linear-gradient1-17" x1="0.552" y1="1.408" x2="0.457" y2="0.042"
xlink:href="#linear-gradient1-16" />
<linearGradient id="linear-gradient1-18" x1="0.213" y1="0.225" x2="0.755" y2="0.998"
xlink:href="#linear-gradient1-13" />
<linearGradient id="linear-gradient1-19" x1="0.52" y1="0.498" x2="1.294" y2="0.344"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#1b444f" stop-opacity="0" />
<stop offset="1" stop-color="#1b444f" />
</linearGradient>
<linearGradient id="linear-gradient1-20" x1="0.5" y1="0.252" x2="0.5" y2="1.135"
xlink:href="#linear-gradient1-19" />
<linearGradient id="linear-gradient1-21" x1="0.5" y1="0.366" x2="0.5" y2="1.084"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#fff5d9" />
<stop offset="1" stop-color="#ffce47" />
</linearGradient>
<linearGradient id="linear-gradient1-23" x1="0.28" y1="0.5" x2="0.605" y2="0.5"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#c7e9ff" />
<stop offset="1" stop-color="#7acbff" />
</linearGradient>
<linearGradient id="linear-gradient1-24" x1="0.622" y1="0.56" x2="0.278" y2="-0.533"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#2f73a0" stop-opacity="0" />
<stop offset="1" stop-color="#2f73a0" />
</linearGradient>
<linearGradient id="linear-gradient1-25" x1="0.014" y1="0.5" x2="0.985" y2="0.5"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#ff4181" />
<stop offset="1" stop-color="#843561" />
</linearGradient>
<linearGradient id="linear-gradient1-27" x1="0.698" y1="1.084" x2="0.188" y2="-1.416"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#843561" stop-opacity="0" />
<stop offset="1" stop-color="#3a2f4d" />
</linearGradient>
<linearGradient id="linear-gradient1-28" x1="0.138" y1="0.004" x2="0.53" y2="0.542"
xlink:href="#linear-gradient1-21" />
<linearGradient id="linear-gradient1-29" x1="0.467" y1="0.5" x2="-0.302" y2="0.5"
xlink:href="#linear-gradient1-24" />
<linearGradient id="linear-gradient1-30" x1="0.5" y1="0.184" x2="0.5" y2="1.048"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#ff9356" stop-opacity="0" />
<stop offset="1" stop-color="#ff755c" />
</linearGradient>
<linearGradient id="linear-gradient1-31" x1="-0.139" y1="0.5" x2="0.786" y2="0.5"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#dfdfdf" />
<stop offset="1" stop-color="#9da6ac" />
</linearGradient>
<linearGradient id="linear-gradient1-32" x1="0.5" y1="0.177" x2="0.5" y2="0.746"
xlink:href="#linear-gradient1-31" />
<linearGradient id="linear-gradient1-35" x1="0.5" y1="0.177" x2="0.5" y2="0.746"
xlink:href="#linear-gradient1-31" />
<linearGradient id="linear-gradient1-36" x1="0.5" y1="0.074" x2="0.5" y2="0.975"
xlink:href="#linear-gradient1-31" />
<linearGradient id="linear-gradient1-37" x1="0.5" y1="0.403" x2="0.5" y2="-0.234"
xlink:href="#linear-gradient1-30" />
<linearGradient id="linear-gradient1-38" x1="0.343" y1="0.296" x2="0.535" y2="0.944"
xlink:href="#linear-gradient1-25" />
<linearGradient id="linear-gradient1-39" x1="0.282" y1="0.252" x2="1.048" y2="1.624"
xlink:href="#linear-gradient1-27" />
<linearGradient id="linear-gradient1-40" x1="0.5" y1="0.074" x2="0.5" y2="0.975"
xlink:href="#linear-gradient1-31" />
<linearGradient id="linear-gradient1-41" x1="0.213" y1="0.225" x2="0.755" y2="0.998"
xlink:href="#linear-gradient1-13" />
<linearGradient id="linear-gradient1-42" x1="0.52" y1="0.498" x2="1.294" y2="0.344"
xlink:href="#linear-gradient1-19" />
<linearGradient id="linear-gradient1-44" x1="0.341" y1="0.341" x2="0.975" y2="0.975"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#edf5ff" />
<stop offset="1" stop-color="#c7e9ff" />
</linearGradient>
<linearGradient id="linear-gradient1-58" x1="0.659" y1="0.341" x2="0.025" y2="0.975"
xlink:href="#linear-gradient1-44" />
</defs>
<g id="Group_2678" data-name="Group 2678" transform="translate(12872.015 -9706)">
<path id="Path_7546" data-name="Path 7546"
d="M109.507,47H5.493C2.459,47,0,45.995,0,44.755V2.245C0,1.005,2.459,0,5.493,0H109.506C112.541,0,115,1.005,115,2.245v42.51C115,45.995,112.541,47,109.507,47Z"
transform="translate(-12872 9706)" fill="url(#linear-gradient1)" />
<path id="Path_7547" data-name="Path 7547"
d="M115,365.413v-12.2H0v12.2c0,1.24,2.459,2.245,5.493,2.245H109.506C112.541,367.658,115,366.653,115,365.413Z"
transform="translate(-12872 9385.342)" fill="url(#linear-gradient1-2)" />
<path id="Path_7548" data-name="Path 7548"
d="M100,403.6v-8.328H0V403.6c0,1.24,2.139,2.245,4.777,2.245H95.223C97.861,405.842,100,404.837,100,403.6Z"
transform="translate(-12857 9347.158)" fill="url(#linear-gradient1-3)" />
<path id="Path_7549" data-name="Path 7549"
d="M100,449.653V446H0v3.653c0,1.24,2.139,2.245,4.777,2.245H95.223C97.861,451.9,100,450.893,100,449.653Z"
transform="translate(-12857 9301.102)" fill="url(#linear-gradient1-4)" />
<g id="Group_2637" data-name="Group 2637" transform="translate(-12850.184 9729.562)">
<path id="Path_7550" data-name="Path 7550"
d="M45.123,285.157l-4.99-5.7a2.736,2.736,0,0,0-4.526-.016l-5.045,5.718Z"
transform="translate(-30.562 -276.168)" fill="url(#linear-gradient1-5)" />
<path id="Path_7551" data-name="Path 7551"
d="M227.509,257.239a5.532,5.532,0,0,0-7.7-.021l-8.581,7.44H236Z"
transform="translate(-194.579 -255.67)" fill="url(#linear-gradient1-6)" />
<g id="Group_2636" data-name="Group 2636" transform="translate(8.558 0.703)">
<path id="Path_7552" data-name="Path 7552"
d="M137.64,265.487H135.2a2.631,2.631,0,0,1-2.059-1.1,2.482,2.482,0,0,0-4.117,0l-5.6,7.191h20.166l-3.892-5A2.631,2.631,0,0,0,137.64,265.487Z"
transform="translate(-123.425 -263.296)" fill="url(#linear-gradient1-7)" />
<path id="Path_7553" data-name="Path 7553"
d="M211.367,266.59a2.631,2.631,0,0,0-2.059-1.1h-2.442a2.58,2.58,0,0,1-2.042-1.074,2.55,2.55,0,0,0-2.456-1.084l3.287,4.223a2.776,2.776,0,0,0,2.173,1.156A2.777,2.777,0,0,1,210,269.872l1.337,1.718h3.921Z"
transform="translate(-195.094 -263.304)" fill="url(#linear-gradient1-8)" />
</g>
</g>
<path id="Path_7550-2" data-name="Path 7550"
d="M45.123,285.157l-4.99-5.7a2.736,2.736,0,0,0-4.526-.016l-5.045,5.718Z"
transform="translate(-12803.745 9450.394)" fill="url(#linear-gradient1-5)" />
<path id="Path_7551-2" data-name="Path 7551"
d="M227.509,257.239a5.532,5.532,0,0,0-7.7-.021l-8.581,7.44H236Z"
transform="translate(-13002.763 9473.892)" fill="url(#linear-gradient1-6)" />
<g id="Group_2636-2" data-name="Group 2636" transform="translate(-12799.626 9730.265)">
<path id="Path_7552-2" data-name="Path 7552"
d="M135.528,265.141c-3.214,0-5.368-2.21-6.505-.749l-5.6,7.191h20.166l-3.892-5C139.153,265.881,136.3,265.141,135.528,265.141Z"
transform="translate(-123.425 -263.296)" fill="url(#linear-gradient1-7)" />
</g>
<path id="Path_7554" data-name="Path 7554"
d="M305.511,355.584c7.171,2.609,20.986,6.113,39.212,3.585v-5.961h-37.48C304.552,353.208,303.383,354.81,305.511,355.584Z"
transform="translate(-13101.724 9385.343)" fill="url(#linear-gradient1-12)" />
<path id="Path_7555" data-name="Path 7555"
d="M304.853,299.557c2.881-2.609,9.806-6.439,17.25-2.04l-1.493,4.416H305.55C304.468,301.934,304,300.332,304.853,299.557Z"
transform="matrix(1, 0.017, -0.017, 1, -13086.096, 9431.701)"
fill="url(#linear-gradient1-13)" />
<path id="Path_7613" data-name="Path 7613"
d="M304.928,299.557a20.136,20.136,0,0,1,18.43-3.585v5.961H305.743A1.327,1.327,0,0,1,304.928,299.557Z"
transform="translate(-13080.358 9438.097)" fill="url(#linear-gradient1-13)" />
<g id="Group_2638" data-name="Group 2638" transform="translate(-12866.976 9743.443)">
<path id="Path_7556" data-name="Path 7556"
d="M48.047,452.847v-.953a2.879,2.879,0,0,0-3.023-2.709A3.385,3.385,0,0,0,41.469,446H0v6.554a2.331,2.331,0,0,0,.275,1.587c.573.942,2.674,1.451,4.4,1.451l40.35-.036A2.879,2.879,0,0,0,48.047,452.847Z"
transform="translate(-5.018 -446)" fill="url(#linear-gradient1-15)" />
<path id="Path_7557" data-name="Path 7557"
d="M30,461.3a2.622,2.622,0,0,0,2.622,2.622H65.865a2.694,2.694,0,0,0,1.553-.492,2.7,2.7,0,0,0,.107-.749v-.953a2.709,2.709,0,0,0-2.709-2.709,3.185,3.185,0,0,0-3.185-3.185H30Z"
transform="translate(-25.545 -454.366)" fill="url(#linear-gradient1-16)" />
<path id="Path_7558" data-name="Path 7558"
d="M68.107,459.018a3.185,3.185,0,0,0-3.185-3.185H39.068a5.2,5.2,0,0,0-5.2,5.2l2.888,2.888h32.4a2.694,2.694,0,0,0,1.553-.492,2.7,2.7,0,0,0,.107-.749v-.953A2.709,2.709,0,0,0,68.107,459.018Z"
transform="translate(-28.835 -454.365)" fill="url(#linear-gradient1-17)" />
</g>
<g id="Group_2670" data-name="Group 2670" transform="translate(-12871.396 9709.245)">
<g id="Group_2641" data-name="Group 2641" transform="translate(19.798 35.522)">
<g id="Group_2640" data-name="Group 2640" transform="translate(0)">
<g id="Group_2639" data-name="Group 2639">
<path id="Path_7559" data-name="Path 7559"
d="M171.058,421.659a1.837,1.837,0,0,0-.571.091,1.533,1.533,0,0,0-2.957.805,1.392,1.392,0,0,0,.1,2.781h3.429a1.838,1.838,0,0,0,0-3.677Z"
transform="translate(-166.237 -420.666)" fill="url(#linear-gradient1-18)" />
<path id="Path_7560" data-name="Path 7560"
d="M181.548,423.5a1.849,1.849,0,0,0,.013.22,1.513,1.513,0,0,1-.212.015,1.533,1.533,0,1,1,1.466-1.983A1.839,1.839,0,0,0,181.548,423.5Z"
transform="translate(-178.565 -420.667)" fill="url(#linear-gradient1-19)" />
<path id="Path_7561" data-name="Path 7561"
d="M166.353,458.106a1.392,1.392,0,0,0,1.382,1.219h3.429a1.839,1.839,0,0,0,1.731-1.219Z"
transform="translate(-166.342 -454.656)" fill="url(#linear-gradient1-20)" />
</g>
</g>
</g>
<g id="Group_2669" data-name="Group 2669">
<path id="Path_7562" data-name="Path 7562"
d="M282.483,66.931l-96.9-3.907V58.615l96.9-3.907Z"
transform="translate(-168.087 -52.911)" fill="url(#linear-gradient1-21)" />
<path id="Path_7563" data-name="Path 7563"
d="M14.557,82.528v4.41l-3.106.315L0,88.417V81.049l11.452,1.164Z"
transform="translate(-0.612 -76.825)" fill="url(#linear-gradient1-21)" />
<g id="Group_2646" data-name="Group 2646" transform="translate(12.315)">
<g id="Group_2643" data-name="Group 2643" transform="translate(0 11.025)">
<path id="Path_7564" data-name="Path 7564"
d="M85.031,185.1H76.8a1.73,1.73,0,0,1-1.728-1.81L76.4,154.844h9.033l1.325,28.444A1.73,1.73,0,0,1,85.031,185.1Z"
transform="translate(-75.074 -154.844)" fill="url(#linear-gradient1-23)" />
<path id="Path_7565" data-name="Path 7565"
d="M98.146,166.471,97.6,154.844H88.571l-.091,1.961Z"
transform="translate(-87.245 -154.844)" fill="url(#linear-gradient1-24)" />
<g id="Group_2642" data-name="Group 2642" transform="translate(0.198 6.113)">
<path id="Path_7566" data-name="Path 7566"
d="M88.517,358.194H77.228l.281-6.035H88.237Z"
transform="translate(-77.228 -340.088)" fill="url(#linear-gradient1-25)" />
<path id="Path_7567" data-name="Path 7567"
d="M93.5,227.214H83.333l.281-6.035h9.6Z"
transform="translate(-82.77 -221.179)" fill="url(#linear-gradient1-25)" />
<path id="Path_7568" data-name="Path 7568"
d="M139.05,226.693l-.257-5.514h-5.257Z"
transform="translate(-128.347 -221.179)" fill="url(#linear-gradient1-27)" />
</g>
</g>
<path id="Path_7569" data-name="Path 7569" d="M91.379,90.225h8.682v6.338H91.379Z"
transform="translate(-89.876 -85.155)" fill="url(#linear-gradient1-28)" />
<path id="Path_7570" data-name="Path 7570" d="M140.926,90.225h4.116v6.338h-4.116Z"
transform="translate(-134.857 -85.155)" fill="url(#linear-gradient1-29)" />
<path id="Path_7571" data-name="Path 7571" d="M91.379,119.921h8.682v3.6H91.379Z"
transform="translate(-89.876 -112.114)" fill="url(#linear-gradient1-30)" />
<path id="Path_7572" data-name="Path 7572" d="M128.6,90.225h1.821v6.338H128.6Z"
transform="translate(-123.671 -85.155)" fill="url(#linear-gradient1-31)" />
<g id="Group_2644" data-name="Group 2644" transform="translate(1.035 8.865)">
<path id="Path_7573" data-name="Path 7573"
d="M87.773,133.56H86.3v-1.448a.713.713,0,0,1,.713-.713h.044a.713.713,0,0,1,.713.713Z"
transform="translate(-86.303 -131.399)" fill="url(#linear-gradient1-32)" />
<path id="Path_7574" data-name="Path 7574"
d="M117.242,133.56h-1.47v-1.448a.713.713,0,0,1,.713-.713h.044a.713.713,0,0,1,.713.713Z"
transform="translate(-113.056 -131.399)" fill="url(#linear-gradient1-32)" />
<path id="Path_7575" data-name="Path 7575"
d="M146.711,133.56h-1.47v-1.448a.713.713,0,0,1,.713-.713H146a.713.713,0,0,1,.713.713Z"
transform="translate(-139.809 -131.399)" fill="url(#linear-gradient1-32)" />
<path id="Path_7576" data-name="Path 7576"
d="M176.18,133.56h-1.47v-1.448a.713.713,0,0,1,.713-.713h.044a.713.713,0,0,1,.713.713Z"
transform="translate(-166.563 -131.399)" fill="url(#linear-gradient1-35)" />
</g>
<path id="Path_7577" data-name="Path 7577"
d="M88.232,147.843h-8.74a1.175,1.175,0,0,1-1.175-1.175v-.548a1.175,1.175,0,0,1,1.175-1.175h8.74a1.175,1.175,0,0,1,1.175,1.175v.548A1.175,1.175,0,0,1,88.232,147.843Z"
transform="translate(-78.018 -134.833)" fill="url(#linear-gradient1-36)" />
<path id="Path_7578" data-name="Path 7578"
d="M91.379,90.792l.013.067,5.7,5.7h2.965V90.225H91.379Z"
transform="translate(-89.876 -85.155)" fill="url(#linear-gradient1-37)" />
<g id="Group_2645" data-name="Group 2645" transform="translate(0.299)">
<path id="Path_7579" data-name="Path 7579"
d="M92.821,35.209A4.341,4.341,0,0,0,88.48,39.55v.729h8.682V39.55A4.341,4.341,0,0,0,92.821,35.209Z"
transform="translate(-87.543 -35.209)" fill="url(#linear-gradient1-38)" />
<path id="Path_7580" data-name="Path 7580"
d="M114.752,35.209H114.2a1.866,1.866,0,0,0-1.866,1.866v3.2h4.285v-3.2a1.866,1.866,0,0,0-1.866-1.866Z"
transform="translate(-109.198 -35.209)" fill="url(#linear-gradient1-39)" />
<path id="Path_7581" data-name="Path 7581"
d="M88.827,85.69H78.9a.579.579,0,0,1,0-1.158h9.931a.579.579,0,0,1,0,1.158Z"
transform="translate(-78.317 -79.987)" fill="url(#linear-gradient1-40)" />
</g>
</g>
</g>
<g id="Group_2649" data-name="Group 2649" transform="translate(8.213 36.844)">
<g id="Group_2648" data-name="Group 2648">
<g id="Group_2647" data-name="Group 2647">
<path id="Path_7582" data-name="Path 7582"
d="M36.652,436.266a2.319,2.319,0,0,0-.721.114A1.937,1.937,0,0,0,32.2,437.4a1.759,1.759,0,0,0,.125,3.513h4.331a2.322,2.322,0,0,0,0-4.644Z"
transform="translate(-30.562 -435.012)" fill="url(#linear-gradient1-41)" />
<path id="Path_7583" data-name="Path 7583"
d="M49.9,438.59a2.333,2.333,0,0,0,.017.278,1.908,1.908,0,0,1-.267.019,1.936,1.936,0,1,1,1.852-2.5,2.322,2.322,0,0,0-1.6,2.208Z"
transform="translate(-46.134 -435.014)" fill="url(#linear-gradient1-42)" />
<path id="Path_7584" data-name="Path 7584"
d="M30.709,482.3a1.759,1.759,0,0,0,1.745,1.54h4.331a2.323,2.323,0,0,0,2.187-1.54Z"
transform="translate(-30.695 -477.947)" fill="url(#linear-gradient1-20)" />
</g>
</g>
</g>
</g>
<circle id="Ellipse_7102" data-name="Ellipse 7102" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12868.354 9707.182)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7103" data-name="Ellipse 7103" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12866.9 9710.202)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7104" data-name="Ellipse 7104" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12869.219 9726.458)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7105" data-name="Ellipse 7105" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12846.204 9707.182)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7107" data-name="Ellipse 7107" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12851.202 9721.604)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7108" data-name="Ellipse 7108" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12849.235 9725.659)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7109" data-name="Ellipse 7109" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12869.265 9720.498)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7110" data-name="Ellipse 7110" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12865.594 9729.714)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7111" data-name="Ellipse 7111" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12861.708 9706.552)" class="blink" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7112" data-name="Ellipse 7112" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12841.236 9708.231)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7113" class="blink1" data-name="Ellipse 7113" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12832.279 9727.687)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7138" data-name="Ellipse 7138" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12817.279 9725.687)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7143" data-name="Ellipse 7143" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12804.279 9725.687)" class="blink1" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7145" data-name="Ellipse 7145" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12812.279 9727.687)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7146" data-name="Ellipse 7146" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12806.108 9728.028)" class="blink" fill="url(#linear-gradient1-58)" />
<circle id="Ellipse_7147" data-name="Ellipse 7147" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12815.279 9730.687)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7144" data-name="Ellipse 7144" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12774.279 9723.687)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7139" data-name="Ellipse 7139" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12806.279 9710.687)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7133" data-name="Ellipse 7133" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12832.279 9721.687)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7117" data-name="Ellipse 7117" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12846.594 9721.665)" class="blink" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7118" data-name="Ellipse 7118" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12865.901 9722.464)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7120" data-name="Ellipse 7120" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12827.318 9706.859)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7121" data-name="Ellipse 7121" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12825.303 9726.406)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7137" data-name="Ellipse 7137" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12800.303 9722.406)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7140" data-name="Ellipse 7140" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12794.303 9723.406)" class="blink1" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7141" data-name="Ellipse 7141" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12790.303 9708.406)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7142" data-name="Ellipse 7142" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12782.303 9710.406)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7122" data-name="Ellipse 7122" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12837.563 9725.951)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7134" data-name="Ellipse 7134" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12843.563 9724.951)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7135" data-name="Ellipse 7135" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12829.563 9710.951)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7136" data-name="Ellipse 7136" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12812.563 9707.951)" fill="url(#linear-gradient1-44)" />
<circle id="Ellipse_7125" data-name="Ellipse 7125" cx="0.415" cy="0.415" r="0.415"
transform="translate(-12852.502 9707.049)" fill="url(#linear-gradient1-44)" />
<g id="Group_2673" data-name="Group 2673" transform="translate(-484 -431)">
<g id="Group_2668" data-name="Group 2668" transform="translate(-12335.184 10161.089)">
<g id="Group_2648-2" data-name="Group 2648">
<g id="Group_2647-2" data-name="Group 2647">
<path id="Path_7582-2" data-name="Path 7582"
d="M36.652,436.266a2.319,2.319,0,0,0-.721.114A1.937,1.937,0,0,0,32.2,437.4a1.759,1.759,0,0,0,.125,3.513h4.331a2.322,2.322,0,0,0,0-4.644Z"
transform="translate(-30.562 -435.012)" fill="url(#linear-gradient1-41)" />
<path id="Path_7583-2" data-name="Path 7583"
d="M49.9,438.59a2.333,2.333,0,0,0,.017.278,1.908,1.908,0,0,1-.267.019,1.936,1.936,0,1,1,1.852-2.5,2.322,2.322,0,0,0-1.6,2.208Z"
transform="translate(-46.134 -435.014)" fill="url(#linear-gradient1-42)" />
<path id="Path_7584-2" data-name="Path 7584"
d="M30.709,482.3a1.759,1.759,0,0,0,1.745,1.54h4.331a2.323,2.323,0,0,0,2.187-1.54Z"
transform="translate(-30.695 -477.947)" fill="url(#linear-gradient1-20)" />
</g>
</g>
</g>
<g id="Group_2666" data-name="Group 2666" transform="translate(-12337.184 10164.089)">
<g id="Group_2648-3" data-name="Group 2648">
<g id="Group_2647-3" data-name="Group 2647">
<path id="Path_7582-3" data-name="Path 7582"
d="M36.652,436.266a2.319,2.319,0,0,0-.721.114A1.937,1.937,0,0,0,32.2,437.4a1.759,1.759,0,0,0,.125,3.513h4.331a2.322,2.322,0,0,0,0-4.644Z"
transform="translate(-30.562 -435.012)" fill="url(#linear-gradient1-41)" />
<path id="Path_7583-3" data-name="Path 7583"
d="M49.9,438.59a2.333,2.333,0,0,0,.017.278,1.908,1.908,0,0,1-.267.019,1.936,1.936,0,1,1,1.852-2.5,2.322,2.322,0,0,0-1.6,2.208Z"
transform="translate(-46.134 -435.014)" fill="url(#linear-gradient1-42)" />
<path id="Path_7584-3" data-name="Path 7584"
d="M30.709,482.3a1.759,1.759,0,0,0,1.745,1.54h4.331a2.323,2.323,0,0,0,2.187-1.54Z"
transform="translate(-30.695 -477.947)" fill="url(#linear-gradient1-20)" />
</g>
</g>
</g>
<g id="Group_2667" data-name="Group 2667" transform="translate(-12331.184 10164.089)">
<g id="Group_2648-4" data-name="Group 2648">
<g id="Group_2647-4" data-name="Group 2647">
<path id="Path_7582-4" data-name="Path 7582"
d="M36.652,436.266a2.319,2.319,0,0,0-.721.114A1.937,1.937,0,0,0,32.2,437.4a1.759,1.759,0,0,0,.125,3.513h4.331a2.322,2.322,0,0,0,0-4.644Z"
transform="translate(-30.562 -435.012)" fill="url(#linear-gradient1-41)" />
<path id="Path_7583-4" data-name="Path 7583"
d="M49.9,438.59a2.333,2.333,0,0,0,.017.278,1.908,1.908,0,0,1-.267.019,1.936,1.936,0,1,1,1.852-2.5,2.322,2.322,0,0,0-1.6,2.208Z"
transform="translate(-46.134 -435.014)" fill="url(#linear-gradient1-42)" />
<path id="Path_7584-4" data-name="Path 7584"
d="M30.709,482.3a1.759,1.759,0,0,0,1.745,1.54h4.331a2.323,2.323,0,0,0,2.187-1.54Z"
transform="translate(-30.695 -477.947)" fill="url(#linear-gradient1-20)" />
</g>
</g>
</g>
</g>
<path id="Icon_weather-stars" class="blink1" data-name="Icon weather-stars"
d="M6.444,6.877A.368.368,0,0,0,6.8,6.511a.366.366,0,0,0,.35.366.366.366,0,0,0-.35.366.348.348,0,0,0-.1-.253A.355.355,0,0,0,6.444,6.877ZM6.8,5.792a.719.719,0,0,0,.683-.716.69.69,0,0,0,.2.494.7.7,0,0,0,.485.222.7.7,0,0,0-.345.107.724.724,0,0,0-.249.261.709.709,0,0,0-.09.351A.722.722,0,0,0,6.8,5.792Zm.5,1.623a.538.538,0,0,0,.514-.538.538.538,0,0,0,.512.538.538.538,0,0,0-.512.538.519.519,0,0,0-.149-.372A.528.528,0,0,0,7.3,7.415ZM8.322,6.7a.536.536,0,0,0,.511-.54.538.538,0,0,0,.514.538.538.538,0,0,0-.514.538A.533.533,0,0,0,8.322,6.7Z"
transform="translate(-12825.633 9702.97)" fill="#e1f1ff" />
<path id="Icon_weather-stars-2" class="blink1" data-name="Icon weather-stars"
d="M6.444,6.877A.368.368,0,0,0,6.8,6.511a.366.366,0,0,0,.35.366.366.366,0,0,0-.35.366.348.348,0,0,0-.1-.253A.355.355,0,0,0,6.444,6.877ZM6.8,5.792a.719.719,0,0,0,.683-.716.69.69,0,0,0,.2.494.7.7,0,0,0,.485.222.7.7,0,0,0-.345.107.724.724,0,0,0-.249.261.709.709,0,0,0-.09.351A.722.722,0,0,0,6.8,5.792Zm.5,1.623a.538.538,0,0,0,.514-.538.538.538,0,0,0,.512.538.538.538,0,0,0-.512.538.519.519,0,0,0-.149-.372A.528.528,0,0,0,7.3,7.415ZM8.322,6.7a.536.536,0,0,0,.511-.54.538.538,0,0,0,.514.538.538.538,0,0,0-.514.538A.533.533,0,0,0,8.322,6.7Z"
transform="translate(-12856.633 9703.97)" fill="#e1f1ff" />
<path id="Icon_weather-stars-3" class="blink1" data-name="Icon weather-stars"
d="M6.444,6.877A.368.368,0,0,0,6.8,6.511a.366.366,0,0,0,.35.366.366.366,0,0,0-.35.366.348.348,0,0,0-.1-.253A.355.355,0,0,0,6.444,6.877ZM6.8,5.792a.719.719,0,0,0,.683-.716.69.69,0,0,0,.2.494.7.7,0,0,0,.485.222.7.7,0,0,0-.345.107.724.724,0,0,0-.249.261.709.709,0,0,0-.09.351A.722.722,0,0,0,6.8,5.792Zm.5,1.623a.538.538,0,0,0,.514-.538.538.538,0,0,0,.512.538.538.538,0,0,0-.512.538.519.519,0,0,0-.149-.372A.528.528,0,0,0,7.3,7.415ZM8.322,6.7a.536.536,0,0,0,.511-.54.538.538,0,0,0,.514.538.538.538,0,0,0-.514.538A.533.533,0,0,0,8.322,6.7Z"
transform="translate(-12793.633 9716.97)" fill="#e1f1ff" />
<path id="Icon_weather-stars-4" class="blink" data-name="Icon weather-stars"
d="M6.444,6.877A.368.368,0,0,0,6.8,6.511a.366.366,0,0,0,.35.366.366.366,0,0,0-.35.366.348.348,0,0,0-.1-.253A.355.355,0,0,0,6.444,6.877ZM6.8,5.792a.719.719,0,0,0,.683-.716.69.69,0,0,0,.2.494.7.7,0,0,0,.485.222.7.7,0,0,0-.345.107.724.724,0,0,0-.249.261.709.709,0,0,0-.09.351A.722.722,0,0,0,6.8,5.792Zm.5,1.623a.538.538,0,0,0,.514-.538.538.538,0,0,0,.512.538.538.538,0,0,0-.512.538.519.519,0,0,0-.149-.372A.528.528,0,0,0,7.3,7.415ZM8.322,6.7a.536.536,0,0,0,.511-.54.538.538,0,0,0,.514.538.538.538,0,0,0-.514.538A.533.533,0,0,0,8.322,6.7Z"
transform="translate(-12777.347 9704.589)" fill="#e1f1ff" />
<path id="Icon_metro-star-full" class="blink1" data-name="Icon metro-star-full"
d="M3.306,2.95l-.254-.037-.114-.23-.114.23-.254.037.184.179-.043.253.227-.119.227.119-.043-.253Z"
transform="translate(-12838.038 9705.863)" fill="#e6f3ff" />
<path id="Icon_metro-star-full-2" class="blink" data-name="Icon metro-star-full"
d="M3.306,2.95l-.254-.037-.114-.23-.114.23-.254.037.184.179-.043.253.227-.119.227.119-.043-.253Z"
transform="translate(-12843.038 9708.863)" fill="#e6f3ff" />
<path id="Icon_metro-star-full-3" data-name="Icon metro-star-full"
d="M3.756,3.114l-.409-.06-.183-.371-.183.371-.41.06.3.289L2.8,3.81l.366-.193.366.193L3.46,3.4Z"
transform="translate(-12799.038 9706.863)" fill="#e6f3ff" />
<path id="Icon_metro-star-full-4" data-name="Icon metro-star-full"
d="M3.756,3.114l-.409-.06-.183-.371-.183.371-.41.06.3.289L2.8,3.81l.366-.193.366.193L3.46,3.4Z"
transform="translate(-12826.038 9718.863)" fill="#e6f3ff" />
<path id="Icon_metro-star-full-5" data-name="Icon metro-star-full"
d="M3.756,3.114l-.409-.06-.183-.371-.183.371-.41.06.3.289L2.8,3.81l.366-.193.366.193L3.46,3.4Z"
transform="translate(-12813.038 9719.863)" fill="#e6f3ff" />
<path id="Icon_metro-star-full-6" class="blink1" data-name="Icon metro-star-full"
d="M3.756,3.114l-.409-.06-.183-.371-.183.371-.41.06.3.289L2.8,3.81l.366-.193.366.193L3.46,3.4Z"
transform="translate(-12780.038 9706.863)" fill="#e6f3ff" />
<path id="Icon_metro-star-full-7" data-name="Icon metro-star-full"
d="M3.756,3.114l-.409-.06-.183-.371-.183.371-.41.06.3.289L2.8,3.81l.366-.193.366.193L3.46,3.4Z"
transform="translate(-12785.038 9704.863)" class="blink1" fill="#e6f3ff" />
<path id="Icon_metro-star-full-8" data-name="Icon metro-star-full"
d="M3.756,3.114l-.409-.06-.183-.371-.183.371-.41.06.3.289L2.8,3.81l.366-.193.366.193L3.46,3.4Z"
transform="translate(-12803.038 9704.863)" class="blink" fill="#e6f3ff" />
<path id="Icon_metro-star-full-9" data-name="Icon metro-star-full"
d="M3.756,3.114l-.409-.06-.183-.371-.183.371-.41.06.3.289L2.8,3.81l.366-.193.366.193L3.46,3.4Z"
transform="translate(-12764.038 9704.863)" fill="#e6f3ff" />
<path id="Icon_metro-star-full-10" data-name="Icon metro-star-full"
d="M3.756,3.114l-.409-.06-.183-.371-.183.371-.41.06.3.289L2.8,3.81l.366-.193.366.193L3.46,3.4Z"
transform="translate(-12768.038 9704.863)" class="blink1" fill="#e6f3ff" />
<path id="Icon_metro-star-full-11" data-name="Icon metro-star-full"
d="M3.756,3.114l-.409-.06-.183-.371-.183.371-.41.06.3.289L2.8,3.81l.366-.193.366.193L3.46,3.4Z"
transform="translate(-12774.038 9704.863)" class="blink" fill="#e6f3ff" />
<path id="Icon_metro-star-full-12" data-name="Icon metro-star-full"
d="M3.756,3.114l-.409-.06-.183-.371-.183.371-.41.06.3.289L2.8,3.81l.366-.193.366.193L3.46,3.4Z"
transform="translate(-12762.038 9721.863)" class="blink1" fill="#e6f3ff" />
<path id="Icon_metro-star-full-13" data-name="Icon metro-star-full"
d="M3.328,2.958,3.066,2.92l-.117-.237-.117.237-.262.038.189.185L2.715,3.4l.234-.123.234.123-.045-.261Z"
transform="translate(-12843.038 9719.863)" class="blink" fill="#e6f3ff" />
<path id="Path_7615" data-name="Path 7615"
d="M43.015,284.157l-4.268-4.877a2.34,2.34,0,0,0-3.871-.013l-4.314,4.89Z"
transform="translate(-12900.745 9456.394)" fill="url(#linear-gradient1-5)" />
</g>
</svg>
<svg class="light-img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 115 47">
<defs>
<linearGradient id="linear-gradient" x1="0.5" y1="0.068" x2="0.5" y2="0.949"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#fff5d9" />
<stop offset="1" stop-color="#ffce47" />
</linearGradient>
<linearGradient id="linear-gradient-2" x1="1.05" y1="0.176" x2="0.704" y2="0.632"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#ffdecf" />
<stop offset="1" stop-color="#faa68e" />
</linearGradient>
<linearGradient id="linear-gradient-3" x1="0.709" y1="0.426" x2="0.579" y2="0.782"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#ff9356" stop-opacity="0" />
<stop offset="1" stop-color="#ff4181" />
</linearGradient>
<linearGradient id="linear-gradient-4" x1="1.223" y1="0.123" x2="-0.435" y2="0.987"
xlink:href="#linear-gradient-3" />
<linearGradient id="linear-gradient-8" x1="0.341" y1="0.341" x2="0.975" y2="0.975"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#ffd945" />
<stop offset="0.304" stop-color="#ffcd3e" />
<stop offset="0.856" stop-color="#ffad2b" />
<stop offset="1" stop-color="#ffa325" />
</linearGradient>
<linearGradient id="linear-gradient-9" x1="0.285" y1="0.438" x2="0.555" y2="1.143"
xlink:href="#linear-gradient-2" />
<linearGradient id="linear-gradient-10" x1="0.762" y1="0.187" x2="0.038" y2="1.053"
xlink:href="#linear-gradient-3" />
<linearGradient id="linear-gradient-11" x1="0.418" y1="-0.009" x2="0.465" y2="0.564"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#ffce47" />
<stop offset="1" stop-color="#f6921e" />
</linearGradient>
<linearGradient id="linear-gradient-12" x1="0.425" y1="0.117" x2="0.638" y2="1.205"
xlink:href="#linear-gradient-11" />
<linearGradient id="linear-gradient-13" x1="0.582" y1="-0.009" x2="0.535" y2="0.564"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#ffce47" />
<stop offset="1" stop-color="#f5880a" />
</linearGradient>
<linearGradient id="linear-gradient-14" x1="0.877" y1="0.786" x2="0.113" y2="0.279"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#ff9356" stop-opacity="0" />
<stop offset="1" stop-color="#fd3030" />
</linearGradient>
</defs>
<g id="Group_2677" data-name="Group 2677" transform="translate(12874 -9767)">
<path id="Path_7525" data-name="Path 7525"
d="M109.507,47H5.493C2.459,47,0,45.995,0,44.755V2.245C0,1.005,2.459,0,5.493,0H109.506C112.541,0,115,1.005,115,2.245v42.51C115,45.995,112.541,47,109.507,47Z"
transform="translate(-12874 9767)" fill="url(#linear-gradient)" />
<path id="Path_7526" data-name="Path 7526"
d="M18.3,72.215H17.57a1.663,1.663,0,0,0-1.663-1.663H12.626a1.663,1.663,0,0,0-1.453,2.472,1.55,1.55,0,0,0,.306,3.07h3.058a1.546,1.546,0,0,0,1.185-.552H18.3a1.663,1.663,0,1,0,0-3.327Z"
transform="translate(-12785.014 9699.95)" fill="#fff" />
<g id="Group_2630" data-name="Group 2630" transform="translate(-12779.956 9779.902)">
<path id="Path_7527" data-name="Path 7527"
d="M313.416,149.279v11.969H293.46l7.655-13.628,3.463-6.166a2.553,2.553,0,0,1,4.607,0l3.727,6.634.463.824A1.6,1.6,0,0,1,313.416,149.279Z"
transform="translate(-293.46 -140.002)" fill="url(#linear-gradient-2)" />
<path id="Path_7528" data-name="Path 7528"
d="M313.416,149.279v11.969H293.46l7.655-13.628,3.463-6.166a2.553,2.553,0,0,1,4.607,0l3.727,6.634.463.824A1.6,1.6,0,0,1,313.416,149.279Z"
transform="translate(-293.46 -140.002)" fill="url(#linear-gradient-3)" />
<g id="Group_2629" data-name="Group 2629" transform="translate(9.757 5.262)">
<path id="Path_7529" data-name="Path 7529"
d="M469.926,216.212h-1.671a.33.33,0,0,1-.33-.33v-1.1a.33.33,0,0,1,.33-.33h1.671a.33.33,0,0,1,.33.33v1.1A.33.33,0,0,1,469.926,216.212Z"
transform="translate(-461.604 -212.851)" fill="#feaf9b" />
<path id="Path_7530" data-name="Path 7530"
d="M403.668,198.859h-4a.33.33,0,0,1-.33-.33v-1.1a.33.33,0,0,1,.33-.33h4a.33.33,0,0,1,.33.33v1.1A.33.33,0,0,1,403.668,198.859Z"
transform="translate(-399.336 -197.097)" fill="#feaf9b" />
</g>
<path id="Path_7531" data-name="Path 7531"
d="M452.668,150.007l-.463-.824-3.727-6.634a2.782,2.782,0,0,0-1.585-1.341l3.335,21.135h2.481V150.374A1.6,1.6,0,0,0,452.668,150.007Z"
transform="translate(-432.754 -141.097)" fill="url(#linear-gradient-4)" />
</g>
<g id="Group_2651" data-name="Group 2651" transform="translate(-12827.956 9785.902)">
<path id="Path_7527-2" data-name="Path 7527"
d="M313.416,149.279v11.969H293.46l7.655-13.628,3.463-6.166a2.553,2.553,0,0,1,4.607,0l3.727,6.634.463.824A1.6,1.6,0,0,1,313.416,149.279Z"
transform="translate(-293.46 -140.002)" fill="url(#linear-gradient-2)" />
<path id="Path_7528-2" data-name="Path 7528"
d="M313.416,149.279v11.969H293.46l7.655-13.628,3.463-6.166a2.553,2.553,0,0,1,4.607,0l3.727,6.634.463.824A1.6,1.6,0,0,1,313.416,149.279Z"
transform="translate(-293.46 -140.002)" fill="url(#linear-gradient-3)" />
<g id="Group_2629-2" data-name="Group 2629" transform="translate(9.757 5.262)">
<path id="Path_7529-2" data-name="Path 7529"
d="M469.926,216.212h-1.671a.33.33,0,0,1-.33-.33v-1.1a.33.33,0,0,1,.33-.33h1.671a.33.33,0,0,1,.33.33v1.1A.33.33,0,0,1,469.926,216.212Z"
transform="translate(-461.604 -212.851)" fill="#feaf9b" />
<path id="Path_7530-2" data-name="Path 7530"
d="M403.668,198.859h-4a.33.33,0,0,1-.33-.33v-1.1a.33.33,0,0,1,.33-.33h4a.33.33,0,0,1,.33.33v1.1A.33.33,0,0,1,403.668,198.859Z"
transform="translate(-399.336 -197.097)" fill="#feaf9b" />
</g>
<path id="Path_7531-2" data-name="Path 7531"
d="M452.668,150.007l-.463-.824-3.727-6.634a2.782,2.782,0,0,0-1.585-1.341l3.335,21.135h2.481V150.374A1.6,1.6,0,0,0,452.668,150.007Z"
transform="translate(-432.754 -141.097)" fill="url(#linear-gradient-4)" />
</g>
<g id="Group_2652" data-name="Group 2652" transform="translate(-101 -476)">
<circle id="Ellipse_7127" class="scale2" data-name="Ellipse 7127" cx="8" cy="8" r="8"
transform="translate(-12693 10246)" fill="#fff" opacity="0.5" />
<circle id="Ellipse_7128" class="scale1" data-name="Ellipse 7128" cx="10" cy="10" r="10"
transform="translate(-12695 10244)" fill="#fff" opacity="0.28" />
<circle id="Ellipse_7101" class="scale" data-name="Ellipse 7101" cx="6.169" cy="6.169" r="6.169"
transform="translate(-12691 10248)" fill="url(#linear-gradient-8)" />
</g>
<g id="Group_2634" data-name="Group 2634" transform="translate(-12849.604 9777.539)">
<path id="Path_7532" data-name="Path 7532"
d="M90.57,62.071a3.437,3.437,0,0,0-6.2,0L69.4,88.724H105.54Z"
transform="translate(-69.396 -60.115)" fill="url(#linear-gradient-9)" />
<g id="Group_2633" data-name="Group 2633" transform="translate(6.666 3.918)">
<g id="Group_2632" data-name="Group 2632">
<path id="Path_7533" data-name="Path 7533"
d="M345.519,253.782h-1.671a.33.33,0,0,1-.33-.33v-1.1a.33.33,0,0,1,.33-.33h1.671a.33.33,0,0,1,.33.33v1.1A.33.33,0,0,1,345.519,253.782Z"
transform="translate(-324.922 -238.252)" fill="#feaf9b" />
<path id="Path_7534" data-name="Path 7534"
d="M322.555,225.539h-4a.33.33,0,0,1-.33-.33v-1.1a.33.33,0,0,1,.33-.33h4a.33.33,0,0,1,.33.33v1.1A.33.33,0,0,1,322.555,225.539Z"
transform="translate(-301.958 -212.612)" fill="#feaf9b" />
<path id="Path_7535" data-name="Path 7535"
d="M175.952,199.625h4a.33.33,0,0,0,.33-.33v-1.1a.33.33,0,0,0-.33-.33h-4a.33.33,0,0,0-.33.33v1.1A.33.33,0,0,0,175.952,199.625Z"
transform="translate(-172.498 -189.086)" fill="#feaf9b" />
<path id="Path_7536" data-name="Path 7536"
d="M226.54,182.272h4a.33.33,0,0,0,.33-.33v-1.1a.33.33,0,0,0-.33-.33h-4a.33.33,0,0,0-.33.33v1.1A.33.33,0,0,0,226.54,182.272Z"
transform="translate(-218.424 -173.332)" fill="#feaf9b" />
<g id="Group_2631" data-name="Group 2631">
<path id="Path_7537" data-name="Path 7537"
d="M142.057,294.66h1.671a.33.33,0,0,0,.33-.33v-1.1a.33.33,0,0,0-.33-.33h-1.671a.33.33,0,0,0-.33.33v1.1A.33.33,0,0,0,142.057,294.66Z"
transform="translate(-141.727 -275.363)" fill="#feaf9b" />
<path id="Path_7538" data-name="Path 7538"
d="M232.015,104.388h1.671a.33.33,0,0,0,.33-.33v-1.1a.33.33,0,0,0-.33-.33h-1.671a.33.33,0,0,0-.33.33v1.1A.33.33,0,0,0,232.015,104.388Z"
transform="translate(-223.395 -102.626)" fill="#feaf9b" />
<path id="Path_7539" data-name="Path 7539"
d="M167.351,277.307h4a.33.33,0,0,0,.33-.33v-1.1a.33.33,0,0,0-.33-.33h-4a.33.33,0,0,0-.33.33v1.1A.33.33,0,0,0,167.351,277.307Z"
transform="translate(-164.69 -259.609)" fill="#feaf9b" />
</g>
</g>
</g>
<path id="Path_7540" data-name="Path 7540"
d="M283.571,88.718h-13L266.37,62.065c-.206-1.3-.538-1.956-.871-1.956a3.576,3.576,0,0,1,3.1,1.956Z"
transform="translate(-247.427 -60.109)" fill="url(#linear-gradient-10)" />
</g>
<g id="Group_2635" data-name="Group 2635" transform="translate(-12825.548 9773.448)">
<path id="Path_7541" data-name="Path 7541" class="move"
d="M330.413,40.639H329.33a2.454,2.454,0,0,0-2.454-2.454h-4.84a2.454,2.454,0,0,0,0,4.908h1.083a2.454,2.454,0,0,0,2.454,2.454h4.84a2.454,2.454,0,0,0,0-4.908Z"
transform="translate(-319.582 -36.114)" fill="#fff" />
<path id="Path_7542" data-name="Path 7542" class="move1"
d="M436.539,18.81h-3.058a1.55,1.55,0,0,1,0-3.1h3.058a1.55,1.55,0,1,1,0,3.1Z"
transform="translate(-421.577 -15.71)" fill="#fff" />
</g>
<path id="Path_7543" data-name="Path 7543"
d="M0,300.83v7.283H29.852s-8.41-10.735-21.192-11.124C5.945,296.9,3.522,299.81,0,300.83Z"
transform="translate(-12871 9501.508)" fill="url(#linear-gradient-11)" />
<path id="Path_7544" data-name="Path 7544"
d="M115,287.776v-18.3a122.035,122.035,0,0,0-43.931.427l-19.784,4.031a224.872,224.872,0,0,1-44.3,4.246H0v9.6c0,1.24,2.459,2.245,5.493,2.245H109.506C112.541,290.021,115,289.016,115,287.776Z"
transform="translate(-12874 9523.979)" fill="url(#linear-gradient-12)" />
<path id="Path_7585" data-name="Path 7585" d="M55,300.529V320.28H0S21.384,288.918,55,300.529Z"
transform="translate(-12814 9493.72)" fill="url(#linear-gradient-13)" />
<path id="Path_7545" data-name="Path 7545"
d="M242.453,291.943H274.96c1.8,0,3.257-1.005,3.257-2.245V271.4a41.788,41.788,0,0,0-8.2-1.588c-.427.007-12.154.227-11.548,4.29.854,5.731,13.725,4.2,14.8,8.858.639,2.76-16.636,6.443-30.824,8.987Z"
transform="translate(-13039.217 9522.057)" fill="url(#linear-gradient-14)" />
</g>
</svg>
<div class="circle-btn">
</div>
</label>
</section>
<script src="./main.js"></script>
</body>
</html>
Berikut untuk code CSS nya:
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
background-color: #fff5d9;
}
.switch {
position: relative;
width: 190px;
height: 78px;
display: flex;
align-items: center;
background-color: transparent;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
-o-border-radius: 100px;
}
.switch img,
.switch svg {
width: 100%;
height: 100%;
position: absolute;
border-radius: 100px;
top: 0;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
-o-border-radius: 100px;
}
.circle-btn {
width: 70px;
height: 70px;
background-color: #fff;
position: absolute;
border-radius: 50%;
margin: 0 6px;
cursor: pointer;
z-index: 999;
transition: all 0.4s;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
}
.dark-img {
opacity: 0;
box-shadow: 0 0 10px 10px rgba(12, 18, 100, 0.342);
transition: all 0.4s;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
}
.light-img {
box-shadow: 0 0 10px 10px rgba(255, 153, 0, 0.342);
z-index: 2;
opacity: 1;
transition: all 0.4s;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
}
.check-mode {
display: none;
}
.check-mode:checked ~ .circle-btn {
transform: translateX(107px);
-webkit-transform: translateX(107px);
-moz-transform: translateX(107px);
-ms-transform: translateX(107px);
-o-transform: translateX(107px);
}
.check-mode:checked ~ .light-img {
opacity: 0;
}
.check-mode:checked ~ .dark-img {
opacity: 1;
}
.move {
animation: move-ani 3s linear infinite;
-webkit-animation: move-ani 3s linear infinite;
}
.move1 {
animation: move-ani-1 3s linear infinite;
-webkit-animation: move-ani-1 3s linear infinite;
}
.scale {
animation: scale 2s linear infinite;
-webkit-animation: scale 2s linear infinite;
}
.scale1 {
animation: scale1 1.5s linear infinite;
-webkit-animation: scale1 1.5s linear infinite;
}
.scale2 {
animation: scale2 1s linear infinite;
-webkit-animation: scale2 1s linear infinite;
}
.blink {
animation: blink 0.8s linear infinite;
-webkit-animation: blink 0.8s linear infinite;
}
.blink1 {
animation: blink 0.6s linear infinite;
-webkit-animation: blink 0.6s linear infinite;
}
@keyframes scale {
0% {
r: 6.169;
}
50% {
r: 8;
}
100% {
r: 6.169;
}
}
@keyframes scale1 {
0% {
r: 10;
}
50% {
r: 12;
}
100% {
r: 10;
}
}
@keyframes scale2 {
0% {
r: 8;
}
50% {
r: 10;
}
100% {
r: 8;
}
}
@keyframes blink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes move-ani {
0% {
transform: translate(-325.582px, -36.114px);
-webkit-transform: translate(-325.582px, -36.114px);
-moz-transform: translate(-325.582px, -36.114px);
-ms-transform: translate(-325.582px, -36.114px);
-o-transform: translate(-325.582px, -36.114px);
}
50% {
transform: translate(-310.582px, -36.114px);
-webkit-transform: translate(-310.582px, -36.114px);
-moz-transform: translate(-310.582px, -36.114px);
-ms-transform: translate(-310.582px, -36.114px);
-o-transform: translate(-310.582px, -36.114px);
}
100% {
transform: translate(-325.582px, -36.114px);
-webkit-transform: translate(-325.582px, -36.114px);
-moz-transform: translate(-325.582px, -36.114px);
-ms-transform: translate(-325.582px, -36.114px);
-o-transform: translate(-325.582px, -36.114px);
}
}
@keyframes move-ani-1 {
0% {
transform: translate(-421.577px, -15.71px);
-webkit-transform: translate(-421.577px, -15.71px);
-moz-transform: translate(-421.577px, -15.71px);
-ms-transform: translate(-421.577px, -15.71px);
-o-transform: translate(-421.577px, -15.71px);
}
50% {
transform: translate(-410.577px, -15.71px);
-webkit-transform: translate(-410.577px, -15.71px);
-moz-transform: translate(-410.577px, -15.71px);
-ms-transform: translate(-410.577px, -15.71px);
-o-transform: translate(-410.577px, -15.71px);
}
100% {
transform: translate(-421.577px, -15.71px);
-webkit-transform: translate(-421.577px, -15.71px);
-moz-transform: translate(-421.577px, -15.71px);
-ms-transform: translate(-421.577px, -15.71px);
-o-transform: translate(-421.577px, -15.71px);
}
}
Berikut Untuk Code JAVASCRIPT nya:
const checkbox = document.querySelector(".check-mode");
checkbox.addEventListener("change", (e) => {
e.target.checked
? (document.body.style.cssText = `background: #01131F`)
: (document.body.style.cssText = `background: #FFF5D9`);
});
Setelah anda menulis code tersebut,selanjunya anda simpan ditempat penyimpanan yang anda inginkan.Kemudian anda Run atau jalankan,maka hasilnya akan tampak seperti gambar berikut ini.
Comments
Post a Comment