Skip to content

Instantly share code, notes, and snippets.

@thaycacac

thaycacac/slider-home.vue

Created October 17, 2021 10:27
Show Gist options
  • Save thaycacac/a2f99352a97c763d01609f251c212578 to your computer and use it in GitHub Desktop.
Save thaycacac/a2f99352a97c763d01609f251c212578 to your computer and use it in GitHub Desktop.
Download ZIP
KungFu Tech
Raw
slider-home.vue
<template>
<div class="container">
<header class="header">
<el-row :gutter="30">
<el-col :sm="24" :md="24" :lg="14" class="header__left">
<h1 class="header__left__title">
Học lập trình
<span class="header__left__title--blue">Ngay từ ngày hôm nay</span>
</h1>
<p class="header__left__description">
Đã qua rồi cái thời mà ngôn ngữ lập trình chỉ dành cho những lập
trình viên bậc thầy giống như Bill Gates, thời đại bây giờ bất cứ ai
cũng có thể có khả năng, cơ hội để học và thành thạo ngôn ngữ lập
trình một cách dễ dàng. KungFu Tech là một trang web hữu ích cho
những ai đam mê tìm hiểu về thứ ngôn ngữ này.
</p>
<div class="flex">
<nuxt-link to="/tang-kinh-cac">
<button class="button button--blog">Xem thêm</button>
</nuxt-link>
<a
href="https://www.youtube.com/c/techmely"
target="_blank"
rel="noopener"
>
<button class="button button--academy">
<img
class="button__icon"
src="@/modules/home/assets/images/icon-video.svg"
alt="icon video"
/>
Xem khóa học
</button>
</a>
</div>
</el-col>
<el-col :sm="24" :md="24" :lg="10" class="header__right">
<svg
width="413.3"
height="382.2"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g>
<path
id="background"
fill="url(#svg_96)"
d="m400.49749,203.30251c-5.3,52.2 32,109.4 -14.9,150.1c-34.1,29.6 -80.3,30.4 -115.8,20c-54.1,-15.9 -103,11.9 -155.1,-0.8c-55.7,-13.7 -98,-71.6 -107.9,-130.9c-10.6,-63.1 15.4,-116.3 65.4,-149.6c24.9,-16.6 53.2,-23.6 79.4,-36.8c29.1,-14.7 45.5,-17.7 74,-33c51.4,-27.6 125.1,-28.1 160,32.2c29.7,51.3 20.6,93.3 14.9,148.8z"
/>
<path
id="svg_1"
fill="#FFFFFF"
d="m321.9,32.7l0,3.7l-3.7,0c-1.3,0 -2.3,1 -2.3,2.3l0,0.1c0,1.3 1,2.3 2.3,2.3l3.7,0l0,3.7c0,1.3 1,2.3 2.3,2.3l0.1,0c1.3,0 2.3,-1 2.3,-2.3l0,-3.7l3.7,0c1.3,0 2.3,-1 2.3,-2.3l0,-0.1c0,-1.3 -1,-2.3 -2.3,-2.3l-3.7,0l0,-3.7c0,-1.3 -1,-2.3 -2.3,-2.3l-0.1,0c-1.2,0 -2.3,1 -2.3,2.3z"
class="star star-1 origin-center"
/>
<path
id="svg_2"
fill="#ffffff"
d="m56.5,213.3l0,2.8l-2.8,0c-1,0 -1.8,0.8 -1.8,1.8l0,0.1c0,1 0.8,1.8 1.8,1.8l2.8,0l0,2.8c0,1 0.8,1.8 1.8,1.8l0.1,0c1,0 1.8,-0.8 1.8,-1.8l0,-2.8l2.8,0c1,0 1.8,-0.8 1.8,-1.8l0,-0.1c0,-1 -0.8,-1.8 -1.8,-1.8l-2.8,0l0,-2.8c0,-1 -0.8,-1.8 -1.8,-1.8l-0.1,0c-1,0 -1.8,0.8 -1.8,1.8z"
class="star star-2 origin-center"
/>
<g id="svg_3" class="graph hover origin-center">
<rect
id="XMLID_269_"
fill="#FFFFFF"
height="135.9"
width="96.1"
transform="matrix(0.4119 -0.9112 0.9112 0.4119 71.9975 332.734)"
y="42.6"
x="245.7"
/>
<g id="XMLID_250_">
<g id="XMLID_93_">
<rect
id="XMLID_101_"
fill="#38b2ac"
height="1.5"
width="6.7"
transform="matrix(0.4124 -0.911 0.911 0.4124 85.7071 350.9)"
y="108.01442"
x="311.37072"
/>
<rect
id="XMLID_100_"
fill="#38b2ac"
height="9.3"
width="1.6"
transform="matrix(0.4119 -0.9112 0.9112 0.4119 73.6161 368.077)"
y="122.11434"
x="321.07087"
/>
<rect
id="XMLID_99_"
fill="#38b2ac"
height="1.5"
width="6.7"
transform="matrix(0.4123 -0.911 0.911 0.4123 61.3995 385.062)"
y="143.91439"
x="325.67074"
/>
<rect
id="XMLID_98_"
fill="#38b2ac"
height="1.5"
width="6.7"
transform="matrix(0.4115 -0.9114 0.9114 0.4115 57.0848 355.456)"
y="132.51429"
x="300.271"
/>
<rect
id="XMLID_97_"
fill="#38b2ac"
height="1.5"
width="6.7"
transform="matrix(0.4121 -0.9111 0.9111 0.4121 79.7722 310.837)"
y="92.61437"
x="277.27081"
/>
<rect
id="XMLID_96_"
fill="#38b2ac"
height="1.5"
width="6.7"
transform="matrix(0.4113 -0.9115 0.9115 0.4113 91.4917 289.18)"
y="72.71426"
x="266.17107"
/>
<rect
id="XMLID_95_"
fill="#38b2ac"
height="1.5"
width="6.7"
transform="matrix(0.4116 -0.9114 0.9114 0.4116 58.2186 314.162)"
y="110.91431"
x="268.97098"
/>
<rect
id="XMLID_94_"
fill="#38b2ac"
height="9"
width="1.5"
transform="matrix(0.4107 -0.9118 0.9118 0.4107 41.698 301.793)"
y="113.81418"
x="253.47126"
/>
</g>
</g>
<rect
id="XMLID_249_"
fill="#38b2ac"
height="92.9"
width="6.7"
transform="matrix(0.4119 -0.9112 0.9112 0.4119 90.0528 329.978)"
y="48.8"
x="297.3"
/>
<rect
id="XMLID_248_"
fill="#FFFFFF"
height="13.9"
width="1.5"
transform="matrix(0.4121 -0.9111 0.9111 0.4121 96.0389 369.834)"
y="103.5"
x="333.9"
/>
<rect
id="XMLID_247_"
fill="#285e61"
height="18.6"
width="6.7"
transform="matrix(0.4119 -0.9112 0.9112 0.4119 93.0986 349.969)"
y="93.6"
x="314.3"
/>
<rect
id="XMLID_246_"
fill="#FFFFFF"
height="13.9"
width="1.5"
transform="matrix(0.4123 -0.911 0.911 0.4123 92.9673 349.8214)"
y="95.9"
x="316.9"
/>
<rect
id="XMLID_245_"
fill="#FFFFFF"
height="13.9"
width="1.5"
transform="matrix(0.4128 -0.9108 0.9108 0.4128 89.9377 329.8427)"
y="88.2"
x="300"
/>
<rect
id="XMLID_244_"
fill="#FFFFFF"
height="13.9"
width="1.5"
transform="matrix(0.412 -0.9112 0.9112 0.412 87.1145 310.0597)"
y="80.6"
x="283"
/>
<rect
id="XMLID_243_"
fill="#FFFFFF"
height="13.9"
width="1.5"
transform="matrix(0.4125 -0.9109 0.9109 0.4125 84.0239 290.089)"
y="73"
x="266.2"
/>
<rect
id="XMLID_242_"
fill="#38b2ac"
height="18.6"
width="20.2"
transform="matrix(0.4119 -0.9112 0.9112 0.4119 71.4553 353.184)"
y="111.9"
x="299.3"
/>
<rect
id="XMLID_241_"
fill="#38b2ac"
height="18.6"
width="13.5"
transform="matrix(0.4118 -0.9113 0.9113 0.4118 68.9978 312.5)"
y="93.5"
x="269.8"
/>
<rect
id="XMLID_240_"
fill="#38b2ac"
height="18.6"
width="6.7"
transform="matrix(0.4119 -0.9112 0.9112 0.4119 39.249 286.659)"
y="103.6"
x="238.4"
/>
<rect
id="XMLID_239_"
fill="#38b2ac"
height="18.6"
width="13.5"
transform="matrix(0.4119 -0.9112 0.9112 0.4119 50.6249 386.827)"
y="144.9"
x="318.3"
/>
<rect
id="XMLID_238_"
fill="#285e61"
height="18.6"
width="20.2"
transform="matrix(0.4119 -0.9112 0.9112 0.4119 75.8324 383.061)"
y="123.5"
x="324.6"
/>
<rect
id="XMLID_237_"
fill="#38b2ac"
height="18.6"
width="6.7"
transform="matrix(0.4119 -0.9112 0.9112 0.4119 49.7324 356.418)"
y="130.4"
x="297.6"
/>
<rect
id="XMLID_236_"
fill="#285e61"
height="18.6"
width="6.7"
transform="matrix(0.4118 -0.9113 0.9113 0.4118 98.628 288.01)"
y="58.3"
x="269.1"
/>
<rect
id="XMLID_235_"
fill="#285e61"
height="18.6"
width="20.2"
transform="matrix(0.4119 -0.9112 0.9112 0.4119 43.7887 316.26)"
y="114.9"
x="256.8"
/>
<rect
id="XMLID_234_"
fill="#FFFFFF"
height="13.9"
width="1.5"
transform="matrix(0.4119 -0.9112 0.9112 0.4119 98.6263 288.06)"
y="60.7"
x="271.7"
/>
<rect
id="XMLID_233_"
fill="#FFFFFF"
height="13.9"
width="1.5"
transform="matrix(0.4119 -0.9112 0.9112 0.4119 39.2577 286.713)"
y="106"
x="241"
/>
<g id="XMLID_226_">
<g id="XMLID_28_">
<rect
id="XMLID_30_"
fill="#FFFFFF"
height="13.9"
width="1.5"
transform="matrix(0.412 -0.9112 0.9112 0.412 72.5628 311.9624)"
y="92.8"
x="277.2"
/>
<rect
id="XMLID_29_"
fill="#FFFFFF"
height="6.7"
width="1.5"
transform="matrix(0.4119 -0.9112 0.9112 0.4119 65.4119 313.0918)"
y="102.5"
x="274.5"
/>
</g>
</g>
<g id="XMLID_219_">
<g id="XMLID_24_">
<rect
id="XMLID_26_"
fill="#FFFFFF"
height="13.9"
width="1.5"
transform="matrix(0.4118 -0.9113 0.9113 0.4118 54.2547 386.349)"
y="144.2"
x="325.7"
/>
<rect
id="XMLID_25_"
fill="#FFFFFF"
height="8.2"
width="1.5"
transform="matrix(0.4117 -0.9113 0.9113 0.4117 46.5129 384.4148)"
y="152.1"
x="320.3"
/>
</g>
</g>
<g id="XMLID_206_">
<g id="XMLID_57_">
<rect
id="XMLID_62_"
fill="#FFFFFF"
height="13.9"
width="1.5"
transform="matrix(0.4118 -0.9113 0.9113 0.4118 50.9099 315.2299)"
y="111.2"
x="268.9"
/>
<rect
id="XMLID_61_"
fill="#FFFFFF"
height="7.7"
width="1.5"
transform="matrix(0.4119 -0.9112 0.9112 0.4119 44.2502 319.6504)"
y="121.7"
x="269"
/>
<rect
id="XMLID_60_"
fill="#FFFFFF"
height="3.9"
width="1.5"
transform="matrix(0.4116 -0.9114 0.9114 0.4116 42.9271 310.9171)"
y="120.3"
x="261.5"
/>
<rect
id="XMLID_59_"
fill="#FFFFFF"
height="3.6"
width="1.5"
transform="matrix(0.4116 -0.9114 0.9114 0.4116 36.8031 318.8437)"
y="129.1"
x="264.6"
/>
<rect
id="XMLID_58_"
fill="#FFFFFF"
height="5.5"
width="1.5"
transform="matrix(0.4121 -0.9111 0.9111 0.4121 35.7766 312.8042)"
y="125.9"
x="259.5"
/>
</g>
</g>
<rect
d="XMLID_205_"
fill="#FFFFFF"
height="13.9"
width="1.5"
transform="matrix(0.4118 -0.9113 0.9113 0.4118 49.75 356.48)"
y="132.8"
x="300.3"
i
/>
<g id="XMLID_194_">
<g id="XMLID_44_">
<rect
id="XMLID_48_"
fill="#FFFFFF"
height="7"
width="1.5"
transform="matrix(0.412 -0.9112 0.9112 0.412 79.1662 355.7488)"
y="113"
x="314.5"
/>
<rect
id="XMLID_47_"
fill="#FFFFFF"
height="4.9"
width="1.5"
transform="matrix(0.4117 -0.9113 0.9113 0.4117 77.9332 347.2859)"
y="110.8"
x="307.2"
/>
<rect
id="XMLID_46_"
fill="#FFFFFF"
height="13.9"
width="1.5"
transform="matrix(0.4119 -0.9112 0.9112 0.4119 71.4062 353.1403)"
y="114.3"
x="308.5"
/>
<rect
id="XMLID_45_"
fill="#FFFFFF"
height="9.8"
width="1.5"
transform="matrix(0.4119 -0.9112 0.9112 0.4119 63.8432 352.0443)"
y="121.7"
x="303.9"
/>
</g>
</g>
<g id="XMLID_183_">
<g id="XMLID_38_">
<rect
id="XMLID_42_"
fill="#FFFFFF"
height="13.9"
width="1.6"
transform="matrix(0.4119 -0.9112 0.9112 0.4119 83.111 382.0013)"
y="119.7"
x="336.7"
/>
<rect
id="XMLID_41_"
fill="#FFFFFF"
height="8.5"
width="1.6"
transform="matrix(0.4118 -0.9113 0.9113 0.4118 75.4512 380.1302)"
y="127.4"
x="331.4"
/>
<rect
id="XMLID_40_"
fill="#FFFFFF"
height="3.6"
width="1.5"
transform="matrix(0.4116 -0.9114 0.9114 0.4116 76.7817 388.6273)"
y="133.1"
x="338.6"
/>
<rect
id="XMLID_39_"
fill="#FFFFFF"
height="6.2"
width="1.5"
transform="matrix(0.4119 -0.9112 0.9112 0.4119 68.0068 379.9977)"
y="134.2"
x="327.7"
/>
</g>
</g>
</g>
<g id="svg_4" class="laptop">
<path
id="XMLID_181_"
fill="url(#svg_95)"
d="m106.5,213.02381l0,112.6c0,2.5 1,5 2.9,6.9s4.4,2.9 6.9,2.9l189.1,0c2.5,0 5,-1 6.9,-2.9s2.9,-4.4 2.9,-6.9l0,-112.6l-208.7,0z"
/>
<path
id="XMLID_180_"
fill="url(#svg_98)"
d="m236.8,327.02381c0,0.4 -0.4,0.8 -0.8,0.8l-50.3,0c-0.4,0 -0.8,-0.4 -0.8,-0.8l0,-29.8c0,-0.4 0.3,-0.8 0.8,-0.8l50.3,0c0.4,0 0.8,0.4 0.8,0.8l0,29.8z"
/>
<path
id="XMLID_112_"
fill="url(#svg_94)"
d="m116.3,90.62381c-2.5,0 -5,1 -6.9,2.9s-2.9,4.4 -2.9,6.9l0,112.6l208.7,0l0,-112.6c0,-2.5 -1,-5 -2.9,-6.9s-4.4,-2.9 -6.9,-2.9l-189.1,0z"
/>
<path
id="XMLID_111_"
fill="url(#svg_103)"
d="m213.2,96.02381c0,1.3 -1,2.4 -2.3,2.4s-2.3,-1.1 -2.3,-2.4s1,-2.3 2.3,-2.3c1.2,0 2.3,1 2.3,2.3z"
/>
<path
id="XMLID_110_"
stroke="null"
fill="#FFFFFF"
d="m211.8,96.02381c0,0.5 -0.4,1 -1,1c-0.5,0 -1,-0.4 -1,-1c0,-0.5 0.4,-0.9 1,-0.9c0.6,0 1,0.4 1,0.9z"
/>
<rect
id="XMLID_109_"
stroke="null"
fill="url(#svg_100)"
height="8.8"
width="13.7"
y="208.62381"
x="295.9"
/>
<rect
id="XMLID_108_"
fill="#234e52"
height="4.4"
width="13.7"
y="213.02381"
x="295.9"
/>
<rect
id="XMLID_107_"
fill="url(#svg_99)"
height="8.8"
width="13.7"
y="208.62381"
x="112"
/>
<rect
id="XMLID_106_"
fill="#234e52"
height="4.4"
width="13.7"
y="213.02381"
x="112"
/>
<polygon
id="XMLID_105_"
fill="url(#svg_107)"
points="210.8000030517578,102.82381674647331 210.8000030517578,102.82381674647331 118.9000015258789,102.82381674647331 118.9000015258789,200.8238167464733 210.8000030517578,200.8238167464733 210.8000030517578,200.8238167464733 302.79998779296875,200.8238167464733 302.79998779296875,102.82381674647331 "
/>
</g>
<g id="svg_5" class="keyboard">
<path
id="XMLID_179_"
fill="#FFFFFF"
d="m129.4,235.6c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_178_"
fill="#FFFFFF"
d="m148.7,248.5c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="svg_6"
fill="#FFFFFF"
d="m151.8,261.3c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
class="key-a key-11"
/>
<path
id="XMLID_176_"
fill="#FFFFFF"
d="m145.5,274.1c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_175_"
fill="#FFFFFF"
d="m129.4,288.6c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-10.9c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,10.9z"
/>
<path
id="XMLID_174_"
fill="#FFFFFF"
d="m142.2,288.6c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-10.9c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,10.9z"
/>
<path
id="XMLID_173_"
fill="#FFFFFF"
d="m155,288.6c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-10.9c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,10.9z"
/>
<path
id="XMLID_172_"
fill="#FFFFFF"
d="m264.3,288.6c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-10.9c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,10.9z"
/>
<path
id="XMLID_171_"
fill="#FFFFFF"
d="m277.1,288.6c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-4.9c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,4.9z"
/>
<path
id="XMLID_170_"
fill="#FFFFFF"
d="m302.8,288.6c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-4.9c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,4.9z"
/>
<path
id="XMLID_169_"
fill="#FFFFFF"
d="m171.1,288.6c0,0.3 -0.3,0.6 -0.6,0.6l-12.7,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-10.9c0,-0.3 0.3,-0.6 0.6,-0.6l12.7,0c0.3,0 0.6,0.3 0.6,0.6l0,10.9z"
/>
<path
id="XMLID_168_"
fill="#FFFFFF"
d="m251.5,288.6c0,0.3 -0.3,0.6 -0.6,0.6l-12.7,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-10.9c0,-0.3 0.3,-0.6 0.6,-0.6l12.7,0c0.3,0 0.6,0.3 0.6,0.6l0,10.9z"
/>
<path
id="svg_7"
fill="#FFFFFF"
d="m235.3,288.6c0,0.3 -0.3,0.6 -0.6,0.6l-60.6,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-10.9c0,-0.3 0.3,-0.6 0.6,-0.6l60.6,0c0.3,0 0.6,0.3 0.6,0.6l0,10.9l0,0z"
class="key-space key-12"
/>
<path
id="XMLID_166_"
fill="#FFFFFF"
d="m158.3,274.1c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="svg_8"
fill="#FFFFFF"
d="m171.1,274.1c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
class="key-x key-8"
/>
<path
id="svg_9"
fill="#FFFFFF"
d="m184,274.1c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="svg_10"
fill="#FFFFFF"
d="m196.8,274.1c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="svg_11"
fill="#FFFFFF"
d="m209.6,274.1c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
class="key-b key-3"
/>
<path
id="svg_12"
fill="#FFFFFF"
d="m222.5,274.1c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="svg_13"
fill="#FFFFFF"
d="m235.3,274.1c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_159_"
fill="#FFFFFF"
d="m248.1,274.1c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_158_"
fill="#FFFFFF"
d="m260.9,274.1c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_157_"
fill="#FFFFFF"
d="m273.8,274.1c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_156_"
fill="#FFFFFF"
d="m302.8,274.1c0,0.3 -0.3,0.6 -0.6,0.6l-25.4,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l25.4,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="svg_14"
fill="#FFFFFF"
d="m164.6,261.3c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="svg_15"
fill="#FFFFFF"
d="m177.4,261.3c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
class="key-d key-5"
/>
<path
id="svg_16"
fill="#FFFFFF"
d="m190.3,261.3c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="svg_17"
fill="#FFFFFF"
d="m203.1,261.3c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
class="key-g key-2"
/>
<path
id="svg_18"
fill="#FFFFFF"
d="m215.9,261.3c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3l0,0z"
/>
<path
id="svg_19"
fill="#FFFFFF"
d="m228.7,261.3c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
class="key-j key-9"
/>
<path
id="svg_20"
fill="#FFFFFF"
d="m241.6,261.3c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="svg_21"
fill="#FFFFFF"
d="m254.4,261.3c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
class="key-l key-6"
/>
<path
id="XMLID_147_"
fill="#FFFFFF"
d="m267.2,261.3c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_146_"
fill="#FFFFFF"
d="m280,261.3c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_145_"
fill="#FFFFFF"
d="m292.9,261.3c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="svg_22"
fill="#FFFFFF"
d="m161.6,248.5c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
class="key-w key-1"
/>
<path
id="svg_23"
fill="#FFFFFF"
d="m174.4,248.5c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="svg_24"
fill="#FFFFFF"
d="m187.2,248.5c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
class="key-r key-4"
/>
<path
id="svg_25"
fill="#FFFFFF"
d="m200,248.5c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_140_"
fill="#FFFFFF"
d="m212.9,248.5c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="svg_26"
fill="#FFFFFF"
d="m225.7,248.5c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="svg_27"
fill="#FFFFFF"
d="m238.5,248.5c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
class="key-i key-7"
/>
<path
id="svg_28"
fill="#FFFFFF"
d="m251.4,248.5c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="svg_29"
fill="#FFFFFF"
d="m264.2,248.5c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_135_"
fill="#FFFFFF"
d="m277,248.5c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_134_"
fill="#FFFFFF"
d="m289.8,248.5c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_133_"
fill="#FFFFFF"
d="m135.9,248.5c0,0.3 -0.3,0.6 -0.6,0.6l-15.8,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l15.8,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_132_"
fill="#FFFFFF"
d="m302.8,235.6c0,0.3 -0.3,0.6 -0.6,0.6l-15.8,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l15.8,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_131_"
fill="#FFFFFF"
d="m139,261.3c0,0.3 -0.3,0.6 -0.6,0.6l-18.8,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l18.8,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_130_"
fill="#FFFFFF"
d="m132.7,274.1c0,0.3 -0.3,0.6 -0.6,0.6l-12.6,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l12.6,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_129_"
fill="#FFFFFF"
d="m142.3,235.6c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_128_"
fill="#FFFFFF"
d="m155.1,235.6c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_127_"
fill="#FFFFFF"
d="m167.9,235.6c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3l0,0z"
/>
<path
id="XMLID_126_"
fill="#FFFFFF"
d="m180.7,235.6c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_125_"
fill="#FFFFFF"
d="m193.6,235.6c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_124_"
fill="#FFFFFF"
d="m206.4,235.6c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_123_"
fill="#FFFFFF"
d="m219.2,235.6c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_122_"
fill="#FFFFFF"
d="m232,235.6c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_121_"
fill="#FFFFFF"
d="m244.9,235.6c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3l0,0z"
/>
<path
id="XMLID_120_"
fill="#FFFFFF"
d="m257.7,235.6c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_119_"
fill="#FFFFFF"
d="m270.5,235.6c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_118_"
fill="#FFFFFF"
d="m283.4,235.6c0,0.3 -0.3,0.6 -0.6,0.6l-9.3,0c-0.3,0 -0.6,-0.3 -0.6,-0.6l0,-9.3c0,-0.3 0.3,-0.6 0.6,-0.6l9.3,0c0.3,0 0.6,0.3 0.6,0.6l0,9.3z"
/>
<path
id="XMLID_117_"
fill="#FFFFFF"
d="m279.4,283.4l0,5.1c0,0.2 0.1,0.3 0.2,0.4s0.3,0.2 0.4,0.2l9.3,0c0.2,0 0.3,-0.1 0.4,-0.2s0.2,-0.3 0.2,-0.4l0,-5.1l-10.5,0z"
/>
<path
id="XMLID_116_"
fill="#FFFFFF"
d="m289.9,282.8l0,-5.1c0,-0.1 -0.1,-0.3 -0.2,-0.4s-0.3,-0.2 -0.4,-0.2l-9.3,0c-0.2,0 -0.3,0.1 -0.4,0.2s-0.2,0.3 -0.2,0.4l0,5.1l10.5,0z"
/>
<path
id="svg_30"
fill="#FFFFFF"
d="m292.8,238.5c-0.2,0 -0.3,0.1 -0.4,0.2c-0.1,0.1 -0.2,0.3 -0.2,0.4l0,9.3c0,0.2 0.1,0.3 0.2,0.4c0.1,0.1 0.3,0.2 0.4,0.2l2.4,0l0,12.2c0,0.2 0.1,0.3 0.2,0.4s0.3,0.2 0.4,0.2l6.3,0c0.2,0 0.3,-0.1 0.4,-0.2s0.2,-0.3 0.2,-0.4l0,-22.2c0,-0.2 -0.1,-0.3 -0.2,-0.4c-0.1,-0.1 -0.3,-0.2 -0.4,-0.2l-9.3,0l0,0.1z"
class="key-enter key-10"
/>
</g>
<g id="svg_31" class="coffee">
<path
id="XMLID_103_"
fill="#e9fffd"
d="m399,257.4c-0.3,-0.5 -0.7,-0.9 -1.1,-1.3c-0.2,-0.3 -0.5,-0.5 -0.7,-0.7c-0.2,-0.3 -0.5,-0.5 -0.7,-0.7c-0.2,-0.3 -0.5,-0.5 -0.7,-0.7c-0.2,-0.3 -0.5,-0.5 -0.7,-0.7c-0.2,-0.3 -0.5,-0.5 -0.7,-0.7c-0.2,-0.3 -0.5,-0.5 -0.7,-0.7c-0.2,-0.3 -0.5,-0.5 -0.7,-0.7c-0.2,-0.3 -0.5,-0.5 -0.7,-0.7c-0.2,-0.3 -0.5,-0.5 -0.7,-0.7c-0.2,-0.3 -0.5,-0.5 -0.7,-0.7c-0.2,-0.3 -0.5,-0.5 -0.7,-0.7c-0.2,-0.3 -0.5,-0.5 -0.7,-0.7c-0.2,-0.3 -0.5,-0.5 -0.7,-0.7c-0.2,-0.3 -0.5,-0.5 -0.7,-0.7c-0.2,-0.3 -0.5,-0.5 -0.7,-0.7c-0.2,-0.3 -0.5,-0.5 -0.7,-0.7c-0.2,-0.3 -0.5,-0.5 -0.7,-0.7c-0.2,-0.3 -0.4,-0.5 -0.7,-0.7c-1.2,-4.7 -3.7,-8.8 -7.1,-12.1c-0.2,-0.3 -12.4,-12.4 -12.7,-12.7c-4.7,-4.9 -11.4,-8 -18.7,-8c-14.4,0 -26,11.6 -26,26c0,7.4 3.1,14 8,18.7c0.2,0.3 12.4,12.4 12.7,12.7c4.7,4.9 11.4,8 18.7,8c10.5,0 19.6,-6.2 23.7,-15.2l3.4,0.9l0,0l7.5,2.1c1,0.3 2.2,0.2 3.2,-0.4s1.7,-1.5 1.9,-2.5c-0.3,-1.5 -0.4,-2.6 -0.9,-3.6z"
/>
<path
id="XMLID_102_"
fill="url(#svg_106)"
d="m386,247.1c-0.3,1 -1,1.9 -2,2.5s-2.1,0.7 -3.2,0.4l-12,-3.3l2.2,-8l12,3.3c1,0.3 1.9,1 2.5,2c0.7,1 0.8,2.1 0.5,3.1z"
/>
<path
id="XMLID_92_"
fill="#a1ede0"
d="m371,238.7l-2.2,8l4.5,1.2c1.1,-2.5 1.8,-5.2 2.2,-8l-4.5,-1.2z"
/>
<path
id="XMLID_91_"
fill="url(#svg_105)"
d="m372.3,236.3c0,14.4 -11.6,26 -26,26s-26,-11.6 -26,-26s11.6,-26 26,-26c14.3,0 26,11.6 26,26z"
/>
<path
id="XMLID_90_"
fill="url(#svg_116)"
d="m368.1,236.3c0,12.1 -9.8,21.8 -21.8,21.8c-12.1,0 -21.8,-9.8 -21.8,-21.8c0,-12.1 9.8,-21.8 21.8,-21.8c12,0 21.8,9.7 21.8,21.8z"
/>
<path
id="XMLID_89_"
fill="#38b2ac"
d="m330.7,242.5c0,-12.1 9.8,-21.8 21.8,-21.8c4.4,0 8.6,1.3 12,3.6c-3.9,-5.9 -10.6,-9.8 -18.2,-9.8c-12.1,0 -21.8,9.8 -21.8,21.8c0,7.6 3.9,14.3 9.8,18.2c-2.3,-3.4 -3.6,-7.5 -3.6,-12z"
/>
</g>
<g id="svg_32" class="mouse hover origin-center">
<path
id="XMLID_87_"
fill="url(#svg_97)"
d="m126.22381,326.7c0,8.2 -6.7,14.8 -14.8,14.8l-10.8,0c-8.2,0 -14.8,-6.7 -14.8,-14.8l0,-42.4c0,-8.2 6.7,-14.8 14.8,-14.8l10.8,0c8.2,0 14.8,6.7 14.8,14.8l0,42.4z"
/>
<path
id="XMLID_86_"
fill="#38b2ac"
d="m119.9,271.8c0.1,0.8 0.2,1.7 0.2,2.6l0,32.2c0,6.4 -2.4,12.8 -7.3,17.7c-4.9,4.9 -11.3,7.4 -17.7,7.4l-0.5,0c-2.9,0 -5.7,-0.9 -8,-2.4c1.2,6.9 7.3,12.3 14.6,12.3l10.8,0c8.2,0 14.8,-6.7 14.8,-14.8l0,-42.4c-0.1,-5.3 -2.9,-9.9 -6.9,-12.6z"
/>
<path
id="XMLID_85_"
fill="#234e52"
d="m109.8,285c0,1.9 -1.5,3.4 -3.4,3.4s-3.4,-1.5 -3.4,-3.4s1.5,-3.4 3.4,-3.4s3.4,1.5 3.4,3.4z"
/>
</g>
<g id="svg_34" class="code">
<circle
id="XMLID_104_"
fill="url(#svg_101)"
r="43.5"
cy="113.88261"
cx="130.45237"
/>
<g id="svg_35" class="circle-bg">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_1_" r="36.3" cy="114.5" cx="129.5" />
<linearGradient
id="svg_94"
y2="1.24111"
x2="0.50264"
y1="0.40034"
x1="0.49948"
>
<stop
stop-opacity="0.99219"
stop-color="#309691"
offset="0.07422"
/>
<stop
stop-opacity="0.99609"
stop-color="#285e61"
offset="0.45313"
/>
<stop
stop-opacity="0.99609"
stop-color="#234e52"
offset="0.98438"
/>
</linearGradient>
<linearGradient
id="svg_95"
y2="-0.21189"
x2="0.47064"
y1="1.23787"
x1="0.53386"
>
<stop
stop-opacity="0.98828"
stop-color="#41adad"
offset="0.07813"
/>
<stop
stop-opacity="0.99609"
stop-color="#2c7a7b"
offset="0.44141"
/>
<stop
stop-opacity="0.99609"
stop-color="#234e52"
offset="0.98828"
/>
</linearGradient>
<linearGradient
id="svg_96"
y2="0.66699"
x2="0.5"
y1="-0.04479"
x1="0.5"
>
<stop
stop-opacity="0.99609"
stop-color="#b2f5ea"
offset="0.17578"
/>
<stop
stop-opacity="0.99609"
stop-color="#81e6d9"
offset="1"
/>
</linearGradient>
<linearGradient
id="svg_97"
y2="0.5"
x2="0.9986"
y1="0.5"
x1="-0.0014"
>
<stop
stop-opacity="0.99609"
stop-color="#38b2ac"
offset="0.06641"
/>
<stop
stop-opacity="0.99609"
stop-color="#4fd1c5"
offset="0.086"
/>
<stop
stop-opacity="0.99609"
stop-color="#b2f5ea"
offset="1"
/>
</linearGradient>
<linearGradient
id="svg_98"
y2="-0.1233"
x2="0.42023"
y1="0.96915"
x1="0.56004"
>
<stop
stop-opacity="0.99609"
stop-color="#38b2ac"
offset="0.04297"
/>
<stop
stop-opacity="0.99609"
stop-color="#38b2ac"
offset="0.08984"
/>
<stop
stop-opacity="0.99609"
stop-color="#81e6d9"
offset="0.99219"
/>
</linearGradient>
<linearGradient
id="svg_99"
y2="0.5"
x2="1.00331"
y1="0.5"
x1="0.00331"
>
<stop
stop-opacity="0.99609"
stop-color="#2c7a7b"
offset="0.0602"
/>
<stop
stop-opacity="0.99609"
stop-color="#2c7a7b"
offset="0.10547"
/>
<stop
stop-opacity="0.99609"
stop-color="#81e6d9"
offset="0.99609"
/>
</linearGradient>
<linearGradient
id="svg_100"
y2="0.5"
x2="1.00102"
y1="0.5"
x1="0"
>
<stop
stop-opacity="0.99609"
stop-color="#2c7a7b"
offset="0.03516"
/>
<stop
stop-opacity="0.99609"
stop-color="#2c7a7b"
offset="0.10547"
/>
<stop
stop-opacity="0.99609"
stop-color="#81e6d9"
offset="1"
/>
</linearGradient>
<linearGradient
id="svg_101"
y2="0.99999"
x2="0.5032"
y1="0.00001"
x1="0.4968"
>
<stop
stop-opacity="0.99609"
stop-color="#38b2ac"
offset="0.11328"
/>
<stop
stop-opacity="0.99609"
stop-color="#2c7a7b"
offset="0.46484"
/>
<stop
stop-opacity="0.99609"
stop-color="#234e52"
offset="1"
/>
</linearGradient>
<linearGradient
id="svg_102"
y2="1.40019"
x2="0.86008"
y1="-0.09909"
x1="0.26037"
>
<stop
stop-opacity="0.99609"
stop-color="#2c7a7b"
offset="0.0602"
/>
<stop
stop-opacity="0.99609"
stop-color="#2c7a7b"
offset="0.10938"
/>
<stop
stop-opacity="0.99609"
stop-color="#4fd1c5"
offset="1"
/>
</linearGradient>
<linearGradient
id="svg_103"
y2="0.5"
x2="0.99441"
y1="0.5"
x1="-0.02376"
>
<stop
stop-opacity="0.99609"
stop-color="#38b2ac"
offset="0.04297"
/>
<stop
stop-opacity="0.99609"
stop-color="#38b2ac"
offset="0.08984"
/>
<stop
stop-opacity="0.99609"
stop-color="#81e6d9"
offset="1"
/>
</linearGradient>
<linearGradient
id="svg_105"
y2="0.5"
x2="1"
y1="0.5"
x1="0"
>
<stop
stop-opacity="0.99609"
stop-color="#b2f5ea"
offset="0.1902"
/>
<stop
stop-opacity="0.99609"
stop-color="#e9fffb"
offset="1"
/>
</linearGradient>
<linearGradient
id="svg_106"
y2="0.5"
x2="0.99826"
y1="0.5"
x1="0.0021"
>
<stop
stop-opacity="0.99609"
stop-color="#b2f5ea"
offset="0.1902"
/>
<stop
stop-opacity="0.99609"
stop-color="#b2f5ea"
offset="1"
/>
</linearGradient>
<linearGradient
id="svg_107"
y2="0.5"
x2="1"
y1="0.5"
x1="0"
>
<stop
stop-opacity="0.99609"
stop-color="#b2f5ea"
offset="0.17188"
/>
<stop
stop-opacity="0.99609"
stop-color="#eafffc"
offset="1"
/>
</linearGradient>
<linearGradient id="svg_113" y2="0" x2="1" y1="0" x1="0">
<stop
offset="0"
stop-opacity="0.99609"
stop-color="#2c7a7b"
/>
<stop
offset="1"
stop-opacity="0.99609"
stop-color="#38b2ac"
/>
</linearGradient>
<linearGradient
id="svg_116"
y2="0.5"
x2="1.00022"
y1="0.5"
x1="-0.00136"
>
<stop
stop-opacity="0.99219"
stop-color="#43a5a5"
offset="0.03516"
/>
<stop
stop-opacity="0.99219"
stop-color="#35a3a3"
offset="0.086"
/>
<stop
stop-opacity="0.99609"
stop-color="#b2f5ea"
offset="1"
/>
</linearGradient>
</defs>
<clipPath
id="SVGID_2_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_36"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<circle
id="XMLID_74_"
clip-path="url(#SVGID_2_)"
fill="url(#svg_102)"
r="36.3"
cy="113.48261"
cx="130.37619"
/>
</g>
<g id="svg_37">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_3_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_4_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_38"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_71_"
clip-path="url(#SVGID_4_)"
fill="#F58360"
height="2.3"
width="5.7"
y="76.78261"
x="96.87619"
/>
</g>
<g id="svg_39">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_5_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_6_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_40"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_70_"
clip-path="url(#SVGID_6_)"
fill="#81e6d9"
height="2.3"
width="5.7"
y="92.88261"
x="96.87619"
/>
</g>
<g id="svg_41">
<defs
transform="translate(0 -0.217391) translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_7_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_8_"
transform="translate(0 -0.217391) translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_42"
r="36.3"
cy="113.66522"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_67_"
clip-path="url(#SVGID_8_)"
fill="#234e52"
height="2.3"
width="27"
y="76.56522"
x="104.17619"
/>
</g>
<g id="svg_43">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_9_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_10_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_44"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_66_"
stroke="null"
clip-path="url(#SVGID_10_)"
fill="#81e6d9"
height="2.3"
width="20.7"
y="92.88261"
x="104.17619"
/>
</g>
<g id="svg_45">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_11_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_12_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_46"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_65_"
clip-path="url(#SVGID_12_)"
fill="#FFFFFF"
height="2.3"
width="9.1"
y="82.88261"
x="102.67619"
/>
</g>
<g id="svg_47">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_13_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_14_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_48"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_64_"
clip-path="url(#SVGID_14_)"
fill="#FFFFFF"
height="2.3"
width="9.1"
y="111.28261"
x="102.67619"
/>
</g>
<g id="svg_49">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_15_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_16_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_50"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_63_"
clip-path="url(#SVGID_16_)"
fill="#FFFFFF"
height="2.3"
width="23.8"
y="111.28261"
x="113.87619"
class="code-line hover code-line5 origin-left"
/>
</g>
<g id="svg_51">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_17_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_18_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_52"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_54_"
clip-path="url(#SVGID_18_)"
fill="#234e52"
height="2.3"
width="7.5"
y="123.38261"
x="107.77619"
/>
</g>
<g id="svg_53">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_19_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_20_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_54"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_53_"
clip-path="url(#SVGID_20_)"
fill="#81e6d9"
height="2.3"
width="13.2"
y="147.98261"
x="119.27619"
/>
</g>
<g id="svg_55">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_21_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_22_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_56"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_52_"
clip-path="url(#SVGID_22_)"
fill="#F6A1A3"
height="2.3"
width="9.8"
y="135.68261"
x="159.97619"
/>
</g>
<g id="svg_57" stroke="null">
<defs
stroke="null"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="SVGID_23_"
stroke="null"
r="36.3"
cy="114.5"
cx="129.5"
/>
</defs>
<clipPath
id="SVGID_24_"
stroke="null"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_58"
stroke="null"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_51_"
stroke="null"
clip-path="url(#SVGID_24_)"
fill="#81e6d9"
height="2.3"
width="17.1"
y="111.28261"
x="140.37619"
/>
</g>
<g id="svg_59">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_25_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_26_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_60"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_49_"
clip-path="url(#SVGID_26_)"
fill="#FFFFFF"
height="2.3"
width="10.5"
y="111.28261"
x="160.97619"
/>
</g>
<g id="svg_61">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_27_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_28_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_62"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_43_"
clip-path="url(#SVGID_28_)"
fill="#FFFFFF"
height="2.3"
width="13.6"
y="99.08261"
x="102.67619"
class="code-line hover code-line1 origin-left"
/>
</g>
<g id="svg_63">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_29_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_30_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_64"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_37_"
clip-path="url(#SVGID_30_)"
fill="#FFFFFF"
height="2.3"
width="19.3"
y="105.18261"
x="102.67619"
class="code-line hover code-line3 origin-left"
/>
</g>
<g id="svg_65">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_31_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_32_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_66"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_36_"
clip-path="url(#SVGID_32_)"
fill="#FFFFFF"
height="2.3"
width="22.1"
y="129.58261"
x="107.77619"
class="code-line hover code-line6 origin-left"
/>
</g>
<g id="svg_67">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_33_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_34_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_68"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_35_"
clip-path="url(#SVGID_34_)"
fill="#FFFFFF"
height="2.3"
width="20.3"
y="135.68261"
x="107.77619"
/>
</g>
<g id="svg_69">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_35_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_36_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_70"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_34_"
clip-path="url(#SVGID_36_)"
fill="#FFFFFF"
height="2.3"
width="21"
y="135.68261"
x="134.67619"
class="code-line hover code-line8 origin-left"
/>
</g>
<g id="svg_71" stroke="null">
<defs
stroke="null"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="SVGID_37_"
stroke="null"
r="36.3"
cy="114.5"
cx="129.5"
/>
</defs>
<clipPath
id="SVGID_38_"
stroke="null"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_72"
stroke="null"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_31_"
stroke="null"
clip-path="url(#SVGID_38_)"
fill="#81e6d9"
height="2.3"
width="21"
y="147.98261"
x="134.67619"
/>
</g>
<g id="svg_73">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_39_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_40_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_74"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_22_"
clip-path="url(#SVGID_40_)"
fill="#234e52"
height="2.3"
width="7.8"
y="123.38261"
x="96.87619"
/>
</g>
<g id="svg_75">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_41_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_42_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_76"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_19_"
clip-path="url(#SVGID_42_)"
fill="#FFFFFF"
height="2.3"
width="9"
y="147.98261"
x="107.77619"
/>
</g>
<g id="svg_77">
<defs
transform="translate(0 -0.217391) translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_43_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_44_"
transform="translate(0 -0.217391) translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_78"
r="36.3"
cy="113.66522"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_18_"
stroke="null"
clip-path="url(#SVGID_44_)"
fill="#81e6d9"
height="2.3"
width="13.8"
y="141.56522"
x="112.37619"
/>
</g>
<g id="svg_79">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_45_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_46_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_80"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_15_"
clip-path="url(#SVGID_46_)"
fill="#FFFFFF"
height="2.3"
width="35.7"
y="141.78261"
x="128.17619"
class="code-line hover code-line7 origin-left"
/>
</g>
<g id="svg_81">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_47_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_48_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_82"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_14_"
clip-path="url(#SVGID_48_)"
fill="#FFFFFF"
height="2.3"
width="19.3"
y="105.18261"
x="123.97619"
class="code-line hover code-line4 origin-left"
/>
</g>
<g id="svg_83" stroke="null">
<defs
stroke="null"
transform="translate(0.217391 0) translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="SVGID_49_"
stroke="null"
r="36.3"
cy="114.5"
cx="129.5"
/>
</defs>
<clipPath
id="SVGID_50_"
stroke="null"
transform="translate(0.217391 0) translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_84"
stroke="null"
r="36.3"
cy="113.88261"
cx="130.59358"
/>
</clipPath>
<rect
id="XMLID_11_"
stroke="null"
clip-path="url(#SVGID_50_)"
fill="#234e52"
height="2.3"
width="11.3"
y="105.18261"
x="163.79358"
/>
</g>
<g id="svg_85">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_51_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_52_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_86"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_8_"
clip-path="url(#SVGID_52_)"
fill="#FFFFFF"
height="2.3"
width="12"
y="105.18261"
x="144.57619"
/>
</g>
<g id="svg_87">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_53_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_54_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_88"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_7_"
clip-path="url(#SVGID_54_)"
fill="#FFFFFF"
height="2.3"
width="20.9"
y="99.08261"
x="120.67619"
class="code-line hover code-line2 origin-left"
/>
</g>
<g id="svg_89">
<defs
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle id="SVGID_55_" r="36.3" cy="114.5" cx="129.5" />
</defs>
<clipPath
id="SVGID_56_"
transform="translate(0 -0.217391) translate(0.399999 -0.399999) translate(0.476186 0)"
>
<circle
id="svg_90"
r="36.3"
cy="113.88261"
cx="130.37619"
/>
</clipPath>
<rect
id="XMLID_6_"
clip-path="url(#SVGID_56_)"
fill="#FFFFFF"
height="2.3"
width="8.4"
y="82.88261"
x="117.47619"
/>
</g>
</g>
<text
id="svg_112"
class="text"
font-style="normal"
font-weight="normal"
xml:space="preserve"
text-anchor="start"
font-family="'Calistoga'"
font-size="18"
stroke-width="0"
y="188.2972"
x="137.57128"
fill="url(#svg_113)"
>
kungfutech.edu.vn
</text>
<image
id="svg_121"
class="wp-logo"
href="/logo.png"
stroke="null"
height="44.43982"
width="34.96459"
y="117.52729"
x="196.09256"
/>
</g>
</svg>
</el-col>
</el-row>
</header>
</div>
</template>
<style lang="scss" scoped>
@import "@/modules/core/assets/scss/config/index.scss";
$black: #333;
$gray: #2d3748;
.header {
padding: 6rem 0;
font-family: $roboto;
&__left {
&__title {
font-family: $roboto;
color: $black;
font-weight: bold;
font-size: 40px;
line-height: $unit * 2.7;
&--blue {
color: $teal700;
display: block;
}
}
&__description {
margin-top: 1rem;
color: $gray;
line-height: 30px;
font-weight: 400;
font-size: 18px;
font-family: $montserrat;
}
}
&__right {
align-items: center;
text-align: center;
}
}
.graph {
animation: bounce 1.4s ease-in-out infinite;
}
.mouse {
animation: bounceBFt2 1.6s ease-in-out infinite;
}
.wp-logo {
animation: twinkle2 4s ease-in-out infinite;
}
.keyboard {
$dur: 2.75s;
[class*="key"] {
animation: typing $dur linear infinite;
}
$steps: 1 2 3 4 5 6 7 8 9 10 11 12;
@each $step in $steps {
.key-#{$step} {
animation-delay: ($dur / 12) * $step;
}
}
@keyframes typing {
0%,
2% {
opacity: 0.6;
}
4% {
opacity: 1;
}
}
}
.text {
font-family: $montserrat;
font-size: 15px;
}
.code {
&-line {
animation: shrink 1s ease-in-out infinite;
}
&-line1 {
animation-delay: 0.3s;
}
&-line2 {
animation-delay: 0.9s;
}
&-line3 {
animation-delay: 0.2s;
}
&-line5 {
animation-delay: 0.5s;
}
&-line6 {
animation-delay: 0.8s;
}
&-line8 {
animation-delay: 0.4s;
}
}
@keyframes shrink {
50% {
transform: scaleX(0.5);
}
}
@keyframes bounce {
50% {
transform: rotate(-6deg);
}
}
@keyframes bounceBFt2 {
0%,
100% {
transform: rotate(2.6deg);
}
50% {
transform: rotate(-2.6deg);
}
}
@keyframes twinkle2 {
0%,
50%,
100% {
transform: scale(1);
}
25%,
75% {
transform: scale(1.07);
}
}
.button {
border: none;
cursor: pointer;
padding: 15px 30px;
text-align: center;
text-transform: uppercase;
font-size: 16px;
transition: 0.5s;
background-size: 200% auto;
box-shadow: 0 0 20px #eee;
border-radius: 30px;
display: flex;
margin-top: 2rem;
align-items: center;
justify-content: center;
&__icon {
height: 30px;
padding: 9px 11px;
}
&--blog {
background-image: linear-gradient(
to right,
$teal600 0%,
$teal400 51%,
#50c9c3 100%
);
color: white;
&:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
&:focus {
outline: none;
}
}
&--academy {
background-image: linear-gradient(
to right,
white 0%,
white 51%,
$teal600 100%
);
margin-left: 1rem;
color: $gray;
padding: 0 20px 0 0;
&:hover {
background-position: right center;
color: white;
text-decoration: none;
}
&:focus {
outline: none;
}
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment