├── preview.png
├── assets
├── img
│ ├── img-home.jpg
│ └── img-about.jpg
├── js
│ └── main.js
├── css
│ └── styles.css
└── scss
│ └── styles.scss
├── README.md
└── index.html
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/landing-page-fashion/HEAD/preview.png
--------------------------------------------------------------------------------
/assets/img/img-home.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/landing-page-fashion/HEAD/assets/img/img-home.jpg
--------------------------------------------------------------------------------
/assets/img/img-about.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/landing-page-fashion/HEAD/assets/img/img-about.jpg
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Responsive Fashion Landing Page
2 | ## [Watch it on youtube](https://youtu.be/CbQFhLQgLGs)
3 | ### Responsive Fashion Landing Page
4 |
5 | - Responsive Fashion Landing Page Using HTML CSS & JavaScript.
6 | - Contains animations made with GSAP.
7 | - Developed first with the Mobile First methodology, then for desktop.
8 | - Compatible with all mobile devices and with a beautiful and pleasant user interface.
9 |
10 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/c/Bedimcode)
11 |
12 | 
13 |
--------------------------------------------------------------------------------
/assets/js/main.js:
--------------------------------------------------------------------------------
1 | /* MENU SHOW */
2 | const showMenu = (toggleId,navId) =>{
3 | const toggle = document.getElementById(toggleId),
4 | nav = document.getElementById(navId)
5 |
6 | if(toggle && nav){
7 | toggle.addEventListener('click', ()=>{
8 | nav.classList.toggle('show')
9 | })
10 | }
11 | }
12 | showMenu('nav-toggle','nav-menu')
13 |
14 | /* GSAP ANIMATION */
15 | /*HOME PRIMARY*/
16 | TweenMax.to(".home__primary", 2, {
17 | width: "100%",
18 | ease: Expo.easeInOut
19 | })
20 | gsap.from('.home__title', {opacity: 0, duration: 2, delay: 1.5, y: 100})
21 | gsap.from('.home__img img', {opacity: 0, duration: 2, delay:1.5, y: -100})
22 |
23 | /*HOME SECONDARY*/
24 | TweenMax.to(".home__secondary", 2.5, {
25 | width: "100%",
26 | ease: Expo.easeInOut
27 | })
28 | gsap.from('.home__scroll', {opacity: 0, duration: 3, x: -100})
29 | gsap.from('.home__year', {opacity: -1, duration: 1.5, delay: 1.5, x: 100})
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Fashion Landing Page
10 |
11 |
12 |
13 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
Fashion Online
Store
42 |
43 |
44 |
45 |
46 |
47 |
48 |
52 |