Skip to content

Instantly share code, notes, and snippets.

@surfer19

surfer19/index.html

Created September 6, 2019 16:59
Show Gist options
  • Save surfer19/24dc1635618bc42f771ac407368a40d4 to your computer and use it in GitHub Desktop.
Save surfer19/24dc1635618bc42f771ac407368a40d4 to your computer and use it in GitHub Desktop.
Download ZIP
Relocista landing page
Raw
index.html
<h2 class="n1">Nestrácaj</h2>
<h2 class="n2">čas</h2>
<h2 class="n3">hľadaním!</h2>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080.84">
<defs>
<clipPath id="clip-path">
<rect x="609.64" y="285.74" width="366.84" height="212.04" style="fill: none"/>
</clipPath>
<linearGradient id="linear-gradient" x1="479.07" y1="426.39" x2="525.76" y2="600.63" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f1c40f"/>
<stop offset="0.22" stop-color="#f1c410" stop-opacity="0.99"/>
<stop offset="0.3" stop-color="#f1c615" stop-opacity="0.96"/>
<stop offset="0.36" stop-color="#f2c81d" stop-opacity="0.91"/>
<stop offset="0.41" stop-color="#f3ca28" stop-opacity="0.84"/>
<stop offset="0.43" stop-color="#f3cc2e" stop-opacity="0.8"/>
<stop offset="0.65" stop-color="#a78f3c" stop-opacity="0.61"/>
<stop offset="1" stop-color="#2c2c54" stop-opacity="0.3"/>
</linearGradient>
</defs>
<title>night-scene</title>
<g id="Layer_9" data-name="Layer 9">
<path d="M432.5,552.5" style="fill: #34495e"/>
<rect width="1920" height="1080" style="fill: #2c2c54"/>
</g>
<g id="WINDOW">
<rect x="118.5" y="169.5" width="171" height="440" style="fill: none;stroke: #000;stroke-miterlimit: 10"/>
<rect x="439.5" y="260.5" width="122" height="349" style="fill: none;stroke: #000;stroke-miterlimit: 10"/>
<rect x="710.5" y="152.5" width="108" height="429" style="fill: none;stroke: #000;stroke-miterlimit: 10"/>
<rect x="818.5" y="269.5" width="141" height="314" style="fill: none;stroke: #000;stroke-miterlimit: 10"/>
<rect x="1062.5" y="179.5" width="103" height="430" style="fill: none;stroke: #000;stroke-miterlimit: 10"/>
<rect x="1165.5" y="287.5" width="87" height="322" style="fill: none;stroke: #000;stroke-miterlimit: 10"/>
<rect x="1252.5" y="356.5" width="73" height="253" style="fill: none;stroke: #000;stroke-miterlimit: 10"/>
<path d="M1325.5,609.5H118.5v-496h1207Zm34-536H88.5v590h1271Z" style="fill: #3f407a"/>
<path d="M411,119s1,30,16,42,34,8,41,3c1.59-1.13,5-6,5-6s-3,15-10,21-10,8-16,9c-11,1.84-21-1-28-4-6.36-2.73-16.09-14.28-18-20a52.3,52.3,0,0,1-3-18,37.06,37.06,0,0,1,5-18" style="fill: #ecf0f1"/>
<rect x="227" y="204" width="23" height="40"/>
<rect x="462" y="290" width="23" height="40"/>
<rect x="519" y="382" width="23" height="40"/>
<rect x="724" y="224" width="23" height="40"/>
<rect x="780" y="302" width="23" height="40"/>
<rect x="1127" y="204" width="23" height="40" style="fill: #f1c40f" class="window-1"/>
<rect x="1081" y="302" width="23" height="40" style="fill: #f1c40f" class="window-2"/>
<rect x="1127" y="413" width="23" height="40" style="fill: #f1c40f" class="window-3"/>
<rect x="1186" y="331" width="23" height="40" style="fill: #f1c40f" class="window-4"/>
<rect x="1215" y="470" width="23" height="40" style="fill: #f1c40f" class="window-5"/>
<rect x="1289" y="379" width="23" height="40" style="fill: #f1c40f" class="window-6"/>
<rect x="780" y="180" width="23" height="40" style="fill: #f1c40f" class="window-7"/>
<rect x="156" y="319" width="23" height="40" style="fill: #f1c40f" class="window-8"/>
<rect x="239" y="456" width="23" height="40" style="fill: #f1c40f" class="window-9"/>
<rect x="156" y="580" width="23" height="30"/>
<path d="M473,158" style="fill: #2d2c28"/>
</g>
<g id="monitor">
<g style="clip-path: url(#clip-path)">
<rect x="609.64" y="292.24" width="366.84" height="205.54" style="fill: #e9ebee"/>
<g id="ITEM6">
<path class="path-xx" d="M863.77,558.79H699.44a2.49,2.49,0,0,0-2.71,2.19v116.6a2.49,2.49,0,0,0,2.71,2.19H863.77a2.5,2.5,0,0,0,2.72-2.19V561A2.5,2.5,0,0,0,863.77,558.79Z" style="fill: none;stroke: #e5e5e5;stroke-miterlimit: 10"/>
<path class="path-xx" d="M865.84,676.44a2.33,2.33,0,0,1-2.54,2h-164a2.33,2.33,0,0,1-2.54-2V561a2.34,2.34,0,0,1,2.54-2h164a2.34,2.34,0,0,1,2.54,2Z" style="fill: #fff"/>
<path class="path-xx" d="M772.7,567.54a1.29,1.29,0,0,1,1.32,1.25v2.29a1.32,1.32,0,0,1-1.31,1.32H729.28a1.3,1.3,0,0,1-1.28-1.32v-2.29a1.25,1.25,0,0,1,1.29-1.25Z" style="fill: #e9e9ed"/>
<path class="path-xx" d="M769.68,612.76H704.4c-.66,0-1.2.75-1.2,1.68v49.34c0,.93.54,1.68,1.2,1.68h65.28c.66,0,1.2-.75,1.2-1.68V614.44C770.88,613.51,770.34,612.76,769.68,612.76Z" style="fill: #7889b9"/>
<path class="path-xx" d="M748.21,637.92l-3.82-.61-1.84-.32h0l-2.06-.24-2.18-4.4-1.26-2.55c-.51-1-1.34-1-1.84,0l-1.27,2.56-2.18,4.38-2.06.24h0l-2.17.37-3.48.54c-1.13.16-1.39,1-.57,1.76l2,2,2.05,2h0l1.39,1.45-.46,2h0l-.38,2.82-.43,2.81c-.19,1.13.5,1.61,1.51,1.08l2.55-1.46,2.53-1.46h0l1.84-1,1.84,1h0l2.52,1.46,2.53,1.4c1,.53,1.69.07,1.49-1L744,650l-.84-4.86,3.54-3.44,2-2C749.59,638.87,749.34,638.09,748.21,637.92Z" style="fill: #5f71a7"/>
<path class="path-xx" d="M843.83,612.76H778.55c-.66,0-1.2.75-1.2,1.68v49.34c0,.93.54,1.68,1.2,1.68h65.28c.66,0,1.19-.75,1.19-1.68V614.44C845,613.51,844.49,612.76,843.83,612.76Z" style="fill: #7889b9"/>
<path class="path-xx" d="M823.66,637.92l-3.82-.61L818,637h0l-2.06-.24-2.18-4.4-1.26-2.55c-.51-1-1.34-1-1.84,0l-1.27,2.56-2.18,4.38-2.06.24h0l-2.17.37-3.48.54c-1.13.16-1.39,1-.57,1.76l2,2,2,2h0l1.39,1.45-.46,2h0l-.38,2.82-.43,2.81c-.19,1.13.5,1.61,1.51,1.08l2.54-1.46,2.54-1.46h0l1.84-1,1.84,1h0l2.52,1.46,2.53,1.4c1,.53,1.68.07,1.49-1l-.48-2.8-.84-4.86,3.54-3.44,2-2C825,638.87,824.79,638.09,823.66,637.92Z" style="fill: #5f71a7"/>
<rect class="path-xx" x="703.32" y="565.44" width="18.23" height="18.23" rx="2.57" style="fill: #7889b9"/>
<g>
<path class="path-xx" d="M835.9,599a1.23,1.23,0,0,1,1.32,1.19v2.28a1.39,1.39,0,0,1-1.31,1.39H704.49a1.37,1.37,0,0,1-1.29-1.39v-2.28a1.21,1.21,0,0,1,1.29-1.19Z" style="fill: #e9e9ed"/>
<path class="path-xx" d="M848.05,590.23a1.23,1.23,0,0,1,1.33,1.19v2.28a1.39,1.39,0,0,1-1.31,1.39H704.49a1.37,1.37,0,0,1-1.29-1.39v-2.28a1.21,1.21,0,0,1,1.29-1.19Z" style="fill: #e9e9ed"/>
</g>
<path class="path-xx" d="M762.81,576.29a1.24,1.24,0,0,1,1.33,1.19v2.29a1.38,1.38,0,0,1-1.31,1.38H729.28a1.36,1.36,0,0,1-1.28-1.38v-2.29a1.21,1.21,0,0,1,1.29-1.19Z" style="fill: #e9e9ed"/>
</g>
<g id="ITEM5">
<path class="path-xx" d="M863.77,688.21H699.44a2.49,2.49,0,0,0-2.71,2.19V807a2.49,2.49,0,0,0,2.71,2.2H863.77a2.5,2.5,0,0,0,2.72-2.2V690.4A2.5,2.5,0,0,0,863.77,688.21Z" style="fill: none;stroke: #e5e5e5;stroke-miterlimit: 10"/>
<path class="path-xx" d="M865.84,805.85a2.34,2.34,0,0,1-2.54,2h-164a2.34,2.34,0,0,1-2.54-2V690.4a2.33,2.33,0,0,1,2.54-2h164a2.33,2.33,0,0,1,2.54,2Z" style="fill: #fff"/>
<path class="path-xx" d="M772.7,697a1.29,1.29,0,0,1,1.32,1.26v2.29a1.33,1.33,0,0,1-1.31,1.32H729.28A1.31,1.31,0,0,1,728,700.5v-2.29a1.26,1.26,0,0,1,1.29-1.26Z" style="fill: #e9e9ed"/>
<path class="path-xx" d="M769.68,742.17H704.4c-.66,0-1.2.76-1.2,1.69v49.33c0,.93.54,1.69,1.2,1.69h65.28c.66,0,1.2-.76,1.2-1.69V743.86C770.88,742.93,770.34,742.17,769.68,742.17Z" style="fill: #7889b9"/>
<path class="path-xx" d="M748.21,767.34l-3.82-.61-1.84-.32h0l-2.06-.25-2.18-4.4-1.26-2.54c-.51-1-1.34-1-1.84,0l-1.27,2.56-2.18,4.37-2.06.25h0l-2.17.37-3.48.53c-1.13.17-1.39,1-.57,1.77l2,2,2.05,2h0l1.39,1.46-.46,2.05h0l-.38,2.81-.43,2.82c-.19,1.12.5,1.61,1.51,1.08l2.55-1.47,2.53-1.46h0l1.84-1,1.84,1h0l2.52,1.46,2.53,1.4c1,.53,1.69.08,1.49-1.05l-.48-2.8-.84-4.85,3.54-3.44,2-2C749.59,768.29,749.34,767.5,748.21,767.34Z" style="fill: #5f71a7"/>
<path class="path-xx" d="M843.83,742.17H778.55c-.66,0-1.2.76-1.2,1.69v49.33c0,.93.54,1.69,1.2,1.69h65.28c.66,0,1.19-.76,1.19-1.69V743.86C845,742.93,844.49,742.17,843.83,742.17Z" style="fill: #7889b9"/>
<path class="path-xx" d="M823.66,767.34l-3.82-.61-1.84-.32h0l-2.06-.25-2.18-4.4-1.26-2.54c-.51-1-1.34-1-1.84,0l-1.27,2.56-2.18,4.37-2.06.25h0l-2.17.37-3.48.53c-1.13.17-1.39,1-.57,1.77l2,2,2,2h0l1.39,1.46-.46,2.05h0l-.38,2.81-.43,2.82c-.19,1.12.5,1.61,1.51,1.08l2.54-1.47,2.54-1.46h0l1.84-1,1.84,1h0l2.52,1.46,2.53,1.4c1,.53,1.68.08,1.49-1.05l-.48-2.8-.84-4.85,3.54-3.44,2-2C825,768.29,824.79,767.5,823.66,767.34Z" style="fill: #5f71a7"/>
<rect class="path-xx" x="703.32" y="694.86" width="18.23" height="18.23" rx="2.57" style="fill: #7889b9"/>
<g>
<path class="path-xx" d="M835.9,728.39a1.24,1.24,0,0,1,1.32,1.19v2.29a1.38,1.38,0,0,1-1.31,1.38H704.49a1.37,1.37,0,0,1-1.29-1.38v-2.29a1.21,1.21,0,0,1,1.29-1.19Z" style="fill: #e9e9ed"/>
<path class="path-xx" d="M848.05,719.64a1.23,1.23,0,0,1,1.33,1.19v2.29a1.39,1.39,0,0,1-1.31,1.38H704.49a1.37,1.37,0,0,1-1.29-1.38v-2.29a1.21,1.21,0,0,1,1.29-1.19Z" style="fill: #e9e9ed"/>
</g>
<path class="path-xx" d="M762.81,705.71a1.23,1.23,0,0,1,1.33,1.19v2.29a1.39,1.39,0,0,1-1.31,1.38H729.28a1.36,1.36,0,0,1-1.28-1.38V706.9a1.2,1.2,0,0,1,1.29-1.19Z" style="fill: #e9e9ed"/>
</g>
<g id="ITEM4">
<path class="path-xx" d="M863.77,824.47H699.44a2.49,2.49,0,0,0-2.71,2.19v116.6a2.49,2.49,0,0,0,2.71,2.19H863.77a2.5,2.5,0,0,0,2.72-2.19V826.66A2.5,2.5,0,0,0,863.77,824.47Z" style="fill: none;stroke: #e5e5e5;stroke-miterlimit: 10"/>
<path class="path-xx" d="M865.84,942.11a2.33,2.33,0,0,1-2.54,2h-164a2.33,2.33,0,0,1-2.54-2V826.67a2.33,2.33,0,0,1,2.54-2h164a2.33,2.33,0,0,1,2.54,2Z" style="fill: #fff"/>
<path class="path-xx" d="M772.7,833.22a1.29,1.29,0,0,1,1.32,1.25v2.29a1.33,1.33,0,0,1-1.31,1.32H729.28a1.31,1.31,0,0,1-1.28-1.32v-2.29a1.25,1.25,0,0,1,1.29-1.25Z" style="fill: #e9e9ed"/>
<path class="path-xx" d="M769.68,878.43H704.4c-.66,0-1.2.76-1.2,1.69v49.33c0,.94.54,1.69,1.2,1.69h65.28c.66,0,1.2-.75,1.2-1.69V880.12C770.88,879.19,770.34,878.43,769.68,878.43Z" style="fill: #7889b9"/>
<path class="path-xx" d="M748.21,903.6l-3.82-.61-1.84-.32h0l-2.06-.24-2.18-4.4-1.26-2.55c-.51-1-1.34-1-1.84,0l-1.27,2.56-2.18,4.37-2.06.25h0l-2.17.37-3.48.53c-1.13.17-1.39,1-.57,1.77l2,2,2.05,2h0l1.39,1.46-.46,2.05h0l-.38,2.81-.43,2.82c-.19,1.13.5,1.61,1.51,1.08l2.55-1.46,2.53-1.47h0l1.84-1,1.84,1h0l2.52,1.47,2.53,1.39c1,.53,1.69.08,1.49-1.05l-.48-2.79-.84-4.86,3.54-3.44,2-2C749.59,904.55,749.34,903.77,748.21,903.6Z" style="fill: #5f71a7"/>
<path class="path-xx" d="M843.83,878.43H778.55c-.66,0-1.2.76-1.2,1.69v49.33c0,.94.54,1.69,1.2,1.69h65.28c.66,0,1.19-.75,1.19-1.69V880.12C845,879.19,844.49,878.43,843.83,878.43Z" style="fill: #7889b9"/>
<path class="path-xx" d="M823.66,903.6l-3.82-.61-1.84-.32h0l-2.06-.24-2.18-4.4-1.26-2.55c-.51-1-1.34-1-1.84,0l-1.27,2.56-2.18,4.37-2.06.25h0L803,903l-3.48.53c-1.13.17-1.39,1-.57,1.77l2,2,2,2h0l1.39,1.46-.46,2.05h0l-.38,2.81-.43,2.82c-.19,1.13.5,1.61,1.51,1.08l2.54-1.46,2.54-1.47h0l1.84-1,1.84,1h0l2.52,1.47,2.53,1.39c1,.53,1.68.08,1.49-1.05l-.48-2.79-.84-4.86,3.54-3.44,2-2C825,904.55,824.79,903.77,823.66,903.6Z" style="fill: #5f71a7"/>
<rect class="path-xx" x="703.32" y="831.12" width="18.23" height="18.23" rx="2.57" style="fill: #7889b9"/>
<g>
<path class="path-xx" d="M835.9,864.66a1.23,1.23,0,0,1,1.32,1.18v2.29a1.39,1.39,0,0,1-1.31,1.39H704.49a1.37,1.37,0,0,1-1.29-1.39v-2.29a1.2,1.2,0,0,1,1.29-1.18Z" style="fill: #e9e9ed"/>
<path class="path-xx" d="M848.05,855.9a1.24,1.24,0,0,1,1.33,1.19v2.29a1.39,1.39,0,0,1-1.31,1.39H704.49a1.37,1.37,0,0,1-1.29-1.39v-2.29a1.21,1.21,0,0,1,1.29-1.19Z" style="fill: #e9e9ed"/>
</g>
<path class="path-xx" d="M762.81,842a1.24,1.24,0,0,1,1.33,1.19v2.29a1.39,1.39,0,0,1-1.31,1.38H729.28a1.36,1.36,0,0,1-1.28-1.38v-2.29a1.21,1.21,0,0,1,1.29-1.19Z" style="fill: #e9e9ed"/>
</g>
<g id="ITEM3">
<path class="path-xx" d="M863.77,959.36H699.44a2.49,2.49,0,0,0-2.71,2.2v116.59a2.49,2.49,0,0,0,2.71,2.19H863.77a2.5,2.5,0,0,0,2.72-2.19V961.56A2.5,2.5,0,0,0,863.77,959.36Z" style="fill: none;stroke: #e5e5e5;stroke-miterlimit: 10"/>
<path class="path-xx" d="M865.84,1077a2.33,2.33,0,0,1-2.54,2h-164a2.33,2.33,0,0,1-2.54-2V961.56a2.33,2.33,0,0,1,2.54-2h164a2.33,2.33,0,0,1,2.54,2Z" style="fill: #fff"/>
<path class="path-xx" d="M772.7,968.11a1.29,1.29,0,0,1,1.32,1.25v2.29a1.32,1.32,0,0,1-1.31,1.32H729.28a1.3,1.3,0,0,1-1.28-1.32v-2.29a1.25,1.25,0,0,1,1.29-1.25Z" style="fill: #e9e9ed"/>
<path class="path-xx" d="M769.68,1013.33H704.4c-.66,0-1.2.75-1.2,1.68v49.34c0,.93.54,1.68,1.2,1.68h65.28c.66,0,1.2-.75,1.2-1.68V1015C770.88,1014.08,770.34,1013.33,769.68,1013.33Z" style="fill: #7889b9"/>
<path class="path-xx" d="M748.21,1038.49l-3.82-.61-1.84-.32h0l-2.06-.24-2.18-4.4-1.26-2.55c-.51-1-1.34-1-1.84,0l-1.27,2.56-2.18,4.38-2.06.24h0l-2.17.37-3.48.54c-1.13.16-1.39,1-.57,1.76l2,2,2.05,2h0l1.39,1.45-.46,2h0l-.38,2.82-.43,2.81c-.19,1.13.5,1.61,1.51,1.08l2.55-1.46,2.53-1.46h0l1.84-1,1.84,1h0l2.52,1.46,2.53,1.4c1,.53,1.69.07,1.49-1.05l-.48-2.8-.84-4.86,3.54-3.44,2-2C749.59,1039.44,749.34,1038.66,748.21,1038.49Z" style="fill: #5f71a7"/>
<path class="path-xx" d="M843.83,1013.33H778.55c-.66,0-1.2.75-1.2,1.68v49.34c0,.93.54,1.68,1.2,1.68h65.28c.66,0,1.19-.75,1.19-1.68V1015C845,1014.08,844.49,1013.33,843.83,1013.33Z" style="fill: #7889b9"/>
<path class="path-xx" d="M823.66,1038.49l-3.82-.61-1.84-.32h0l-2.06-.24-2.18-4.4-1.26-2.55c-.51-1-1.34-1-1.84,0l-1.27,2.56-2.18,4.38-2.06.24h0l-2.17.37-3.48.54c-1.13.16-1.39,1-.57,1.76l2,2,2,2h0l1.39,1.45-.46,2h0l-.38,2.82-.43,2.81c-.19,1.13.5,1.61,1.51,1.08l2.54-1.46,2.54-1.46h0l1.84-1,1.84,1h0l2.52,1.46,2.53,1.4c1,.53,1.68.07,1.49-1.05l-.48-2.8-.84-4.86,3.54-3.44,2-2C825,1039.44,824.79,1038.66,823.66,1038.49Z" style="fill: #5f71a7"/>
<rect class="path-xx" x="703.32" y="966.01" width="18.23" height="18.23" rx="2.57" style="fill: #7889b9"/>
<g>
<path class="path-xx" d="M835.9,999.55a1.23,1.23,0,0,1,1.32,1.19V1003a1.39,1.39,0,0,1-1.31,1.39H704.49a1.37,1.37,0,0,1-1.29-1.39v-2.28a1.21,1.21,0,0,1,1.29-1.19Z" style="fill: #e9e9ed"/>
<path class="path-xx" d="M848.05,990.8a1.23,1.23,0,0,1,1.33,1.19v2.28a1.39,1.39,0,0,1-1.31,1.39H704.49a1.37,1.37,0,0,1-1.29-1.39V992a1.21,1.21,0,0,1,1.29-1.19Z" style="fill: #e9e9ed"/>
</g>
<path class="path-xx" d="M762.81,976.86a1.24,1.24,0,0,1,1.33,1.19v2.29a1.38,1.38,0,0,1-1.31,1.38H729.28a1.36,1.36,0,0,1-1.28-1.38v-2.29a1.21,1.21,0,0,1,1.29-1.19Z" style="fill: #e9e9ed"/>
</g>
<g id="ITEM1">
<path class="path-xx" d="M867.21,421.59a2.34,2.34,0,0,1-2.54,2h-164a2.34,2.34,0,0,1-2.54-2V306.14a2.33,2.33,0,0,1,2.54-2h164a2.33,2.33,0,0,1,2.54,2Z" style="fill: #fff"/>
<path class="path-xx" d="M774.07,312.69a1.29,1.29,0,0,1,1.32,1.26v2.29a1.33,1.33,0,0,1-1.31,1.32H730.65a1.31,1.31,0,0,1-1.28-1.32V314a1.26,1.26,0,0,1,1.29-1.26Z" style="fill: #e9e9ed"/>
<path class="path-xx" d="M771.05,357.91H705.77c-.66,0-1.2.76-1.2,1.69v49.33c0,.93.54,1.69,1.2,1.69h65.28c.66,0,1.19-.76,1.19-1.69V359.6C772.24,358.67,771.71,357.91,771.05,357.91Z" style="fill: #7889b9"/>
<path class="path-xx" d="M749.58,380.48l-3.82-.61-1.84-.33h0l-2.06-.24-2.18-4.4-1.26-2.54c-.51-1-1.34-1-1.84,0l-1.27,2.57-2.18,4.37-2.06.24h0l-2.17.37-3.48.54c-1.13.16-1.39,1-.57,1.76l2,2,2.05,2h0l1.39,1.45-.46,2h0l-.38,2.81-.43,2.81c-.19,1.13.5,1.62,1.51,1.09l2.54-1.47,2.54-1.46h0l1.84-1,1.84,1h0l2.52,1.46,2.53,1.4c1,.53,1.68.08,1.49-1.05l-.48-2.8-.84-4.85,3.54-3.44,2-2C751,381.43,750.71,380.64,749.58,380.48Z" style="fill: #5f71a7"/>
<path class="path-xx" d="M845.2,357.91H779.92c-.66,0-1.2.76-1.2,1.69v49.33c0,.93.54,1.69,1.2,1.69H845.2c.66,0,1.19-.76,1.19-1.69V359.6C846.39,358.67,845.86,357.91,845.2,357.91Z" style="fill: #7889b9"/>
<path class="path-xx" d="M825,380.48l-3.82-.61-1.84-.33h0l-2.06-.24-2.18-4.4-1.26-2.54c-.51-1-1.34-1-1.85,0l-1.26,2.57-2.18,4.37-2.06.24h0l-2.17.37-3.48.54c-1.13.16-1.39,1-.57,1.76l2,2,2,2h0l1.39,1.45-.46,2h0l-.38,2.81-.43,2.81c-.19,1.13.5,1.62,1.51,1.09l2.54-1.47,2.54-1.46h0l1.85-1,1.84,1h0l2.52,1.46,2.53,1.4c1,.53,1.68.08,1.49-1.05l-.48-2.8-.84-4.85,3.54-3.44,2-2C826.41,381.43,826.16,380.64,825,380.48Z" style="fill: #5f71a7"/>
<rect class="path-xx" x="704.69" y="310.6" width="18.23" height="18.23" rx="2.57" style="fill: #7889b9"/>
<path class="path-xx" d="M837.27,344.13a1.24,1.24,0,0,1,1.32,1.19v2.29a1.38,1.38,0,0,1-1.31,1.38H705.86a1.37,1.37,0,0,1-1.29-1.38v-2.29a1.21,1.21,0,0,1,1.29-1.19Z" style="fill: #e9e9ed"/>
<path class="path-xx" d="M849.42,335.38a1.23,1.23,0,0,1,1.33,1.19v2.29a1.39,1.39,0,0,1-1.31,1.38H705.86a1.37,1.37,0,0,1-1.29-1.38v-2.29a1.21,1.21,0,0,1,1.29-1.19Z" style="fill: #e9e9ed"/>
</g>
<g id="ITEM2">
<path class="path-xx" d="M865.14,431.43H700.81a2.49,2.49,0,0,0-2.71,2.19v116.6a2.49,2.49,0,0,0,2.71,2.19H865.14a2.5,2.5,0,0,0,2.72-2.19V433.62A2.5,2.5,0,0,0,865.14,431.43Z" style="fill: none;stroke: #e5e5e5;stroke-miterlimit: 10"/>
<path class="path-xx" d="M867.21,549.08a2.33,2.33,0,0,1-2.54,2h-164a2.33,2.33,0,0,1-2.54-2V433.63a2.34,2.34,0,0,1,2.54-2h164a2.34,2.34,0,0,1,2.54,2Z" style="fill: #fff"/>
<path class="path-xx" d="M774.07,440.18a1.29,1.29,0,0,1,1.32,1.25v2.29a1.32,1.32,0,0,1-1.31,1.32H730.65a1.3,1.3,0,0,1-1.28-1.32v-2.29a1.25,1.25,0,0,1,1.29-1.25Z" style="fill: #e9e9ed"/>
<path class="path-xx" d="M771.05,485.4H705.77c-.66,0-1.2.75-1.2,1.68v49.33c0,.94.54,1.69,1.2,1.69h65.28c.66,0,1.19-.75,1.19-1.69V487.08C772.24,486.15,771.71,485.4,771.05,485.4Z" style="fill: #7889b9"/>
<path class="path-xx" d="M749.58,510.56l-3.82-.61-1.84-.32h0l-2.06-.24-2.18-4.4-1.26-2.55c-.51-1-1.34-1-1.84,0L735.31,505l-2.18,4.37-2.06.25h0l-2.17.37-3.48.53c-1.13.17-1.39,1-.57,1.77l2,2,2.05,2h0l1.39,1.45-.46,2h0l-.38,2.81-.43,2.82c-.19,1.13.5,1.61,1.51,1.08l2.54-1.46,2.54-1.47h0l1.84-1,1.84,1h0l2.52,1.47,2.53,1.39c1,.54,1.68.08,1.49-1l-.48-2.8-.84-4.86,3.54-3.44,2-2C751,511.51,750.71,510.73,749.58,510.56Z" style="fill: #5f71a7"/>
<path class="path-xx" d="M845.2,485.4H779.92c-.66,0-1.2.75-1.2,1.68v49.33c0,.94.54,1.69,1.2,1.69H845.2c.66,0,1.19-.75,1.19-1.69V487.08C846.39,486.15,845.86,485.4,845.2,485.4Z" style="fill: #7889b9"/>
<path class="path-xx" d="M825,510.56l-3.82-.61-1.84-.32h0l-2.06-.24-2.18-4.4-1.26-2.55c-.51-1-1.34-1-1.85,0L810.76,505l-2.18,4.37-2.06.25h0l-2.17.37-3.48.53c-1.13.17-1.39,1-.57,1.77l2,2,2,2h0l1.39,1.45-.46,2h0l-.38,2.81-.43,2.82c-.19,1.13.5,1.61,1.51,1.08l2.54-1.46,2.54-1.47h0l1.85-1,1.84,1h0l2.52,1.47,2.53,1.39c1,.54,1.68.08,1.49-1l-.48-2.8-.84-4.86,3.54-3.44,2-2C826.41,511.51,826.16,510.73,825,510.56Z" style="fill: #5f71a7"/>
<rect class="path-xx" x="704.69" y="438.08" width="18.23" height="18.23" rx="2.57" style="fill: #7889b9"/>
<g>
<path class="path-xx" d="M837.27,471.62a1.23,1.23,0,0,1,1.32,1.18v2.29a1.39,1.39,0,0,1-1.31,1.39H705.86a1.37,1.37,0,0,1-1.29-1.39V472.8a1.2,1.2,0,0,1,1.29-1.18Z" style="fill: #e9e9ed"/>
<path class="path-xx" d="M849.42,462.87a1.23,1.23,0,0,1,1.33,1.18v2.29a1.39,1.39,0,0,1-1.31,1.39H705.86a1.37,1.37,0,0,1-1.29-1.39v-2.29a1.2,1.2,0,0,1,1.29-1.18Z" style="fill: #e9e9ed"/>
</g>
<path class="path-xx" d="M764.18,448.93a1.24,1.24,0,0,1,1.33,1.19v2.29a1.38,1.38,0,0,1-1.31,1.38H730.65a1.36,1.36,0,0,1-1.28-1.38v-2.29a1.21,1.21,0,0,1,1.29-1.19Z" style="fill: #e9e9ed"/>
</g>
<rect x="608.76" y="292.24" width="367.72" height="18.21" style="fill: #4267b2"/>
<rect x="928.43" y="297.59" width="7.72" height="7.72" rx="1.09" style="fill: #1a2947"/>
<path d="M915.55,300H910c-.6,0-1.09.18-1.09.4v2c0,.22.49.39,1.09.39h5.54c.6,0,1.09-.17,1.09-.39v-2C916.64,300.22,916.15,300,915.55,300Z" style="fill: #1a2947"/>
<path d="M898.28,300h-14c-1.52,0-2.75.18-2.75.4v2c0,.22,1.23.39,2.75.39h14c1.52,0,2.75-.17,2.75-.39v-2C901,300.22,899.8,300,898.28,300Z" style="fill: #1a2947"/>
<path d="M873.2,300H857.31c-1.72,0-3.11.18-3.11.4v2c0,.22,1.39.39,3.11.39H873.2c1.72,0,3.11-.17,3.11-.39v-2C876.31,300.22,874.92,300,873.2,300Z" style="fill: #1a2947"/>
<rect x="940.14" y="297.59" width="7.72" height="7.72" rx="1.09" style="fill: #1a2947"/>
<rect x="950.55" y="297.59" width="7.72" height="7.72" rx="1.09" style="fill: #1a2947"/>
<circle cx="844.44" cy="302" r="4.55" style="fill: #1a2947"/>
<polygon points="963.47 301.35 968.67 301.35 966.07 303.95 963.47 301.35" style="fill: #1a2947"/>
<rect x="646.06" y="297.44" width="136.59" height="9.11" style="fill: #fff"/>
<rect x="630.45" y="297.44" width="9.11" height="9.11" style="fill: #fff"/>
<rect x="630.45" y="297.44" width="9.11" height="9.11" style="fill: #1a2947"/>
</g>
<path d="M594.9,510.56H988.19a0,0,0,0,1,0,0V539.2a8,8,0,0,1-8,8H602.9a8,8,0,0,1-8-8V510.56A0,0,0,0,1,594.9,510.56Z" style="fill: #ecf0f1"/>
<circle cx="791.55" cy="528.55" r="6.87"/>
<path d="M843.9,580.9c-13.42-13.41-10.47-33.37-10.47-33.37l-40.9-.33v0l-40.9.33s2.94,20-10.47,33.37" style="fill: #bdc3c7"/>
<path d="M982.81,279,600,279.46a5.24,5.24,0,0,0-5.23,5.24L595,510.79l393.29-.47-.28-226.09A5.24,5.24,0,0,0,982.81,279Zm-6.28,218.9-367.1.44-.25-205.47,367.1-.45Z"/>
</g>
<g id="Lamp">
<path d="M330,581H442s-24-24-49-24S343,570,330,581Z" style="fill: #706fd3"/>
<polyline points="363.76 562.28 312 496 375 401 378 413 325 495 374 560" style="fill: #706fd3"/>
<path d="M385.5,388.5s7-4,13-4,47,34,47,37,2,7-5,12-38,25-38,25-6,3-10-1-18-54-17-58S381.5,390.5,385.5,388.5Z" style="fill: #706fd3"/>
<path d="M452.28,448.22" style="fill: none;stroke: #2d2c28;stroke-miterlimit: 10"/>
</g>
<g id="table">
<g id="shuffles">
<rect x="296" y="623" width="194" height="92.44" style="fill: #40407a"/>
<rect x="296" y="718.23" width="194" height="92.44" style="fill: #40407a;stroke: #2c2c54;stroke-miterlimit: 10;stroke-width: 2px"/>
<rect x="296" y="812.56" width="194" height="92.44" style="fill: #40407a;stroke: #2c2c54;stroke-miterlimit: 10;stroke-width: 2px"/>
<rect x="918" y="623" width="194" height="92.44" style="fill: #40407a"/>
<rect x="918" y="718.23" width="194" height="92.44" style="fill: #40407a;stroke: #2c2c54;stroke-miterlimit: 10;stroke-width: 2px"/>
<rect x="918" y="812.56" width="194" height="92.44" style="fill: #40407a;stroke: #2c2c54;stroke-miterlimit: 10;stroke-width: 2px"/>
</g>
<line x1="366" y1="674" x2="420" y2="674" style="fill: none;stroke: #ecf0f1;stroke-miterlimit: 10"/>
<line x1="366" y1="766" x2="420" y2="766" style="fill: none;stroke: #ecf0f1;stroke-miterlimit: 10"/>
<line x1="366" y1="858" x2="420" y2="858" style="fill: none;stroke: #ecf0f1;stroke-miterlimit: 10"/>
<line x1="988" y1="674" x2="1042" y2="674" style="fill: none;stroke: #ecf0f1;stroke-miterlimit: 10"/>
<line x1="988" y1="766" x2="1042" y2="766" style="fill: none;stroke: #ecf0f1;stroke-miterlimit: 10"/>
<line x1="988" y1="858" x2="1042" y2="858" style="fill: none;stroke: #ecf0f1;stroke-miterlimit: 10"/>
<rect x="296" y="602.5" width="816.5" height="20.5" style="fill: #3f407a"/>
<rect x="325" y="583" width="787" height="18" style="fill: #40407a"/>
<line x1="536" y1="728" x2="742" y2="728" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px"/>
<polyline class="lamp" points="414 450 442 581 599 581 432 439 424 444" style="fill: url(#linear-gradient)"/>
</g>
<g id="Girl">
<path d="M599,454.5" style="fill: none;stroke: #000;stroke-miterlimit: 10"/>
<g id="Body">
<path d="M600.68,471.23l-.18,17.27s-40.5,23.5-42,34c-.53,3.71,0,15,0,15l2,139,109-3S671,515,668,505c-1.79-6-19.5-15.5-19.5-15.5h-22v-16Z" style="fill: #706fd3"/>
<path d="M560,676v41l18-1V872c0,11,34.21-16,35-27,2-28,2-132,2-132l68-2s-4,148,0,165c2.73,11.61,37.77-14.28,40-26,4-21,0-117,0-117s0-25-1-32c-1.5-10.52-22-26-32-28-4.9-1-20,0-20,0Z" style="fill: #706fd3"/>
</g>
<g id="HAND">
<path d="M714,562l46,7s3,4,0,12H714Z" style="fill: #706fd3"/>
<g>
<path d="M760.69,580.5a19,19,0,0,0,0-10.88l12.2,1.87c4,1,4.58,1.91,4.58,4.51s-2.14,4.14-2.65,4.5Z" style="fill: #fff"/>
<path d="M761.41,570.23,772.8,572c3.87,1,4.2,1.78,4.2,4a5.35,5.35,0,0,1-2.31,4H761.35a19.57,19.57,0,0,0,.06-9.77M760,569a18.5,18.5,0,0,1,0,12h15s3-1.84,3-5c0-3-1-4-5-5l-13-2Z"/>
</g>
</g>
<g id="HEAD">
<path d="M669.5,419.5c0,30.38-22.77,54-49,54s-53-18.62-53-49,25.27-53,51.5-53S669.5,389.12,669.5,419.5Z" style="fill: #706fd3"/>
<ellipse cx="583.55" cy="448.07" rx="13.89" ry="18.5" transform="translate(-151.51 416.63) rotate(-35.07)" style="fill: #40407a"/>
<path d="M567.5,452.5c-2.93-1.43-6.68-2.89-8-7-1-3.07,2-4-1-7-3.28-3.28-14.21-.32-22,5-4.31,2.94-8.09,5.52-9,10s1.52,9.32,5,16c2.26,4.34,3.23,5,4,8,.32,1.25,2.16,8.5-1,12-5.33,5.91-20.71-3.55-24,1-2.57,3.55,4.55,12.45,5,13a34.05,34.05,0,0,0,29,12,33.45,33.45,0,0,0,20-9c5.67-5.51,7.63-11.7,9-16,1-3.25.11-2,2-19,.51-4.62.77-6.47,0-9C574.91,457.28,570.45,454.14,567.5,452.5Z" style="fill: #706fd3"/>
<path d="M570.5,454.5c-1,.16-2.46,4.41-5,22-1.46,10.1-1,10.27-2,12-3.41,6.16-9.87,9.07-22,12-6.38,1.54-13.41,1.82-20,2-1.85.05-5,0-5,0s6.15,8.43,15,11c5.55,1.61,12.62,2.26,18,1,6-1.4,10.74-3.27,16-8,10-9,9.58-23.61,10-27s2-9,1-17C576.36,461.41,571.31,454.36,570.5,454.5Z" style="fill: #40407a"/>
<path d="M608.5,457.5c7,0,26-2,34-9s13-21,13-21,4-16,4-23a88.68,88.68,0,0,1,1-13s4.21,3.94,6.93,13.37c5.07,17.63,4.07,23.63,1.07,34.63-2.59,9.5-7,19-19,26-9.15,5.34-17,8-36.39,7.51-18-.45-21.61-7.51-21.61-7.51s4.06-2.7,5-4a32.59,32.59,0,0,0,2.2-5.25Z" style="fill: #40407a"/>
</g>
</g>
<g id="Chair">
<path d="M545,634c0-20.26,2-74.92,2-81,0-7,37-43,43-43h41v80S545,639,545,634Zm172,0c0-20.26-2-74.92-2-81,0-7-37-43-43-43H631v80S717,639,717,634Z" style="fill: #40407a;stroke: #2c2c54;stroke-miterlimit: 10"/>
<rect x="607" y="537" width="47" height="37" style="fill: #ecf0f1"/>
<rect x="620" y="553" width="20" height="175" style="fill: #40407a"/>
<rect x="627" y="737" width="10" height="134" style="fill: #40407a;stroke: #2c2c54;stroke-miterlimit: 10"/>
<path d="M556,869h-7s16-30,27-34c12.56-4.57,51-16,51-16v8s-39,11-47,15C573.19,845.41,556,869,556,869Z" style="fill: #40407a;stroke: #2c2c54;stroke-miterlimit: 10"/>
<ellipse cx="639" cy="725" rx="104.5" ry="12.5" style="fill: #40407a;stroke: #2c2c54;stroke-miterlimit: 10"/>
<path d="M743.5,731.5" style="fill: #40407a"/>
<path d="M534,732" style="fill: #40407a"/>
<path d="M708,869h7s-16-30-27-34c-12.56-4.57-51-16-51-16v8s39,11,47,15C690.81,845.41,708,869,708,869Z" style="fill: #40407a;stroke: #2c2c54;stroke-miterlimit: 10"/>
<circle cx="554.5" cy="881.5" r="13.5" style="fill: #40407a;stroke: #2c2c54;stroke-miterlimit: 10"/>
<circle cx="631.5" cy="881.5" r="13.5" style="fill: #40407a;stroke: #2c2c54;stroke-miterlimit: 10"/>
<circle cx="710.5" cy="881.5" r="13.5" style="fill: #40407a;stroke: #2c2c54;stroke-miterlimit: 10"/>
<path d="M980,1232.5" style="fill: none;stroke: #fff;stroke-miterlimit: 10"/>
<path d="M987.42,546.39" style="fill: none;stroke: #fff;stroke-miterlimit: 10"/>
</g>
<g id="Repro">
<path d="M1052.5,473.5s15,0,21,4,8,7,9,9,1,79,1,79-1,8-6,12-24,3-25,3m0-107s-15,0-21,4-8,7-9,9-1,79-1,79,1,8,6,12,24,3,25,3" style="fill: #706fd3"/>
<circle cx="1051.75" cy="553.75" r="21.75" style="fill: #40407a"/>
<circle cx="1052.75" cy="500.75" r="13.75" style="fill: #40407a"/>
<circle cx="1053" cy="501" r="11"/>
<circle cx="1052" cy="554" r="19"/>
</g>
<g id="Layer_11" data-name="Layer 11">
<g id="RELOCISTA">
<text transform="translate(1682.98 119.5)" style="font-size: 57.41644287109375px;fill: #fff;font-family: ComicSansMS-Bold, Comic Sans MS;font-weight: 700">locist</text>
<text transform="translate(1614.13 119.5)" style="font-size: 57.41644287109375px;fill: #e74c3c;font-family: ComicSansMS-Bold, Comic Sans MS;font-weight: 700">Re</text>
<g style="clip-path: url(#clip-path-2)">
<path d="M1844.37,87.88a2.87,2.87,0,1,0-2.88-2.86A2.87,2.87,0,0,0,1844.37,87.88Zm-12.06,12a40,40,0,0,1,.49-5.62c3.09-8.42,10.54-24.15,12.11-24.15q1.56,0,7.42,14.59l1.21-5c-1-.74-1.55-1.22-1.55-1.45s.17-1.46.7-1.3a23,23,0,0,1,5.61,2.47c.46.38-.36,1.14-.36,1.28s-.64.14-1.94,0l-.71,7.45,3.56,6.18a3.4,3.4,0,0,1-.55,4.08,2.56,2.56,0,0,1-.27.29c-.61.56-1-.41-1.28-2.92a53.27,53.27,0,0,0-8.3-1.45,20.17,20.17,0,0,0-8.16,1.46c-3,1.08-1.81,18.33-4.66,19.6-2.25,1-3.32-8.69-3.32-10.2Z" style="fill: none;stroke: #34495e;stroke-miterlimit: 10"/>
<line x1="1841.49" y1="85.02" x2="1847.24" y2="85.01" style="fill: none;stroke: #34495e;stroke-linecap: square;stroke-miterlimit: 10"/>
<line x1="1844.37" y1="87.88" x2="1844.36" y2="82.14" style="fill: none;stroke: #34495e;stroke-linecap: square;stroke-miterlimit: 10"/>
</g>
<g style="clip-path: url(#clip-path-3)">
<text transform="translate(1830.6 119.47) rotate(-0.02)" style="font-size: 57.41648864746094px;fill: #fff;font-family: ComicSansMS-Bold, Comic Sans MS;font-weight: 700">a</text>
</g>
<g>
<path d="M1844.37,87.88a2.87,2.87,0,1,0-2.88-2.86A2.87,2.87,0,0,0,1844.37,87.88Zm-12.06,12a40,40,0,0,1,.49-5.62c3.09-8.42,10.54-24.15,12.11-24.15q1.56,0,7.42,14.59l1.21-5c-1-.74-1.55-1.22-1.55-1.45s.17-1.46.7-1.3a23,23,0,0,1,5.61,2.47c.46.38-.36,1.14-.36,1.28s-.64.14-1.94,0l-.71,7.45,3.56,6.18a3.4,3.4,0,0,1-.55,4.08,2.56,2.56,0,0,1-.27.29c-.61.56-1-.41-1.28-2.92a53.27,53.27,0,0,0-8.3-1.45,20.17,20.17,0,0,0-8.16,1.46c-3,1.08-1.81,18.33-4.66,19.6-2.25,1-3.32-8.69-3.32-10.2Z" style="fill: #fff;fill-rule: evenodd"/>
</g>
<text/> </g>
</g>
</svg>
Raw
relocista-landing-page.markdown

