Initial version of new design (#4)
This commit is contained in:
Michael Kohler
Родитель
73432beb98
Коммит
2250863b4c
Двоичные данные
assets/fox.png
Двоичные данные
assets/fox.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 45 KiB После Ширина: | Высота: | Размер: 59 KiB |
|
|
@ -0,0 +1,154 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 1024 444.1" style="enable-background:new 0 0 1024 444.1;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#558194;}
|
||||
.st1{fill:#BEC1BE;fill-opacity:0.5;}
|
||||
.st2{fill:#88A4B8;fill-opacity:0.5;}
|
||||
.st3{fill:#88D4E7;fill-opacity:0.6;}
|
||||
.st4{fill:#BCE5F1;}
|
||||
.st5{fill:#558194;fill-opacity:0.5;}
|
||||
.st6{fill:#B8E4ED;}
|
||||
.st7{opacity:0.5;fill:#558194;enable-background:new ;}
|
||||
.st8{fill:#B8E4ED;fill-opacity:0.6;}
|
||||
.st9{fill:#BCE5F1;fill-opacity:0.6;}
|
||||
.st10{fill:#88D4E7;}
|
||||
.st11{fill:#5EC9DF;}
|
||||
.st12{fill:#3CBECC;}
|
||||
.st13{fill:none;stroke:#BCE5F1;stroke-width:4.8;stroke-linecap:round;stroke-linejoin:round;}
|
||||
.st14{opacity:0.8;}
|
||||
.st15{fill:#F3F4EC;}
|
||||
.st16{filter:url(#Adobe_OpacityMaskFilter);}
|
||||
.st17{fill:#FFFFFF;}
|
||||
.st18{mask:url(#c_1_);fill:#E3E5D7;fill-opacity:0.75;}
|
||||
.st19{filter:url(#Adobe_OpacityMaskFilter_1_);}
|
||||
.st20{mask:url(#c_2_);fill:#D2D6C5;}
|
||||
.st21{filter:url(#Adobe_OpacityMaskFilter_2_);}
|
||||
.st22{mask:url(#c_3_);fill:#D2D6C5;}
|
||||
.st23{filter:url(#Adobe_OpacityMaskFilter_3_);}
|
||||
.st24{mask:url(#c_4_);fill:#D2D6C5;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M32.2,15.8l-3.3,0.6l-1.3,3l-2.2-2.5l-3.3,0.4l1.1-3.1l-2-2.6l3.3-0.6l1.3-3l2.2,2.5l3.3-0.4l-1.1,3.1
|
||||
L32.2,15.8z"/>
|
||||
<path class="st1" d="M84.7,93.7l-2.2,1.4l-0.1,2.6l-2.3-1.2l-2.2,1.2l-0.1-2.5l-2.2-1.4l2.2-1.4l0.1-2.6l2.3,1.2l2.3-1.2l0.1,2.5
|
||||
L84.7,93.7z"/>
|
||||
<path class="st2" d="M938.4,335.5l0,2.1l1.9,1.2l-1.9,1.1l-0.1,2.1l-1.9-1l-2,1l0-2.1l-1.9-1.2l1.9-1.1l0.1-2.1l1.9,1L938.4,335.5z
|
||||
"/>
|
||||
<path class="st0" d="M824,259.3l-0.5,1.9l1.6,1.4l-2.2,0.6l-0.6,1.9l-1.7-1.3l-2.2,0.5l0.5-1.9l-1.6-1.4l2.2-0.6l0.6-1.9l1.7,1.3
|
||||
L824,259.3z M989.3,299.3l-1.3,0.1l-0.6,1.2l-0.8-1.1l-1.3,0.1l0.5-1.2l-0.7-1.2l1.3-0.1l0.6-1.2l0.8,1.1l1.3,0l-0.5,1.2
|
||||
L989.3,299.3z"/>
|
||||
<path class="st1" d="M53.2,273.3l1,2.5l-1.6,2.3l2.7,0.4l1.2,2.5l1.7-2.1l2.8,0.2l-1-2.5l1.6-2.3l-2.7-0.4l-1.2-2.5l-1.7,2.1
|
||||
L53.2,273.3z"/>
|
||||
<path class="st0" d="M581.3,95.4l0.7,2.1l-1.2,1.8l2,0.3l0.9,2l1.3-1.7l2,0.2l-0.7-2.1l1.2-1.8l-2-0.3l-0.9-2l-1.3,1.7L581.3,95.4z
|
||||
M137.3,248.5l0.5,1.1l-0.7,1l1.3,0.2l0.6,1.1l0.8-0.9l1.3,0.1l-0.5-1.1l0.7-1l-1.3-0.2l-0.6-1.1l-0.8,0.9L137.3,248.5z
|
||||
M97.3,328.5l0.5,1.1l-0.7,1l1.3,0.2l0.6,1.1l0.8-0.9l1.3,0.1l-0.5-1.1l0.7-1l-1.3-0.2l-0.6-1.1l-0.8,0.9L97.3,328.5z M285.1,109
|
||||
l-2.4,0.3l-1.1,2.1l-1.4-1.9l-2.5,0.1l1-2.2l-1.3-2l2.4-0.3l1.1-2.1l1.5,1.9l2.5-0.1l-1,2.2L285.1,109z M983.1,104l-1.8,0.5
|
||||
l1.3,1.2l-0.4,1.6l1.9-0.4l1.4,1.1l0.5-1.6l1.8-0.5l-1.3-1.2l0.4-1.6l-1.9,0.4l-1.4-1.1L983.1,104z"/>
|
||||
<path class="st3" d="M908.1,266.2l-2.6,1.7l-0.1,3.1l-2.7-1.5L900,271l-0.1-3.1l-2.6-1.7l2.6-1.7l0.1-3.1l2.7,1.5l2.7-1.5l0.1,3.1
|
||||
L908.1,266.2z"/>
|
||||
<path class="st0" d="M730.5,187.9c0,2.2-1.8,4-4.1,4c-2.3,0-4.1-1.8-4.1-4c0-2.2,1.8-4,4.1-4C728.7,183.9,730.5,185.7,730.5,187.9
|
||||
M927.5,169.5c0,0.8-0.6,1.4-1.4,1.4c-0.8,0-1.4-0.6-1.4-1.4c0,0,0,0,0,0c0-0.8,0.6-1.4,1.4-1.4
|
||||
C926.8,168.1,927.5,168.8,927.5,169.5"/>
|
||||
<path class="st4" d="M179.2,218c0,0.9-0.8,1.7-1.7,1.7c-0.9,0-1.7-0.7-1.7-1.7c0-0.9,0.8-1.7,1.7-1.7S179.2,217.1,179.2,218"/>
|
||||
<path class="st0" d="M140.6,144.7c0,1.8-1.5,3.3-3.4,3.3s-3.4-1.5-3.4-3.3c0-1.8,1.5-3.3,3.4-3.3S140.6,142.9,140.6,144.7
|
||||
M34,179.4c0,2.7-2.2,4.9-5,4.9c-2.8,0-5-2.2-5-4.9c0-2.7,2.2-4.9,5-4.9C31.8,174.5,34,176.7,34,179.4"/>
|
||||
<path class="st4" d="M275.3,189.3c0,1.4-1.1,2.5-2.5,2.5c-1.4,0-2.5-1.1-2.5-2.5c0-1.4,1.1-2.5,2.5-2.5
|
||||
C274.2,186.9,275.3,188,275.3,189.3"/>
|
||||
<path class="st0" d="M175.3,309.3c0,1.4-1.1,2.5-2.5,2.5c-1.4,0-2.5-1.1-2.5-2.5c0-1.4,1.1-2.5,2.5-2.5
|
||||
C174.2,306.9,175.3,308,175.3,309.3"/>
|
||||
<path class="st5" d="M335.3,429.3c0,1.4-1.1,2.5-2.5,2.5c-1.4,0-2.5-1.1-2.5-2.5c0-1.4,1.1-2.5,2.5-2.5
|
||||
C334.2,426.9,335.3,428,335.3,429.3 M363.3,438.3c0,0.8-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.6-1.5-1.5c0-0.8,0.7-1.5,1.5-1.5
|
||||
C362.6,436.9,363.3,437.5,363.3,438.3"/>
|
||||
<path class="st0" d="M697.3,388.5l0.5,1.1l-0.7,1l1.3,0.2l0.6,1.1l0.8-0.9l1.3,0.1l-0.5-1.1l0.7-1l-1.3-0.2l-0.6-1.1l-0.8,0.9
|
||||
L697.3,388.5z"/>
|
||||
<path class="st6" d="M749.2,348c0,0.9-0.8,1.7-1.7,1.7c-0.9,0-1.7-0.7-1.7-1.7c0-0.9,0.8-1.7,1.7-1.7S749.2,347.1,749.2,348"/>
|
||||
<path class="st0" d="M437.3,108.5l0.5,1.1l-0.7,1l1.3,0.2l0.6,1.1l0.8-0.9l1.3,0.1l-0.5-1.1l0.7-1l-1.3-0.2l-0.6-1.1l-0.8,0.9
|
||||
L437.3,108.5z M489.2,68c0,0.9-0.8,1.7-1.7,1.7c-0.9,0-1.7-0.7-1.7-1.7c0-0.9,0.8-1.7,1.7-1.7S489.2,67.1,489.2,68 M929.2,78
|
||||
c0,0.9-0.8,1.7-1.7,1.7c-0.9,0-1.7-0.7-1.7-1.7c0-0.9,0.8-1.7,1.7-1.7S929.2,77.1,929.2,78 M843.3,328.3c0,0.8-0.7,1.5-1.5,1.5
|
||||
c-0.8,0-1.5-0.6-1.5-1.5c0-0.8,0.7-1.5,1.5-1.5C842.6,326.9,843.3,327.5,843.3,328.3 M677.6,78.1c0,1.6-1.3,2.9-3,2.9s-3-1.3-3-2.9
|
||||
c0-1.6,1.3-2.9,3-2.9S677.6,76.5,677.6,78.1 M156.2,128c0,0.9-0.8,1.7-1.7,1.7c-0.9,0-1.7-0.8-1.7-1.7c0-0.9,0.8-1.7,1.7-1.7
|
||||
C155.5,126.3,156.2,127.1,156.2,128"/>
|
||||
<path class="st5" d="M987.6,441.1c-2.3,0-4.2-1.8-4.2-4.1c0-2.3,1.9-4.1,4.2-4.1s4.2,1.8,4.2,4.1
|
||||
C991.8,439.3,989.9,441.1,987.6,441.1"/>
|
||||
<path class="st0" d="M981.2,187.6l-2.2,0.2l-1,1.9l-1.3-1.8l-2.2,0.1l0.9-2l-1.2-1.8l2.2-0.2l1-1.9l1.3,1.7l2.2-0.1l-0.9,2
|
||||
L981.2,187.6z M879.7,211.9c0,1.2-1,2.2-2.3,2.2c-1.3,0-2.3-1-2.3-2.2s1-2.2,2.3-2.2C878.7,209.7,879.7,210.7,879.7,211.9"/>
|
||||
<path class="st7" d="M723.8,132.6c0,1.4-1.2,2.6-2.7,2.6c-1.5,0-2.7-1.2-2.7-2.6s1.2-2.6,2.7-2.6
|
||||
C722.6,130,723.8,131.1,723.8,132.6"/>
|
||||
<path class="st8" d="M862.7,339.3c0,1-0.8,1.9-1.9,1.9c-1,0-1.9-0.8-1.9-1.9c0-1,0.8-1.9,1.9-1.9
|
||||
C861.9,337.5,862.7,338.3,862.7,339.3"/>
|
||||
<path class="st5" d="M925.7,413.3c0,1-0.8,1.9-1.9,1.9c-1,0-1.9-0.8-1.9-1.9c0-1,0.8-1.9,1.9-1.9
|
||||
C924.9,411.5,925.7,412.3,925.7,413.3"/>
|
||||
<path class="st0" d="M348.9,4.7l-1.7,1.1l-0.1,2l-1.8-0.9l-1.8,0.9l-0.1-2l-1.7-1.1l1.7-1.1l0.1-2l1.8,0.9l1.8-0.9l0.1,2L348.9,4.7
|
||||
z"/>
|
||||
<path class="st9" d="M422.9,142.7c0,1.5-1.2,2.7-2.7,2.7c-1.5,0-2.7-1.2-2.7-2.7s1.2-2.7,2.7-2.7
|
||||
C421.7,140,422.9,141.2,422.9,142.7"/>
|
||||
<path class="st5" d="M997.8,283.8c0,1.9-1.5,3.4-3.4,3.4c-1.9,0-3.4-1.5-3.4-3.4c0-1.9,1.5-3.4,3.4-3.4
|
||||
C996.2,280.5,997.8,282,997.8,283.8"/>
|
||||
<g>
|
||||
<path class="st10" d="M893.1,110.1c-8.8-5-18.8-7.7-29-7.7c-23.7,0-45,14.2-54,36.1c-9.1,21.9-4,47,12.7,63.7
|
||||
c16.7,16.7,41.9,21.7,63.7,12.7c21.9-9.1,36.1-30.4,36.1-54.1v0c0-18.3-8.5-35.5-23.1-46.5c-1.6,1.5-4.1,1.4-5.6-0.2
|
||||
C892.9,113.1,892.6,111.5,893.1,110.1L893.1,110.1z"/>
|
||||
<path class="st11" d="M911.2,155.9c0,25.8-20.9,46.7-46.7,46.7c-25.8,0-46.7-20.9-46.7-46.7s20.9-46.7,46.7-46.7
|
||||
C890.3,109.1,911.2,130,911.2,155.9C911.2,155.9,911.2,155.9,911.2,155.9z"/>
|
||||
<path class="st12" d="M847.9,198.8c0,2.3-1.8,4.3-4.2,4.3c-2.3,0-4.3-1.8-4.3-4.2c0,0,0-0.1,0-0.1c0-2.3,2-4.2,4.3-4.2
|
||||
C846,194.7,847.9,196.5,847.9,198.8z M908.6,140.9c0,4.8-3.9,8.6-8.6,8.6s-8.6-3.9-8.6-8.6s3.9-8.6,8.6-8.6
|
||||
S908.6,136.1,908.6,140.9z"/>
|
||||
<path class="st6" d="M886.4,206.4c-2.9,0-5.2,2.3-5.2,5.2c0,1.8,0.9,3.4,2.4,4.4c2.8-1,5.5-2.2,8.1-3.5c0.5-2.8-1.4-5.5-4.3-6
|
||||
C887,206.5,886.7,206.4,886.4,206.4L886.4,206.4L886.4,206.4z"/>
|
||||
<path class="st13" d="M807.5,185.9c32.7,5.2,81.1-2.4,115.3-42"/>
|
||||
<path class="st12" d="M840,120.9c0.8,1.1-1.1,3.7-4.1,5.8c-3,2.1-6.1,2.8-6.9,1.7c-0.8-1.1,1.1-3.7,4.1-5.8S839.3,119.7,840,120.9
|
||||
L840,120.9L840,120.9z"/>
|
||||
</g>
|
||||
<g transform="translate(82 211)" class="st14">
|
||||
<g>
|
||||
<circle id="b_1_" class="st15" cx="30" cy="-11.4" r="30"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="5" y="-38.4" width="49" height="49">
|
||||
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<mask maskUnits="userSpaceOnUse" x="5" y="-38.4" width="49" height="49" id="c_1_">
|
||||
<g class="st16">
|
||||
<circle id="b_2_" class="st17" cx="30" cy="-11.4" r="30"/>
|
||||
</g>
|
||||
</mask>
|
||||
<circle class="st18" cx="29.5" cy="-13.9" r="24.5"/>
|
||||
<defs>
|
||||
<filter id="Adobe_OpacityMaskFilter_1_" filterUnits="userSpaceOnUse" x="41" y="-32.4" width="24" height="24">
|
||||
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<mask maskUnits="userSpaceOnUse" x="41" y="-32.4" width="24" height="24" id="c_2_">
|
||||
<g class="st19">
|
||||
<circle id="b_3_" class="st17" cx="30" cy="-11.4" r="30"/>
|
||||
</g>
|
||||
</mask>
|
||||
<circle class="st20" cx="53" cy="-20.4" r="12"/>
|
||||
<defs>
|
||||
<filter id="Adobe_OpacityMaskFilter_2_" filterUnits="userSpaceOnUse" x="3" y="-17.4" width="7" height="7">
|
||||
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<mask maskUnits="userSpaceOnUse" x="3" y="-17.4" width="7" height="7" id="c_3_">
|
||||
<g class="st21">
|
||||
<circle id="b_4_" class="st17" cx="30" cy="-11.4" r="30"/>
|
||||
</g>
|
||||
</mask>
|
||||
<circle class="st22" cx="6.5" cy="-13.9" r="3.5"/>
|
||||
<defs>
|
||||
<filter id="Adobe_OpacityMaskFilter_3_" filterUnits="userSpaceOnUse" x="24" y="1.6" width="13" height="13">
|
||||
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<mask maskUnits="userSpaceOnUse" x="24" y="1.6" width="13" height="13" id="c_4_">
|
||||
<g class="st23">
|
||||
<circle id="b_5_" class="st17" cx="30" cy="-11.4" r="30"/>
|
||||
</g>
|
||||
</mask>
|
||||
<circle class="st24" cx="30.5" cy="8.1" r="6.5"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 9.3 KiB |
|
|
@ -0,0 +1,57 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1024" height="583" viewBox="0 0 1024 583">
|
||||
<defs>
|
||||
<radialGradient id="a" cx="51.008%" cy="100%" r="57.461%" fx="51.008%" fy="100%" gradientTransform="matrix(.5371 0 0 1.04575 .236 -.046)">
|
||||
<stop offset="0%" stop-color="#535382"/>
|
||||
<stop offset="100%" stop-color="#1A1940"/>
|
||||
</radialGradient>
|
||||
<circle id="b" cx="30" cy="30" r="30"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path fill="url(#a)" d="M0 0h1024v550H0z"/>
|
||||
<path fill="#558194" d="M32.187 57.186l-3.253.617-1.3 3.008-2.173-2.47-3.292.392 1.084-3.088-1.99-2.61 3.254-.616 1.3-3.008 2.173 2.47 3.293-.392-1.086 3.088z"/>
|
||||
<path fill="#BEC1BE" fill-opacity=".5" d="M84.663 135.112l-2.159 1.35-.089 2.55-2.253-1.199-2.249 1.198-.09-2.549-2.16-1.35 2.16-1.35.09-2.55 2.25 1.2 2.252-1.198.09 2.548z"/>
|
||||
<path fill="#88A4B8" fill-opacity=".5" d="M938.4 376.878l.04 2.135 1.862 1.162-1.903 1.102-.117 2.135-1.941-1.034-1.976.97-.04-2.136-1.862-1.164 1.904-1.101.116-2.135 1.941 1.037z"/>
|
||||
<path fill="#558194" d="M823.974 300.66l-.484 1.895 1.574 1.402-2.173.59-.641 1.864-1.685-1.305-2.214.458.486-1.895-1.574-1.403 2.173-.59.64-1.864 1.686 1.308zM989.263 340.658l-1.312.146-.618 1.207-.778-1.104-1.322.053.535-1.245-.704-1.153 1.312-.146.619-1.205.78 1.102 1.32-.05-.535 1.242z"/>
|
||||
<path fill="#BEC1BE" fill-opacity=".5" d="M53.221 314.735l1.019 2.545-1.577 2.254 2.749.405 1.194 2.472 1.731-2.14 2.768.214-1.017-2.543 1.575-2.255-2.748-.404-1.196-2.472-1.728 2.14z"/>
|
||||
<path fill="#558194" d="M581.273 136.775l.746 2.067-1.155 1.832 2.014.33.876 2.007 1.27-1.738 2.029.177-.746-2.07 1.156-1.832-2.014-.33-.88-2.006-1.266 1.738zM137.327 289.853l.475 1.113-.74.985 1.286.18.557 1.08.806-.936 1.294.095-.476-1.115.735-.985-1.281-.178-.558-1.081-.808.937zM97.327 369.853l.475 1.113-.74.985 1.286.18.557 1.08.806-.936 1.294.095-.476-1.115.735-.985-1.281-.178-.558-1.081-.808.937zM285.063 150.445l-2.439.257-1.144 2.11-1.447-1.93-2.453.092.991-2.181-1.308-2.02 2.44-.255 1.146-2.107 1.45 1.926 2.45-.088-.99 2.175zM983.108 145.393l-1.844.5 1.336 1.191-.413 1.608 1.877-.389 1.43 1.109.543-1.583 1.845-.5-1.336-1.19.413-1.607-1.88.39-1.428-1.11z"/>
|
||||
<path fill="#88D4E7" fill-opacity=".6" d="M908.064 307.611l-2.592 1.663-.105 3.137-2.702-1.474-2.704 1.474-.105-3.137-2.593-1.663 2.593-1.66.105-3.14 2.704 1.474 2.702-1.474.105 3.14z"/>
|
||||
<path fill="#558194" d="M730.55 229.303c0 2.217-1.828 4.015-4.083 4.015-2.252 0-4.082-1.798-4.082-4.015 0-2.218 1.83-4.015 4.082-4.015 2.255 0 4.083 1.797 4.083 4.015M927.46 210.945c0 .772-.638 1.398-1.426 1.398a1.41 1.41 0 0 1-1.422-1.398c0-.772.637-1.401 1.422-1.401.788 0 1.425.629 1.425 1.4"/>
|
||||
<path fill="#BCE5F1" d="M179.182 259.39c0 .919-.759 1.667-1.694 1.667-.936 0-1.695-.748-1.695-1.667 0-.92.76-1.667 1.695-1.667s1.694.748 1.694 1.667"/>
|
||||
<path fill="#558194" d="M140.625 186.117c0 1.825-1.504 3.303-3.36 3.303-1.856 0-3.36-1.478-3.36-3.303 0-1.826 1.504-3.304 3.36-3.304 1.856 0 3.36 1.478 3.36 3.304M34.008 220.812c0 2.719-2.24 4.922-5.005 4.922-2.763 0-5.003-2.203-5.003-4.922 0-2.716 2.24-4.92 5.003-4.92 2.765 0 5.005 2.204 5.005 4.92"/>
|
||||
<path fill="#BCE5F1" d="M275.314 230.7c0 1.355-1.117 2.454-2.494 2.454-1.378 0-2.494-1.1-2.494-2.453 0-1.355 1.116-2.454 2.494-2.454 1.377 0 2.494 1.099 2.494 2.454"/>
|
||||
<path fill="#558194" d="M175.314 350.7c0 1.355-1.117 2.454-2.494 2.454-1.378 0-2.494-1.1-2.494-2.453 0-1.355 1.116-2.454 2.494-2.454 1.377 0 2.494 1.099 2.494 2.454"/>
|
||||
<path fill="#558194" fill-opacity=".5" d="M335.314 470.7c0 1.355-1.117 2.454-2.494 2.454-1.378 0-2.494-1.1-2.494-2.453 0-1.355 1.116-2.454 2.494-2.454 1.377 0 2.494 1.099 2.494 2.454M363.284 479.702c0 .803-.663 1.455-1.48 1.455a1.467 1.467 0 0 1-1.478-1.455c0-.804.662-1.455 1.479-1.455.816 0 1.479.651 1.479 1.455"/>
|
||||
<path fill="#558194" d="M697.327 429.853l.475 1.113-.74.985 1.286.18.557 1.08.806-.936 1.294.095-.476-1.115.735-.985-1.281-.178-.558-1.081-.808.937z"/>
|
||||
<path fill="#B8E4ED" d="M749.182 389.39c0 .919-.759 1.667-1.694 1.667-.936 0-1.695-.748-1.695-1.667 0-.92.76-1.667 1.695-1.667s1.694.748 1.694 1.667"/>
|
||||
<path fill="#558194" d="M437.327 149.853l.475 1.113-.74.985 1.286.18.557 1.08.806-.936 1.294.095-.476-1.115.735-.985-1.281-.178-.558-1.081-.808.937zM489.182 109.39c0 .919-.759 1.667-1.694 1.667-.936 0-1.695-.748-1.695-1.667 0-.92.76-1.667 1.695-1.667s1.694.748 1.694 1.667M929.182 119.39c0 .919-.759 1.667-1.694 1.667-.936 0-1.695-.748-1.695-1.667 0-.92.76-1.667 1.695-1.667s1.694.748 1.694 1.667M843.284 369.702c0 .803-.663 1.455-1.48 1.455a1.467 1.467 0 0 1-1.478-1.455c0-.804.662-1.455 1.479-1.455.816 0 1.479.651 1.479 1.455M677.622 119.502c0 1.622-1.338 2.935-2.986 2.935-1.648 0-2.984-1.313-2.984-2.935 0-1.62 1.336-2.935 2.984-2.935s2.986 1.314 2.986 2.935M156.233 169.41c0 .928-.764 1.68-1.706 1.68-.944 0-1.709-.752-1.709-1.68 0-.927.765-1.68 1.709-1.68.942 0 1.706.753 1.706 1.68"/>
|
||||
<path fill="#558194" fill-opacity=".5" d="M987.598 482.524c-2.298 0-4.16-1.831-4.16-4.092 0-2.261 1.862-4.093 4.16-4.093s4.162 1.832 4.162 4.093c0 2.26-1.864 4.092-4.162 4.092"/>
|
||||
<path fill="#558194" d="M981.208 228.956l-2.187.234-1.025 1.913-1.297-1.75-2.201.085.889-1.98-1.17-1.832 2.185-.234 1.028-1.91 1.3 1.748 2.197-.079-.889 1.973zM879.696 253.32c0 1.23-1.012 2.225-2.263 2.225-1.25 0-2.261-.996-2.261-2.225s1.012-2.226 2.26-2.226c1.252 0 2.264.997 2.264 2.226"/>
|
||||
<path fill="#558194" d="M723.768 173.978c0 1.446-1.193 2.62-2.665 2.62-1.471 0-2.663-1.174-2.663-2.62 0-1.446 1.192-2.62 2.663-2.62 1.472 0 2.665 1.174 2.665 2.62" opacity=".5"/>
|
||||
<path fill="#B8E4ED" fill-opacity=".6" d="M862.708 380.713c0 1.027-.846 1.86-1.892 1.86-1.045 0-1.89-.833-1.89-1.86 0-1.027.845-1.862 1.89-1.862 1.046 0 1.892.835 1.892 1.862"/>
|
||||
<path fill="#558194" fill-opacity=".5" d="M925.708 454.713c0 1.027-.846 1.86-1.892 1.86-1.045 0-1.89-.833-1.89-1.86 0-1.027.845-1.862 1.89-1.862 1.046 0 1.892.835 1.892 1.862"/>
|
||||
<path fill="#558194" d="M348.886 46.085l-1.738 1.069-.071 2.016-1.812-.947-1.811.947-.073-2.016-1.74-1.069 1.74-1.067.073-2.018 1.81.948 1.813-.947.07 2.017z"/>
|
||||
<path fill="#BCE5F1" fill-opacity=".6" d="M422.935 184.082c0 1.481-1.22 2.682-2.725 2.682-1.508 0-2.729-1.201-2.729-2.682 0-1.481 1.221-2.683 2.73-2.683 1.504 0 2.724 1.202 2.724 2.683"/>
|
||||
<path fill="#558194" fill-opacity=".5" d="M997.763 325.205c0 1.854-1.53 3.356-3.412 3.356-1.887 0-3.412-1.502-3.412-3.356 0-1.853 1.525-3.356 3.412-3.356 1.883 0 3.412 1.503 3.412 3.356"/>
|
||||
<g>
|
||||
<path fill="#88D4E7" fill-rule="nonzero" d="M893.082 151.535a58.477 58.477 0 0 0-28.993-7.692c-23.658-.003-44.987 14.248-54.04 36.105-9.051 21.857-4.044 47.014 12.688 63.74 16.732 16.724 41.893 21.721 63.747 12.66 21.853-9.061 36.096-30.396 36.083-54.053v.03a58.476 58.476 0 0 0-23.069-46.544 3.965 3.965 0 0 1-6.417-4.246z"/>
|
||||
<path fill="#5EC9DF" fill-rule="nonzero" d="M911.206 197.26c-.003 25.8-20.92 46.713-46.72 46.713-25.8 0-46.717-20.913-46.72-46.713-.003-25.8 20.907-46.718 46.708-46.724a46.72 46.72 0 0 1 46.732 46.724z"/>
|
||||
<path fill="#3CBECC" fill-rule="nonzero" d="M847.915 240.2a4.248 4.248 0 1 1-8.495 0 4.248 4.248 0 0 1 8.495 0zM908.646 182.294a8.64 8.64 0 1 1-17.28 0 8.64 8.64 0 0 1 17.28 0z"/>
|
||||
<path fill="#B8E4ED" fill-rule="nonzero" d="M886.416 247.836a5.24 5.24 0 0 0-2.884 9.613 58.118 58.118 0 0 0 8.051-3.545 5.215 5.215 0 0 0-5.173-6.074l.006.006z"/>
|
||||
<path stroke="#BCE5F1" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.8" d="M807.468 227.283c32.666 5.203 81.14-2.403 115.25-42.003"/>
|
||||
<path fill="#3CBECC" fill-rule="nonzero" d="M840.02 162.251c.763 1.13-1.081 3.72-4.127 5.786-3.046 2.067-6.135 2.842-6.898 1.7-.763-1.141 1.082-3.718 4.128-5.785 3.046-2.067 6.134-2.83 6.903-1.7h-.006z"/>
|
||||
<path fill="#7574B7" fill-rule="nonzero" d="M819.484 141.872s-49.628 11.782-40.856 5.912c9.013-6.008 23.03-35.448 23.03-35.448l17.826 29.536z"/>
|
||||
<path stroke="#CCEBF4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" d="M833.796 165.051l-31.537-52.45"/>
|
||||
<path fill="#F3D55A" fill-rule="nonzero" d="M793 133.285l3.031 5.29 1.092-.653c.055-.11.115-.217.181-.321a2.357 2.357 0 0 1 .419-.488c.081-.069.168-.132.26-.188l.164-.089.17-.072.169-.05h.17c.152-.013.306.002.452.045.167.049.324.126.464.227.173.126.328.273.464.438.174.21.33.434.463.67.184.307.324.637.419.98.078.276.101.564.068.848-.03.245-.122.479-.266.682a1.686 1.686 0 0 1-.566.493l-.226.105-.226.077-.232.05h-.232c-.109.009-.219.009-.328 0a2.524 2.524 0 0 1-.673-.171 4.684 4.684 0 0 1-.35-.156l-.295 1.546c.159.078.323.144.481.2a4.824 4.824 0 0 0 .979.243c.165.012.332.012.497 0a3.502 3.502 0 0 0 1.533-.404 3.65 3.65 0 0 0 1.21-.975c.31-.393.525-.85.628-1.335a3.887 3.887 0 0 0 0-1.568 5.39 5.39 0 0 0-.645-1.662 6.425 6.425 0 0 0-.786-1.108 4.412 4.412 0 0 0-.86-.743 3.113 3.113 0 0 0-.899-.404 2.48 2.48 0 0 0-1.98.305 2.485 2.485 0 0 0-.57.493 3.473 3.473 0 0 0-.458.687l-1.477-2.554 3.111-2.089-.679-1.634-4.677 3.285zM804.89 125l-5.89 4.03.93 1.568 3.984-2.62L805.875 139l2.125-.266-2.187-12.215-.924-1.519"/>
|
||||
</g>
|
||||
<g opacity=".8" transform="translate(82 211)">
|
||||
<mask id="c" fill="#fff">
|
||||
<use xlink:href="#b"/>
|
||||
</mask>
|
||||
<use fill="#F3F4EC" xlink:href="#b"/>
|
||||
<circle cx="29.5" cy="27.5" r="24.5" fill="#E3E5D7" fill-opacity=".75" mask="url(#c)"/>
|
||||
<circle cx="53" cy="21" r="12" fill="#D2D6C5" mask="url(#c)"/>
|
||||
<circle cx="6.5" cy="27.5" r="3.5" fill="#D2D6C5" mask="url(#c)"/>
|
||||
<circle cx="30.5" cy="49.5" r="6.5" fill="#D2D6C5" mask="url(#c)"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 9.7 KiB |
90
index.html
90
index.html
|
|
@ -7,7 +7,7 @@
|
|||
<title>Firefox Quantum</title>
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Sans|Zilla+Slab">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Sans|Zilla+Slab|Zilla+Slab+Highlight:400,700">
|
||||
|
||||
<!-- Google Tag Manager -->
|
||||
<script src="js/dnt-helper.js"></script>
|
||||
|
|
@ -31,42 +31,70 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Firefox Quantum Release</h1>
|
||||
</header>
|
||||
<div class="home">
|
||||
<header>
|
||||
<div class="top-header">
|
||||
<a href="/">
|
||||
<span class="logo">mozilla</span><br />
|
||||
<span class="logo-subtext">Firefox Quantum Release</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<section id="container">
|
||||
<h1>Some text...</h1>
|
||||
<p>This is an explanation text...</p>
|
||||
</section>
|
||||
<div class="intro">
|
||||
<img src="assets/firefox-logo.png" />
|
||||
<h1>Firefox strikes back!</h1>
|
||||
<p>Some text....</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="tweets-container">
|
||||
<a href="https://twitter.com/intent/retweet?tweet_id=928033132908986369">Retweet the official tweet</a>
|
||||
<div class="tweet-container">
|
||||
<p>This is an example tweet... Number 1... #newfirefox</p>
|
||||
<a href="https://twitter.com/intent/tweet?text=This%20is%20an%20example%20tweet...%20Number%201...%20%23newfirefox">Tweet</a>
|
||||
<div id="tweets-container">
|
||||
<a class="btn" href="https://twitter.com/intent/retweet?tweet_id=928033132908986369">Retweet the official tweet</a>
|
||||
|
||||
<div id="tweets-examples-container">
|
||||
<div class="tweet-container">
|
||||
<p>The #newfirefox is out today and it’s twice as fast as before! 💥</p>
|
||||
<a
|
||||
class="btn btn-red"
|
||||
href="https://twitter.com/intent/tweet?text=This%20is%20an%20example%20tweet...%20Number%201...%20%23newfirefox"
|
||||
>Tweet</a>
|
||||
</div>
|
||||
|
||||
<div class="tweet-container">
|
||||
<p>The #newfirefox is faster than a ___________. Thanks @Firefox!</p>
|
||||
<a
|
||||
class="btn btn-blue"
|
||||
href="https://twitter.com/intent/tweet?text=This%20is%20an%20example%20tweet...%20Number%202...%20%23newfirefox"
|
||||
>Tweet</a>
|
||||
</div>
|
||||
|
||||
<div class="tweet-container">
|
||||
<p>The new @Firefox is here and it is FAST. For good. </p>
|
||||
<a
|
||||
class="btn btn-orange"
|
||||
href="https://twitter.com/intent/tweet?text=This%20is%20an%20example%20tweet...%20Number%203...%20%23newfirefox"
|
||||
>Tweet</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="btn" href="https://twitter.com/intent/tweet?text=%20%23newfirefox">Tweet your own text</a>
|
||||
</div>
|
||||
|
||||
<div class="tweet-container">
|
||||
<p>This is an example tweet... Number 2... #newfirefox</p>
|
||||
<a href="https://twitter.com/intent/tweet?text=This%20is%20an%20example%20tweet...%20Number%202...%20%23newfirefox">Tweet</a>
|
||||
</div>
|
||||
|
||||
<div class="tweet-container">
|
||||
<p>This is an example tweet... Number 3... #newfirefox</p>
|
||||
<a href="https://twitter.com/intent/tweet?text=This%20is%20an%20example%20tweet...%20Number%203...%20%23newfirefox">Tweet</a>
|
||||
</div>
|
||||
|
||||
<a href="https://twitter.com/intent/tweet?text=%20%23newfirefox">Tweet your own text</a>
|
||||
<footer>
|
||||
<div class="info">
|
||||
<div class="links">
|
||||
<a target="_blank" href="https://github.com/mozilla/newfirefox.mozilla.community">Github</a>
|
||||
<a target="_blank" href="https://www.mozilla.org/about/legal/terms/mozilla/">Legal</a>
|
||||
<a target="_blank" href="https://creativecommons.org/licenses/by/4.0/">License</a>
|
||||
<a target="_blank" href="https://www.mozilla.org/en-US/about/governance/policies/participation/">Guidelines</a>
|
||||
</div>
|
||||
<div class="footer-content">
|
||||
<span class="logo logo-white">mozilla</span>
|
||||
<p>Mozilla is a global non-profit dedicated to putting you in control of your online experience and shaping the future of the web for the public good. Visit us at <a href="https://mozilla.org" target="_blank">mozilla.org</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<a target="_blank" href="https://github.com/mozilla/newfirefox.mozilla.community">Github</a>
|
||||
<a target="_blank" href="https://www.mozilla.org/about/legal/terms/mozilla/">Legal</a>
|
||||
<a target="_blank" href="https://creativecommons.org/licenses/by/4.0/">License</a>
|
||||
<a target="_blank" href="https://www.mozilla.org/en-US/about/governance/policies/participation/">Guidelines</a>
|
||||
</footer>
|
||||
|
||||
<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
271
style.css
271
style.css
|
|
@ -1,83 +1,264 @@
|
|||
html, body {
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Fira Sans';
|
||||
background-color: #2E2D56;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-family: 'Zilla Slab';
|
||||
.logo {
|
||||
display: inline-block;
|
||||
font-family: 'Zilla Slab Highlight';
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
line-height: 32px;
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.logo-white {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.top-header {
|
||||
padding: 50px 150px 0 50px;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.top-header .moz-logo {
|
||||
width: 113px;
|
||||
}
|
||||
|
||||
.top-header a,
|
||||
.top-header a:hover {
|
||||
flex: 1;
|
||||
text-decoration: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
.top-header {
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.top-header .logo-subtext {
|
||||
font-family: 'Zilla Slab Highlight';
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
padding-right: 3em;
|
||||
align-items: center;
|
||||
height: 400px;
|
||||
background-color: #000f40;
|
||||
margin-bottom: 3em;
|
||||
background-image: url('assets/firefox-logo.png');
|
||||
background-position: 60px center;
|
||||
background-size: 300px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
text-align: right;
|
||||
color: #fff;
|
||||
font-size: 5em;
|
||||
}
|
||||
|
||||
#container {
|
||||
padding: 0 20px 100px 20px;
|
||||
background: url('assets/img-header.svg');
|
||||
background-size: cover;
|
||||
background-position: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#container h1 {
|
||||
font-size: 3em;
|
||||
@media all and (max-width: 768px) {
|
||||
header {
|
||||
background-position: center center;
|
||||
}
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 46px;
|
||||
font-family: 'Fira Sans';
|
||||
line-height: 1.12;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
width: 50%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header .intro {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
header .intro p {
|
||||
color: #fff;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
header .intro img {
|
||||
width: 10%;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
header {
|
||||
padding-bottom: 20vh;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header .intro {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 30px 0;
|
||||
background-color: #fff;
|
||||
display: inline-block;
|
||||
color: #000;
|
||||
border-radius: 40px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.8px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
padding: 10px 10px;
|
||||
}
|
||||
|
||||
.btn-red {
|
||||
color: #FF0039;
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
color: #0A84FF;
|
||||
}
|
||||
|
||||
.btn-orange {
|
||||
color: #FF9400;
|
||||
}
|
||||
|
||||
#tweets-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 20px 100px 20px;
|
||||
padding: 0px 50px 20px 50px;
|
||||
}
|
||||
|
||||
#tweets-examples-container {
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.tweet-container {
|
||||
height: 120px;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
width: 40%;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-content: space-between;
|
||||
width: 33.33%;
|
||||
background-color: #000f40;
|
||||
color: #fff;
|
||||
margin-top: 20px;
|
||||
padding: 20px 20px 20px 20px;
|
||||
margin-right: 20px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.tweet-container button {
|
||||
margin-left: 20px;
|
||||
.tweet-container:nth-child(1) {
|
||||
background-color: #FF0039;
|
||||
}
|
||||
|
||||
.tweet-container:nth-child(2) {
|
||||
background-color: #0A84FF;
|
||||
}
|
||||
|
||||
.tweet-container:nth-child(3) {
|
||||
background-color: #FF9400;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.tweet-container p {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.tweet-container .btn {
|
||||
width: 20%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
footer {
|
||||
background:
|
||||
url('assets/fox.png') 100% -10% no-repeat;
|
||||
padding: 30px 50px 0px 50px;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
align-items: end;
|
||||
padding-bottom: 30px;
|
||||
flex-direction: row;
|
||||
height: 300px;
|
||||
background-image: url('assets/fox.png'), linear-gradient(white 0%, white 75%, #000f40 75.00001%);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
footer a {
|
||||
footer .info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
footer .links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 50%;
|
||||
margin-top: 75px;
|
||||
margin-bottom: 75px;
|
||||
}
|
||||
|
||||
footer .links a {
|
||||
font-family: 'Fira Sans';
|
||||
font-size: 16px;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.3px;
|
||||
color: #fff;
|
||||
padding-top: 20px;
|
||||
margin-right: 20px;
|
||||
text-decoration: none;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
text-decoration: underline;
|
||||
footer .links a:hover {
|
||||
box-shadow: inset 0 -4px 0 #fff;
|
||||
}
|
||||
|
||||
footer .footer-content {
|
||||
font-family: 'Fira Sans';
|
||||
font-size: 10px;
|
||||
letter-spacing: -0.2px;
|
||||
color: #ffffff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer .footer-content p {
|
||||
opacity: 0.5;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
footer .footer-content a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@media all and (max-width: 1150px) {
|
||||
footer {
|
||||
background: linear-gradient(to top, #535382, #2d2c55);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-only {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
.mobile-only {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.desktop-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче