├── .babelrc
├── .gitignore
├── css
    ├── components
    │   ├── banner.scss
    │   ├── features.scss
    │   └── header.scss
    ├── normalize.scss
    ├── style.css
    ├── style.css.map
    ├── style.scss
    └── variables.scss
├── images
    ├── 0-fees.svg
    ├── 0-interest.svg
    ├── arrow-right.svg
    ├── chat-support.svg
    ├── fast-delivery.svg
    ├── fixed-payment-option.svg
    ├── hand.webp
    ├── no-credit-check.svg
    └── play.svg
├── index.html
├── js
    ├── animations.js
    └── index.js
├── package-lock.json
└── package.json


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["@babel/preset-env"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store


--------------------------------------------------------------------------------
/css/components/banner.scss:
--------------------------------------------------------------------------------
  1 | @import "../variables.scss";
  2 | 
  3 | .banner {
  4 |   height: 80vh;
  5 |   position: relative;
  6 |   @media (max-width: $widescreen) {
  7 |     height: 90vh;
  8 |   }
  9 |   .banner-addition-bg {
 10 |     background: $blue;
 11 |     position: absolute;
 12 |     left: 0;
 13 |     right: 0;
 14 |     top: 0;
 15 |     bottom: 0;
 16 |     height: 100%;
 17 |   }
 18 |   .banner-bg {
 19 |     background: $lPink;
 20 |     position: absolute;
 21 |     left: 0;
 22 |     right: 0;
 23 |     top: 0;
 24 |     bottom: 0;
 25 |     height: 100%;
 26 |   }
 27 |   .banner-inner {
 28 |     width: 100%;
 29 |     height: 80vh;
 30 |     display: flex;
 31 |     position: relative;
 32 |     @media (max-width: $widescreen) {
 33 |       height: 90vh;
 34 |     }
 35 |     .content {
 36 |       width: 60%;
 37 |       height: 100%;
 38 |       display: flex;
 39 |       align-items: center;
 40 |       .content-inner {
 41 |         h1 {
 42 |           font-family: "Playfair Display";
 43 |           color: $blue;
 44 |           font-size: 3.4rem;
 45 |           line-height: 4.8rem;
 46 |           margin: 32px 0 0;
 47 |           width: 620px;
 48 |           @media (max-width: $widescreen) {
 49 |             font-size: 3.1rem;
 50 |             line-height: 3.6rem;
 51 |           }
 52 |           .line {
 53 |             overflow: hidden;
 54 |             height: 70px;
 55 |             position: relative;
 56 |             span {
 57 |               position: absolute;
 58 |             }
 59 |           }
 60 |         }
 61 |         p {
 62 |           font-size: 1rem;
 63 |           line-height: 1.6rem;
 64 |           font-weight: 300;
 65 |           color: $blue;
 66 |           width: 520px;
 67 |           margin: 32px 0 80px;
 68 |           @media (max-width: $widescreen) {
 69 |             margin: 16px 0 60px;
 70 |           }
 71 |         }
 72 |         .btn-row {
 73 |           a {
 74 |             display: inline-block;
 75 |             height: 56px;
 76 |             line-height: 56px;
 77 |             font-size: 1rem;
 78 |             padding: 0 32px;
 79 |             text-decoration: none;
 80 |             font-weight: 600;
 81 |             color: $white;
 82 |             background: $redOrange;
 83 |             border-radius: 100px;
 84 |           }
 85 |         }
 86 |         .play-video {
 87 |           position: absolute;
 88 |           bottom: 0;
 89 |           left: 0;
 90 |           border-radius: 4px 4px 0 0;
 91 |           overflow: hidden;
 92 |           .cover {
 93 |             padding: 0;
 94 |             background: $lPink;
 95 |             right: 0;
 96 |             z-index: 9;
 97 |             height: 64px;
 98 |             opacity: 0;
 99 |           }
100 |           span {
101 |             opacity: 0;
102 |             display: flex;
103 |             align-items: center;
104 |             height: 64px;
105 |             padding: 0 32px;
106 |             background: $white;
107 |             font-weight: 600;
108 |             color: $blue;
109 |             img {
110 |               margin-right: 1rem;
111 |             }
112 |           }
113 |         }
114 |       }
115 |     }
116 |     .image {
117 |       position: relative;
118 |       width: 40%;
119 |       height: 100%;
120 |       display: flex;
121 |       justify-content: center;
122 |       align-items: flex-end;
123 |       .image-inner {
124 |         img {
125 |           width: 450px;
126 |           position: absolute;
127 |           bottom: 0;
128 |           left: 0;
129 |           right: 0;
130 |           z-index: 9;
131 |           @media (max-width: $widescreen) {
132 |             width: 400px;
133 |           }
134 |         }
135 |         .feature-banner {
136 |           position: absolute;
137 |           bottom: 286px;
138 |           left: -10px;
139 |           background: $lBlue;
140 |           color: $white;
141 |           height: 52px;
142 |           display: flex;
143 |           align-items: center;
144 |           padding: 0 32px;
145 |           border-radius: 4px;
146 |           font-weight: 600;
147 |           &.green {
148 |             background: $green;
149 |             right: 32px;
150 |             left: auto;
151 |             bottom: 116px;
152 |             @media (max-width: $widescreen) {
153 |               right: -24px;
154 |             }
155 |           }
156 |         }
157 |       }
158 |     }
159 |   }
160 | }
161 | 


--------------------------------------------------------------------------------
/css/components/features.scss:
--------------------------------------------------------------------------------
 1 | @import "../variables.scss";
 2 | 
 3 | .features {
 4 |   margin-top: 20vh;
 5 |   .features-inner {
 6 |     display: flex;
 7 |     justify-content: space-between;
 8 |     align-items: flex-start;
 9 |     .features-content {
10 |       width: 33%;
11 |       @media (max-width: $widescreen) {
12 |         width: 40%;
13 |       }
14 |       h3 {
15 |         font-family: "Playfair Display";
16 |         color: $blue;
17 |         font-size: 2.6rem;
18 |         line-height: 3.4rem;
19 |         margin: 0 0 40px;
20 |       }
21 |       p {
22 |         line-height: 1.8rem;
23 |         font-weight: 300;
24 |         color: $blue;
25 |         margin-bottom: 88px;
26 |         @media (max-width: $widescreen) {
27 |           padding-right: 60px;
28 |         }
29 |       }
30 |       .btn-row {
31 |         a {
32 |           color: $blue;
33 |           text-decoration: none;
34 |           font-weight: 600;
35 |           img {
36 |             margin-left: 16px;
37 |           }
38 |         }
39 |       }
40 |     }
41 |     .features-list {
42 |       width: 50%;
43 |       display: flex;
44 |       justify-content: center;
45 |       ul {
46 |         display: flex;
47 |         justify-content: space-between;
48 |         flex-wrap: wrap;
49 |         padding: 0;
50 |         li {
51 |           list-style: none;
52 |           img {
53 |             margin-bottom: 24px;
54 |           }
55 |           h5 {
56 |             color: $blue;
57 |             font-weight: 600;
58 |             font-size: 1.2rem;
59 |             margin: 0;
60 |           }
61 |           p {
62 |             line-height: 1.8rem;
63 |             font-weight: 300;
64 |             color: $blue;
65 |             width: 270px;
66 |             margin: 16px 0 72px;
67 |             font-size: 1rem;
68 |             @media (max-width: $widescreen) {
69 |               font-size: 0.875rem;
70 |             }
71 |           }
72 |         }
73 |       }
74 |     }
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/css/components/header.scss:
--------------------------------------------------------------------------------
 1 | @import "../variables.scss";
 2 | 
 3 | header {
 4 |   position: absolute;
 5 |   width: 100%;
 6 |   height: 100px;
 7 |   z-index: 10;
 8 |   .container-fluid {
 9 |     .header-inner {
10 |       position: relative;
11 |       height: 100px;
12 |       display: flex;
13 |       align-items: center;
14 |       justify-content: space-between;
15 |       width: 100%;
16 |       .logo {
17 |         font-family: "Playfair Display", "Poppins";
18 |         font-size: 1.875rem;
19 |         font-weight: 700;
20 |         color: $blue;
21 |       }
22 |       .navigation {
23 |         position: absolute;
24 |         left: 0;
25 |         right: 0;
26 |         display: flex;
27 |         justify-content: center;
28 |         width: 50%;
29 |         margin: 0 auto;
30 |         nav {
31 |           ul {
32 |             display: flex;
33 |             align-items: center;
34 |             padding: 0;
35 |             li {
36 |               list-style: none;
37 |               margin: 0 40px;
38 | 
39 |               @media (max-width: $widescreen) {
40 | 
41 | 
42 |                 margin: 0 24px;
43 |               }
44 |               a {
45 |                 font-size: 0.875rem;
46 |                 padding: 8px 0;
47 |                 text-decoration: none;
48 |                 font-weight: 600;
49 |                 color: $blue;
50 |               }
51 |             }
52 |           }
53 |         }
54 |       }
55 |       .nav-logins {
56 |         z-index: 12;
57 |         display: flex;
58 |         align-items: center;
59 |         .login {
60 |           a {
61 |             font-size: 0.875rem;
62 |             padding: 8px 0;
63 |             text-decoration: none;
64 |             font-weight: 600;
65 |             color: $blue;
66 |             margin-right: 48px;
67 |             @media (max-width: $widescreen) {
68 |               margin-right: 24px;
69 |             }
70 |           }
71 |         }
72 |         .apply {
73 |           a {
74 |             display: inline-block;
75 |             height: 52px;
76 |             line-height: 52px;
77 |             font-size: 0.875rem;
78 |             padding: 0 32px;
79 |             text-decoration: none;
80 |             font-weight: 600;
81 |             color: $blue;
82 |             border: 2px solid $blue;
83 |             border-radius: 100px;
84 |             transition: 0.2s ease-in-out;
85 |             &:hover {
86 |               background: $blue;
87 |               color: $white;
88 |             }
89 |             @media (max-width: $widescreen) {
90 |               padding: 0 24px;
91 |             }
92 |           }
93 |         }
94 |       }
95 |     }
96 |   }
97 | }
98 | 


--------------------------------------------------------------------------------
/css/normalize.scss:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9 |  */
 10 | 
 11 | html {
 12 |   line-height: 1.15; /* 1 */
 13 |   -webkit-text-size-adjust: 100%; /* 2 */
 14 | }
 15 | 
 16 | /* Sections
 17 |      ========================================================================== */
 18 | 
 19 | /**
 20 |    * Remove the margin in all browsers.
 21 |    */
 22 | 
 23 | body {
 24 |   margin: 0;
 25 | }
 26 | 
 27 | /**
 28 |    * Render the `main` element consistently in IE.
 29 |    */
 30 | 
 31 | main {
 32 |   display: block;
 33 | }
 34 | 
 35 | /**
 36 |    * Correct the font size and margin on `h1` elements within `section` and
 37 |    * `article` contexts in Chrome, Firefox, and Safari.
 38 |    */
 39 | 
 40 | h1 {
 41 |   font-size: 2em;
 42 |   margin: 0.67em 0;
 43 | }
 44 | 
 45 | /* Grouping content
 46 |      ========================================================================== */
 47 | 
 48 | /**
 49 |    * 1. Add the correct box sizing in Firefox.
 50 |    * 2. Show the overflow in Edge and IE.
 51 |    */
 52 | 
 53 | hr {
 54 |   box-sizing: content-box; /* 1 */
 55 |   height: 0; /* 1 */
 56 |   overflow: visible; /* 2 */
 57 | }
 58 | 
 59 | /**
 60 |    * 1. Correct the inheritance and scaling of font size in all browsers.
 61 |    * 2. Correct the odd `em` font sizing in all browsers.
 62 |    */
 63 | 
 64 | pre {
 65 |   font-family: monospace, monospace; /* 1 */
 66 |   font-size: 1em; /* 2 */
 67 | }
 68 | 
 69 | /* Text-level semantics
 70 |      ========================================================================== */
 71 | 
 72 | /**
 73 |    * Remove the gray background on active links in IE 10.
 74 |    */
 75 | 
 76 | a {
 77 |   background-color: transparent;
 78 | }
 79 | 
 80 | /**
 81 |    * 1. Remove the bottom border in Chrome 57-
 82 |    * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 83 |    */
 84 | 
 85 | abbr[title] {
 86 |   border-bottom: none; /* 1 */
 87 |   text-decoration: underline; /* 2 */
 88 |   text-decoration: underline dotted; /* 2 */
 89 | }
 90 | 
 91 | /**
 92 |    * Add the correct font weight in Chrome, Edge, and Safari.
 93 |    */
 94 | 
 95 | b,
 96 | strong {
 97 |   font-weight: bolder;
 98 | }
 99 | 
100 | /**
101 |    * 1. Correct the inheritance and scaling of font size in all browsers.
102 |    * 2. Correct the odd `em` font sizing in all browsers.
103 |    */
104 | 
105 | code,
106 | kbd,
107 | samp {
108 |   font-family: monospace, monospace; /* 1 */
109 |   font-size: 1em; /* 2 */
110 | }
111 | 
112 | /**
113 |    * Add the correct font size in all browsers.
114 |    */
115 | 
116 | small {
117 |   font-size: 80%;
118 | }
119 | 
120 | /**
121 |    * Prevent `sub` and `sup` elements from affecting the line height in
122 |    * all browsers.
123 |    */
124 | 
125 | sub,
126 | sup {
127 |   font-size: 75%;
128 |   line-height: 0;
129 |   position: relative;
130 |   vertical-align: baseline;
131 | }
132 | 
133 | sub {
134 |   bottom: -0.25em;
135 | }
136 | 
137 | sup {
138 |   top: -0.5em;
139 | }
140 | 
141 | /* Embedded content
142 |      ========================================================================== */
143 | 
144 | /**
145 |    * Remove the border on images inside links in IE 10.
146 |    */
147 | 
148 | img {
149 |   border-style: none;
150 | }
151 | 
152 | /* Forms
153 |      ========================================================================== */
154 | 
155 | /**
156 |    * 1. Change the font styles in all browsers.
157 |    * 2. Remove the margin in Firefox and Safari.
158 |    */
159 | 
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 |   font-family: inherit; /* 1 */
166 |   font-size: 100%; /* 1 */
167 |   line-height: 1.15; /* 1 */
168 |   margin: 0; /* 2 */
169 | }
170 | 
171 | /**
172 |    * Show the overflow in IE.
173 |    * 1. Show the overflow in Edge.
174 |    */
175 | 
176 | button,
177 | input {
178 |   /* 1 */
179 |   overflow: visible;
180 | }
181 | 
182 | /**
183 |    * Remove the inheritance of text transform in Edge, Firefox, and IE.
184 |    * 1. Remove the inheritance of text transform in Firefox.
185 |    */
186 | 
187 | button,
188 | select {
189 |   /* 1 */
190 |   text-transform: none;
191 | }
192 | 
193 | /**
194 |    * Correct the inability to style clickable types in iOS and Safari.
195 |    */
196 | 
197 | button,
198 | [type="button"],
199 | [type="reset"],
200 | [type="submit"] {
201 |   -webkit-appearance: button;
202 | }
203 | 
204 | /**
205 |    * Remove the inner border and padding in Firefox.
206 |    */
207 | 
208 | button::-moz-focus-inner,
209 | [type="button"]::-moz-focus-inner,
210 | [type="reset"]::-moz-focus-inner,
211 | [type="submit"]::-moz-focus-inner {
212 |   border-style: none;
213 |   padding: 0;
214 | }
215 | 
216 | /**
217 |    * Restore the focus styles unset by the previous rule.
218 |    */
219 | 
220 | button:-moz-focusring,
221 | [type="button"]:-moz-focusring,
222 | [type="reset"]:-moz-focusring,
223 | [type="submit"]:-moz-focusring {
224 |   outline: 1px dotted ButtonText;
225 | }
226 | 
227 | /**
228 |    * Correct the padding in Firefox.
229 |    */
230 | 
231 | fieldset {
232 |   padding: 0.35em 0.75em 0.625em;
233 | }
234 | 
235 | /**
236 |    * 1. Correct the text wrapping in Edge and IE.
237 |    * 2. Correct the color inheritance from `fieldset` elements in IE.
238 |    * 3. Remove the padding so developers are not caught out when they zero out
239 |    *    `fieldset` elements in all browsers.
240 |    */
241 | 
242 | legend {
243 |   box-sizing: border-box; /* 1 */
244 |   color: inherit; /* 2 */
245 |   display: table; /* 1 */
246 |   max-width: 100%; /* 1 */
247 |   padding: 0; /* 3 */
248 |   white-space: normal; /* 1 */
249 | }
250 | 
251 | /**
252 |    * Add the correct vertical alignment in Chrome, Firefox, and Opera.
253 |    */
254 | 
255 | progress {
256 |   vertical-align: baseline;
257 | }
258 | 
259 | /**
260 |    * Remove the default vertical scrollbar in IE 10+.
261 |    */
262 | 
263 | textarea {
264 |   overflow: auto;
265 | }
266 | 
267 | /**
268 |    * 1. Add the correct box sizing in IE 10.
269 |    * 2. Remove the padding in IE 10.
270 |    */
271 | 
272 | [type="checkbox"],
273 | [type="radio"] {
274 |   box-sizing: border-box; /* 1 */
275 |   padding: 0; /* 2 */
276 | }
277 | 
278 | /**
279 |    * Correct the cursor style of increment and decrement buttons in Chrome.
280 |    */
281 | 
282 | [type="number"]::-webkit-inner-spin-button,
283 | [type="number"]::-webkit-outer-spin-button {
284 |   height: auto;
285 | }
286 | 
287 | /**
288 |    * 1. Correct the odd appearance in Chrome and Safari.
289 |    * 2. Correct the outline style in Safari.
290 |    */
291 | 
292 | [type="search"] {
293 |   -webkit-appearance: textfield; /* 1 */
294 |   outline-offset: -2px; /* 2 */
295 | }
296 | 
297 | /**
298 |    * Remove the inner padding in Chrome and Safari on macOS.
299 |    */
300 | 
301 | [type="search"]::-webkit-search-decoration {
302 |   -webkit-appearance: none;
303 | }
304 | 
305 | /**
306 |    * 1. Correct the inability to style clickable types in iOS and Safari.
307 |    * 2. Change font properties to `inherit` in Safari.
308 |    */
309 | 
310 | ::-webkit-file-upload-button {
311 |   -webkit-appearance: button; /* 1 */
312 |   font: inherit; /* 2 */
313 | }
314 | 
315 | /* Interactive
316 |      ========================================================================== */
317 | 
318 | /*
319 |    * Add the correct display in Edge, IE 10+, and Firefox.
320 |    */
321 | 
322 | details {
323 |   display: block;
324 | }
325 | 
326 | /*
327 |    * Add the correct display in all browsers.
328 |    */
329 | 
330 | summary {
331 |   display: list-item;
332 | }
333 | 
334 | /* Misc
335 |      ========================================================================== */
336 | 
337 | /**
338 |    * Add the correct display in IE 10+.
339 |    */
340 | 
341 | template {
342 |   display: none;
343 | }
344 | 
345 | /**
346 |    * Add the correct display in IE 10.
347 |    */
348 | 
349 | [hidden] {
350 |   display: none;
351 | }
352 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  2 | /* Document
  3 |    ========================================================================== */
  4 | /**
  5 |  * 1. Correct the line height in all browsers.
  6 |  * 2. Prevent adjustments of font size after orientation changes in iOS.
  7 |  */
  8 | html {
  9 |   line-height: 1.15;
 10 |   /* 1 */
 11 |   -webkit-text-size-adjust: 100%;
 12 |   /* 2 */ }
 13 | 
 14 | /* Sections
 15 |      ========================================================================== */
 16 | /**
 17 |    * Remove the margin in all browsers.
 18 |    */
 19 | body {
 20 |   margin: 0; }
 21 | 
 22 | /**
 23 |    * Render the `main` element consistently in IE.
 24 |    */
 25 | main {
 26 |   display: block; }
 27 | 
 28 | /**
 29 |    * Correct the font size and margin on `h1` elements within `section` and
 30 |    * `article` contexts in Chrome, Firefox, and Safari.
 31 |    */
 32 | h1 {
 33 |   font-size: 2em;
 34 |   margin: 0.67em 0; }
 35 | 
 36 | /* Grouping content
 37 |      ========================================================================== */
 38 | /**
 39 |    * 1. Add the correct box sizing in Firefox.
 40 |    * 2. Show the overflow in Edge and IE.
 41 |    */
 42 | hr {
 43 |   box-sizing: content-box;
 44 |   /* 1 */
 45 |   height: 0;
 46 |   /* 1 */
 47 |   overflow: visible;
 48 |   /* 2 */ }
 49 | 
 50 | /**
 51 |    * 1. Correct the inheritance and scaling of font size in all browsers.
 52 |    * 2. Correct the odd `em` font sizing in all browsers.
 53 |    */
 54 | pre {
 55 |   font-family: monospace, monospace;
 56 |   /* 1 */
 57 |   font-size: 1em;
 58 |   /* 2 */ }
 59 | 
 60 | /* Text-level semantics
 61 |      ========================================================================== */
 62 | /**
 63 |    * Remove the gray background on active links in IE 10.
 64 |    */
 65 | a {
 66 |   background-color: transparent; }
 67 | 
 68 | /**
 69 |    * 1. Remove the bottom border in Chrome 57-
 70 |    * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 71 |    */
 72 | abbr[title] {
 73 |   border-bottom: none;
 74 |   /* 1 */
 75 |   text-decoration: underline;
 76 |   /* 2 */
 77 |   text-decoration: underline dotted;
 78 |   /* 2 */ }
 79 | 
 80 | /**
 81 |    * Add the correct font weight in Chrome, Edge, and Safari.
 82 |    */
 83 | b,
 84 | strong {
 85 |   font-weight: bolder; }
 86 | 
 87 | /**
 88 |    * 1. Correct the inheritance and scaling of font size in all browsers.
 89 |    * 2. Correct the odd `em` font sizing in all browsers.
 90 |    */
 91 | code,
 92 | kbd,
 93 | samp {
 94 |   font-family: monospace, monospace;
 95 |   /* 1 */
 96 |   font-size: 1em;
 97 |   /* 2 */ }
 98 | 
 99 | /**
100 |    * Add the correct font size in all browsers.
101 |    */
102 | small {
103 |   font-size: 80%; }
104 | 
105 | /**
106 |    * Prevent `sub` and `sup` elements from affecting the line height in
107 |    * all browsers.
108 |    */
109 | sub,
110 | sup {
111 |   font-size: 75%;
112 |   line-height: 0;
113 |   position: relative;
114 |   vertical-align: baseline; }
115 | 
116 | sub {
117 |   bottom: -0.25em; }
118 | 
119 | sup {
120 |   top: -0.5em; }
121 | 
122 | /* Embedded content
123 |      ========================================================================== */
124 | /**
125 |    * Remove the border on images inside links in IE 10.
126 |    */
127 | img {
128 |   border-style: none; }
129 | 
130 | /* Forms
131 |      ========================================================================== */
132 | /**
133 |    * 1. Change the font styles in all browsers.
134 |    * 2. Remove the margin in Firefox and Safari.
135 |    */
136 | button,
137 | input,
138 | optgroup,
139 | select,
140 | textarea {
141 |   font-family: inherit;
142 |   /* 1 */
143 |   font-size: 100%;
144 |   /* 1 */
145 |   line-height: 1.15;
146 |   /* 1 */
147 |   margin: 0;
148 |   /* 2 */ }
149 | 
150 | /**
151 |    * Show the overflow in IE.
152 |    * 1. Show the overflow in Edge.
153 |    */
154 | button,
155 | input {
156 |   /* 1 */
157 |   overflow: visible; }
158 | 
159 | /**
160 |    * Remove the inheritance of text transform in Edge, Firefox, and IE.
161 |    * 1. Remove the inheritance of text transform in Firefox.
162 |    */
163 | button,
164 | select {
165 |   /* 1 */
166 |   text-transform: none; }
167 | 
168 | /**
169 |    * Correct the inability to style clickable types in iOS and Safari.
170 |    */
171 | button,
172 | [type="button"],
173 | [type="reset"],
174 | [type="submit"] {
175 |   -webkit-appearance: button; }
176 | 
177 | /**
178 |    * Remove the inner border and padding in Firefox.
179 |    */
180 | button::-moz-focus-inner,
181 | [type="button"]::-moz-focus-inner,
182 | [type="reset"]::-moz-focus-inner,
183 | [type="submit"]::-moz-focus-inner {
184 |   border-style: none;
185 |   padding: 0; }
186 | 
187 | /**
188 |    * Restore the focus styles unset by the previous rule.
189 |    */
190 | button:-moz-focusring,
191 | [type="button"]:-moz-focusring,
192 | [type="reset"]:-moz-focusring,
193 | [type="submit"]:-moz-focusring {
194 |   outline: 1px dotted ButtonText; }
195 | 
196 | /**
197 |    * Correct the padding in Firefox.
198 |    */
199 | fieldset {
200 |   padding: 0.35em 0.75em 0.625em; }
201 | 
202 | /**
203 |    * 1. Correct the text wrapping in Edge and IE.
204 |    * 2. Correct the color inheritance from `fieldset` elements in IE.
205 |    * 3. Remove the padding so developers are not caught out when they zero out
206 |    *    `fieldset` elements in all browsers.
207 |    */
208 | legend {
209 |   box-sizing: border-box;
210 |   /* 1 */
211 |   color: inherit;
212 |   /* 2 */
213 |   display: table;
214 |   /* 1 */
215 |   max-width: 100%;
216 |   /* 1 */
217 |   padding: 0;
218 |   /* 3 */
219 |   white-space: normal;
220 |   /* 1 */ }
221 | 
222 | /**
223 |    * Add the correct vertical alignment in Chrome, Firefox, and Opera.
224 |    */
225 | progress {
226 |   vertical-align: baseline; }
227 | 
228 | /**
229 |    * Remove the default vertical scrollbar in IE 10+.
230 |    */
231 | textarea {
232 |   overflow: auto; }
233 | 
234 | /**
235 |    * 1. Add the correct box sizing in IE 10.
236 |    * 2. Remove the padding in IE 10.
237 |    */
238 | [type="checkbox"],
239 | [type="radio"] {
240 |   box-sizing: border-box;
241 |   /* 1 */
242 |   padding: 0;
243 |   /* 2 */ }
244 | 
245 | /**
246 |    * Correct the cursor style of increment and decrement buttons in Chrome.
247 |    */
248 | [type="number"]::-webkit-inner-spin-button,
249 | [type="number"]::-webkit-outer-spin-button {
250 |   height: auto; }
251 | 
252 | /**
253 |    * 1. Correct the odd appearance in Chrome and Safari.
254 |    * 2. Correct the outline style in Safari.
255 |    */
256 | [type="search"] {
257 |   -webkit-appearance: textfield;
258 |   /* 1 */
259 |   outline-offset: -2px;
260 |   /* 2 */ }
261 | 
262 | /**
263 |    * Remove the inner padding in Chrome and Safari on macOS.
264 |    */
265 | [type="search"]::-webkit-search-decoration {
266 |   -webkit-appearance: none; }
267 | 
268 | /**
269 |    * 1. Correct the inability to style clickable types in iOS and Safari.
270 |    * 2. Change font properties to `inherit` in Safari.
271 |    */
272 | ::-webkit-file-upload-button {
273 |   -webkit-appearance: button;
274 |   /* 1 */
275 |   font: inherit;
276 |   /* 2 */ }
277 | 
278 | /* Interactive
279 |      ========================================================================== */
280 | /*
281 |    * Add the correct display in Edge, IE 10+, and Firefox.
282 |    */
283 | details {
284 |   display: block; }
285 | 
286 | /*
287 |    * Add the correct display in all browsers.
288 |    */
289 | summary {
290 |   display: list-item; }
291 | 
292 | /* Misc
293 |      ========================================================================== */
294 | /**
295 |    * Add the correct display in IE 10+.
296 |    */
297 | template {
298 |   display: none; }
299 | 
300 | /**
301 |    * Add the correct display in IE 10.
302 |    */
303 | [hidden] {
304 |   display: none; }
305 | 
306 | body {
307 |   font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
308 |   height: 2000px; }
309 | 
310 | .container {
311 |   width: 1345px;
312 |   min-width: 1345px;
313 |   margin: 0 auto; }
314 |   @media (max-width: 1440px) {
315 |     .container {
316 |       width: 1153px;
317 |       min-width: 1153px; } }
318 |   @media (max-width: 1152px) {
319 |     .container {
320 |       width: 961px;
321 |       min-width: 961px; } }
322 |   @media (max-width: 960px) {
323 |     .container {
324 |       width: 767px;
325 |       min-width: 767px; } }
326 |   @media (max-width: 768px) {
327 |     .container {
328 |       width: 481px;
329 |       min-width: 481px; } }
330 |   @media (max-width: 480px) {
331 |     .container {
332 |       width: 320px;
333 |       min-width: 320px; } }
334 |   .container .row {
335 |     display: flex;
336 |     align-items: center;
337 |     padding: 0 16px; }
338 | 
339 | .container-fluid {
340 |   padding: 0 48px; }
341 |   .container-fluid .row {
342 |     display: flex;
343 |     align-items: center;
344 |     padding: 0 16px; }
345 | 
346 | header {
347 |   position: absolute;
348 |   width: 100%;
349 |   height: 100px;
350 |   z-index: 10; }
351 |   header .container-fluid .header-inner {
352 |     position: relative;
353 |     height: 100px;
354 |     display: flex;
355 |     align-items: center;
356 |     justify-content: space-between;
357 |     width: 100%; }
358 |     header .container-fluid .header-inner .logo {
359 |       font-family: "Playfair Display", "Poppins";
360 |       font-size: 1.875rem;
361 |       font-weight: 700;
362 |       color: #233567; }
363 |     header .container-fluid .header-inner .navigation {
364 |       position: absolute;
365 |       left: 0;
366 |       right: 0;
367 |       display: flex;
368 |       justify-content: center;
369 |       width: 50%;
370 |       margin: 0 auto; }
371 |       header .container-fluid .header-inner .navigation nav ul {
372 |         display: flex;
373 |         align-items: center;
374 |         padding: 0; }
375 |         header .container-fluid .header-inner .navigation nav ul li {
376 |           list-style: none;
377 |           margin: 0 40px; }
378 |           @media (max-width: 1440px) {
379 |             header .container-fluid .header-inner .navigation nav ul li {
380 |               margin: 0 24px; } }
381 |           header .container-fluid .header-inner .navigation nav ul li a {
382 |             font-size: 0.875rem;
383 |             padding: 8px 0;
384 |             text-decoration: none;
385 |             font-weight: 600;
386 |             color: #233567; }
387 |     header .container-fluid .header-inner .nav-logins {
388 |       z-index: 12;
389 |       display: flex;
390 |       align-items: center; }
391 |       header .container-fluid .header-inner .nav-logins .login a {
392 |         font-size: 0.875rem;
393 |         padding: 8px 0;
394 |         text-decoration: none;
395 |         font-weight: 600;
396 |         color: #233567;
397 |         margin-right: 48px; }
398 |         @media (max-width: 1440px) {
399 |           header .container-fluid .header-inner .nav-logins .login a {
400 |             margin-right: 24px; } }
401 |       header .container-fluid .header-inner .nav-logins .apply a {
402 |         display: inline-block;
403 |         height: 52px;
404 |         line-height: 52px;
405 |         font-size: 0.875rem;
406 |         padding: 0px 32px;
407 |         text-decoration: none;
408 |         font-weight: 600;
409 |         color: #233567;
410 |         border: 2px solid #233567;
411 |         border-radius: 100px;
412 |         transition: 0.2s ease-in-out; }
413 |         header .container-fluid .header-inner .nav-logins .apply a:hover {
414 |           background: #233567;
415 |           color: #ffffff; }
416 |         @media (max-width: 1440px) {
417 |           header .container-fluid .header-inner .nav-logins .apply a {
418 |             padding: 0 24px; } }
419 | 
420 | body {
421 |   font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
422 |   height: 2000px; }
423 | 
424 | .container {
425 |   width: 1345px;
426 |   min-width: 1345px;
427 |   margin: 0 auto; }
428 |   @media (max-width: 1440px) {
429 |     .container {
430 |       width: 1153px;
431 |       min-width: 1153px; } }
432 |   @media (max-width: 1152px) {
433 |     .container {
434 |       width: 961px;
435 |       min-width: 961px; } }
436 |   @media (max-width: 960px) {
437 |     .container {
438 |       width: 767px;
439 |       min-width: 767px; } }
440 |   @media (max-width: 768px) {
441 |     .container {
442 |       width: 481px;
443 |       min-width: 481px; } }
444 |   @media (max-width: 480px) {
445 |     .container {
446 |       width: 320px;
447 |       min-width: 320px; } }
448 |   .container .row {
449 |     display: flex;
450 |     align-items: center;
451 |     padding: 0 16px; }
452 | 
453 | .container-fluid {
454 |   padding: 0 48px; }
455 |   .container-fluid .row {
456 |     display: flex;
457 |     align-items: center;
458 |     padding: 0 16px; }
459 | 
460 | .banner {
461 |   height: 80vh;
462 |   position: relative; }
463 |   @media (max-width: 1440px) {
464 |     .banner {
465 |       height: 90vh; } }
466 |   .banner .banner-addition-bg {
467 |     background: #233567;
468 |     position: absolute;
469 |     left: 0;
470 |     right: 0;
471 |     top: 0;
472 |     bottom: 0;
473 |     height: 100%; }
474 |   .banner .banner-bg {
475 |     background: #ffe5e5;
476 |     position: absolute;
477 |     left: 0;
478 |     right: 0;
479 |     top: 0;
480 |     bottom: 0;
481 |     height: 100%; }
482 |   .banner .banner-inner {
483 |     width: 100%;
484 |     height: 80vh;
485 |     display: flex;
486 |     position: relative; }
487 |     @media (max-width: 1440px) {
488 |       .banner .banner-inner {
489 |         height: 90vh; } }
490 |     .banner .banner-inner .content {
491 |       width: 60%;
492 |       height: 100%;
493 |       display: flex;
494 |       align-items: center; }
495 |       .banner .banner-inner .content .content-inner h1 {
496 |         font-family: "Playfair Display";
497 |         color: #233567;
498 |         font-size: 3.4rem;
499 |         line-height: 4.8rem;
500 |         margin: 32px 0 0;
501 |         width: 620px; }
502 |         @media (max-width: 1440px) {
503 |           .banner .banner-inner .content .content-inner h1 {
504 |             font-size: 3.1rem;
505 |             line-height: 3.6rem; } }
506 |         .banner .banner-inner .content .content-inner h1 .line {
507 |           overflow: hidden;
508 |           height: 76px;
509 |           position: relative; }
510 |           .banner .banner-inner .content .content-inner h1 .line span {
511 |             position: absolute; }
512 |       .banner .banner-inner .content .content-inner p {
513 |         font-size: 1rem;
514 |         line-height: 1.6rem;
515 |         font-weight: 300;
516 |         color: #233567;
517 |         width: 520px;
518 |         margin: 32px 0 80px; }
519 |         @media (max-width: 1440px) {
520 |           .banner .banner-inner .content .content-inner p {
521 |             margin: 16px 0 60px; } }
522 |       .banner .banner-inner .content .content-inner .btn-row a {
523 |         display: inline-block;
524 |         height: 56px;
525 |         line-height: 56px;
526 |         font-size: 1rem;
527 |         padding: 0px 32px;
528 |         text-decoration: none;
529 |         font-weight: 600;
530 |         color: #ffffff;
531 |         background: #d57868;
532 |         border-radius: 100px; }
533 |       .banner .banner-inner .content .content-inner .play-video {
534 |         position: absolute;
535 |         bottom: 0;
536 |         left: 0;
537 |         border-radius: 4px 4px 0 0;
538 |         overflow: hidden; }
539 |         .banner .banner-inner .content .content-inner .play-video .cover {
540 |           padding: 0;
541 |           background: #ffe5e5;
542 |           right: 0;
543 |           z-index: 9;
544 |           height: 64px;
545 |           opacity: 0; }
546 |         .banner .banner-inner .content .content-inner .play-video span {
547 |           opacity: 0;
548 |           display: flex;
549 |           align-items: center;
550 |           height: 64px;
551 |           padding: 0 32px;
552 |           background: #ffffff;
553 |           font-weight: 600;
554 |           color: #233567; }
555 |           .banner .banner-inner .content .content-inner .play-video span img {
556 |             margin-right: 1rem; }
557 |     .banner .banner-inner .image {
558 |       position: relative;
559 |       width: 40%;
560 |       height: 100%;
561 |       display: flex;
562 |       justify-content: center;
563 |       align-items: flex-end; }
564 |       .banner .banner-inner .image .image-inner img {
565 |         width: 450px;
566 |         position: absolute;
567 |         bottom: 0;
568 |         left: 0;
569 |         right: 0;
570 |         z-index: 9; }
571 |         @media (max-width: 1440px) {
572 |           .banner .banner-inner .image .image-inner img {
573 |             width: 400px; } }
574 |       .banner .banner-inner .image .image-inner .feature-banner {
575 |         position: absolute;
576 |         bottom: 286px;
577 |         left: -10px;
578 |         background: #315b96;
579 |         color: #ffffff;
580 |         height: 52px;
581 |         display: flex;
582 |         align-items: center;
583 |         padding: 0 32px;
584 |         border-radius: 4px;
585 |         font-weight: 600; }
586 |         .banner .banner-inner .image .image-inner .feature-banner.green {
587 |           background: #76d8aa;
588 |           right: 32px;
589 |           left: auto;
590 |           bottom: 116px; }
591 |           @media (max-width: 1440px) {
592 |             .banner .banner-inner .image .image-inner .feature-banner.green {
593 |               right: -24px; } }
594 | 
595 | body {
596 |   font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
597 |   height: 2000px; }
598 | 
599 | .container {
600 |   width: 1345px;
601 |   min-width: 1345px;
602 |   margin: 0 auto; }
603 |   @media (max-width: 1440px) {
604 |     .container {
605 |       width: 1153px;
606 |       min-width: 1153px; } }
607 |   @media (max-width: 1152px) {
608 |     .container {
609 |       width: 961px;
610 |       min-width: 961px; } }
611 |   @media (max-width: 960px) {
612 |     .container {
613 |       width: 767px;
614 |       min-width: 767px; } }
615 |   @media (max-width: 768px) {
616 |     .container {
617 |       width: 481px;
618 |       min-width: 481px; } }
619 |   @media (max-width: 480px) {
620 |     .container {
621 |       width: 320px;
622 |       min-width: 320px; } }
623 |   .container .row {
624 |     display: flex;
625 |     align-items: center;
626 |     padding: 0 16px; }
627 | 
628 | .container-fluid {
629 |   padding: 0 48px; }
630 |   .container-fluid .row {
631 |     display: flex;
632 |     align-items: center;
633 |     padding: 0 16px; }
634 | 
635 | .features {
636 |   margin-top: 20vh; }
637 |   .features .features-inner {
638 |     display: flex;
639 |     justify-content: space-between;
640 |     align-items: flex-start; }
641 |     .features .features-inner .features-content {
642 |       width: 33%; }
643 |       @media (max-width: 1440px) {
644 |         .features .features-inner .features-content {
645 |           width: 40%; } }
646 |       .features .features-inner .features-content h3 {
647 |         font-family: "Playfair Display";
648 |         color: #233567;
649 |         font-size: 2.6rem;
650 |         line-height: 3.4rem;
651 |         margin: 0 0 40px; }
652 |       .features .features-inner .features-content p {
653 |         line-height: 1.8rem;
654 |         font-weight: 300;
655 |         color: #233567;
656 |         margin-bottom: 88px; }
657 |         @media (max-width: 1440px) {
658 |           .features .features-inner .features-content p {
659 |             padding-right: 60px; } }
660 |       .features .features-inner .features-content .btn-row a {
661 |         color: #233567;
662 |         text-decoration: none;
663 |         font-weight: 600; }
664 |         .features .features-inner .features-content .btn-row a img {
665 |           margin-left: 16px; }
666 |     .features .features-inner .features-list {
667 |       width: 50%;
668 |       display: flex;
669 |       justify-content: center; }
670 |       .features .features-inner .features-list ul {
671 |         display: flex;
672 |         justify-content: space-between;
673 |         flex-wrap: wrap;
674 |         padding: 0; }
675 |         .features .features-inner .features-list ul li {
676 |           list-style: none; }
677 |           .features .features-inner .features-list ul li img {
678 |             margin-bottom: 24px; }
679 |           .features .features-inner .features-list ul li h5 {
680 |             color: #233567;
681 |             font-weight: 600;
682 |             font-size: 1.2rem;
683 |             margin: 0; }
684 |           .features .features-inner .features-list ul li p {
685 |             line-height: 1.8rem;
686 |             font-weight: 300;
687 |             color: #233567;
688 |             width: 270px;
689 |             margin: 16px 0 72px;
690 |             font-size: 1rem; }
691 |             @media (max-width: 1440px) {
692 |               .features .features-inner .features-list ul li p {
693 |                 font-size: 0.875rem; } }
694 | 


--------------------------------------------------------------------------------
/css/style.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sourceRoot":"","sources":["style.scss","variables.scss"],"names":[],"mappings":"AAAQ;ACgBR;EACE;;;AAKF;EACE;EACA;EACA;;AACA;EAJF;IAKI;IACA;;;AAEF;EARF;IASI;IACA;;;AAEF;EAZF;IAaI;IACA;;;AAEF;EAhBF;IAiBI;IACA;;;AAEF;EApBF;IAqBI;IACA;;;AAEF;EACE;EACA;EACA;;;AAGJ;EACE;;AACA;EACE;EACA;EACA","file":"style.css"}


--------------------------------------------------------------------------------
/css/style.scss:
--------------------------------------------------------------------------------
1 | @import "./normalize.scss";
2 | 
3 | // Components
4 | @import "./components/header.scss";
5 | @import "./components/banner.scss";
6 | @import "./components/features.scss";
7 | 


--------------------------------------------------------------------------------
/css/variables.scss:
--------------------------------------------------------------------------------
 1 | //media query
 2 | $mobile: "480px";
 3 | $tablet: "768px";
 4 | $laptop: "960px";
 5 | $desktop: "1152px";
 6 | $widescreen: "1440px";
 7 | 
 8 | // color
 9 | $blue: #233567;
10 | $lBlue: #315b96;
11 | $pink: #fadcdc;
12 | $lPink: #ffe5e5;
13 | $green: #76d8aa;
14 | $redOrange: #d57868;
15 | $white: #ffffff;
16 | 
17 | body {
18 |   font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
19 |     Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
20 |   height: 2000px;
21 | }
22 | 
23 | // Container
24 | .container {
25 |   width: 1345px;
26 |   min-width: 1345px;
27 |   margin: 0 auto;
28 |   @media (max-width: $widescreen) {
29 |     width: 1153px;
30 |     min-width: 1153px;
31 |   }
32 |   @media (max-width: $desktop) {
33 |     width: 961px;
34 |     min-width: 961px;
35 |   }
36 |   @media (max-width: $laptop) {
37 |     width: 767px;
38 |     min-width: 767px;
39 |   }
40 |   @media (max-width: $tablet) {
41 |     width: 481px;
42 |     min-width: 481px;
43 |   }
44 |   @media (max-width: $mobile) {
45 |     width: 320px;
46 |     min-width: 320px;
47 |   }
48 |   .row {
49 |     display: flex;
50 |     align-items: center;
51 |     padding: 0 16px;
52 |   }
53 | }
54 | .container-fluid {
55 |   padding: 0 48px;
56 |   .row {
57 |     display: flex;
58 |     align-items: center;
59 |     padding: 0 16px;
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/images/0-fees.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="36.742" height="36.742" viewBox="0 0 36.742 36.742">
2 |   <path id="Rectangle_14" data-name="Rectangle 14" d="M9.286,0H20.714A9.286,9.286,0,0,1,30,9.286v0A20.714,20.714,0,0,1,9.286,30h0A9.286,9.286,0,0,1,0,20.714V9.286A9.286,9.286,0,0,1,9.286,0Z" transform="matrix(0.259, 0.966, -0.966, 0.259, 28.978, 0)" fill="#315b96"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/images/0-interest.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
2 |   <rect id="Rectangle_16" data-name="Rectangle 16" width="30" height="30" rx="15" fill="#fbc1bc"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/images/arrow-right.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="6.401" height="10.801" viewBox="0 0 6.401 10.801">
2 |   <g id="arrow-right" transform="translate(-14.093 -6.599)">
3 |     <path id="Path_6" data-name="Path 6" d="M12,5l3.986,3.986L12,12.973" transform="translate(3.507 3.014)" fill="none" stroke="#233567" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4"/>
4 |   </g>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/images/chat-support.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
2 |   <path id="Rectangle_17" data-name="Rectangle 17" d="M5,0H25a5,5,0,0,1,5,5V5A25,25,0,0,1,5,30H5a5,5,0,0,1-5-5V5A5,5,0,0,1,5,0Z" fill="#315b96"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/images/fast-delivery.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="59.42" height="42.42" viewBox="0 0 59.42 42.42">
2 |   <g id="Group_5" data-name="Group 5" transform="translate(-969.79 -1092.79)">
3 |     <path id="Rectangle_13" data-name="Rectangle 13" d="M4,0H26a4,4,0,0,1,4,4V4A26,26,0,0,1,4,30H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0Z" transform="matrix(-0.695, 0.719, -0.719, -0.695, 1002.21, 1113.63)" fill="#315b96"/>
4 |     <path id="Rectangle_20" data-name="Rectangle 20" d="M4,0H26a4,4,0,0,1,4,4V4A26,26,0,0,1,4,30H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0Z" transform="matrix(-0.719, 0.695, -0.695, -0.719, 1019.21, 1114.37)" fill="#d57868"/>
5 |   </g>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/images/fixed-payment-option.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="58.742" height="36.742" viewBox="0 0 58.742 36.742">
2 |   <g id="Group_6" data-name="Group 6" transform="translate(-1389.629 -1616)">
3 |     <rect id="Rectangle_18" data-name="Rectangle 18" width="30" height="30" rx="15" transform="matrix(0.259, 0.966, -0.966, 0.259, 1415.607, 1616)" fill="#fbc1bc"/>
4 |     <rect id="Rectangle_19" data-name="Rectangle 19" width="30" height="30" rx="15" transform="matrix(0.259, 0.966, -0.966, 0.259, 1437.607, 1616)" fill="#315b96"/>
5 |   </g>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/images/hand.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wrongakram/html-css-hero-animation/deadb056e950074243ad56b877481e478915a008/images/hand.webp


--------------------------------------------------------------------------------
/images/no-credit-check.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="36.742" height="36.742" viewBox="0 0 36.742 36.742">
2 |   <rect id="Rectangle_15" data-name="Rectangle 15" width="30" height="30" rx="4" transform="matrix(0.259, 0.966, -0.966, 0.259, 28.978, 0)" fill="#d57868"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/images/play.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="10" height="12.286" viewBox="0 0 10 12.286">
2 |   <path id="play" d="M5,3l8,5.143L5,13.286Z" transform="translate(-4 -2)" fill="#233567" stroke="#233567" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 |     <title>Starter</title>
  8 |     <link
  9 |       href="https://fonts.googleapis.com/css?family=Playfair+Display:700|Poppins:300,600&display=swap"
 10 |       rel="stylesheet"
 11 |     />
 12 |     <link rel="stylesheet" href="./css/style.css" />
 13 |   </head>
 14 |   <body>
 15 |     <header id="header">
 16 |       <div class="container-fluid">
 17 |         <div class="row">
 18 |           <div class="header-inner">
 19 |             <div class="logo">M.</div>
 20 |             <div class="navigation">
 21 |               <nav>
 22 |                 <ul>
 23 |                   <li><a href="/">About</a></li>
 24 |                   <li><a href="/">Zero Interest</a></li>
 25 |                   <li><a href="/">Case Studies</a></li>
 26 |                   <li><a href="/">Resources</a></li>
 27 |                   <li><a href="/">Students</a></li>
 28 |                 </ul>
 29 |               </nav>
 30 |             </div>
 31 |             <div class="nav-logins">
 32 |               <div class="login">
 33 |                 <a href="/">Log in</a>
 34 |               </div>
 35 |               <div class="apply">
 36 |                 <a href="/">Apply Today</a>
 37 |               </div>
 38 |             </div>
 39 |           </div>
 40 |         </div>
 41 |       </div>
 42 |     </header>
 43 | 
 44 |     <section class="banner" id="banner">
 45 |       <div id="bannerBgAddition" class="banner-addition-bg"></div>
 46 |       <div id="bannerBg" class="banner-bg"></div>
 47 |       <div class="container">
 48 |         <div class="row">
 49 |           <div class="banner-inner" id="bannerInner">
 50 |             <div class="content">
 51 |               <div class="content-inner">
 52 |                 <h1>
 53 |                   <div class="line">
 54 |                     <span>Helping student pay</span>
 55 |                   </div>
 56 |                   <div class="line">
 57 |                     <span>off their ridiculous debts</span>
 58 |                   </div>
 59 |                 </h1>
 60 |                 <p>
 61 |                   Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos
 62 |                   sunt doloremque repellendus pariatur ad. Necessitatibus
 63 |                   beatae, alias assumenda.
 64 |                 </p>
 65 |                 <div class="btn-row">
 66 |                   <a href="/">Apply Today</a>
 67 |                 </div>
 68 |                 <div class="play-video">
 69 |                   <div class="play-video cover"></div>
 70 |                   <span>
 71 |                     <img src="./images/play.svg" alt="play icon" />
 72 |                     Watch Video
 73 |                   </span>
 74 |                 </div>
 75 |               </div>
 76 |             </div>
 77 |             <div class="image">
 78 |               <div class="image-inner">
 79 |                 <img src="./images/hand.webp" alt="Hand" />
 80 |                 <div class="feature-banner" id="featureBanner">
 81 |                   0% Interest
 82 |                 </div>
 83 |                 <div class="feature-banner green" id="featureBannerGreen">
 84 |                   No Credit Checks
 85 |                 </div>
 86 |               </div>
 87 |             </div>
 88 |           </div>
 89 |         </div>
 90 |       </div>
 91 |     </section>
 92 | 
 93 |     <section id="features" class="features">
 94 |       <div class="container">
 95 |         <div class="row">
 96 |           <div class="features-inner">
 97 |             <div class="features-content">
 98 |               <h3>We are here to provide you with the best services.</h3>
 99 |               <p>
100 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit.
101 |                 Doloribus cupiditate magni vitae aliquam dolorem nobis facere
102 |                 quod aut autem fuga ex, neque error unde possimus odit eaque
103 |                 voluptatibus sapiente qui.
104 |               </p>
105 |               <div class="btn-row">
106 |                 <a href="/"
107 |                   >View All Services
108 |                   <img src="./images/arrow-right.svg" alt="arrow right"
109 |                 /></a>
110 |               </div>
111 |             </div>
112 |             <div class="features-list">
113 |               <ul>
114 |                 <li>
115 |                   <img src="./images/fast-delivery.svg" alt="fast delivery" />
116 |                   <h5>Fast Delivery</h5>
117 |                   <p>
118 |                     Lorem ipsum dolor sit, amet consectetur adipisicing elit.
119 |                     Qui dolorum rerum vero.
120 |                   </p>
121 |                 </li>
122 |                 <li>
123 |                   <img src="./images/0-fees.svg" alt="fast delivery" />
124 |                   <h5>$0 Fee's</h5>
125 |                   <p>
126 |                     Lorem ipsum dolor sit, amet consectetur adipisicing elit.
127 |                     Qui dolorum rerum vero.
128 |                   </p>
129 |                 </li>
130 |                 <li>
131 |                   <img src="./images/0-interest.svg" alt="fast delivery" />
132 |                   <h5>0% Interest</h5>
133 |                   <p>
134 |                     Lorem ipsum dolor sit, amet consectetur adipisicing elit.
135 |                     Qui dolorum rerum vero.
136 |                   </p>
137 |                 </li>
138 |                 <li>
139 |                   <img src="./images/no-credit-check.svg" alt="fast delivery" />
140 |                   <h5>No Credit Checks</h5>
141 |                   <p>
142 |                     Lorem ipsum dolor sit, amet consectetur adipisicing elit.
143 |                     Qui dolorum rerum vero.
144 |                   </p>
145 |                 </li>
146 |                 <li>
147 |                   <img src="./images/chat-support.svg" alt="fast delivery" />
148 |                   <h5>Chat Support</h5>
149 |                   <p>
150 |                     Lorem ipsum dolor sit, amet consectetur adipisicing elit.
151 |                     Qui dolorum rerum vero.
152 |                   </p>
153 |                 </li>
154 |                 <li>
155 |                   <img
156 |                     src="./images/fixed-payment-option.svg"
157 |                     alt="fast delivery"
158 |                   />
159 |                   <h5>Fixed Payment Option</h5>
160 |                   <p>
161 |                     Lorem ipsum dolor sit, amet consectetur adipisicing elit.
162 |                     Qui dolorum rerum vero.
163 |                   </p>
164 |                 </li>
165 |               </ul>
166 |             </div>
167 |           </div>
168 |         </div>
169 |       </div>
170 |     </section>
171 |   </body>
172 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
173 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
174 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
175 |   <script src="https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js"></script>
176 |   <script type="module" defer src="/js/index.js"></script>
177 | </html>
178 | 


--------------------------------------------------------------------------------
/js/animations.js:
--------------------------------------------------------------------------------
1 | // export const slide = el => {
2 | //   gsap.from(el, {
3 | //     x: 100,
4 | //     duration: 4
5 | //   });
6 | // };
7 | 


--------------------------------------------------------------------------------
/js/index.js:
--------------------------------------------------------------------------------
  1 | //header
  2 | const header = document.querySelector("#header");
  3 | 
  4 | //banner
  5 | const banner = document.querySelector("#bannerBg");
  6 | const bannerAddition = document.querySelector("#bannerBgAddition");
  7 | 
  8 | //content
  9 | const h1Line = document.querySelectorAll(".line span");
 10 | const contentP = document.querySelector(".content-inner p");
 11 | const contentButton = document.querySelector(".content-inner .btn-row");
 12 | const playVideo = document.querySelector(".play-video span");
 13 | const playVideoCover = document.querySelector(".play-video .cover");
 14 | 
 15 | //image
 16 | const handImg = document.querySelector(".image-inner img");
 17 | const featureBanner = document.querySelector("#featureBanner");
 18 | const featureBannerGreen = document.querySelector("#featureBannerGreen");
 19 | 
 20 | //feauters
 21 | const featuresContentTitle = document.querySelector(".features-content h3");
 22 | const featuresContentP = document.querySelector(".features-content p");
 23 | const featuresContentButton = document.querySelector(
 24 |   ".features-content .btn-row"
 25 | );
 26 | const featuresList = document.querySelectorAll(".features-list li");
 27 | 
 28 | const bannerTL = gsap.timeline();
 29 | 
 30 | bannerTL
 31 |   .from([bannerAddition, banner], {
 32 |     duration: 1.2,
 33 |     width: 0,
 34 |     skewX: 4,
 35 |     ease: "power3.inOut",
 36 |     stagger: {
 37 |       amount: 0.2
 38 |     }
 39 |   })
 40 |   .from(header, {
 41 |     delay: -0.2,
 42 |     y: 16,
 43 |     opacity: 0,
 44 |     duration: 0.8,
 45 |     ease: "power3.inOut"
 46 |   })
 47 |   .from(h1Line, {
 48 |     delay: -0.4,
 49 |     y: 80,
 50 |     duration: 0.8,
 51 |     ease: "power3.out",
 52 |     stagger: {
 53 |       amount: 0.2
 54 |     }
 55 |   })
 56 |   .from([contentP, contentButton], {
 57 |     delay: -0.6,
 58 |     y: -40,
 59 |     duration: 0.8,
 60 |     opacity: 0,
 61 |     ease: "power3.out",
 62 |     stagger: {
 63 |       amount: 0.2
 64 |     }
 65 |   })
 66 |   .to([playVideo, playVideoCover], {
 67 |     delay: -0.6,
 68 |     opacity: 1,
 69 |     duration: 0
 70 |   })
 71 |   .to(playVideoCover, {
 72 |     delay: -0.6,
 73 |     height: 0,
 74 |     duration: 1,
 75 |     ease: "power3.out"
 76 |   });
 77 | 
 78 | gsap.from(handImg, {
 79 |   delay: 2.2,
 80 |   x: -100,
 81 |   skewX: 2,
 82 |   duration: 0.8,
 83 |   opacity: 0,
 84 |   ease: "power3.out"
 85 | });
 86 | 
 87 | gsap.from([featureBanner, featureBannerGreen], {
 88 |   delay: 2.4,
 89 |   x: -60,
 90 |   skewX: 6,
 91 |   duration: 0.8,
 92 |   opacity: 0,
 93 |   ease: "power3.out",
 94 |   stagger: {
 95 |     amount: 0.2
 96 |   }
 97 | });
 98 | 
 99 | const featuresTl = gsap.timeline();
100 | 
101 | featuresTl
102 |   .from([featuresContentTitle, featuresContentP, featuresContentButton], {
103 |     opacity: 0,
104 |     y: 40,
105 |     duration: 0.6,
106 |     ease: "powe3.out",
107 |     stagger: {
108 |       amount: 0.2
109 |     }
110 |   })
111 |   .from(featuresList, {
112 |     delay: -0.4,
113 |     opacity: 0,
114 |     y: 40,
115 |     duration: 0.6,
116 |     ease: "power3.out",
117 |     stagger: {
118 |       amount: 0.4
119 |     }
120 |   });
121 | 
122 | const controller = new ScrollMagic.Controller();
123 | const scene = new ScrollMagic.Scene({
124 |   triggerElement: "#featureBannerGreen",
125 |   triggerHook: 0,
126 |   reverse: false
127 | })
128 |   .addIndicators()
129 |   .setTween(featuresTl)
130 |   .addTo(controller);
131 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "code",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "watch": "node-sass --watch css/style.scss css/style.css",
 8 |     "build": "nodemon --exec babel-node ./js/* ",
 9 |     "start": "concurrently \"npm run watch\" \"npm run build\""
10 |   },
11 |   "author": "",
12 |   "license": "ISC",
13 |   "dependencies": {
14 |     "concurrently": "^5.0.0",
15 |     "gsap": "^3.0.1",
16 |     "node-sass": "^4.13.0"
17 |   },
18 |   "devDependencies": {
19 |     "@babel/cli": "^7.7.4",
20 |     "@babel/core": "^7.7.4",
21 |     "@babel/node": "^7.7.4",
22 |     "@babel/preset-env": "^7.7.4",
23 |     "nodemon": "^2.0.1"
24 |   }
25 | }
26 | 


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