Relocista landing page

IBM invites you to think. A modern retro poster for the IBM think campaign. Combines SVG dash technique with animations with anime.js to animate circles to the logo. Uses SVG blend modes to recreate the blending of colors in the logo

A Pen by Marián Mrva on CodePen.

License.

Raw
script.js
//
window.onload=function() {
// let targets = Array(54).fill(0).map((e,i)=>i+1).map((x) => '.path-' +x);
// console.log('targetss', targets);
let pathAnimation = anime({
targets: '.path-xx', //targets,
easing: 'easeInOutQuad',
translateY: -550,
duration: 23000,
direction: 'normal',
complete: function(daco, err) {
daco.restart();
console.log("It's alive!!", daco); ;
}
});
let pathAnimationMoon = anime({
targets: '.moon',
opacity: [0.4, 0.6],
easing: 'easeInOutQuad',
duration: 2000,
direction: 'alternate',
loop: true
});
let pathAnimationLamp = anime({
targets: '.lamp',
opacity: [0.25, 1],
duration: 2000,
endDelay: 1000,
delay: 1000,
loop: true,
easing: 'linear',
direction: 'alternate'
});
};
async function animateWindows() {
const initialObj = {
fill: '#000',
duration: 1000,
loop: false,
easing: 'linear',
direction: 'normal'
}
await anime({
delay: 1000,
targets: '.window-1',
fill: '#000',
duration: 1000,
loop: false,
easing: 'linear',
direction: 'normal'
}).finished
await anime(Object.assign(initialObj, {
delay: 2000,
targets: '.window-2',
}))
await anime(Object.assign(initialObj, {
delay: 4000,
targets: '.window-3',
}))
await anime(Object.assign(initialObj, {
delay: 3500,
targets: '.window-4',
}))
await anime(Object.assign(initialObj, {
delay: 4250,
targets: '.window-5',
}))
await anime(Object.assign(initialObj, {
delay: 6000,
targets: '.window-6',
}))
await anime(Object.assign(initialObj, {
delay: 6500,
targets: '.window-7',
}))
await anime(Object.assign(initialObj, {
delay: 7000,
targets: '.window-8',
}))
await anime(Object.assign(initialObj, {
duration: 100,
delay: 10000,
targets: '.window-9',
}))
};
animateWindows();
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
Raw
style.css
body {
background-color: #2c2c54;
margin: 0;
padding: 0;
overflow: hidden;
}
.n1 {
bottom: 170px;
color: #6f6fd3;
}
.n2 {
bottom: 80px;
color: #ecf0f1;
}
.n3 {
bottom: 0;
color: #e74c3c;
}
h2 {
position: fixed;
font-size: 65px;
font-family: "Comic Sans MS", sans-serif;
right: 30px;
font-weight: 700;
}
.scene-svg {
position: fixed;
top: 0;
bottom: 0;
left: 0;
height: 90%;
right: 0;
}
.monitor {
width:20%;
position: absolute;
left: 50%;
top: 23%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment