├── img
    ├── img-1.jpg
    ├── img-2.jpg
    ├── img-3.jpg
    └── xxl-logo.jpg
├── style.css
└── index.html


/img/img-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codicts/XXL-Hip-Hop-Landing-Page/HEAD/img/img-1.jpg


--------------------------------------------------------------------------------
/img/img-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codicts/XXL-Hip-Hop-Landing-Page/HEAD/img/img-2.jpg


--------------------------------------------------------------------------------
/img/img-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codicts/XXL-Hip-Hop-Landing-Page/HEAD/img/img-3.jpg


--------------------------------------------------------------------------------
/img/xxl-logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codicts/XXL-Hip-Hop-Landing-Page/HEAD/img/xxl-logo.jpg


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 | }
  5 | 
  6 | html, body {
  7 |   width: 100%;
  8 |   height: 100vh;
  9 |   font-family: 'Montserrat';
 10 |   background: #000100;
 11 |   color: #fff;
 12 |   overflow: hidden;
 13 | }
 14 | 
 15 | ul {
 16 |   list-style: none;
 17 | }
 18 | 
 19 | img {
 20 |   width: 100%;
 21 |   height: auto;
 22 |   z-index: -1;
 23 | }
 24 | 
 25 | .nav {
 26 |   position: fixed;
 27 |   width: 100%;
 28 |   height: 100px;
 29 |   z-index: 1;
 30 | }
 31 | 
 32 | .border-bottom {
 33 |   position: absolute;
 34 |   top: 100px;
 35 |   width: 0%;
 36 |   z-index: 1;
 37 |   border-color: rgba(255,255,255, .2);
 38 |   border-width: .5px;
 39 | }
 40 | 
 41 | .logo,
 42 | .menu-links,
 43 | .search,
 44 | .cart {
 45 |   position: absolute;
 46 |   padding: 20px;
 47 | }
 48 | 
 49 | .logo {
 50 |   width: 100px;
 51 | }
 52 | 
 53 | .menu-links {
 54 |   left: 100px;
 55 |   line-height: 1;
 56 |   margin-left: 30px;
 57 | }
 58 | 
 59 | .menu-links ul li {
 60 |   display: inline-block;
 61 |   padding: 20px 30px;
 62 |   color: rgba(255,255,255, .5);
 63 | }
 64 | 
 65 | .search,
 66 | .cart {
 67 |   line-height: 3;
 68 |   font-size: 20px;
 69 | }
 70 | 
 71 | .search {
 72 |   right: 150px;
 73 | }
 74 | 
 75 | .cart {
 76 |   right: 50px;
 77 | }
 78 | 
 79 | .text {
 80 |   position: absolute;
 81 |   top: 420px;
 82 |   left: 450px;
 83 |   transform: translate(-50%, -50%);
 84 |   z-index: 1;
 85 | }
 86 | 
 87 | .subtitle {
 88 |   text-transform: uppercase;
 89 |   font-size: 14px;
 90 | }
 91 | 
 92 | .subtitle::before {
 93 |   display: inline-block;
 94 |   content: "";
 95 |   border: 1px solid #fff;
 96 |   width: 80px;
 97 |   margin: 0 10px 0 0;
 98 |   transform: translateY(-4px);
 99 | }
