├── BG.jpg ├── BG_Pattern.png ├── Runner.png ├── index.html └── styles.css /BG.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codegridweb/Sports-Theme-Landing-Page-Concept/f7bcfce0c52c5d8680b8089de815c9d9c8fbfec9/BG.jpg -------------------------------------------------------------------------------- /BG_Pattern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codegridweb/Sports-Theme-Landing-Page-Concept/f7bcfce0c52c5d8680b8089de815c9d9c8fbfec9/BG_Pattern.png -------------------------------------------------------------------------------- /Runner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codegridweb/Sports-Theme-Landing-Page-Concept/f7bcfce0c52c5d8680b8089de815c9d9c8fbfec9/Runner.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fast Everything | by harrnish @Codegrid 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 |
17 | 18 | 19 |
20 |
    21 |
  • Home
    • 22 |
  • Products
    • 23 |
  • Forum
    • 24 |
  • Contact
    • 25 |
26 |
27 | 28 |
29 |
30 | 31 |
32 |
33 |
34 | 35 |
Everything
36 | 37 |
38 | 39 |
40 | 41 |
Fast
42 | 43 |
44 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum itaque sequi similique, eius maxime porro tenetur magnam in officiis velit quisquam aspernatur voluptatum ab excepturi commodi suscipit id non quod dolores ad consequatur corporis nisi. Aperiam neque recusandae libero.

45 | 46 | 47 |
48 | 49 |
50 | 56 |
57 |
58 | 59 | 158 | 159 | 160 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100%; 5 | height: 100vh; 6 | font-family: Helvetica; 7 | } 8 | 9 | .wrapper { 10 | height: 100vh; 11 | width: 100%; 12 | } 13 | 14 | .pattern { 15 | position: absolute; 16 | left: 20%; 17 | width: 60%; 18 | height: 100vh; 19 | background: url(BG_Pattern.png) no-repeat 50% 50%; 20 | z-index: -1; 21 | opacity: 0.4; 22 | } 23 | 24 | .nav { 25 | width: 100%; 26 | height: 80px; 27 | position: absolute; 28 | } 29 | 30 | .logo { 31 | font-size: 18px; 32 | margin: 0.2em 2em; 33 | line-height: 80px; 34 | position: absolute; 35 | } 36 | 37 | .menu { 38 | position: absolute; 39 | height: 80px; 40 | right: 120px; 41 | } 42 | 43 | .menu ul { 44 | list-style: none; 45 | } 46 | 47 | .menu ul li { 48 | display: inline-block; 49 | margin: 1em 0; 50 | padding: 0 30px; 51 | font-size: 15px; 52 | } 53 | 54 | .cart { 55 | position: fixed; 56 | font-size: 16px; 57 | margin: 0.2em 1em; 58 | line-height: 80px; 59 | right: 20px; 60 | } 61 | 62 | .box-1 { 63 | position: absolute; 64 | width: 60px; 65 | height: 60px; 66 | background: none; 67 | border: 2px solid orange; 68 | top: 10%; 69 | left: 15%; 70 | z-index: -1; 71 | transform: rotate(60deg); 72 | } 73 | 74 | .box-2 { 75 | position: absolute; 76 | width: 120px; 77 | height: 120px; 78 | background: orange; 79 | /* border: 2px solid orange; */ 80 | top: 54%; 81 | left: 28%; 82 | z-index: -1; 83 | transform: rotate(-110deg); 84 | } 85 | 86 | .box-3 { 87 | position: absolute; 88 | width: 80px; 89 | height: 80px; 90 | background: none; 91 | border: 2px solid orange; 92 | top: 34%; 93 | left: 78%; 94 | z-index: -1; 95 | transform: rotate(30deg); 96 | } 97 | 98 | .runner img { 99 | width: 100%; 100 | z-index: 2; 101 | margin-top: -20px; 102 | } 103 | 104 | .title-2 { 105 | position: absolute; 106 | top: 50%; 107 | left: 50%; 108 | transform: translate(-50%, -50%); 109 | font-family: Anton; 110 | font-size: 90px; 111 | color: rgba(0,0,0,0); 112 | font-style: italic; 113 | text-transform: uppercase; 114 | z-index: -1; 115 | -webkit-text-stroke: 2px orange; 116 | opacity: 0; 117 | } 118 | 119 | .title-1 { 120 | position: absolute; 121 | top: 38%; 122 | left: 30%; 123 | transform: translate(-50%, -50%); 124 | font-family: Anton; 125 | font-size: 90px; 126 | color: orange; 127 | padding-right: 20px; 128 | font-style: italic; 129 | text-transform: uppercase; 130 | z-index: 1; 131 | opacity: 0; 132 | /* -webkit-text-stroke: 2px orange; */ 133 | } 134 | 135 | .content { 136 | position: absolute; 137 | top: 64%; 138 | left: 57%; 139 | width: 36%; 140 | color: grey; 141 | font-weight: lighter; 142 | font-size: 14px; 143 | line-height: 24px; 144 | } 145 | 146 | button { 147 | margin-top: 6px; 148 | background: orange; 149 | color: #fff; 150 | padding: 20px 30px; 151 | text-transform: uppercase; 152 | letter-spacing: 3px; 153 | font-size: 10px; 154 | border: none; 155 | } 156 | 157 | .media { 158 | position: absolute; 159 | bottom: 210px; 160 | } 161 | 162 | .media ul { 163 | position: absolute; 164 | list-style: none; 165 | } 166 | 167 | .media ul li { 168 | color: grey; 169 | padding: 10px 0; 170 | } 171 | 172 | 173 | @media(max-width: 900px) { 174 | .wrapper { 175 | background: url(BG.jpg) no-repeat 50% 50%; 176 | background-size: cover; 177 | } 178 | 179 | .pattern { 180 | display: none; 181 | } 182 | 183 | .runner img { 184 | display: none; 185 | } 186 | 187 | .title-1, .title-2 { 188 | font-size: 50px; 189 | } 190 | 191 | .title-1 { 192 | left: 20%; 193 | top: 40%; 194 | } 195 | 196 | .title-2 { 197 | left: 50%; 198 | z-index: 1; 199 | } 200 | 201 | .menu { 202 | display: none; 203 | } 204 | 205 | .content p { 206 | display: none; 207 | } 208 | 209 | .box-2 { 210 | top: 70%; 211 | } 212 | 213 | .content button { 214 | position: fixed; 215 | right: 3em; 216 | bottom: 4em; 217 | z-index: 1; 218 | } 219 | } 220 | --------------------------------------------------------------------------------