├── fonts ├── bootstrap-icons.woff └── bootstrap-icons.woff2 ├── images ├── people │ ├── portrait-british-woman.jpeg │ ├── beautiful-woman-face-portrait-brown-background.jpeg │ ├── woman-wearing-mask-face-closeup-covid-19-green-background.jpeg │ └── senior-man-wearing-white-face-mask-covid-19-campaign-with-design-space.jpeg ├── pim-chu-z6NZ76_UTDI-unsplash.jpeg ├── cody-lannom-G95AReIh_Ko-unsplash.jpeg ├── product │ ├── anis-m-WnVrO-DvxcE-unsplash.jpeg │ ├── jordan-nix-CkCUvwMXAac-unsplash.jpeg │ ├── nature-zen-3Dn1BZZv3m8-unsplash.jpeg │ ├── team-fredi-8HRKoay8VJE-unsplash.jpeg │ ├── evan-mcdougall-qnh1odlqOmk-unsplash.jpeg │ └── quokkabottles-kFc1_G1GvKA-unsplash.jpeg ├── header │ ├── businesspeople-meeting-office-working.jpg │ └── positive-european-woman-has-break-after-work.jpg ├── servicescape-incorporated-_48JSlVLX6g-unsplash.jpeg ├── slideshow │ ├── medium-shot-business-women-high-five.jpeg │ ├── team-meeting-renewable-energy-project.jpeg │ └── two-business-partners-working-together-office-computer.jpeg └── retail-shop-owner-mask-social-distancing-shopping.jpg ├── ABOUT THIS TEMPLATE.txt ├── js ├── custom.js ├── jQuery.headroom.js ├── Headroom.js └── slick.min.js ├── .github └── workflows │ ├── azure-static-web-apps-nice-stone-02cd4a710.yml │ └── azure-static-web-apps-lemon-coast-0c5da6310.yml ├── css ├── slick.css └── tooplate-little-fashion.css ├── sign-in.html ├── sign-up.html ├── contact.html ├── faq.html ├── products.html ├── product-detail.html ├── about.html └── index.html /fonts/bootstrap-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/fonts/bootstrap-icons.woff -------------------------------------------------------------------------------- /fonts/bootstrap-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/fonts/bootstrap-icons.woff2 -------------------------------------------------------------------------------- /images/people/portrait-british-woman.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/images/people/portrait-british-woman.jpeg -------------------------------------------------------------------------------- /images/pim-chu-z6NZ76_UTDI-unsplash.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/images/pim-chu-z6NZ76_UTDI-unsplash.jpeg -------------------------------------------------------------------------------- /images/cody-lannom-G95AReIh_Ko-unsplash.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/images/cody-lannom-G95AReIh_Ko-unsplash.jpeg -------------------------------------------------------------------------------- /images/product/anis-m-WnVrO-DvxcE-unsplash.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/images/product/anis-m-WnVrO-DvxcE-unsplash.jpeg -------------------------------------------------------------------------------- /images/product/jordan-nix-CkCUvwMXAac-unsplash.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/images/product/jordan-nix-CkCUvwMXAac-unsplash.jpeg -------------------------------------------------------------------------------- /images/product/nature-zen-3Dn1BZZv3m8-unsplash.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/images/product/nature-zen-3Dn1BZZv3m8-unsplash.jpeg -------------------------------------------------------------------------------- /images/product/team-fredi-8HRKoay8VJE-unsplash.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/images/product/team-fredi-8HRKoay8VJE-unsplash.jpeg -------------------------------------------------------------------------------- /images/header/businesspeople-meeting-office-working.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/images/header/businesspeople-meeting-office-working.jpg -------------------------------------------------------------------------------- /images/product/evan-mcdougall-qnh1odlqOmk-unsplash.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/images/product/evan-mcdougall-qnh1odlqOmk-unsplash.jpeg -------------------------------------------------------------------------------- /images/product/quokkabottles-kFc1_G1GvKA-unsplash.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/images/product/quokkabottles-kFc1_G1GvKA-unsplash.jpeg -------------------------------------------------------------------------------- /images/servicescape-incorporated-_48JSlVLX6g-unsplash.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/images/servicescape-incorporated-_48JSlVLX6g-unsplash.jpeg -------------------------------------------------------------------------------- /images/slideshow/medium-shot-business-women-high-five.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/images/slideshow/medium-shot-business-women-high-five.jpeg -------------------------------------------------------------------------------- /images/retail-shop-owner-mask-social-distancing-shopping.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/images/retail-shop-owner-mask-social-distancing-shopping.jpg -------------------------------------------------------------------------------- /images/slideshow/team-meeting-renewable-energy-project.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/images/slideshow/team-meeting-renewable-energy-project.jpeg -------------------------------------------------------------------------------- /images/header/positive-european-woman-has-break-after-work.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/images/header/positive-european-woman-has-break-after-work.jpg -------------------------------------------------------------------------------- /images/people/beautiful-woman-face-portrait-brown-background.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/images/people/beautiful-woman-face-portrait-brown-background.jpeg -------------------------------------------------------------------------------- /images/people/woman-wearing-mask-face-closeup-covid-19-green-background.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/images/people/woman-wearing-mask-face-closeup-covid-19-green-background.jpeg -------------------------------------------------------------------------------- /images/slideshow/two-business-partners-working-together-office-computer.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/images/slideshow/two-business-partners-working-together-office-computer.jpeg -------------------------------------------------------------------------------- /images/people/senior-man-wearing-white-face-mask-covid-19-campaign-with-design-space.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NandhanaRameshkumar/git/master/images/people/senior-man-wearing-white-face-mask-covid-19-campaign-with-design-space.jpeg -------------------------------------------------------------------------------- /ABOUT THIS TEMPLATE.txt: -------------------------------------------------------------------------------- 1 | Tooplate.com HTML Templates 2 | 3 | You can edit and use this template for any purpose (personal or commercial) of your website. You can modify text and images to suit your own website or client websites. 4 | 5 | You are NOT allowed to re-distribute our template ZIP file for any reason on your template sites or template collection sites. 6 | 7 | You can feature our templates on your blog posts that collect good templates. You can put a screenshot and a link back to our template page. That is helpful for us. 8 | 9 | THANK YOU -------------------------------------------------------------------------------- /js/custom.js: -------------------------------------------------------------------------------- 1 | 2 | (function ($) { 3 | 4 | "use strict"; 5 | 6 | // PRE LOADER 7 | $(window).load(function(){ 8 | $('.preloader').delay(500).slideUp('slow'); // set duration in brackets 9 | }); 10 | 11 | // NAVBAR 12 | $(".navbar").headroom(); 13 | 14 | $('.navbar-collapse a').click(function(){ 15 | $(".navbar-collapse").collapse('hide'); 16 | }); 17 | 18 | $('.slick-slideshow').slick({ 19 | autoplay: true, 20 | infinite: true, 21 | arrows: false, 22 | fade: true, 23 | dots: true, 24 | }); 25 | 26 | $('.slick-testimonial').slick({ 27 | arrows: false, 28 | dots: true, 29 | }); 30 | 31 | })(window.jQuery); 32 | -------------------------------------------------------------------------------- /js/jQuery.headroom.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | 3 | if(!$) { 4 | return; 5 | } 6 | 7 | //////////// 8 | // Plugin // 9 | //////////// 10 | 11 | $.fn.headroom = function(option) { 12 | return this.each(function() { 13 | var $this = $(this), 14 | data = $this.data('headroom'), 15 | options = typeof option === 'object' && option; 16 | 17 | options = $.extend(true, {}, Headroom.options, options); 18 | 19 | if (!data) { 20 | data = new Headroom(this, options); 21 | data.init(); 22 | $this.data('headroom', data); 23 | } 24 | if (typeof option === 'string') { 25 | data[option](); 26 | 27 | if(option === 'destroy'){ 28 | $this.removeData('headroom'); 29 | } 30 | } 31 | }); 32 | }; 33 | 34 | ////////////// 35 | // Data API // 36 | ////////////// 37 | 38 | $('[data-headroom]').each(function() { 39 | var $this = $(this); 40 | $this.headroom($this.data()); 41 | }); 42 | 43 | }(window.Zepto || window.jQuery)); -------------------------------------------------------------------------------- /.github/workflows/azure-static-web-apps-nice-stone-02cd4a710.yml: -------------------------------------------------------------------------------- 1 | name: Azure Static Web Apps CI/CD 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | pull_request: 8 | types: [opened, synchronize, reopened, closed] 9 | branches: 10 | - master 11 | 12 | jobs: 13 | build_and_deploy_job: 14 | if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') 15 | runs-on: ubuntu-latest 16 | name: Build and Deploy Job 17 | steps: 18 | - uses: actions/checkout@v3 19 | with: 20 | submodules: true 21 | lfs: false 22 | - name: Build And Deploy 23 | id: builddeploy 24 | uses: Azure/static-web-apps-deploy@v1 25 | with: 26 | azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_STONE_02CD4A710 }} 27 | repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) 28 | action: "upload" 29 | ###### Repository/Build Configurations - These values can be configured to match your app requirements. ###### 30 | # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig 31 | app_location: "/" # App source code path 32 | api_location: "" # Api source code path - optional 33 | output_location: "." # Built app content directory - optional 34 | ###### End of Repository/Build Configurations ###### 35 | 36 | close_pull_request_job: 37 | if: github.event_name == 'pull_request' && github.event.action == 'closed' 38 | runs-on: ubuntu-latest 39 | name: Close Pull Request Job 40 | steps: 41 | - name: Close Pull Request 42 | id: closepullrequest 43 | uses: Azure/static-web-apps-deploy@v1 44 | with: 45 | azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_STONE_02CD4A710 }} 46 | action: "close" 47 | -------------------------------------------------------------------------------- /.github/workflows/azure-static-web-apps-lemon-coast-0c5da6310.yml: -------------------------------------------------------------------------------- 1 | name: Azure Static Web Apps CI/CD 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | pull_request: 8 | types: [opened, synchronize, reopened, closed] 9 | branches: 10 | - master 11 | 12 | jobs: 13 | build_and_deploy_job: 14 | if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') 15 | runs-on: ubuntu-latest 16 | name: Build and Deploy Job 17 | steps: 18 | - uses: actions/checkout@v3 19 | with: 20 | submodules: true 21 | lfs: false 22 | - name: Build And Deploy 23 | id: builddeploy 24 | uses: Azure/static-web-apps-deploy@v1 25 | with: 26 | azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_LEMON_COAST_0C5DA6310 }} 27 | repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) 28 | action: "upload" 29 | ###### Repository/Build Configurations - These values can be configured to match your app requirements. ###### 30 | # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig 31 | app_location: "/" # App source code path 32 | api_location: "" # Api source code path - optional 33 | output_location: "." # Built app content directory - optional 34 | ###### End of Repository/Build Configurations ###### 35 | 36 | close_pull_request_job: 37 | if: github.event_name == 'pull_request' && github.event.action == 'closed' 38 | runs-on: ubuntu-latest 39 | name: Close Pull Request Job 40 | steps: 41 | - name: Close Pull Request 42 | id: closepullrequest 43 | uses: Azure/static-web-apps-deploy@v1 44 | with: 45 | azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_LEMON_COAST_0C5DA6310 }} 46 | action: "close" 47 | -------------------------------------------------------------------------------- /css/slick.css: -------------------------------------------------------------------------------- 1 | /* Slider */ 2 | .slick-slider 3 | { 4 | position: relative; 5 | 6 | display: block; 7 | box-sizing: border-box; 8 | 9 | -webkit-user-select: none; 10 | -moz-user-select: none; 11 | -ms-user-select: none; 12 | user-select: none; 13 | 14 | -webkit-touch-callout: none; 15 | -khtml-user-select: none; 16 | -ms-touch-action: pan-y; 17 | touch-action: pan-y; 18 | -webkit-tap-highlight-color: transparent; 19 | } 20 | 21 | .slick-list 22 | { 23 | position: relative; 24 | 25 | display: block; 26 | overflow: hidden; 27 | 28 | margin: 0; 29 | padding: 0; 30 | } 31 | .slick-list:focus 32 | { 33 | outline: none; 34 | } 35 | .slick-list.dragging 36 | { 37 | cursor: pointer; 38 | cursor: hand; 39 | } 40 | 41 | .slick-slider .slick-track, 42 | .slick-slider .slick-list 43 | { 44 | -webkit-transform: translate3d(0, 0, 0); 45 | -moz-transform: translate3d(0, 0, 0); 46 | -ms-transform: translate3d(0, 0, 0); 47 | -o-transform: translate3d(0, 0, 0); 48 | transform: translate3d(0, 0, 0); 49 | } 50 | 51 | .slick-track 52 | { 53 | position: relative; 54 | top: 0; 55 | left: 0; 56 | 57 | display: block; 58 | margin-left: auto; 59 | margin-right: auto; 60 | } 61 | .slick-track:before, 62 | .slick-track:after 63 | { 64 | display: table; 65 | 66 | content: ''; 67 | } 68 | .slick-track:after 69 | { 70 | clear: both; 71 | } 72 | .slick-loading .slick-track 73 | { 74 | visibility: hidden; 75 | } 76 | 77 | .slick-slide 78 | { 79 | display: none; 80 | float: left; 81 | 82 | height: 100%; 83 | min-height: 1px; 84 | } 85 | [dir='rtl'] .slick-slide 86 | { 87 | float: right; 88 | } 89 | .slick-slide img 90 | { 91 | display: block; 92 | } 93 | .slick-slide.slick-loading img 94 | { 95 | display: none; 96 | } 97 | .slick-slide.dragging img 98 | { 99 | pointer-events: none; 100 | } 101 | .slick-initialized .slick-slide 102 | { 103 | display: block; 104 | } 105 | .slick-loading .slick-slide 106 | { 107 | visibility: hidden; 108 | } 109 | .slick-vertical .slick-slide 110 | { 111 | display: block; 112 | 113 | height: auto; 114 | 115 | border: 1px solid transparent; 116 | } 117 | .slick-arrow.slick-hidden { 118 | display: none; 119 | } 120 | -------------------------------------------------------------------------------- /js/Headroom.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * headroom.js v0.9.4 - Give your page some headroom. Hide your header until you need it 3 | * Copyright (c) 2017 Nick Williams - http://wicky.nillia.ms/headroom.js 4 | * License: MIT 5 | */ 6 | 7 | !function(a,b){"use strict";"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():a.Headroom=b()}(this,function(){"use strict";function a(a){this.callback=a,this.ticking=!1}function b(a){return a&&"undefined"!=typeof window&&(a===window||a.nodeType)}function c(a){if(arguments.length<=0)throw new Error("Missing arguments in extend function");var d,e,f=a||{};for(e=1;ethis.getScrollerHeight();return b||c},toleranceExceeded:function(a,b){return Math.abs(a-this.lastKnownScrollY)>=this.tolerance[b]},shouldUnpin:function(a,b){var c=a>this.lastKnownScrollY,d=a>=this.offset;return c&&d&&b},shouldPin:function(a,b){var c=athis.lastKnownScrollY?"down":"up",c=this.toleranceExceeded(a,b);this.isOutOfBounds(a)||(a<=this.offset?this.top():this.notTop(),a+this.getViewportHeight()>=this.getScrollerHeight()?this.bottom():this.notBottom(),this.shouldUnpin(a,c)?this.unpin():this.shouldPin(a,c)&&this.pin(),this.lastKnownScrollY=a)}},e.options={tolerance:{up:0,down:0},offset:0,scroller:window,classes:{pinned:"headroom--pinned",unpinned:"headroom--unpinned",top:"headroom--top",notTop:"headroom--not-top",bottom:"headroom--bottom",notBottom:"headroom--not-bottom",initial:"headroom"}},e.cutsTheMustard="undefined"!=typeof f&&f.rAF&&f.bind&&f.classList,e}); -------------------------------------------------------------------------------- /sign-in.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Tooplate's Little Fashion - Sign In Page 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 33 | 34 | 35 | 36 | 37 |
38 | 41 |
42 | 43 |
44 | 45 | 84 | 85 |
86 | 87 |
88 |
89 |
90 | 91 |
92 |

Little Fashion

93 |

Copyright © 2022 Little Fashion

94 |
95 |

Designed by Tooplate

96 |
97 | 98 |
99 |
Sitemap
100 | 101 | 112 |
113 | 114 |
115 |
Social
116 | 117 | 127 |
128 | 129 |
130 |
131 |
132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | -------------------------------------------------------------------------------- /sign-up.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Tooplate's Little Fashion - Sign Up Page 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 33 | 34 | 35 | 36 | 37 |
38 | 41 |
42 | 43 |
44 | 45 | 109 | 110 |
111 | 112 |
113 |
114 |
115 | 116 |
117 |

Little Fashion

118 |

Copyright © 2022 Little Fashion

119 |
120 |

Designed by Tooplate

121 |
122 | 123 |
124 |
Sitemap
125 | 126 | 137 |
138 | 139 |
140 |
Social
141 | 142 | 152 |
153 | 154 |
155 |
156 |
157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Tooplate's Little Fashion - Contact Page 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 33 | 34 | 35 | 36 | 37 |
38 | 41 |
42 | 43 |
44 | 45 | 92 | 93 |
94 |
95 |
96 | 97 |
98 |

99 | Say hello to us 100 | love to hear you 101 |

102 |
103 |
104 |
105 | 106 | 107 |
108 | 109 |
110 |
111 |
112 | 113 |
114 |

Let's begin

115 | 116 |
117 | 118 |
119 | 120 | 121 | 122 |
123 | 124 |
125 | 126 | 127 | 128 |
129 | 130 |
131 | 132 | 133 | 134 |
135 | 136 |
137 | 138 | 139 | 140 |
141 | 142 |
143 | 144 |
145 |
146 |
147 | 148 |
149 |
150 |
151 |
New Business
152 | 153 | 154 | hello@company.com 155 | 156 | 157 |
158 | 159 |
160 |
Main Studio
161 | 162 | 163 | studio@company.com 164 | 165 | 166 |
167 | 168 |
169 |
Our Office
170 | 171 |

Akershusstranda 20, 0150 Oslo, Norway

172 |
173 | 174 |
175 |
Our Socials
176 | 177 | 187 |
188 |
189 |
190 | 191 |
192 |
193 |
194 |
195 | 196 |
197 |
198 |
199 | 200 |
201 |

Little Fashion

202 |

Copyright © 2022 Little Fashion

203 |
204 |

Designed by Tooplate

205 |
206 | 207 |
208 |
Sitemap
209 | 210 | 221 |
222 | 223 |
224 |
Social
225 | 226 | 236 |
237 | 238 |
239 |
240 |
241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | -------------------------------------------------------------------------------- /faq.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Tooplate's Little Fashion - FAQs Page 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 33 | 34 | 35 | 36 | 37 |
38 | 41 |
42 | 43 |
44 | 45 | 92 | 93 |
94 |
95 |
96 | 97 |
98 |

99 | Your favorite questions 100 | and our answers to them 101 |

102 |
103 |
104 |
105 |
106 | 107 |
108 |
109 |
110 | 111 |
112 |

General Info.

113 | 114 |
115 |
116 |

117 | 120 |

121 | 122 |
123 | 124 |
125 |

Little Fashion is free Bootstrap 5 website template for everyone. There are 8 HTML pages included in this template and you can expand more pages as you need.

126 | 127 |

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

128 |
129 |
130 |
131 | 132 |
133 |

134 | 137 |

138 | 139 |
140 | 141 |
142 |

Tooplate is a great website to download free HTML website templates for your business or personal use. Tooplate website has been online for almost 8 years now. Thank you for visiting our website.

143 |
144 |
145 |
146 | 147 |
148 |

149 | 152 |

153 | 154 |
155 | 156 |
157 |

You can support our Tooplate website by sharing it to your friends or colleagues on the web or social media.

158 |
159 |
160 |
161 | 162 |
163 | 164 |

About our products

165 | 166 |
167 |
168 |

169 | 172 |

173 | 174 |
175 | 176 |
177 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

178 | 179 |

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

180 |
181 |
182 |
183 | 184 |
185 |

186 | 189 |

190 | 191 |
192 | 193 |
194 |

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

195 |
196 |
197 |
198 | 199 |
200 | 201 |
202 | 203 |
204 |
205 |
206 | 207 |
208 | 209 |
210 |
211 |
212 | 213 |
214 |

Little Fashion

215 |

Copyright © 2022 Little Fashion

216 |
217 |

Designed by Tooplate

218 |
219 | 220 |
221 |
Sitemap
222 | 223 | 234 |
235 | 236 |
237 |
Social
238 | 239 | 249 |
250 | 251 |
252 |
253 |
254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | -------------------------------------------------------------------------------- /products.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Tooplate's Little Fashion - Products 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 32 | 33 | 34 | 35 | 36 |
37 | 40 |
41 | 42 |
43 | 44 | 91 | 92 |
93 |
94 |
95 | 96 |
97 |

98 | Choose your 99 | favorite stuffs 100 |

101 |
102 |
103 |
104 |
105 | 106 |
107 |
108 |
109 | 110 |
111 |

New Arrivals

112 |
113 | 114 |
115 |
116 | 117 | 118 | 119 | 120 |
121 | New Arrival 122 | 123 | 124 |
125 | 126 |
127 |
128 |
129 | Tree pot 130 |
131 | 132 |

Original package design from house

133 |
134 | 135 | $25 136 |
137 |
138 |
139 | 140 |
141 |
142 | 143 | 144 | 145 | 146 |
147 | Discounted Price 148 | 149 | 150 |
151 | 152 |
153 |
154 |
155 | Fashion set 156 |
157 | 158 |

Costume package

159 |
160 | 161 | $35 162 |
163 |
164 |
165 | 166 |
167 |
168 | 169 | 170 | 171 | 172 |
173 | 174 |
175 | 176 |
177 |
178 |
179 | Juice Drinks 180 |
181 | 182 |

Nature made another world

183 |
184 | 185 | $45 186 |
187 |
188 |
189 | 190 |
191 |

Popular

192 |
193 | 194 |
195 |
196 | 197 | 198 | 199 | 200 |
201 | Trending 202 | 203 | 204 |
205 | 206 |
207 |
208 |
209 | Package 210 |
211 | 212 |

Original package design from house

213 |
214 | 215 | $50 216 |
217 |
218 |
219 | 220 |
221 |
222 | 223 | 224 | 225 | 226 |
227 | 228 |
229 | 230 |
231 |
232 |
233 | Bottle 234 |
235 | 236 |

Package design

237 |
238 | 239 | $100 240 |
241 |
242 |
243 | 244 |
245 |
246 | 247 | 248 | 249 | 250 |
251 | 252 |
253 | 254 |
255 |
256 |
257 | Medicine 258 |
259 | 260 |

Original design from house

261 |
262 | 263 | $200 264 |
265 |
266 |
267 | 268 |
269 |
270 |
271 | 272 |
273 | 274 |
275 |
276 |
277 | 278 |
279 |

Little Fashion

280 |

Copyright © 2022 Little Fashion

281 |
282 |

Designed by Tooplate

283 |
284 | 285 |
286 |
Sitemap
287 | 288 | 299 |
300 | 301 |
302 |
Social
303 | 304 | 314 |
315 | 316 |
317 |
318 |
319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | -------------------------------------------------------------------------------- /product-detail.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Tooplate's Little Fashion - Product Detail 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 32 | 33 | 34 | 35 | 36 |
37 | 40 |
41 | 42 |
43 | 44 | 91 | 92 |
93 |
94 |
95 | 96 |
97 |

98 | We provide you 99 | Fashionable Stuffs 100 |

101 |
102 |
103 |
104 |
105 | 106 |
107 |
108 |
109 | 110 |
111 |
112 | 113 |
114 |
115 | 116 |
117 |
118 |
119 |

Tree pot

120 | 121 |

Original package design from house

122 |
123 | 124 | $25 125 |
126 | 127 |
128 | 129 | Description 130 | 131 |

Over three years in business, We’ve had the chance to work on a variety of projects, with companies

132 |
133 | 134 |
135 |
136 | 137 | 145 |
146 | 147 |
148 | 149 |
150 | 151 |

152 | Details 153 | 154 | Delivery and Payment 155 |

156 |
157 | 158 |
159 | 160 |
161 |
162 |
163 | 164 |
165 |
166 |
167 | 168 |
169 |

You might also like

170 |
171 | 172 |
173 |
174 | 175 | 176 | 177 | 178 |
179 | New arrival 180 | 181 | 182 |
183 | 184 |
185 |
186 |
187 | Tree pot 188 |
189 | 190 |

Original package design from house

191 |
192 | 193 | $25 194 |
195 |
196 |
197 | 198 |
199 |
200 | 201 | 202 | 203 | 204 |
205 | Low Price 206 | 207 | 208 |
209 | 210 |
211 |
212 |
213 | Fashion set 214 |
215 | 216 |

Costume package

217 |
218 | 219 | $35 220 |
221 |
222 |
223 | 224 |
225 |
226 | 227 | 228 | 229 | 230 |
231 | 232 |
233 | 234 |
235 |
236 |
237 | Juice Drinks 238 |
239 | 240 |

Nature made another world

241 |
242 | 243 | $45 244 |
245 |
246 |
247 | 248 |
249 |
250 |
251 | 252 |
253 | 254 |
255 |
256 |
257 | 258 |
259 |

Little Fashion

260 |

Copyright © 2022 Little Fashion

261 |
262 |

Designed by Tooplate

263 |
264 | 265 |
266 |
Sitemap
267 | 268 | 279 |
280 | 281 |
282 |
Social
283 | 284 | 294 |
295 | 296 |
297 |
298 |
299 | 300 | 301 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Tooplate's Little Fashion - About Page 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 33 | 34 | 35 | 36 | 37 |
38 | 41 |
42 | 43 |
44 | 45 | 92 | 93 |
94 |
95 |
96 | 97 |
98 |

99 | Company 100 | Fashion 101 |

102 |
103 |
104 |
105 | 106 | 107 |
108 | 109 |
110 |
111 |
112 | 113 |
114 |

Meet our team

115 |
116 | 117 |
118 |
119 | 120 | 121 |
122 |
Don
123 | Product, VP 124 | 125 | 126 | 129 | 130 |
131 |
132 |
133 | 134 |
135 |
136 | 137 | 138 |
139 |
Kelly
140 | Marketing 141 | 142 | 143 | 146 |
147 |
148 |
149 | 150 |
151 |
152 | 153 | 154 |
155 |
Marie
156 | Founder 157 | 158 | 159 | 162 |
163 |
164 |
165 | 166 |
167 |
168 |
169 | 170 |
171 |
172 |
173 | 174 |
175 |

Customer love,
Little Fashion

176 | 177 |
178 |
179 |

Over three years in business, We’ve had the chance to work on a variety of projects, with companies Lorem ipsum dolor sit amet

180 | 181 |
182 | 183 | 184 | George, Digital Art Fashion 185 |
186 |
187 | 188 |
189 |

Over three years in business, We’ve had the chance to work on a variety of projects, with companies Lorem ipsum dolor sit amet

190 | 191 |
192 | 193 | 194 | Sandar, Zoom Fashion Idea 195 |
196 |
197 | 198 |
199 |

Over three years in business, We’ve had the chance to work on a variety of projects, with companies Lorem ipsum dolor sit amet

200 | 201 |
202 | 203 | 204 | Marie, Art Fashion Design 205 |
206 |
207 | 208 |
209 |

Over three years in business, We’ve had the chance to work on a variety of projects, with companies Lorem ipsum dolor sit amet

210 | 211 |
212 | 213 | 214 | Catherine, Dress Fashion 215 |
216 |
217 |
218 |
219 | 220 |
221 |
222 |
223 | 224 |
225 | 226 |
227 |
228 |
229 | 230 |
231 |

Little Fashion

232 |

Copyright © 2022 Little Fashion

233 |
234 |

Designed by Tooplate

235 |
236 | 237 |
238 |
Sitemap
239 | 240 | 251 |
252 | 253 |
254 |
Social
255 | 256 | 266 |
267 | 268 |
269 |
270 |
271 | 272 | 273 | 311 | 312 | 313 | 349 | 350 | 351 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Tooplate's Little Fashion 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 32 | 33 | 34 | 35 | 36 |
37 | 40 |
41 | 42 |
43 | 44 | 91 | 92 |
93 |
94 | 95 | 96 |
97 |
98 |
99 |
100 |

Cool Fashion

101 | 102 |

Little fashion template comes with total 8 HTML pages provided by Tooplate website.

103 | 104 | Learn more about us 105 |
106 |
107 |
108 |
109 |
110 | 111 |
112 | 113 | 114 |
115 |
116 |
117 |
118 |

New Design

119 | 120 |

Please share this Little Fashion template to your friends. Thank you for supporting us.

121 | 122 | Explore products 123 |
124 |
125 |
126 |
127 |
128 | 129 |
130 | 131 | 132 |
133 |
134 |
135 |
136 |

Talk to us

137 | 138 |

Tooplate is one of the best HTML CSS template websites for everyone.

139 | 140 | Work with us 141 |
142 |
143 |
144 |
145 |
146 | 147 |
148 | 149 |
150 |
151 |
152 | 153 |
154 |

Get started with Little Fashion

155 |
156 | 157 |
158 |
    159 | 162 | 163 | 166 | 167 | 170 |
171 |
172 | 173 |
174 |
175 |
176 | 177 |
178 |
179 | 180 |
181 | 182 |
183 |
184 |

Good Design
Ideas for your fashion

185 | 186 |

Little Fashion templates comes with sign in / sign up pages, product listing / product detail, about, FAQs, and contact page.

187 | 188 |

Since this HTML template is based on Boostrap 5 CSS library, you can feel free to add more components as you need.

189 | 190 |
191 | 192 | Learn more about us 193 | 194 | 195 |
196 |
197 |
198 |
199 |
200 | 201 |
202 | 203 |
204 |
205 |
206 | 207 |
208 |
209 | 210 |
211 |
212 |

Life at Studio

213 | 214 |

Over three years in business, We’ve had the chance to work on a variety of projects, with companies

215 | 216 |

Custom work is branding, web design, UI/UX design

217 | 218 |
219 | 220 | Work with us 221 | 222 | 223 |
224 |
225 |
226 |
227 |
228 | 229 |
230 |
231 |
232 | 233 |
234 | 235 |
236 |
237 |

What can help you?

238 | 239 |

Over three years in business, We’ve had the chance on projects

240 | 241 |
242 | 243 | Branding 244 | 90% 245 |
246 |
247 |
248 | 249 | Design & Stragety 250 | 70% 251 |
252 |
253 |
254 | 255 | Online Platform 256 | 80% 257 |
258 |
259 |
260 | 261 |
262 | 263 |
264 | 265 | Explore products 266 | 267 | 268 |
269 |
270 |
271 |
272 |
273 | 274 |
275 |
276 | 277 |
278 |
279 |
280 | 281 |
282 |
283 |
284 | 285 |
286 | 287 |
288 | 289 |
290 |
291 | 292 |

Retail shop owners

293 | 294 |

Credits go to Unsplash and FreePik websites for images used in this Little Fashion by Tooplate.

295 | 296 | 297 | Explore Products 298 | 299 | 300 |
301 |
302 | 303 |
304 |
305 |
306 | 307 |
308 |
309 |
310 | 311 |
312 |

Featured Products

313 |
314 | 315 |
316 |
317 | 318 | 319 | 320 | 321 |
322 | New Arrival 323 | 324 | 325 |
326 | 327 |
328 |
329 |
330 | Tree pot 331 |
332 | 333 |

Original package design from house

334 |
335 | 336 | $25 337 |
338 |
339 |
340 | 341 |
342 |
343 | 344 | 345 | 346 | 347 |
348 | Low Price 349 | 350 | 351 |
352 | 353 |
354 |
355 |
356 | Fashion Set 357 |
358 | 359 |

Costume Package

360 |
361 | 362 | $35 363 |
364 |
365 |
366 | 367 |
368 |
369 | 370 | 371 | 372 | 373 |
374 | 375 |
376 | 377 |
378 |
379 |
380 | Juice Drinks 381 |
382 | 383 |

Nature made another world

384 |
385 | 386 | $45 387 |
388 |
389 |
390 | 391 |
392 | View All Products 393 |
394 | 395 |
396 |
397 |
398 | 399 |
400 | 401 |
402 |
403 |
404 | 405 |
406 |

Little Fashion

407 |

Copyright © 2022 Little Fashion

408 |
409 |

Designed by Tooplate

410 |
411 | 412 |
413 |
Sitemap
414 | 415 | 426 |
427 | 428 |
429 |
Social
430 | 431 | 441 |
442 | 443 |
444 |
445 |
446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | -------------------------------------------------------------------------------- /css/tooplate-little-fashion.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Tooplate 2127 Little Fashion 4 | 5 | https://www.tooplate.com/view/2127-little-fashion 6 | 7 | */ 8 | 9 | 10 | /*--------------------------------------- 11 | CUSTOM PROPERTIES ( VARIABLES ) 12 | -----------------------------------------*/ 13 | :root { 14 | --white-color: #FFFFFF; 15 | --primary-color: #FF4400; 16 | --section-bg-color: #f0f8ff; 17 | --dark-color: #000000; 18 | --grey-color: #d0d1d1; 19 | --p-color: #717275; 20 | 21 | --body-font-family: 'Inter', sans-serif; 22 | 23 | --h5-font-size: 24px; 24 | --p-font-size: 20px; 25 | --copyright-text-font-size: 16px; 26 | --product-link-font-size: 14px; 27 | --custom-link-font-size: 12px; 28 | 29 | --font-weight-thin: 100; 30 | --font-weight-light: 300; 31 | --font-weight-normal: 400; 32 | --font-weight-bold: 700; 33 | --font-weight-black: 900; 34 | } 35 | 36 | body, 37 | html { 38 | height: 100%; 39 | } 40 | 41 | html { 42 | scroll-behavior: smooth; 43 | } 44 | 45 | @media screen and (prefers-reduced-motion: reduce) { 46 | html { 47 | scroll-behavior: auto; 48 | } 49 | } 50 | 51 | body { 52 | background: var(--white-color); 53 | font-family: var(--body-font-family); 54 | position: relative; 55 | } 56 | 57 | /*--------------------------------------- 58 | TYPOGRAPHY 59 | -----------------------------------------*/ 60 | 61 | h2, 62 | h3, 63 | h4, 64 | h5, 65 | h6 { 66 | color: var(--dark-color); 67 | line-height: inherit; 68 | } 69 | 70 | h1, 71 | h2, 72 | h3, 73 | h4, 74 | h5, 75 | h6 { 76 | font-weight: var(--font-weight-bold); 77 | } 78 | 79 | h1, 80 | h2 { 81 | font-weight: var(--font-weight-black); 82 | } 83 | 84 | h1 { 85 | font-size: 64px; 86 | line-height: normal; 87 | } 88 | 89 | h2 { 90 | font-size: 42px; 91 | } 92 | 93 | h3 { 94 | font-size: 36px; 95 | } 96 | 97 | h4 { 98 | font-size: 32px; 99 | } 100 | 101 | h5 { 102 | font-size: 24px; 103 | } 104 | 105 | h6 { 106 | font-size: 20px; 107 | } 108 | 109 | p { 110 | color: var(--p-color); 111 | font-size: var(--p-font-size); 112 | font-weight: var(--font-weight-light); 113 | } 114 | 115 | a, 116 | button { 117 | touch-action: manipulation; 118 | transition: all 0.3s; 119 | } 120 | 121 | a { 122 | color: var(--p-color); 123 | text-decoration: none; 124 | } 125 | 126 | a:hover { 127 | color: var(--primary-color); 128 | } 129 | 130 | .text-primary { 131 | color: var(--primary-color) !important; 132 | } 133 | 134 | ::selection { 135 | background: var(--primary-color); 136 | color: var(--white-color); 137 | } 138 | 139 | /*--------------------------------------- 140 | CUSTOM LINK 141 | -----------------------------------------*/ 142 | .custom-link { 143 | color: var(--p-color); 144 | font-size: var(--custom-link-font-size); 145 | font-weight: var(--font-weight-bold); 146 | text-transform: uppercase; 147 | position: relative; 148 | } 149 | 150 | .custom-link i { 151 | position: absolute; 152 | opacity: 0; 153 | bottom: 0; 154 | left: 100%; 155 | transition: all 0.3s; 156 | line-height: normal; 157 | } 158 | 159 | .custom-link:hover i { 160 | opacity: 1; 161 | left: 101%; 162 | } 163 | 164 | .lead { 165 | font-size: 1.5rem; 166 | font-weight: var(--font-weight-thin); 167 | } 168 | 169 | b, 170 | strong { 171 | font-weight: var(--font-weight-bold); 172 | } 173 | 174 | /*--------------------------------------- 175 | PRE LOADER 176 | -----------------------------------------*/ 177 | .preloader { 178 | position: fixed; 179 | top: 0; 180 | left: 0; 181 | width: 100%; 182 | height: 100%; 183 | z-index: 99999; 184 | display: flex; 185 | flex-flow: row nowrap; 186 | justify-content: center; 187 | align-items: center; 188 | background: none repeat scroll 0 0 var(--white-color); 189 | } 190 | 191 | .spinner { 192 | border: 1px solid transparent; 193 | border-radius: 5px; 194 | position: relative; 195 | } 196 | 197 | .spinner::before { 198 | content: ''; 199 | box-sizing: border-box; 200 | position: absolute; 201 | top: 50%; 202 | left: 50%; 203 | width: 45px; 204 | height: 45px; 205 | margin-top: -10px; 206 | margin-left: -23px; 207 | border-radius: 50%; 208 | border: 1px solid #959595; 209 | border-top-color: var(--white-color); 210 | animation: spinner .9s linear infinite; 211 | } 212 | 213 | @keyframes spinner { 214 | to {transform: rotate(360deg);} 215 | } 216 | 217 | /*--------------------------------------- 218 | CUSTOM BUTTON & ICON 219 | -----------------------------------------*/ 220 | .custom-btn { 221 | background: var(--dark-color); 222 | border-radius: 50px; 223 | color: var(--white-color); 224 | font-size: var(--copyright-text-font-size); 225 | text-transform: uppercase; 226 | padding: 16.50px 20px; 227 | } 228 | 229 | .social-btn { 230 | background: transparent; 231 | border: 1px solid var(--grey-color); 232 | color: var(--dark-color); 233 | text-transform: none; 234 | } 235 | 236 | .social-btn:hover { 237 | border-color: transparent; 238 | } 239 | 240 | .cart-form-select { 241 | border-radius: 0; 242 | padding-top: 15px; 243 | padding-bottom: 15px; 244 | } 245 | 246 | .cart-btn { 247 | border-radius: 0; 248 | width: 100%; 249 | font-size: var(--product-link-font-size); 250 | } 251 | 252 | .custom-btn:hover, 253 | .slick-slideshow .custom-btn:hover { 254 | background: var(--primary-color); 255 | color: var(--white-color); 256 | } 257 | 258 | .custom-icon { 259 | color: var(--p-color); 260 | font-size: 24px; 261 | } 262 | 263 | .custom-icon { 264 | display: inline-block; 265 | vertical-align: middle; 266 | } 267 | 268 | .bi-bag.custom-icon { 269 | font-size: 17px; 270 | } 271 | 272 | .featured-icon { 273 | color: var(--grey-color); 274 | font-size: 52px; 275 | } 276 | 277 | /*--------------------------------------- 278 | DIV SEPARATOR 279 | -----------------------------------------*/ 280 | .div-separator { 281 | position: relative; 282 | } 283 | 284 | .div-separator::before { 285 | content: ""; 286 | height: 1px; 287 | background: var(--grey-color); 288 | display: block; 289 | width: 100%; 290 | } 291 | 292 | .div-separator span { 293 | position: absolute; 294 | top: 50%; 295 | margin-left: -22.5px; 296 | left: 50%; 297 | text-align: center; 298 | background: var(--white-color); 299 | margin-top: -11px; 300 | color: var(--dark-color); 301 | font-weight: var(--font-weight-bold); 302 | font-size: 14px; 303 | width: 35px; 304 | text-transform: uppercase; 305 | } 306 | 307 | /*--------------------------------------- 308 | FULL IMAGE 309 | -----------------------------------------*/ 310 | .full-image-img { 311 | display: block; 312 | position: absolute; 313 | z-index: -1; 314 | right: 0; 315 | width: 100%; 316 | bottom: -120px; 317 | min-width: 650px; 318 | } 319 | 320 | @media (min-width: 1600px) { 321 | .full-image-img { 322 | bottom: -200px; 323 | } 324 | } 325 | 326 | /*--------------------------------------- 327 | NAVIGATION 328 | -----------------------------------------*/ 329 | .navbar { 330 | background: var(--white-color); 331 | position: fixed; 332 | top: 0; 333 | right: 0; 334 | left: 0; 335 | padding: 25px 0; 336 | z-index: 2; 337 | will-change: transform; 338 | transition: transform 300ms linear; 339 | } 340 | 341 | .navbar span, h2 span, h4 span { 342 | color: var(--primary-color); 343 | } 344 | 345 | .navbar.headroom--not-top { 346 | padding: 20px 0; 347 | } 348 | 349 | .headroom--pinned { 350 | transform: translate(0, 0); 351 | } 352 | 353 | .headroom--unpinned { 354 | transform: translate(0, -150%); 355 | } 356 | 357 | .navbar-brand { 358 | color: var(--dark-color); 359 | font-size: 24px; 360 | font-weight: var(--font-weight-light); 361 | margin: 0; 362 | padding: 0; 363 | } 364 | 365 | .navbar-expand-lg .navbar-nav .nav-link { 366 | display: inline-block; 367 | padding: 0; 368 | margin-right: 1.5rem; 369 | margin-left: 1.5rem; 370 | } 371 | 372 | .nav-link { 373 | color: var(--p-color); 374 | font-size: 16px; 375 | position: relative; 376 | } 377 | 378 | .navbar .nav-link::after { 379 | position: absolute; 380 | top: 100%; 381 | left: 0; 382 | width: 100%; 383 | height: 2px; 384 | background: var(--grey-color); 385 | content: ''; 386 | opacity: 0; 387 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 388 | -moz-transition: opacity 0.3s, -moz-transform 0.3s; 389 | transition: opacity 0.3s, transform 0.3s; 390 | -webkit-transform: translateY(10px); 391 | -moz-transform: translateY(10px); 392 | transform: translateY(10px); 393 | } 394 | 395 | .navbar .nav-link.active::after, 396 | .navbar .nav-link:hover::after { 397 | opacity: 1; 398 | -webkit-transform: translateY(0px); 399 | -moz-transform: translateY(0px); 400 | transform: translateY(0px); 401 | } 402 | 403 | .navbar .nav-link.active, 404 | .navbar .nav-link:hover { 405 | color: var(--primary-color); 406 | } 407 | 408 | .nav-link:focus, 409 | .nav-link:hover { 410 | color: var(--p-color); 411 | } 412 | 413 | .navbar-toggler { 414 | border: 0; 415 | padding: 0; 416 | cursor: pointer; 417 | margin: 0; 418 | width: 30px; 419 | height: 35px; 420 | outline: none; 421 | } 422 | 423 | .navbar-toggler:focus { 424 | outline: none; 425 | box-shadow: none; 426 | } 427 | 428 | .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { 429 | background: transparent; 430 | } 431 | 432 | .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before, 433 | .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after { 434 | transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease; 435 | transition: top 300ms 50ms ease, transform 300ms 350ms ease; 436 | transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-transform 300ms 350ms ease; 437 | top: 0; 438 | } 439 | 440 | .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before { 441 | transform: rotate(45deg); 442 | } 443 | 444 | .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after { 445 | transform: rotate(-45deg); 446 | } 447 | 448 | .navbar-toggler .navbar-toggler-icon { 449 | background: var(--dark-color); 450 | transition: background 10ms 300ms ease; 451 | display: block; 452 | width: 30px; 453 | height: 2px; 454 | position: relative; 455 | } 456 | 457 | .navbar-toggler .navbar-toggler-icon::before, 458 | .navbar-toggler .navbar-toggler-icon::after { 459 | transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease; 460 | transition: top 300ms 350ms ease, transform 300ms 50ms ease; 461 | transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease; 462 | position: absolute; 463 | right: 0; 464 | left: 0; 465 | background: var(--dark-color); 466 | width: 30px; 467 | height: 2px; 468 | content: ''; 469 | } 470 | 471 | .navbar-toggler .navbar-toggler-icon:before { 472 | top: -8px; 473 | } 474 | 475 | .navbar-toggler .navbar-toggler-icon:after { 476 | top: 8px; 477 | } 478 | 479 | /*--------------------------------------- 480 | SITE HEADER 481 | -----------------------------------------*/ 482 | .site-header { 483 | background-color: var(--section-bg-color); 484 | position: relative; 485 | overflow: hidden; 486 | margin-top: 86px; 487 | } 488 | 489 | .site-header.section-padding { 490 | padding-top: 7rem; 491 | padding-bottom: 7rem; 492 | } 493 | 494 | .site-header.section-padding-img { 495 | padding-top: 10rem; 496 | padding-bottom: 10rem; 497 | } 498 | 499 | .header-image { 500 | position: absolute; 501 | top: 0; 502 | right: 0; 503 | width: 50%; 504 | height: 100%; 505 | object-fit: cover; 506 | } 507 | 508 | /*--------------------------------------- 509 | SLICK SLIDESHOW 510 | -----------------------------------------*/ 511 | @media (min-width: 992px) { 512 | .slick-slideshow { 513 | height: 100vh; 514 | } 515 | } 516 | 517 | .slick-slideshow { 518 | margin-top: 86px; 519 | } 520 | 521 | .slick-title { 522 | color: var(--white-color); 523 | } 524 | 525 | .slick-custom { 526 | position: relative; 527 | } 528 | 529 | .slick-custom img { 530 | width: 100%; 531 | object-fit: cover; 532 | } 533 | 534 | .slick-bottom { 535 | background: linear-gradient(to top, var(--dark-color), transparent 90%); 536 | position: absolute; 537 | z-index: 2; 538 | bottom: 0; 539 | right: 0; 540 | left: 0; 541 | width: 100%; 542 | height: 100%; 543 | } 544 | 545 | .slick-bottom .container { 546 | position: absolute; 547 | top: 40%; 548 | left: 50%; 549 | transform: translate(-50%, -40%); 550 | } 551 | 552 | .slick-overlay { 553 | background: linear-gradient(to top, #000, transparent 120%); 554 | position: absolute; 555 | top: 0; 556 | right: 0; 557 | bottom: 0; 558 | left: 0; 559 | } 560 | 561 | .slick-slideshow .custom-btn { 562 | font-weight: var(--font-weight-bold); 563 | display: inline-block; 564 | padding-right: 32px; 565 | padding-left: 32px; 566 | } 567 | 568 | @media (min-width: 576px) { 569 | .slick-slideshow .slick-dots { 570 | max-width: 540px; 571 | } 572 | } 573 | 574 | @media (min-width: 768px) { 575 | .slick-slideshow .slick-dots { 576 | max-width: 720px; 577 | } 578 | } 579 | 580 | @media (min-width: 992px) { 581 | .slick-slideshow .slick-dots { 582 | max-width: 960px; 583 | } 584 | } 585 | 586 | @media (min-width: 1200px) { 587 | .slick-slideshow .slick-dots { 588 | max-width: 1140px; 589 | } 590 | } 591 | 592 | @media (min-width: 1400px) { 593 | .slick-slideshow .slick-dots { 594 | max-width: 1320px; 595 | } 596 | } 597 | 598 | .slick-slideshow .slick-dots { 599 | position: absolute; 600 | z-index: 2; 601 | top: 50%; 602 | left: 0; 603 | right: 0; 604 | transform: translate(0, -50%); 605 | margin: 0 auto; 606 | padding: 0; 607 | } 608 | 609 | .slick-slideshow .slick-dots li { 610 | background: transparent; 611 | border: 5px solid rgba(255, 255, 255, 0.35); 612 | border-radius: 100%; 613 | display: block; 614 | width: 30px; 615 | height: 30px; 616 | margin: 10px; 617 | padding: 5px; 618 | margin-left: auto; 619 | cursor: pointer; 620 | } 621 | 622 | .slick-slideshow .slick-dots button { 623 | background: transparent; 624 | border: none; 625 | color: transparent; 626 | display: block; 627 | width: 100%; 628 | height: 0; 629 | margin: 0; 630 | padding: 0; 631 | outline: none; 632 | height: 0; 633 | } 634 | 635 | .slick-slideshow .slick-dots li:hover, 636 | .slick-slideshow .slick-dots .slick-active { 637 | background: var(--white-color); 638 | } 639 | 640 | /*--------------------------------------- 641 | CUSTOM CIRCLE IMAGES 642 | -----------------------------------------*/ 643 | 644 | .custom-circle-image { 645 | border-radius: 100px; 646 | width: 55px; 647 | height: 55px; 648 | } 649 | 650 | .custom-circle-image.team-image { 651 | width: 85px; 652 | height: 85px; 653 | } 654 | 655 | /*--------------------------------------- 656 | TESTIMONIAL 657 | -----------------------------------------*/ 658 | .slick-testimonial .slick-list, 659 | .slick-testimonial .slick-track { 660 | height: 100%; 661 | } 662 | 663 | .slick-testimonial { 664 | margin: auto; 665 | } 666 | 667 | .slick-testimonial-caption { 668 | quotes: '❝' '❞'; 669 | position: relative; 670 | padding: 5rem 7rem; 671 | } 672 | 673 | .slick-testimonial-caption::before { 674 | content: open-quote; 675 | display: inline-block; 676 | color: var(--primary-color); 677 | font-family: auto; 678 | font-size: 100px; 679 | height: 0; 680 | position: absolute; 681 | top: 0; 682 | left: 0; 683 | } 684 | 685 | .slick-testimonial .slick-dots { 686 | text-align: center; 687 | } 688 | 689 | .slick-testimonial .slick-dots li { 690 | background: var(--grey-color); 691 | display: inline-block; 692 | vertical-align: top; 693 | width: 16%; 694 | height: 1px; 695 | } 696 | 697 | .slick-testimonial .slick-dots button { 698 | background: transparent; 699 | border: none; 700 | color: transparent; 701 | display: block; 702 | width: 100%; 703 | height: 0; 704 | margin: 0; 705 | padding: 0; 706 | } 707 | 708 | .slick-testimonial .slick-dots li:hover, 709 | .slick-testimonial .slick-dots .slick-active { 710 | background: var(--dark-color); 711 | } 712 | 713 | /*--------------------------------------- 714 | SECTION 715 | -----------------------------------------*/ 716 | section { 717 | content-visibility: auto; 718 | contain-intrinsic-size: 700px; 719 | } 720 | 721 | .section-padding { 722 | padding-top: 7rem; 723 | padding-bottom: 7rem; 724 | } 725 | 726 | .featured { 727 | background: var(--section-bg-color); 728 | } 729 | 730 | /*--------------------------------------- 731 | ABOUT 732 | -----------------------------------------*/ 733 | .about .nav-pills .nav-item { 734 | width: 100%; 735 | } 736 | 737 | .about .nav-pills .nav-link { 738 | color: var(--grey-color); 739 | font-size: 18px; 740 | font-weight: var(--font-weight-bold); 741 | border-left: 1px solid var(--grey-color); 742 | border-radius: 0; 743 | padding-right: 0; 744 | } 745 | 746 | .about .nav-pills .nav-link:hover, 747 | .about .nav-pills .nav-link.active, 748 | .about .nav-pills .show>.nav-link { 749 | background: transparent; 750 | border-left-color: var(--primary-color); 751 | color: var(--primary-color); 752 | } 753 | 754 | /*--------------------------------------- 755 | FAQ ACCORDION 756 | -----------------------------------------*/ 757 | .accordion-item { 758 | background-color: transparent; 759 | border-top: 0; 760 | border-right: 0; 761 | border-left: 0; 762 | } 763 | 764 | .accordion-button { 765 | background-color: transparent; 766 | box-shadow: none; 767 | } 768 | 769 | .accordion-button:not(.collapsed) { 770 | background: transparent; 771 | box-shadow: none; 772 | } 773 | 774 | button:focus:not(:focus-visible) { 775 | border-color: transparent; 776 | box-shadow: none; 777 | } 778 | 779 | .accordion-body { 780 | border-top: 1px solid rgba(0,0,0,.125); 781 | } 782 | 783 | .accordion-button { 784 | font-size: 1.5rem; 785 | font-weight: var(--font-weight-normal); 786 | padding-top: 1.5rem; 787 | padding-right: 0; 788 | padding-bottom: 1.5rem; 789 | padding-left: 0; 790 | } 791 | 792 | .accordion-body { 793 | padding: 2rem 0; 794 | } 795 | 796 | /*--------------------------------------- 797 | TEAM MEMBERS 798 | -----------------------------------------*/ 799 | .team { 800 | background: var(--grey-color); 801 | } 802 | 803 | .team-thumb { 804 | background: var(--white-color); 805 | position: relative; 806 | border-radius: .25rem; 807 | padding: 42px 32px; 808 | } 809 | 810 | .team-info { 811 | width: 100%; 812 | } 813 | 814 | .custom-modal-btn { 815 | background: var(--grey-color); 816 | color: var(--white-color); 817 | position: absolute; 818 | top: 0; 819 | right: 0; 820 | bottom: 0; 821 | margin: auto 32px; 822 | width: 42px; 823 | height: 42px; 824 | } 825 | 826 | .modal-body { 827 | padding: 4rem; 828 | } 829 | 830 | .modal-header { 831 | padding-top: 7rem; 832 | padding-bottom: 5rem; 833 | } 834 | 835 | .modal-header .btn-close { 836 | position: absolute; 837 | top: 0; 838 | right: 0; 839 | font-size: 24px; 840 | margin: 32px; 841 | } 842 | 843 | #cart-modal .modal-header .btn-close { 844 | z-index: 2; 845 | margin: 22px; 846 | } 847 | 848 | #cart-modal .modal-header { 849 | border-bottom: 0; 850 | padding: 0; 851 | } 852 | 853 | #cart-modal .modal-footer { 854 | padding: 2rem 4rem; 855 | } 856 | 857 | /*--------------------------------------- 858 | SKILL - PROGRESS BAR 859 | -----------------------------------------*/ 860 | .skill-thumb strong { 861 | display: inline-block; 862 | margin-bottom: 6px; 863 | } 864 | 865 | .skill-thumb span { 866 | color: var(--dark-color); 867 | font-size: 24px; 868 | font-weight: var(--font-weight-bold); 869 | } 870 | 871 | .skill-thumb .progress { 872 | background: var(--white-color); 873 | box-shadow: none; 874 | border-radius: 100px; 875 | height: 1px; 876 | margin-bottom: 16px; 877 | } 878 | 879 | .skill-thumb .progress .progress-bar-primary { 880 | background: var(--grey-color); 881 | } 882 | 883 | /*--------------------------------------- 884 | PRODUCT 885 | -----------------------------------------*/ 886 | .front-product { 887 | background: var(--section-bg-color); 888 | } 889 | 890 | .product-thumb { 891 | background: var(--white-color); 892 | position: relative; 893 | transition: all 0.5s ease-out; 894 | } 895 | 896 | .product-image { 897 | transition: all 0.5s ease-out; 898 | } 899 | 900 | .product-thumb:hover .product-image { 901 | box-shadow: 0 1rem 3rem rgba(0,0,0,.175); 902 | } 903 | 904 | .product-top { 905 | position: absolute; 906 | top: 0; 907 | right: 0; 908 | left: 0; 909 | margin: 20px; 910 | } 911 | 912 | .product-info { 913 | padding: 30px 20px; 914 | } 915 | 916 | .product-description, 917 | .product-cart-thumb { 918 | padding: 0 20px; 919 | } 920 | 921 | .product-icon { 922 | color: var(--white-color); 923 | } 924 | 925 | .product-title-link { 926 | color: var(--dark-color); 927 | } 928 | 929 | .product-additional-link { 930 | display: inline-block; 931 | vertical-align: top; 932 | font-size: var(--product-link-font-size); 933 | margin-top: 32px; 934 | margin-right: 12px; 935 | } 936 | 937 | .product-alert { 938 | background: var(--white-color); 939 | color: var(--p-color); 940 | font-size: var(--custom-link-font-size); 941 | font-weight: var(--font-weight-bold); 942 | padding: 3px 10px; 943 | } 944 | 945 | .product-p { 946 | font-size: var(--product-link-font-size); 947 | } 948 | 949 | .view-all { 950 | text-transform: uppercase; 951 | color: var(--p-color); 952 | font-size: 13px; 953 | font-weight: var(--font-weight-bold); 954 | border-bottom: 2px solid var(--grey-color); 955 | padding-bottom: 6px; 956 | } 957 | 958 | /*--------------------------------------- 959 | CONTACT 960 | -----------------------------------------*/ 961 | .contact-info { 962 | padding: 40px; 963 | } 964 | 965 | .contact-form .form-control { 966 | border-color: var(--grey-color); 967 | font-weight: var(--font-weight-normal); 968 | } 969 | 970 | .form-floating>label { 971 | color: var(--grey-color); 972 | font-weight: var(--font-weight-normal); 973 | } 974 | 975 | .contact-form button[type='submit'] { 976 | background: var(--dark-color); 977 | border: none; 978 | border-radius: 100px; 979 | color: var(--white-color); 980 | font-weight: var(--font-weight-bold); 981 | text-transform: uppercase; 982 | padding: 16px; 983 | } 984 | 985 | .contact-form button[type='submit']:hover { 986 | background: var(--primary-color); 987 | } 988 | 989 | /*--------------------------------------- 990 | SITE FOOTER 991 | -----------------------------------------*/ 992 | .site-footer { 993 | background: var(--dark-color); 994 | padding-top: 5rem; 995 | padding-bottom: 5rem; 996 | } 997 | 998 | .footer-menu { 999 | margin: 0; 1000 | padding: 0; 1001 | } 1002 | 1003 | .footer-menu-item { 1004 | display: block; 1005 | width: 50%; 1006 | } 1007 | 1008 | .footer-menu-link { 1009 | color: #6c757d; 1010 | font-weight: var(--font-weight-light); 1011 | display: inline-block; 1012 | vertical-align: top; 1013 | margin-top: 4px; 1014 | margin-bottom: 4px; 1015 | } 1016 | 1017 | .site-footer .social-icon-link { 1018 | margin-top: 4px; 1019 | } 1020 | 1021 | .site-footer .social-icon-link:hover, 1022 | .footer-menu-link:hover { 1023 | color: var(--white-color); 1024 | } 1025 | 1026 | .copyright-text { 1027 | font-size: var(--copyright-text-font-size); 1028 | } 1029 | 1030 | /*--------------------------------------- 1031 | SOCIAL ICON 1032 | -----------------------------------------*/ 1033 | .social-icon { 1034 | margin: 0; 1035 | padding: 0; 1036 | } 1037 | 1038 | .social-icon li { 1039 | list-style: none; 1040 | display: inline-block; 1041 | vertical-align: top; 1042 | } 1043 | 1044 | .social-icon-link { 1045 | color: #6c757d; 1046 | font-size: 1rem; 1047 | display: inline-block; 1048 | vertical-align: top; 1049 | margin-bottom: 4px; 1050 | margin-right: 15px; 1051 | } 1052 | 1053 | .social-icon-link:hover { 1054 | color: var(--primary-color); 1055 | } 1056 | 1057 | /*--------------------------------------- 1058 | RESPONSIVE STYLES 1059 | -----------------------------------------*/ 1060 | @media screen and (max-width: 1200px) { 1061 | h1 { 1062 | font-size: 62px; 1063 | } 1064 | } 1065 | 1066 | @media screen and (max-width: 991px) { 1067 | h1 { 1068 | font-size: 42px; 1069 | margin-bottom: 0; 1070 | } 1071 | 1072 | h2 { 1073 | font-size: 36px; 1074 | } 1075 | 1076 | h3 { 1077 | font-size: 32px; 1078 | } 1079 | 1080 | h4 { 1081 | font-size: 28px; 1082 | } 1083 | 1084 | h5 { 1085 | font-size: 24px; 1086 | } 1087 | 1088 | h6 { 1089 | font-size: 20px; 1090 | } 1091 | 1092 | .lead { 1093 | font-size: 16px; 1094 | } 1095 | 1096 | .navbar-expand-lg .navbar-nav .nav-link { 1097 | margin-top: 1rem; 1098 | } 1099 | 1100 | .site-header { 1101 | background-position: bottom; 1102 | } 1103 | 1104 | #cart-modal .modal-header .btn-close { 1105 | margin: 22px 14px; 1106 | } 1107 | 1108 | .custom-btn { 1109 | font-size: 14px; 1110 | padding: 13.5px 20px; 1111 | } 1112 | 1113 | .slick-slideshow .custom-btn { 1114 | padding-right: 27px; 1115 | padding-left: 27px; 1116 | } 1117 | 1118 | .social-login, 1119 | .div-separator { 1120 | width: 75% !important; 1121 | } 1122 | 1123 | #cart-modal .modal-footer .row { 1124 | width: 100% !important; 1125 | } 1126 | 1127 | .site-header.section-padding, 1128 | .section-padding { 1129 | padding-top: 4rem; 1130 | padding-bottom: 4rem; 1131 | } 1132 | 1133 | .site-header-image.section-padding { 1134 | padding-bottom: 0; 1135 | } 1136 | 1137 | .header-info { 1138 | padding-top: 50px; 1139 | padding-bottom: 100px; 1140 | } 1141 | 1142 | .header-image { 1143 | position: relative; 1144 | top: auto; 1145 | bottom: 0; 1146 | left: 0; 1147 | width: auto; 1148 | height: auto; 1149 | } 1150 | 1151 | .slick-testimonial-caption { 1152 | padding: 6rem 3rem 4rem 3rem; 1153 | } 1154 | 1155 | .slick-slideshow .slick-dots li { 1156 | width: 25px; 1157 | height: 25px; 1158 | } 1159 | 1160 | .modal-header { 1161 | padding-top: 6rem; 1162 | padding-bottom: 2rem; 1163 | } 1164 | 1165 | .modal-body { 1166 | padding: 2rem; 1167 | } 1168 | 1169 | #cart-modal .modal-footer { 1170 | padding-right: 0; 1171 | padding-left: 0; 1172 | } 1173 | 1174 | #cart-modal .modal-body { 1175 | padding: 4rem 2rem 2rem 2rem; 1176 | } 1177 | 1178 | .full-image-img { 1179 | bottom: 0; 1180 | } 1181 | } 1182 | 1183 | -------------------------------------------------------------------------------- /js/slick.min.js: -------------------------------------------------------------------------------- 1 | !function(i){"use strict";"function"==typeof define&&define.amd?define(["jquery"],i):"undefined"!=typeof exports?module.exports=i(require("jquery")):i(jQuery)}(function(i){"use strict";var e=window.Slick||{};(e=function(){var e=0;return function(t,o){var s,n=this;n.defaults={accessibility:!0,adaptiveHeight:!1,appendArrows:i(t),appendDots:i(t),arrows:!0,asNavFor:null,prevArrow:'',nextArrow:'',autoplay:!1,autoplaySpeed:3e3,centerMode:!1,centerPadding:"50px",cssEase:"ease",customPaging:function(e,t){return i('