Dapatkan diskon: Template 50% hanya bulan ini! Beli sekarang! Harga diskon Template: 50% hanya bulan ini!

Cara Membuat Halaman Eror 404 di Blogger

Cara Membuat Halaman Eror 404 di Blogger Images @rian_seo
12 Share
Cara Membuat Halaman Eror 404 di Blogger

Halaman yang eror atau tidak ditemukan di blog benar-benar membosankan bahkan tidak bermanfaat bagi pengunjung blog. Hanya 1% orang lain akan melanjutkan membuka halaman blog kamu yang lainnya, jika mereka mendapati halaman eror 404 di blogspot.

Kenapa hanya 1% saya bilang ada yang mau melanjutkan membuka halaman blog kamu, sebab mereka hanya mendapatkan tulisan yang tidak berguna contohnya " Eror 404" dan ini sama sekali tidak memberi manfaat sedikit pun bagi yang membukanya.

Dalam tulisan kali ini, kami akan membagikan tutorial untuk kamu, bagaimana membuat desain halaman eror 404 di blog agar lebih menarik dan mudah di pahami pengguna.

Tentu cara ini membuat para pengunjung blog kamu tidak merasa jenuh jika mereka membuka halaman eror 404 karena segi tampilannya akan terlihat lebih berbeda.

Untuk kamu yang ingin melakukan percobaan halaman eror 404 di blog kamu, bisa menggunakan alamat https://namablog.com/404/ atau https://rianseo.com/404/

Membuat Desain Halaman Eror 404 di Blog


