├── preview.png
├── assets
├── img
│ ├── home1.png
│ ├── home2.png
│ ├── logo1.png
│ ├── logo2.png
│ ├── logo3.png
│ ├── logo4.png
│ ├── new1.png
│ ├── new2.png
│ ├── new3.png
│ ├── favicon.png
│ ├── product1.png
│ ├── product2.png
│ ├── product3.png
│ ├── product4.png
│ ├── collection1.png
│ └── collection2.png
├── js
│ ├── main.js
│ ├── scrollreveal.min.js
│ └── swiper-bundle.min.js
└── css
│ ├── styles.css
│ └── swiper-bundle.min.css
├── Figma Images - Responsive ecommercer landing page.fig
├── README.md
├── IMPORTANT NOTE - NOTA IMPORTANTE.txt
├── Text Responsive clothing ecommerce.txt
└── index.html
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/responsive-clothing-landing-page/main/preview.png
--------------------------------------------------------------------------------
/assets/img/home1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/responsive-clothing-landing-page/main/assets/img/home1.png
--------------------------------------------------------------------------------
/assets/img/home2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/responsive-clothing-landing-page/main/assets/img/home2.png
--------------------------------------------------------------------------------
/assets/img/logo1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/responsive-clothing-landing-page/main/assets/img/logo1.png
--------------------------------------------------------------------------------
/assets/img/logo2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/responsive-clothing-landing-page/main/assets/img/logo2.png
--------------------------------------------------------------------------------
/assets/img/logo3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/responsive-clothing-landing-page/main/assets/img/logo3.png
--------------------------------------------------------------------------------
/assets/img/logo4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/responsive-clothing-landing-page/main/assets/img/logo4.png
--------------------------------------------------------------------------------
/assets/img/new1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/responsive-clothing-landing-page/main/assets/img/new1.png
--------------------------------------------------------------------------------
/assets/img/new2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/responsive-clothing-landing-page/main/assets/img/new2.png
--------------------------------------------------------------------------------
/assets/img/new3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/responsive-clothing-landing-page/main/assets/img/new3.png
--------------------------------------------------------------------------------
/assets/img/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/responsive-clothing-landing-page/main/assets/img/favicon.png
--------------------------------------------------------------------------------
/assets/img/product1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/responsive-clothing-landing-page/main/assets/img/product1.png
--------------------------------------------------------------------------------
/assets/img/product2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/responsive-clothing-landing-page/main/assets/img/product2.png
--------------------------------------------------------------------------------
/assets/img/product3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/responsive-clothing-landing-page/main/assets/img/product3.png
--------------------------------------------------------------------------------
/assets/img/product4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/responsive-clothing-landing-page/main/assets/img/product4.png
--------------------------------------------------------------------------------
/assets/img/collection1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/responsive-clothing-landing-page/main/assets/img/collection1.png
--------------------------------------------------------------------------------
/assets/img/collection2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/responsive-clothing-landing-page/main/assets/img/collection2.png
--------------------------------------------------------------------------------
/Figma Images - Responsive ecommercer landing page.fig:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/responsive-clothing-landing-page/main/Figma Images - Responsive ecommercer landing page.fig
--------------------------------------------------------------------------------
/assets/js/main.js:
--------------------------------------------------------------------------------
1 | /*=============== CHANGE BACKGROUND HEADER ===============*/
2 |
3 |
4 | /*=============== SWIPER PRODUCTS ===============*/
5 |
6 |
7 | /*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
8 |
9 |
10 | /*=============== SHOW SCROLL UP ===============*/
11 |
12 |
13 | /*=============== DARK LIGHT THEME ===============*/
14 |
15 |
16 | /*=============== SCROLL REVEAL ANIMATION ===============*/
17 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 👕 Responsive Clothing Landing Page
2 | ## [Watch it on youtube](https://youtu.be/UgE8hcbRVBU)
3 | ### 👕 Responsive Clothing Landing Page
4 |
5 | - Responsive Clothing Landing Page Using HTML CSS & JavaScript
6 | - Contains animations when scrolling.
7 | - Includes a dark and light mode.
8 | - Smooth scrolling in each section.
9 | - Developed first with the Mobile First methodology, then for desktop.
10 | - Compatible with all mobile devices and with a beautiful and pleasant user interface.
11 |
12 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/c/Bedimcode)
13 |
14 | 
15 |
--------------------------------------------------------------------------------
/IMPORTANT NOTE - NOTA IMPORTANTE.txt:
--------------------------------------------------------------------------------
1 | IMPORTANT NOTE - Description English
2 |
3 | *Favicon
4 |
5 | If you want to create your favicon, do it in any design tool
6 | (I recommend figma, it's easier) and export it with the size of 32px.
7 |
8 | * Images of the project
9 |
10 | If you want to change the project images. Note that
11 | they must measure the same size of the images that are in the img folder,
12 | Example:(collection images: 550px x 795px)
13 |
14 | You can change the images by going to the figma file, there
15 | find a template where you will insert your preferred image and you can export it.
16 |
17 | Create your figma account and simply drag the file to be able to edit the
18 | project images.
19 |
20 | ===================================================================
21 |
22 | NOTA IMPORTANTE - Descripción Español
23 |
24 | * Favicon
25 |
26 | Si desea crear su favicon, hagalo en cualquier herramienta de diseño
27 | (recomiendo figma, es más sencillo) y exportalo con la medida de 32px.
28 |
29 | * Imágenes del proyecto
30 |
31 | Si desea cambiar las imágenes del proyecto. Tenga en cuenta que
32 | deben medir el mismo tamaño de las imágenes que se encuentran en la carpeta img,
33 | Ejemplo:(imagenes de collection: 550px x 795px)
34 |
35 | Puede cambiar las imágenes dirigiendose en el archivo figma, alli
36 | encuentra una plantilla donde insertara su imagen preferida y podra exportarlo.
37 |
38 | Cree su cuenta figma y solo arrastre el archivo para poder editar las imágenes
39 | del proyecto.
--------------------------------------------------------------------------------
/Text Responsive clothing ecommerce.txt:
--------------------------------------------------------------------------------
1 | ========== HOME ==========
2 | .home__title
3 | New Clothing
4 | Collection
5 |
6 | .home__description
7 | The new collection of clothing from
8 | the best brands this year.
9 |
10 | .button__link
11 | Explore
12 |
13 | ========== NEW ==========
14 | .section__title
15 | New Categories
16 |
17 | .new__title | .new__subtitle
18 | Hoodie & Sweatshirt
19 | Winter collection
20 |
21 | Pants & Jackets
22 | Winter collection
23 |
24 | Coats & Coat Sets
25 | Winter collection
26 |
27 | ========== COLLECTION ==========
28 | .collection__title
29 | Men
30 | Collection
31 |
32 | Women
33 | Collection
34 |
35 | .button__link
36 | Explore Clothes
37 |
38 | ========== PRODUCTS ==========
39 | .section__title
40 | Best Products
41 |
42 | .products__title | .products__price
43 | Gotland black Jacket
44 | $124.99
45 |
46 | Black Sports Shorts
47 | $34.99
48 |
49 | Knox Quilted Jacket
50 | $97.99
51 |
52 | Blue Sport Pants
53 | $69.99
54 |
55 | ========== BRANDS ==========
56 | .section__title
57 | Brands We Sell
58 |
59 | ========== FOOTER ==========
60 | .footer__description
61 | Committed to bringing you the
62 | best clothing from popular
63 | brands.
64 |
65 | .footer__title | .footer__link
66 | Company
67 | Shop
68 | Category
69 | Contact info
70 |
71 | Blog
72 | Events
73 | Popular news
74 | Recent news
75 |
76 | Office
77 |
78 | .footer__information
79 | Monday - Saturday
80 | 9AM - 10PM
81 |
82 | Contact us
83 | .footer__social-link
84 |
85 | https://www.facebook.com/
86 |
87 |
88 | https://www.instagram.com/
89 |
90 |
91 | https://api.whatsapp.com/send?phone=51123456789&text=Hello, more information!
92 |
93 | .footer__copy
94 | © Bedimcode. All rigths reserved
95 |
96 | .footer__privacy
97 | Terms & Conditions
98 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
1&&u.push(e.virtualSize-r)}if(0===u.length&&(u=[0]),0!==a.spaceBetween){const s=e.isHorizontal()&&n?"marginLeft":t("marginRight");c.filter(((e,t)=>!a.cssMode||t!==c.length-1)).css({[s]:`${x}px`})}if(a.centeredSlides&&a.centeredSlidesBounds){let e=0;m.forEach((t=>{e+=t+(a.spaceBetween?a.spaceBetween:0)})),e-=a.spaceBetween;const t=e-r;u=u.map((e=>e<0?-f:e>t?t+g:e))}if(a.centerInsufficientSlides){let e=0;if(m.forEach((t=>{e+=t+(a.spaceBetween?a.spaceBetween:0)})),e-=a.spaceBetween,e {r.wrapperEl.style.scrollSnapType="",r._swiperImmediateVirtual=!1}))}else{if(!r.support.smoothScroll)return w({swiper:r,targetPosition:s,side:e?"left":"top"}),!0;h.scrollTo({[e?"left":"top"]:s,behavior:"smooth"})}return!0}return r.setTransition(t),r.setTranslate(v),r.updateActiveIndex(n),r.updateSlidesClasses(),r.emit("beforeTransitionStart",t,a),r.transitionStart(s,b),0===t?r.transitionEnd(s,b):r.animating||(r.animating=!0,r.onSlideToWrapperTransitionEnd||(r.onSlideToWrapperTransitionEnd=function(e){r&&!r.destroyed&&e.target===this&&(r.$wrapperEl[0].removeEventListener("transitionend",r.onSlideToWrapperTransitionEnd),r.$wrapperEl[0].removeEventListener("webkitTransitionEnd",r.onSlideToWrapperTransitionEnd),r.onSlideToWrapperTransitionEnd=null,delete r.onSlideToWrapperTransitionEnd,r.transitionEnd(s,b))}),r.$wrapperEl[0].addEventListener("transitionend",r.onSlideToWrapperTransitionEnd),r.$wrapperEl[0].addEventListener("webkitTransitionEnd",r.onSlideToWrapperTransitionEnd)),!0},slideToLoop:function(e,t,s,a){if(void 0===e&&(e=0),void 0===t&&(t=this.params.speed),void 0===s&&(s=!0),"string"==typeof e){const t=parseInt(e,10);if(!isFinite(t))throw new Error(`The passed-in 'index' (string) couldn't be converted to 'number'. [${e}] given.`);e=t}const i=this;let r=e;return i.params.loop&&(r+=i.loopedSlides),i.slideTo(r,t,s,a)},slideNext:function(e,t,s){void 0===e&&(e=this.params.speed),void 0===t&&(t=!0);const a=this,{animating:i,enabled:r,params:n}=a;if(!r)return a;let l=n.slidesPerGroup;"auto"===n.slidesPerView&&1===n.slidesPerGroup&&n.slidesPerGroupAuto&&(l=Math.max(a.slidesPerViewDynamic("current",!0),1));const o=a.activeIndex0&&o(u(t));const a=e.children(`.${s.slidePrevClass}`);a.length>0&&o(u(a))}}function p(){const e=r();if(!t||t.destroyed)return;const s=t.params.lazy.scrollingElement?d(t.params.lazy.scrollingElement):d(e),a=s[0]===e,i=a?e.innerWidth:s[0].offsetWidth,l=a?e.innerHeight:s[0].offsetHeight,o=t.$el.offset(),{rtlTranslate:u}=t;let h=!1;u&&(o.left-=t.$el[0].scrollLeft);const m=[[o.left,o.top],[o.left+t.width,o.top],[o.left,o.top+t.height],[o.left+t.width,o.top+t.height]];for(let e=0;e