100 | 
101 | .title {
102 |   font-size: 120px;
103 |   text-transform: uppercase;
104 |   width: 0%;
105 |   overflow: hidden;
106 |   white-space: nowrap
107 | }
108 | 
109 | .desc {
110 |   color: rgba(255,255,255, .5);
111 |   margin-top: 40px;
112 |   line-height: 2;
113 | }
114 | 
115 | .readmore {
116 |   display: inline-block;
117 |   margin-top: 80px;
118 |   color: #fff;
119 |   border-bottom: 1px solid #fff;
120 |   text-decoration: none;
121 |   text-transform: uppercase;
122 |   padding-bottom: 3px;
123 |   font-weight: bolder;
124 | }
125 | 
126 | .img-1 {
127 |   position: absolute;
128 |   top: 300px;
129 |   right: 320px;
130 |   transform: translateY(-50%);
131 |   background: url('./img/img-1.jpg') no-repeat;
132 |   background-position: center;
133 |   background-size: cover;
134 |   width: 0;
135 |   height: 600px;
136 | }
137 | 
138 | .slider {
139 |   position: absolute;
140 |   bottom: 100px;
141 |   right: 320px;
142 |   width: 450px;
143 |   opacity: 0;
144 | }
145 | 
146 | .arrows {
147 |   float: left;
148 | }
149 | 
150 | .pages {
151 |   float: right;
152 | }
153 | 
154 | .pages span {
155 |   font-size: 40px;
156 |   font-weight: bolder;
157 |   line-height: .8;
158 | }
159 | 
160 | .arrows ul li {
161 |   display: inline-block;
162 |   background: #2F302F;
163 |   padding: 10px;
164 |   border-radius: 50%;
165 |   margin-right: 10px;
166 | }
167 | 
168 | .img-2 {
169 |   position: absolute;
170 |   top: 320px;
171 |   right: 0;
172 |   transform: translateY(-50%);
173 |   background: url('./img/img-2.jpg') no-repeat;
174 |   background-position: center;
175 |   background-size: cover;
176 |   width: 0;
177 |   height: 350px;
178 |   margin-bottom: 30px;
179 | }
180 | 
181 | .img-3 {
182 |   position: absolute;
183 |   top: 820px;
184 |   right: 0;
185 |   transform: translateY(-50%); 
186 |   background: url('./img/img-3.jpg') no-repeat;
187 |   background-position: center;
188 |   background-size: cover;
189 |   width: 0;
190 |   height: 600px;
191 | }
192 | 
193 | .overlay {
194 |   position: absolute;
195 |   width: 100%;
196 |   height: 100%;
197 |   left: 0%;
198 |   z-index: 2;
199 |   background: #ec1417;
200 | }
201 | 
202 | .first {
203 |   top: 0;
204 | }
205 | 
206 | .second {
207 |   top: 33.3%
208 | }
209 | 
210 | .third {
211 |   top: 66.6%;
212 | }
213 | 
214 | @media(max-height: 720px) {
215 |   .text {
216 |     top: 360px;
217 |     left: 360px;
218 |   }
219 | 
220 |   .title {
221 |     font-size: 100px;
222 |   }
223 | 
224 |   .desc {
225 |     margin-top: 30px;
226 |   }
227 | 
228 |   .readmore {
229 |     margin-top: 60px;
230 |   }
231 | 
232 |   .img-1 {
233 |     top: 240px;
234 |     right: 330px;
235 |     height: 480px;
236 |   }
237 | 
238 |   .slider {
239 |     right: 330px;
240 |   }
241 | 
242 |   .img-2 {
243 |     top: 270px;
244 |     height: 280px;
245 |   }
246 | 
247 |   .img-3 {
248 |     top: 740px;
249 |   }
250 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |   <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap" rel="stylesheet">
  9 |   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 10 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
 11 |   <link rel="stylesheet" href="style.css">
 12 |   <title>XXL</title>
 13 | </head>
 14 | 
 15 | <body>
 16 | 
 17 |   <div class="overlay first"></div>
 18 |   <div class="overlay second"></div>
 19 |   <div class="overlay third"></div>
 20 | 
 21 |   <div class="wrapper">
 22 | 
 23 |     <div class="nav">
 24 |       <div class="logo"><img src="./img/xxl-logo.jpg" alt=""></div>
 25 |       <div class="menu-links">
 26 |         <ul>
 27 |           <li>Home</li>
 28 |           <li>News</li>
 29 |           <li>Music</li>
 30 |           <li>Videos</li>
 31 |           <li>Shop</li>
 32 |         </ul>
 33 |       </div>
 34 |       <div class="search"><i class="fa fa-search"></i></div>
 35 |       <div class="cart"><i class="fa fa-shopping-cart"></i></div>
 36 |     </div>
 37 |   </div>
 38 | 
 39 |   <hr class="border-bottom">
 40 | 
 41 |   <div class="content">
 42 | 
 43 |     <div class="text">
 44 |       <p class="subtitle">The Authority In</p>
 45 |       <h1 class="title">
 46 |         <span>Hip-Hop <br> Culture</span>
 47 |       </h1>
 48 |       <p class="desc">XXL is the cultural phenomenon surrounding <br> Hip Hop and Rap culture.</p>
 49 |       <a href="#" class="readmore">Scroll For More</a>
 50 |     </div>
 51 | 
 52 |     <div class="img-1"></div>
 53 | 
 54 |     <div class="slider">
 55 |       <div class="arrows">
 56 |         <ul>
 57 |           <li><i class="fa fa-arrow-left"></i></li>
 58 |           <li><i class="fa fa-arrow-right"></i></li>
 59 |         </ul>
 60 |       </div>
 61 |       <div class="pages"><span>01</span>/04</div>
 62 |     </div>
 63 | 
 64 |     <div class="img-2"></div>
 65 | 
 66 |     <div class="img-3"></div>
 67 | 
 68 |   </div>
 69 | 
 70 | 
 71 |   <script>
 72 | 
 73 |     TweenMax.from('.logo', 1, {
 74 |       delay: 1.2,
 75 |       opacity: 0,
 76 |       x: -20,
 77 |       ease: Expo.easeInOut
 78 |     })
 79 | 
 80 |     TweenMax.staggerFrom('.menu-links ul li', 1, {
 81 |       delay: 1.2,
 82 |       opacity: 0,
 83 |       x: -20,
 84 |       ease: Power4.easeInOut
 85 |     }, 0.08)
 86 | 
 87 |     TweenMax.from('.search', 1, {
 88 |       delay: 1.6,
 89 |       opacity: 0,
 90 |       x: -20,
 91 |       ease: Expo.easeInOut
 92 |     })
 93 | 
 94 |     TweenMax.from('.cart', 1, {
 95 |       delay: 1.8,
 96 |       opacity: 0,
 97 |       x: -20,
 98 |       ease: Expo.easeInOut
 99 |     })
100 | 
101 |     TweenMax.to('.border-bottom', 1, {
102 |       delay: 1.4,
103 |       width: '100%',
104 |       ease: Expo.easeInOut
105 |     })
106 | 
107 |     TweenMax.from('.subtitle', 1, {
108 |       delay: 2.8,
109 |       opacity: 0,
110 |       x: -20,
111 |       ease: Expo.easeInOut
112 |     })
113 | 
114 |     TweenMax.to('.title', 1, {
115 |       delay: 2.2,
116 |       width: '100%',
117 |       ease: Expo.easeInOut
118 |     })
119 | 
120 |     TweenMax.from('.desc', 1, {
121 |       delay: 2.8,
122 |       opacity: 0,
123 |       x: -20,
124 |       ease: Expo.easeInOut
125 |     })
126 | 
127 |     TweenMax.from('.readmore', 1, {
128 |       delay: 2.8,
129 |       opacity: 0,
130 |       x: -20,
131 |       ease: Expo.easeInOut
132 |     })
133 | 
134 |     TweenMax.to('.slider', 1, {
135 |       delay: 3,
136 |       opacity: 1,
137 |       ease: Expo.easeInOut
138 |     })
139 | 
140 |     TweenMax.to('.img-1', 1, {
141 |       delay: 2.2,
142 |       width: '450px',
143 |       ease: Expo.easeInOut
144 |     })
145 | 
146 |     TweenMax.to('.img-2', 1, {
147 |       delay: 2.2,
148 |       width: '300px',
149 |       ease: Expo.easeInOut
150 |     })
151 | 
152 |     TweenMax.to('.img-3', 1, {
153 |       delay: 2.2,
154 |       width: '300px',
155 |       ease: Expo.easeInOut
156 |     })
157 | 
158 |     TweenMax.to('.first', 1.5, {
159 |       delay: .2,
160 |       left: '-100%',
161 |       ease: Expo.easeInOut
162 |     })
163 | 
164 |     TweenMax.to('.second', 1.5, {
165 |       delay: .4,
166 |       left: '-100%',
167 |       ease: Expo.easeInOut
168 |     })
169 | 
170 |     TweenMax.to('.third', 1.5, {
171 |       delay: .6,
172 |       left: '-100%',
173 |       ease: Expo.easeInOut
174 |     })
175 | 
176 |   </script>
177 | </body>
178 | 
179 | </html>


--------------------------------------------------------------------------------