Seperti biasa, kamu bisa salin kode HTML nya dulu dikotak bawah ini, sebagai kerangka halaman.
<div class="container">
   <p class="textA">Page Not Found</p>
  <p class="textB">404</p>
  <a class="textC" href="#">Go Back</a>
 <svg class="page-not-found" viewBox="0 0 1280 1024">
    <title>Page Not Found</title>
      <g class="hide tri-dots">
         <circle cx="406.1" cy="890.7" r="3.5" transform="translate(-361.3 283) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="426.2" cy="878.8" r="3.7" transform="translate(-353.7 290.8) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="424.4" cy="861.8" r="3.7" transform="translate(-346.1 288.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="445.8" cy="867.7" r="3.7" transform="translate(-346.5 298.5) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="438.3" cy="851.8" r="3.7" transform="translate(-340.1 293.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="453.8" cy="845.8" r="3.7" transform="translate(-335.6 299.8) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="465.2" cy="859" r="3.7" transform="translate(-340.4 306.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="483" cy="849.2" r="3.7" transform="translate(-333.9 313.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="500.6" cy="840.2" r="3.7" transform="translate(-327.9 320.5) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="517.7" cy="831.5" r="3.7" transform="translate(-322 327.3) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="502.8" cy="821" r="3.7" transform="translate(-318.9 319.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="486" cy="829.6" r="3.7" transform="translate(-324.7 312.7) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="469.6" cy="837.8" r="3.7" transform="translate(-330.2 306.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="455.3" cy="825.5" r="3.7" transform="translate(-326.2 298.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="471.5" cy="817.7" r="3.7" transform="translate(-320.9 304.8) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="487.9" cy="810.2" r="3.7" transform="translate(-315.6 311.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="489.8" cy="791.1" r="3.7" transform="translate(-306.7 310.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="473.1" cy="798.2" r="3.7" transform="translate(-311.8 303.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="456.9" cy="805.7" r="3.7" transform="translate(-317 296.8) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="440.5" cy="813.7" r="3.7" transform="translate(-322.5 290.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="442.4" cy="793.8" r="3.7" transform="translate(-313.2 288.9) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="458.6" cy="786" r="3.7" transform="translate(-307.8 295.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="475" cy="779.1" r="3.7" transform="translate(-302.9 302.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="491.8" cy="772.4" r="3.7" transform="translate(-298 309) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="506.6" cy="784" r="3.7" transform="translate(-301.7 317.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="504.6" cy="802.3" r="3.7" transform="translate(-310.2 318.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="519.7" cy="812.9" r="3.7" transform="translate(-313.4 326.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="534.7" cy="822.9" r="3.7" transform="translate(-316.3 334.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="536.8" cy="805.3" r="3.7" transform="translate(-308 333.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="539.2" cy="787.7" r="3.7" transform="translate(-299.8 332.3) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="541.8" cy="770.3" r="3.7" transform="translate(-291.5 331.6) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="559.9" cy="763.5" r="3.7" transform="translate(-286.4 339.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="556.9" cy="780.7" r="3.7" transform="translate(-294.6 339.6) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="554.5" cy="797.9" r="3.7" transform="translate(-302.7 340.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="552" cy="815.2" r="3.7" transform="translate(-310.9 341.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="570.5" cy="807.2" r="3.7" transform="translate(-305.2 348.7) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="572.5" cy="790.5" r="3.7" transform="translate(-297.3 347.8) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="589.7" cy="797.2" r="3.7" transform="translate(-298.5 356.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="590" cy="782.3" r="3.7" transform="translate(-291.7 354.8) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="608.2" cy="784.4" r="3.7" transform="translate(-290.7 363.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="612.4" cy="765.8" r="3.7" transform="translate(-281.7 363.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="627.4" cy="776" r="3.7" transform="translate(-284.7 371.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="630.6" cy="758.5" r="3.7" transform="translate(-276.4 370.8) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="647" cy="766.1" r="3.7" transform="translate(-278 379) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="664.8" cy="756.4" r="3.7" transform="translate(-271.7 386.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="682.7" cy="749.2" r="3.6" transform="translate(-266.4 393.5) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="662.5" cy="737.6" r="3.7" transform="translate(-263.4 383) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="648" cy="747.5" r="3.7" transform="translate(-269.4 377.5) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="643.5" cy="727.1" r="3.7" transform="translate(-260.6 373.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="632.9" cy="740.8" r="3.7" transform="translate(-268.1 369.9) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="620.9" cy="729.6" r="3.7" transform="translate(-264.3 363.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="626.6" cy="714" r="3.7" transform="translate(-256.6 364.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="609.2" cy="701.3" r="3.6" transform="translate(-252.7 354.7) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="606.7" cy="718.2" r="3.7" transform="translate(-260.6 355.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="615.7" cy="747.7" r="3.7" transform="translate(-273.1 362.8) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="602.2" cy="735.1" r="3.7" transform="translate(-268.8 355.3) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="583.1" cy="740.9" r="3.7" transform="translate(-273.6 347.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="597.9" cy="751.8" r="3.7" transform="translate(-276.9 355.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="594.7" cy="767.9" r="3.7" transform="translate(-284.6 355.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="574.7" cy="773.4" r="3.7" transform="translate(-289.3 346.9) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="579.2" cy="757.5" r="3.7" transform="translate(-281.6 347.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="564" cy="747.1" r="3.7" transform="translate(-278.5 339.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="568" cy="730.7" r="3.7" transform="translate(-270.6 339.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="571.9" cy="714.5" r="3.7" transform="translate(-262.8 339.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="587.4" cy="724.6" r="3.7" transform="translate(-265.7 347.3) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="590.7" cy="708.2" r="3.7" transform="translate(-257.8 347) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="591.4" cy="691.3" r="3.7" transform="translate(-250.1 345.5) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="574.1" cy="698.1" r="3.7" transform="translate(-255.1 338.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="574.8" cy="681.2" r="3.7" transform="translate(-247.3 336.8) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="559.1" cy="669.7" r="3.7" transform="translate(-243.8 328.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="558.2" cy="686.9" r="3.7" transform="translate(-251.7 329.9) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="542.7" cy="675.8" r="3.7" transform="translate(-248.3 321.6) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="542.5" cy="658.8" r="3.7" transform="translate(-240.6 319.6) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="526.3" cy="682.4" r="3.7" transform="translate(-253.2 314.8) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="522.2" cy="697.3" r="3.7" transform="translate(-260.4 314.6) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="518.7" cy="713.5" r="3.7" transform="translate(-268.2 314.8) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="533.7" cy="725.5" r="3.7" transform="translate(-272 323) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="537.5" cy="709.2" r="3.7" transform="translate(-264.1 322.9) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="541.1" cy="692.9" r="3.7" transform="translate(-256.4 322.8) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="556.3" cy="703.9" r="3.7" transform="translate(-259.7 330.9) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="552.7" cy="720.2" r="3.7" transform="translate(-267.5 331.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="548.8" cy="736.6" r="3.7" transform="translate(-275.4 331.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="544.9" cy="753.1" r="3.7" transform="translate(-283.3 331.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="530" cy="742.2" r="3.7" transform="translate(-280 323.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="526.7" cy="759.5" r="3.7" transform="translate(-288.3 323.5) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="524" cy="777" r="3.7" transform="translate(-296.5 324.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="521.6" cy="794.8" r="3.7" transform="translate(-304.9 325.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="509" cy="765.9" r="3.7" transform="translate(-293.1 316.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="512" cy="748.1" r="3.7" transform="translate(-284.7 315.5) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="515.2" cy="730.5" r="3.7" transform="translate(-276.3 315.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="501" cy="717.2" r="3.7" transform="translate(-271.8 307.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="487.1" cy="704.7" r="3.7" transform="translate(-267.6 299.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="473" cy="692.5" r="3.7" transform="translate(-263.6 291.7) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="491" cy="685.7" r="3.7" transform="translate(-258.6 299.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="504.9" cy="698.3" r="3.7" transform="translate(-262.8 306.8) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="508.9" cy="678.8" r="3.7" transform="translate(-253.5 306.5) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="509.4" cy="658.3" r="3.7" transform="translate(-244 304.5) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="525.2" cy="666.5" r="3.7" transform="translate(-246 312.6) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="525.8" cy="649.3" r="3.7" transform="translate(-238.1 311) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="510.2" cy="638.9" r="3.7" transform="translate(-235.1 302.7) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="494.3" cy="646.3" r="3.7" transform="translate(-240.2 296.3) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="478.7" cy="654.5" r="3.7" transform="translate(-245.7 290.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="477.7" cy="634.1" r="3.7" transform="translate(-236.5 287.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="493.3" cy="627.1" r="3.7" transform="translate(-231.6 293.7) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="473.7" cy="616.2" r="3.7" transform="translate(-228.8 283.6) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="456.1" cy="605.3" r="3.7" transform="translate(-225.7 274.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="455.7" cy="625.5" r="3.7" transform="translate(-235 276.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="435.9" cy="631.7" r="3.7" transform="translate(-240 268.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="438.4" cy="612.9" r="3.7" transform="translate(-231.2 267.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="438.5" cy="592.7" r="3.7" transform="translate(-221.9 265) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="420" cy="579.2" r="3.2" transform="translate(-217.8 255.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="421.9" cy="600.1" r="3.7" transform="translate(-227.1 258.3) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="419.3" cy="619.8" r="3.6" transform="translate(-236.4 259.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="418.1" cy="640.2" r="3.6" transform="translate(-245.8 260.9) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="431.9" cy="652.7" r="3.7" transform="translate(-250 268.6) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="448" cy="645.9" r="3.7" transform="translate(-245.1 275.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="464.1" cy="642.8" r="3.7" transform="translate(-241.9 282.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="461.6" cy="661.1" r="3.7" transform="translate(-250.6 283) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="493.7" cy="666.7" r="3.7" transform="translate(-249.6 298.3) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="476.4" cy="673.6" r="3.7" transform="translate(-254.7 291.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="458.8" cy="680.1" r="3.7" transform="translate(-259.5 283.8) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="444.8" cy="666.4" r="3.7" transform="translate(-254.8 276) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="428.4" cy="674" r="3.7" transform="translate(-260.1 269.3) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="416.4" cy="661.3" r="3.5" transform="translate(-255.6 262.5) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="412.6" cy="683.2" r="2.9" transform="translate(-266 263.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="424.1" cy="694" r="3.7" transform="translate(-269.7 269.6) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="441.6" cy="686.6" r="3.7" transform="translate(-264.4 276.7) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="436.5" cy="706" r="3.7" transform="translate(-273.8 276.5) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="415.6" cy="709.6" r="3.7" transform="translate(-277.7 267.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="412.9" cy="730.2" r="3.4" transform="translate(-287.4 268.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="412.3" cy="751.3" r="3.6" transform="translate(-297.1 270.5) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="428.8" cy="742.4" r="3.7" transform="translate(-291.2 277) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="430.7" cy="723.3" r="3.7" transform="translate(-282.3 275.8) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="450.4" cy="717.8" r="3.7" transform="translate(-277.7 284.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="455" cy="699.3" r="3.7" transform="translate(-268.7 284.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="469" cy="711.4" r="3.7" transform="translate(-272.7 291.9) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="483.2" cy="723.4" r="3.7" transform="translate(-276.6 299.7) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="479.7" cy="741.7" r="3.7" transform="translate(-285.3 300.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="497.5" cy="735.7" r="3.7" transform="translate(-280.6 307.6) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="494.4" cy="753.9" r="3.7" transform="translate(-289.3 308.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="477" cy="760.1" r="3.7" transform="translate(-294 300.9) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="460" cy="766.8" r="3.7" transform="translate(-298.9 293.9) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="462" cy="748" r="3.7" transform="translate(-290.1 292.7) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="465.1" cy="729.7" r="3.7" transform="translate(-281.5 292.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="446.6" cy="735.7" r="3.7" transform="translate(-286.2 284.4) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="444.7" cy="754.5" r="3.7" transform="translate(-295 285.6) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="443.6" cy="774" r="3.7" transform="translate(-304 287.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="427.5" cy="782.4" r="3.7" transform="translate(-309.6 280.8) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="428.1" cy="762.4" r="3.7" transform="translate(-300.4 278.9) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="412" cy="771.5" r="3.6" transform="translate(-306.3 272.5) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="411" cy="791.3" r="3.7" transform="translate(-315.5 274.3) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="426" cy="802.5" r="3.7" transform="translate(-318.9 282.3) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="410" cy="811.3" r="3.7" transform="translate(-324.7 276) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="423.8" cy="822.7" r="3.7" transform="translate(-328.4 283.6) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="439.3" cy="833.1" r="3.7" transform="translate(-331.4 291.8) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="422.6" cy="842" r="3.7" transform="translate(-337.3 285.1) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="407.1" cy="831.9" r="3.5" transform="translate(-334.4 277) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="407.1" cy="852.7" r="3.5" transform="translate(-343.9 279.2) rotate(-27.1)" style="fill: #ffe029"/>
         <circle cx="408" cy="872.1" r="3.7" transform="translate(-352.6 281.8) rotate(-27.1)" style="fill: #ffe029"/>
      </g>
      <g class="hide spin-circles">
         <path d="M776.3,403.3A151,151,0,0,1,989.8,189.8" style="fill: none;stroke: #00b3ac;stroke-miterlimit: 10;stroke-width: 8px"/>
         <path d="M989.8,189.8A151,151,0,0,1,776.3,403.3" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px"/>
         <path d="M786.9,392.7c-53-53-52.8-138.9.3-192.1s139.1-53.2,192.1-.3" style="fill: none;stroke: #00b3ac;stroke-miterlimit: 10;stroke-width: 8px"/>
         <path d="M979.2,200.4c53,53,52.8,138.9-.3,192.1s-139.1,53.2-192.1.3" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px"/>
         <path d="M797.5,382.1c-46.9-46.9-46.7-123.3.6-170.6s123.6-47.5,170.6-.6" style="fill: none;stroke: #00b3ac;stroke-miterlimit: 10;stroke-width: 8px"/>
         <path d="M968.6,211c46.9,46.9,46.7,123.3-.6,170.6s-123.6,47.5-170.6.6" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px"/>
         <path d="M808.1,371.5c-40.9-40.9-40.6-107.7.8-149.1s108.1-41.8,149.1-.8" style="fill: none;stroke: #00b3ac;stroke-miterlimit: 10;stroke-width: 8px"/>
         <path d="M958,221.6c40.9,40.9,40.6,107.7-.8,149.1s-108.1,41.8-149.1.8" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px"/>
         <path d="M818.7,360.9c-34.9-34.9-34.4-92,1.1-127.6s92.7-36,127.6-1.1" style="fill: none;stroke: #00b3ac;stroke-miterlimit: 10;stroke-width: 8px"/>
         <path d="M947.4,232.2c34.9,34.9,34.4,92-1.1,127.6s-92.7,36-127.6,1.1" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px"/>
         <path d="M829.3,350.3c-28.9-28.9-28.3-76.4,1.4-106.1s77.2-30.3,106.1-1.4" style="fill: none;stroke: #00b3ac;stroke-miterlimit: 10;stroke-width: 8px"/>
         <path d="M936.8,242.8c28.9,28.9,28.3,76.4-1.4,106.1s-77.2,30.3-106.1,1.4" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px"/>
      </g>
      <g class="hide big-white-circle">
       <circle cx="644" cy="482" r="277" style="fill: #fff"/>
      </g>
      <g class="hide grow-circles">
         <circle cx="940" cy="523" r="27" style="fill: #ffe029"/>
         <circle cx="708.5" cy="217.6" r="14.5" transform="translate(-21.2 87.8) rotate(-7)" style="fill: #00b3ac"/>
         <circle cx="725.5" cy="755.6" r="14.5" transform="translate(-86.5 93.8) rotate(-7)" style="fill: #f62c72"/>
         <circle cx="446.9" cy="181.6" r="16.5" transform="translate(-18.8 55.7) rotate(-7)" style="fill: #00b3ac"/>
         <circle cx="314.9" cy="348.6" r="16.5" transform="translate(-40.1 40.9) rotate(-7)" style="fill: #f62c72"/>
         <circle cx="682.6" cy="187.5" r="7.5" transform="translate(-17.7 84.4) rotate(-7)" style="fill: #f62c72"/>
         <circle cx="328.5" cy="500.6" r="7.5" transform="translate(-58.4 43.7) rotate(-7)" style="fill: #fff"/>
         <circle cx="364" cy="439" r="27" style="fill: #ffe029"/>
      </g>
      <g class="box">
         <polygon class="main-container" points="364.4 328.1 888.1 292.8 889.1 635 453.7 698.2 364.4 328.1" style="fill: #fff;stroke: #032c3f;stroke-miterlimit: 10;stroke-width: 24px"/>
         <polygon points="395 285.6 762 258.9 732.7 336.1 431.6 350.2 395 285.6" style="fill: #ffe029"/>
         <polygon points="709.7 622 933.7 622.3 960.9 662.9 931.9 700.1 708.7 699.4 709.7 622" style="fill: #ffe029"/>
      </g>
   
      <g class="hide bottom-triangles">
         <path d="M646.6,741.1,476.8,822.7a8.6,8.6,0,0,1-12.3-8.4l14.3-187.9c.5-6.2,8.4-10,13.5-6.5L647.8,726.2a8.6,8.6,0,0,1-1.1,14.9ZM482.8,800.6,625.7,732,494.8,642.5Z" style="fill: #f62c72"/>
        <path class="hide end-tri" fill="#00b3ac" d="M548.3 732.9l-27.9-104.5L687 671l-138.7 61.9z"/>
    <path class="start-tri" style="transform: translate(5px, -2px)" fill="#00b3ac" d="M477 803l10.7-159L620 734l-144 69z"/>
      </g>
      <g class="hide squiggles">
        <g class="squiggle-bottom">
          <path class="sq-bottom" d="M798,749.1c2.9.1,5.5,2.1,7.1,4.6a33.5,33.5,0,0,1,3.5,8,116.3,116.3,0,0,0,8.3,18.8,7.5,7.5,0,0,0,3,3.4,5.8,5.8,0,0,0,5.1-.5c9.5-5.2,15.4-15.3,24.5-21.2,2.2-1.5,4.9-2.7,7.5-2a9.3,9.3,0,0,1,4.6,3.7c5.8,7.7,7.9,17.5,11.4,26.4,1.1,2.8,2.7,5.8,5.6,6.4s5-1.1,7-2.7c7.9-6.5,14.4-14.7,23-20.3,1.6-1.1,3.5-2.1,5.4-1.7s3.4,2.2,4.6,3.9a67.9,67.9,0,0,1,8.5,18.2c.9,3.2,1.7,6.6,3.5,9.4s5.1,5,8.4,4.5" style="fill: none;stroke: #00b3ac;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 12px"/>
          <g class="dots-bottom">
            <circle cx="802.6" cy="727.5" r="1.6" style="fill: #fff"/>
            <circle cx="799.1" cy="734.8" r="1.5" style="fill: #fff"/>
            <circle cx="809.6" cy="734.3" r="1.6" style="fill: #fff"/>
            <circle cx="807.1" cy="742.3" r="1.6" style="fill: #fff"/>
            <circle cx="814.7" cy="743.8" r="1.6" style="fill: #fff"/>
            <circle cx="810.3" cy="752.5" r="1.4" style="fill: #fff"/>
            <circle cx="818.4" cy="753" r="1.6" style="fill: #fff"/>
            <circle cx="816.3" cy="761.8" r="1.6" style="fill: #fff"/>
            <circle cx="825.5" cy="760.1" r="1.6" style="fill: #fff"/>
            <circle cx="834.1" cy="755.3" r="1.6" style="fill: #fff"/>
            <circle cx="842" cy="756.3" r="1.6" style="fill: #fff"/>
            <circle cx="833.9" cy="764.1" r="1.6" style="fill: #fff"/>
            <circle cx="824.3" cy="768" r="1.6" style="fill: #fff"/>
            <circle cx="873.7" cy="776" r="1.5" style="fill: #fff"/>
            <circle cx="868.8" cy="768.1" r="1.6" style="fill: #fff"/>
            <circle cx="864.2" cy="758.5" r="1.6" style="fill: #fff"/>
            <circle cx="859.9" cy="748.6" r="1.6" style="fill: #fff"/>
            <circle cx="849.6" cy="748.4" r="1.6" style="fill: #fff"/>
            <circle cx="840.7" cy="747.8" r="1.6" style="fill: #fff"/>
            <circle cx="848" cy="741" r="1.6" style="fill: #fff"/>
            <circle cx="856.2" cy="739.4" r="1.6" style="fill: #fff"/>
            <circle cx="864.7" cy="741.4" r="1.6" style="fill: #fff"/>
            <circle cx="868.3" cy="751.1" r="1.6" style="fill: #fff"/>
            <circle cx="872.5" cy="760.6" r="1.6" style="fill: #fff"/>
            <circle cx="879.2" cy="769.2" r="1.6" style="fill: #fff"/>
            <circle cx="882.6" cy="777.5" r="1.5" style="fill: #fff"/>
            <circle cx="889.7" cy="772.1" r="1.6" style="fill: #fff"/>
            <circle cx="888.9" cy="764.3" r="1.6" style="fill: #fff"/>
            <circle cx="897.4" cy="765.2" r="1.6" style="fill: #fff"/>
            <circle cx="896" cy="757.3" r="1.6" style="fill: #fff"/>
            <circle cx="904.7" cy="757.5" r="1.6" style="fill: #fff"/>
            <circle cx="902" cy="749.8" r="1.6" style="fill: #fff"/>
            <circle cx="910.7" cy="749.1" r="1.6" style="fill: #fff"/>
            <circle cx="914.7" cy="759" r="1.6" style="fill: #fff"/>
            <circle cx="918.9" cy="768.5" r="1.6" style="fill: #fff"/>
            <circle cx="923" cy="778.1" r="1.6" style="fill: #fff"/>
            <circle cx="928.3" cy="786.7" r="1.5" style="fill: #fff"/>
            <circle cx="937.4" cy="786.1" r="1.5" style="fill: #fff"/>
            <circle cx="932" cy="778.9" r="1.6" style="fill: #fff"/>
            <circle cx="927.1" cy="770.2" r="1.6" style="fill: #fff"/>
            <circle cx="923.2" cy="761" r="1.6" style="fill: #fff"/>
            <circle cx="918.7" cy="752.1" r="1.6" style="fill: #fff"/>
          </g>
        </g>
        <g class="squiggle-top">
          <path class="sq-top" d="M403.3,245.7c-3.3.5-6.6-1.7-8.4-4.5s-2.6-6.2-3.5-9.4a67.9,67.9,0,0,0-8.5-18.2c-1.1-1.7-2.6-3.5-4.6-3.9s-3.8.6-5.4,1.7c-8.5,5.6-15,13.9-23,20.3-2,1.6-4.5,3.3-7,2.7s-4.5-3.6-5.6-6.4c-3.5-9-5.6-18.7-11.4-26.4a9.3,9.3,0,0,0-4.6-3.7c-2.6-.7-5.3.5-7.5,2-9.1,5.9-15,16-24.5,21.2a5.8,5.8,0,0,1-5.1.5,7.5,7.5,0,0,1-3-3.4,116.3,116.3,0,0,1-8.3-18.8,33.5,33.5,0,0,0-3.5-8c-1.6-2.4-4.2-4.4-7.1-4.6" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 12px"/>
          <g class="dots-top">
            <circle cx="389" cy="270.1" r="1.5" transform="matrix(0.03, -1, 1, 0.03, 106.66, 650.38)" style="fill: #fff"/>
            <circle cx="392.7" cy="263.2" r="1.5" transform="translate(117.1 647.4) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="382.4" cy="263.4" r="1.5" transform="translate(107.1 637.2) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="385.1" cy="255.6" r="1.5" transform="translate(117.4 632.4) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="377.8" cy="254" r="1.5" transform="translate(112 623.5) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="382.3" cy="245.6" r="1.4" transform="translate(124.6 619.9) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="374.4" cy="244.9" r="1.5" transform="matrix(0.03, -1, 1, 0.03, 117.75, 611.44)" style="fill: #fff"/>
            <circle cx="376.7" cy="236.4" r="1.5" transform="translate(128.5 605.5) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="367.8" cy="237.8" r="1.5" transform="translate(118.4 597.9) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="359.3" cy="242.3" r="1.5" transform="translate(105.7 593.7) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="351.6" cy="241" r="1.5" transform="translate(99.6 584.7) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="359.8" cy="233.6" r="1.5" transform="translate(114.8 585.8) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="369.2" cy="230.2" r="1.5" transform="translate(127.4 591.9) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="321.4" cy="220.9" r="1.5" transform="translate(90.4 535.2) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="326" cy="228.7" r="1.5" transform="translate(87 547.3) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="330.1" cy="238.2" r="1.5" transform="translate(81.5 560.5) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="334" cy="248" r="1.5" transform="translate(75.6 573.9) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="344" cy="248.5" r="1.5" transform="translate(84.8 584.4) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="352.6" cy="249.3" r="1.5" transform="translate(92.2 593.8) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="345.4" cy="255.7" r="1.5" transform="translate(78.8 592.8) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="337.3" cy="257" r="1.5" transform="translate(69.7 585.9) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="329.1" cy="254.8" r="1.5" transform="translate(64 575.6) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="325.9" cy="245.2" r="1.5" transform="translate(70.4 563.2) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="322.1" cy="235.9" r="1.5" transform="translate(76.1 550.4) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="315.9" cy="227.3" r="1.5" transform="translate(78.7 535.9) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="312.8" cy="219.2" r="1.5" transform="translate(83.8 524.9) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="305.8" cy="224.2" r="1.5" transform="matrix(0.03, -1, 1, 0.03, 71.97, 522.7)" style="fill: #fff"/>
            <circle cx="306.3" cy="231.9" r="1.5" transform="translate(64.9 530.7) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="298.1" cy="230.7" r="1.5" transform="translate(58 521.3) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="299.2" cy="238.4" r="1.5" transform="translate(51.4 529.9) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="290.7" cy="238" r="1.5" transform="matrix(0.03, -1, 1, 0.03, 43.62, 520.99)" style="fill: #fff"/>
            <circle cx="293.1" cy="245.5" r="1.5" transform="translate(38.4 530.7) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="284.6" cy="245.9" r="1.5" transform="translate(29.8 522.6) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="281.1" cy="236.2" r="1.5" transform="translate(36.1 509.7) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="277.3" cy="226.8" r="1.5" transform="translate(41.8 496.8) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="273.6" cy="217.4" r="1.5" transform="matrix(0.03, -1, 1, 0.03, 47.66, 483.94)" style="fill: #fff"/>
            <circle cx="268.7" cy="208.9" r="1.4" transform="translate(51.4 470.8) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="259.8" cy="209.2" r="1.5" transform="translate(42.5 462.2) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="264.8" cy="216.4" r="1.5" transform="translate(40.1 474.2) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="269.4" cy="224.9" r="1.5" transform="translate(36 487) rotate(-88.2)" style="fill: #fff"/>
            <circle cx="272.8" cy="234" r="1.5" transform="matrix(0.03, -1, 1, 0.03, 30.27, 499.33)" style="fill: #fff"/>
            <circle cx="277" cy="242.8" r="1.5" transform="translate(25.5 512) rotate(-88.2)" style="fill: #fff"/>
          </g>
        </g>
      </g>
      <g class="hide grow-crosshairs">
        <path d="M983.1,582.2h-9v-9a5.9,5.9,0,0,0-11.9,0v9h-9a5.9,5.9,0,1,0,0,11.9h9v9a5.9,5.9,0,0,0,11.9,0v-9h9a5.9,5.9,0,0,0,0-11.9Z" style="fill: #f62c72"/>
        <path d="M997,452.5h-6.2v-6.2a4.1,4.1,0,0,0-8.2,0v6.2h-6.2a4.1,4.1,0,0,0,0,8.2h6.2v6.2a4.1,4.1,0,1,0,8.2,0v-6.2H997a4.1,4.1,0,1,0,0-8.2Z" style="fill: #fff"/>
        <path d="M382.4,704.4h-5.6v-5.6a3.7,3.7,0,0,0-7.3,0v5.6h-5.6a3.7,3.7,0,1,0,0,7.3h5.6v5.6a3.7,3.7,0,1,0,7.3,0v-5.6h5.6a3.7,3.7,0,0,0,0-7.3Z" style="fill: #fff"/>
        <path d="M363.3,137.4h-5.6v-5.6a3.7,3.7,0,1,0-7.3,0v5.6h-5.6a3.7,3.7,0,1,0,0,7.3h5.6v5.6a3.7,3.7,0,1,0,7.3,0v-5.6h5.6a3.7,3.7,0,1,0,0-7.3Z" style="fill: #fff"/>
      </g>
      <g class="hide left-lines">
        <line x1="381.1" y1="507.1" x2="272.1" y2="598" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/>
        <line x1="384.1" y1="521.1" x2="275.1" y2="611.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/>
        <line x1="387.2" y1="535.1" x2="278.2" y2="625.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/>
        <line x1="390.2" y1="549.1" x2="281.2" y2="639.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/>
        <line x1="393.2" y1="563.1" x2="284.2" y2="653.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/>
        <line x1="396.3" y1="577.1" x2="287.3" y2="667.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/>
        <line x1="399.3" y1="591" x2="290.3" y2="681.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/>
        <line x1="402.3" y1="605" x2="293.3" y2="695.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/>
        <line x1="405.4" y1="619" x2="296.4" y2="709.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/>
      </g>
      <g class="hide top-triangles">
        <polygon points="593 168.6 659.5 244.5 497.1 255.2 593 168.6" style="fill: #f62c72"/>
        <polyline points="659.5 234.5 657.3 213.9 590.7 138 494.8 224.6 497.1 245.2 497.1 245.2 593 158.6 659.5 234.5" style="fill: #ffe029"/>
      </g>
      <g class="hide words">
        <text transform="translate(471.5 329.1) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">P</text>
        <text transform="translate(486.4 328.4) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">A</text>
        <text transform="translate(502.6 327.5) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">G</text>
        <text transform="matrix(1, -0.05, 0.05, 1, 521.22, 326.59)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">E</text>
        <text transform="matrix(1, -0.05, 0.05, 1, 535.73, 325.85)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura"> </text>
        <text transform="matrix(1, -0.05, 0.05, 1, 544, 325.43)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">N</text>
        <text transform="translate(562.7 324.5) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">O</text>
        <text transform="translate(582.1 323.5) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">T</text>
        <text transform="matrix(1, -0.05, 0.05, 1, 595.15, 322.83)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura"> </text>
        <text transform="translate(603.4 322.4) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">F</text>
        <text transform="translate(617.5 321.7) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">O</text>
        <text transform="translate(636.6 320.7) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">U</text>
        <text transform="translate(655.1 319.8) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">N</text>
        <text transform="matrix(1, -0.05, 0.05, 1, 673.8, 318.83)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">D</text>
        <text transform="translate(742 682.9)" style="font-size: 60px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">GO <tspan x="69.1" y="0" style="letter-spacing: 0.0029296875em">B</tspan><tspan x="94" y="0" style="letter-spacing: -0.0068359375em">A</tspan><tspan x="118" y="0">CK</tspan></text>
        <text transform="translate(479.2 549.5)" style="font-size: 180px;fill: #032c3f;font-family: Futura-CondensedExtraBold, Futura;font-weight: 700">4<tspan x="108.3" y="0" style="letter-spacing: -0.0009765625em">0</tspan><tspan x="216.4" y="0">4</tspan></text>
      </g>
    </svg>
</div>
Letakan kode HTML ini, tepat dibagian bawah kode </head> Jika tidak bisa, ganti posisi letakan kodenya di atas kode </head> Biasanya setiap template blogger memiliki perbedaan.

Salin lagi kode CSS dibawah ini, sebagai pendukung tampilan agar lebih keren.
body {
    height: 100vh;
    background: #88DCD5;
    display: grid;
  font-family: 'Roboto Condensed', sans-serif;
}
.container {
  position: relative;
  height: 600px;
  width: 750px;
  margin: auto;
}

.container svg {
  height: 100%;
}
p, a {
    margin: 0;
    position: absolute;
    text-decoration: none;
    text-transform: uppercase;
    color: #032C3F;
    font-size: 24px;
  }
 .textA {
    top: 169px;
    left: 257px;
    transform: rotate(-3deg);
  }
  .textB {
    font-weight: 700;
    font-size: 135px;
    top: 209px;
    left: 273px;
    transform: rotate(-2deg);
  }
  .textC {
    top: 370px;
    left: 428px;
    font-size: 30px;
    transform: rotate(1deg);
  }
Klik SIMPAN tema, dan cek tampilannya menggunakan link seperti contoh halaman eror 404 yang saya jelaskan diatas tadi.


Design by Jaimey Rosen
Kode HTML / CSS / JavaScript
Browser Chrome, Edge, Firefox, Opera, Safari

Dibawah ini juga ada beberapa tampilan design halaman eror 404 yang sudah kami kumpulkan dari berbagai macam nara sumber dan pastinya bisa digunakan untuk blog versi Blogspot.

Kumpulan Contoh Design Halaman Eror 404 Blog



See the Pen 404 Page by Andrew Lawendy (@andrew-lawendy) on CodePen.

See the Pen 404 Animated Page by Vincent Van Goggles (@Gogh) on CodePen.

See the Pen 404 Error Example #3 by Ricardo Prieto (@ricardpriet) on CodePen.


See the Pen Hacker themed error page by Robin Selmer (@robinselmer) on CodePen.

See the Pen Bubbley 404 by Kyle Lavery (@kylelavery88) on CodePen.

See the Pen Error page by Kyle Lavery (@kylelavery88) on CodePen.

See the Pen Black Hole 404 - Lost In Space by Kyle Lavery (@kylelavery88) on CodePen.

See the Pen 404 page Animation by Dany Santos (@THEORLAN2) on CodePen.

See the Pen 404 Page by Saransh Sinha (@saransh) on CodePen.

See the Pen Simple Pure CSS3 404 Error Page by Enrico Chiaromonte (@chiaren) on CodePen.

See the Pen 404 page (based on a dribbble shot) by Irem Lopsum (@iremlopsum) on CodePen.

Cara menggunakannya sama saja seperti pada langkah contoh pertama tadi, kamu hanya perlu menyalin kode HTML, CSS dan JavaScript yang ada di kolom kotak codepen.

Infirasi dari freefrontend.com/html-css-404-page-templates/


Akhir Kata


Jika ada pertanyaan maupun eror dalam pemasangan jangan lupa untuk menulis komentarnya agar bisa kami bantu.

Lebih dari itu, sampai disini saja tutorial yang dapat kami sampaikan tentang design halaman eror 404 yang bisa digunakan kehalaman blog, Jangan lupa juga follow blog ini untuk bisa mendapatkan beberapa informasi menariknya yang terkait dengan dunia blogging.
Bagaimana reaksi Anda tentang artikel ini?
Previous article
Next article

Komentar (0)

Post a Comment

Kami memiliki kebijakan dalam berkomentar di blog ini :

- Dilarang promosi suatu barang
- Dilarang memasang link aktif di komentar
- Dilarang promosi iklan yang berbau judi, pornografi dan kekerasan
- Dilarang menulis komentar yang berisi sara atau cemuhan

Kebijakan komentar yang bisa Anda temukan selengkapnya disini

Dukungan :

Jika menyukai dengan artikel blog kami, silahkan subscribe blog ini

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Subscribe now

Signup now to my exclusive newsletter