|
1 |
| -<header class="site-header"> |
2 |
| - |
3 |
| - <div class="wrapper"> |
4 |
| - |
5 |
| - <a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a> |
6 |
| - |
7 |
| - <nav class="site-nav"> |
8 |
| - <a href="#" class="menu-icon"> |
9 |
| - <svg viewBox="0 0 18 15"> |
10 |
| - <path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/> |
11 |
| - <path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/> |
12 |
| - <path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/> |
13 |
| - </svg> |
14 |
| - </a> |
| 1 | +<div class="header"> |
| 2 | + <div class="container"> |
| 3 | + <div class="heroText"> |
| 4 | + <h1>Open Source Hub</h1> |
| 5 | + <h2> |
| 6 | + <span class="subheadSection "><img src="img/stars.svg" alt="" class="icon"><span class="starCount"></span></span> |
| 7 | + <span class="subheadSection"><img src="img/forks.svg" alt="" class="icon"><span class="forkCount"></span></span> |
| 8 | + <span class="subheadSection"><img src="img/repos.svg" alt="" class="icon"><span class="repoCount"></span></span> |
| 9 | + </h2> |
| 10 | + </div> |
| 11 | + </div> |
| 12 | + <div class="headerIllustration"> |
| 13 | + <div class="skyline" style="background: url('img/header/skyline.svg') repeat-x center bottom; background-size: auto 100%; width: 100%; position: absolute; |
| 14 | + bottom: 0px; left: 0px;"></div> |
| 15 | + <div class="illustrationForeground"> |
| 16 | + <!--right animations--> |
| 17 | + <img src="img/header/rightBackground.svg" alt="" class="headerRight"> |
| 18 | + <div class="headerRight headerRightContainer"> |
| 19 | + <div class="phone2Screen"> |
| 20 | + <div class="phoneCircle"></div> |
| 21 | + </div> |
| 22 | + </div> |
| 23 | + <img src="img/header/rightBackground2.svg" alt="" class="headerRight"> |
| 24 | + <div class="headerRight headerRightContainer"> |
| 25 | + <div class="phone3Screen"> |
| 26 | + <div class="phoneCircle"></div> |
| 27 | + </div> |
| 28 | + <svg version="1.1" class="svgInner" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-111 -584 976 1280" style="enable-background:new -111 -584 976 1280;" xml:space="preserve"> |
| 29 | + <svg class="push2" y="-125%"> |
| 30 | + <path class="st7" d="M228.8,451.8c-19.1,0-34.6-15.5-34.6-34.6c0-3.4,0.5-6.8,1.5-9.9H162c-10.4,0-18.8,8.4-18.8,18.8v55.1 |
| 31 | + c0,10.4,8.4,18.8,18.8,18.8h55c10.4,0,18.8-8.4,18.8-18.8V451C233.5,451.5,231.2,451.8,228.8,451.8z"/> |
| 32 | + <path class="st7" d="M228.8,390.9c-14.5,0-26.3,11.8-26.3,26.3s11.8,26.3,26.3,26.3s26.3-11.8,26.3-26.3 |
| 33 | + C255.1,402.7,243.3,390.9,228.8,390.9z M228.8,431.2c-7.7,0-14-6.3-14-14s6.3-14,14-14s14,6.3,14,14S236.5,431.2,228.8,431.2z"/> |
| 34 | + </svg> |
| 35 | + </svg> |
| 36 | + </div> |
| 37 | + <div class="headerRight headerRightContainer"> |
| 38 | + <svg version="1.1" class="svgInner" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-111 -584 976 1280" style="enable-background:new -111 -584 976 1280;" xml:space="preserve"> |
| 39 | + <svg class="middleLine2" y="-125%"> |
| 40 | + <line class="st9" x1="176.9" y1="410.5" x2="176.9" y2="390.5"/> |
| 41 | + <line class="st10" x1="176.9" y1="343.2" x2="176.9" y2="-1300"/> |
| 42 | + <line class="st10" x1="176.9" y1="351.4" x2="176.9" y2="392"/> |
| 43 | + <path class="st1" d="M192.2,344.9l-10.9,18.8c-2,3.4-6.9,3.4-8.9,0l-10.9-18.8c-2-3.4,0.5-7.7,4.4-7.7h21.8 |
| 44 | + C191.8,337.2,194.2,341.5,192.2,344.9z"/> |
| 45 | + <path class="st1" d="M186.1,383.8h-18.3c-2.2,0-4,1.8-4,4v8.4c0,2.2,1.8,4,4,4h18.3c2.2,0,4-1.8,4-4v-8.4 |
| 46 | + C190.1,385.6,188.3,383.8,186.1,383.8z"/> |
| 47 | + <circle class="st11" cx="176.9" cy="360" r="2.8"/> |
| 48 | + <circle class="st11" cx="168.7" cy="343.5" r="2.8"/> |
| 49 | + <circle class="st11" cx="185.2" cy="343.5" r="2.8"/> |
| 50 | + </svg> |
| 51 | + </svg> |
| 52 | + </div> |
| 53 | + <div class="headerRight headerRightContainer hoistParts" style="-webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%);"> |
| 54 | + <svg version="1.1" class="svgInner" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-111 -584 976 1280" style="enable-background:new -111 -584 976 1280;" xml:space="preserve"> |
| 55 | + <svg y="0px" class="hoist"> |
| 56 | + <g class="analytics"> |
| 57 | + <path class="st6" d="M367.4,427.6c-30.9,0-56,25.1-56,56s25.1,56,56,56s56-25.1,56-56C423.4,452.8,398.3,427.6,367.4,427.6z |
| 58 | + M367.4,436.7c25.3,0,45.9,20.1,46.9,45.1h-10.7l-18.2-22.5l-26.2,31.2L340,469.6l-10.8,10.8h-8.7 |
| 59 | + C322.3,456,342.7,436.7,367.4,436.7z M367.4,530.6c-24.5,0-44.7-18.9-46.8-43h11.6l7.5-7.5l19.6,21.5l25.8-30.8l14.9,18.4h13.9 |
| 60 | + C411.3,512.4,391.5,530.6,367.4,530.6z"/> |
| 61 | + </g> |
| 62 | + <defs> |
| 63 | + <clipPath id="hoistMask"> |
| 64 | + <rect x="320.6" y="24.6" width="93.7" height="412.1"/> |
| 65 | + </clipPath> |
| 66 | + </defs> |
| 67 | + <g class="hoistLine st12" clip-path="url(#hoistMask)"> |
| 68 | + <svg class="hoistLineInner" y="0%"> |
| 69 | + <g> |
| 70 | + <line class="st13" x1="366.8" y1="24.6" x2="366.8" y2="427.3"/> |
| 71 | + <circle class="st2" cx="367.1" cy="428.3" r="6"/> |
| 72 | + </g> |
| 73 | + </svg> |
| 74 | + </g> |
| 75 | + </svg> |
| 76 | + </svg> |
| 77 | + </div> |
| 78 | + <img src="img/header/hoist.svg" alt="" class="headerRight hoist" style="-webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%);"> |
| 79 | + <div class="headerRight headerRightContainer wheelsContainer" style="-webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%);"> |
| 80 | + <img src="img/header/hoistWheel.svg" alt="" class="hoistWheel"> |
| 81 | + <img src="img/header/hoistWheel.svg" alt="" class="hoistWheel"> |
| 82 | + <img src="img/header/hoistWheel.svg" alt="" class="hoistWheel"> |
| 83 | + <img src="img/header/hoistWheel.svg" alt="" class="hoistWheel"> |
| 84 | + <img src="img/header/hoistWheel.svg" alt="" class="hoistWheel"> |
| 85 | + </div> |
15 | 86 |
|
16 |
| - <div class="trigger"> |
17 |
| - {% for my_page in site.pages %} |
18 |
| - {% if my_page.title %} |
19 |
| - <a class="page-link" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a> |
20 |
| - {% endif %} |
21 |
| - {% endfor %} |
| 87 | + <!-- left side animations --> |
| 88 | + <img src="img/header/craneBackground.svg" alt="" class="headerLeft"> |
| 89 | + <div class="headerLeft headerLeftContainer"> |
| 90 | + <div class="phone1ScreenContainer"> |
| 91 | + <div class="appSquare one"></div> |
| 92 | + <div class="appSquare two"></div> |
| 93 | + <div class="appSquare three"></div> |
| 94 | + <div class="appRect one"></div> |
| 95 | + <div class="appRect two"></div> |
| 96 | + <div class="appRect three"></div> |
| 97 | + </div> |
| 98 | + <img src="img/header/video.svg" alt="" class="craneVideo"> |
| 99 | + <div class="craneLineContainer"> |
| 100 | + <img src="img/header/craneLine.svg" class="craneLine" alt=""> |
| 101 | + </div> |
| 102 | + <img src="img/header/cranePivot.svg" alt="" class="cranePivot"> |
22 | 103 | </div>
|
23 |
| - </nav> |
24 | 104 |
|
| 105 | + <!--center animations--> |
| 106 | + <img src="img/header/truckBackground.svg" alt="" class="headerCenter"> |
| 107 | + <div class="headerCenter headerCenterContainer"> |
| 108 | + <img src="img/header/pushOne.svg" alt="" class="pushOne"> |
| 109 | + <img src="img/header/middleLine.svg" alt="" class="middleLineOne"> |
| 110 | + </div> |
| 111 | + </div> |
25 | 112 | </div>
|
26 |
| - |
27 |
| -</header> |
| 113 | +</div> |
0 commit comments