├── .gitignore
├── src
    ├── scss
    │   └── styles.scss
    ├── js
    │   └── scripts.js
    ├── assets
    │   └── favicon.ico
    └── pug
    │   └── index.pug
├── scripts
    ├── build-scss.js
    ├── build-assets.js
    ├── build-scripts.js
    ├── clean.js
    ├── render-assets.js
    ├── build-pug.js
    ├── start-debug.js
    ├── start.js
    ├── render-scripts.js
    ├── render-pug.js
    ├── render-scss.js
    └── sb-watch.js
├── dist
    ├── assets
    │   └── favicon.ico
    ├── js
    │   └── scripts.js
    └── index.html
├── .editorconfig
├── LICENSE
├── package.json
└── README.md


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


--------------------------------------------------------------------------------
/src/scss/styles.scss:
--------------------------------------------------------------------------------
1 | // Import Bootstrap
2 | @import "bootstrap/scss/bootstrap.scss";


--------------------------------------------------------------------------------
/src/js/scripts.js:
--------------------------------------------------------------------------------
1 | // This file is intentionally blank
2 | // Use this file to add JavaScript to your project


--------------------------------------------------------------------------------
/scripts/build-scss.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | const renderSCSS = require('./render-scss');
4 | 
5 | renderSCSS();
6 | 


--------------------------------------------------------------------------------
/scripts/build-assets.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | const renderAssets = require('./render-assets');
4 | 
5 | renderAssets();


--------------------------------------------------------------------------------
/scripts/build-scripts.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | const renderScripts = require('./render-scripts');
4 | 
5 | renderScripts();


--------------------------------------------------------------------------------
/src/assets/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartBootstrap/startbootstrap-shop-homepage/HEAD/src/assets/favicon.ico


--------------------------------------------------------------------------------
/dist/assets/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StartBootstrap/startbootstrap-shop-homepage/HEAD/dist/assets/favicon.ico


--------------------------------------------------------------------------------
/scripts/clean.js:
--------------------------------------------------------------------------------
1 | const sh = require('shelljs');
2 | const upath = require('upath');
3 | 
4 | const destPath = upath.resolve(upath.dirname(__filename), '../dist');
5 | 
6 | sh.rm('-rf', `${destPath}/*`)
7 | 
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 4
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/dist/js/scripts.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Start Bootstrap - Shop Homepage v5.0.6 (https://startbootstrap.com/template/shop-homepage)
3 | * Copyright 2013-2023 Start Bootstrap
4 | * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-shop-homepage/blob/master/LICENSE)
5 | */
6 | // This file is intentionally blank
7 | // Use this file to add JavaScript to your project


--------------------------------------------------------------------------------
/scripts/render-assets.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | const fs = require('fs');
 3 | const upath = require('upath');
 4 | const sh = require('shelljs');
 5 | 
 6 | module.exports = function renderAssets() {
 7 |     const sourcePath = upath.resolve(upath.dirname(__filename), '../src/assets');
 8 |     const destPath = upath.resolve(upath.dirname(__filename), '../dist/.');
 9 |     
10 |     sh.cp('-R', sourcePath, destPath)
11 | };


--------------------------------------------------------------------------------
/scripts/build-pug.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | const upath = require('upath');
 3 | const sh = require('shelljs');
 4 | const renderPug = require('./render-pug');
 5 | 
 6 | const srcPath = upath.resolve(upath.dirname(__filename), '../src');
 7 | 
 8 | sh.find(srcPath).forEach(_processFile);
 9 | 
10 | function _processFile(filePath) {
11 |     if (
12 |         filePath.match(/\.pug$/)
13 |         && !filePath.match(/include/)
14 |         && !filePath.match(/mixin/)
15 |         && !filePath.match(/\/pug\/layouts\//)
16 |     ) {
17 |         renderPug(filePath);
18 |     }
19 | }


--------------------------------------------------------------------------------
/scripts/start-debug.js:
--------------------------------------------------------------------------------
 1 | const concurrently = require('concurrently');
 2 | const upath = require('upath');
 3 | 
 4 | const browserSyncPath = upath.resolve(upath.dirname(__filename), '../node_modules/.bin/browser-sync');
 5 | 
 6 | concurrently([
 7 |     { command: 'node --inspect scripts/sb-watch.js', name: 'SB_WATCH', prefixColor: 'bgBlue.bold' },
 8 |     { 
 9 |         command: `${browserSyncPath} dist -w --no-online`,
10 |         name: 'SB_BROWSER_SYNC', 
11 |         prefixColor: 'bgBlue.bold',
12 |     }
13 | ], {
14 |     prefix: 'name',
15 |     killOthers: ['failure', 'success'],
16 | }).then(success, failure);
17 | 
18 | function success() {
19 |     console.log('Success');    
20 | }
21 | 
22 | function failure() {
23 |     console.log('Failure');
24 | }


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
 1 | const concurrently = require('concurrently');
 2 | const upath = require('upath');
 3 | 
 4 | const browserSyncPath = upath.resolve(upath.dirname(__filename), '../node_modules/.bin/browser-sync');
 5 | 
 6 | concurrently([
 7 |     { command: 'node scripts/sb-watch.js', name: 'SB_WATCH', prefixColor: 'bgBlue.bold' },
 8 |     { 
 9 |         command: `"${browserSyncPath}" --reload-delay 2000 --reload-debounce 2000 dist -w --no-online`,
10 |         name: 'SB_BROWSER_SYNC', 
11 |         prefixColor: 'bgGreen.bold',
12 |     }
13 | ], {
14 |     prefix: 'name',
15 |     killOthers: ['failure', 'success'],
16 | }).then(success, failure);
17 | 
18 | function success() {
19 |     console.log('Success');    
20 | }
21 | 
22 | function failure() {
23 |     console.log('Failure');
24 | }


--------------------------------------------------------------------------------
/scripts/render-scripts.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | const fs = require('fs');
 3 | const packageJSON = require('../package.json');
 4 | const upath = require('upath');
 5 | const sh = require('shelljs');
 6 | 
 7 | module.exports = function renderScripts() {
 8 | 
 9 |     const sourcePath = upath.resolve(upath.dirname(__filename), '../src/js');
10 |     const destPath = upath.resolve(upath.dirname(__filename), '../dist/.');
11 |     
12 |     sh.cp('-R', sourcePath, destPath)
13 | 
14 |     const sourcePathScriptsJS = upath.resolve(upath.dirname(__filename), '../src/js/scripts.js');
15 |     const destPathScriptsJS = upath.resolve(upath.dirname(__filename), '../dist/js/scripts.js');
16 |     
17 |     const copyright = `/*!
18 | * Start Bootstrap - ${packageJSON.title} v${packageJSON.version} (${packageJSON.homepage})
19 | * Copyright 2013-${new Date().getFullYear()} ${packageJSON.author}
20 | * Licensed under ${packageJSON.license} (https://github.com/StartBootstrap/${packageJSON.name}/blob/master/LICENSE)
21 | */
22 | `
23 |     const scriptsJS = fs.readFileSync(sourcePathScriptsJS);
24 |     
25 |     fs.writeFileSync(destPathScriptsJS, copyright + scriptsJS);
26 | };


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013-2023 Start Bootstrap LLC
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/scripts/render-pug.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | const fs = require('fs');
 3 | const upath = require('upath');
 4 | const pug = require('pug');
 5 | const sh = require('shelljs');
 6 | const prettier = require('prettier');
 7 | 
 8 | module.exports = function renderPug(filePath) {
 9 |     const destPath = filePath.replace(/src\/pug\//, 'dist/').replace(/\.pug$/, '.html');
10 |     const srcPath = upath.resolve(upath.dirname(__filename), '../src');
11 | 
12 |     console.log(`### INFO: Rendering ${filePath} to ${destPath}`);
13 |     const html = pug.renderFile(filePath, {
14 |         doctype: 'html',
15 |         filename: filePath,
16 |         basedir: srcPath
17 |     });
18 | 
19 |     const destPathDirname = upath.dirname(destPath);
20 |     if (!sh.test('-e', destPathDirname)) {
21 |         sh.mkdir('-p', destPathDirname);
22 |     }
23 | 
24 |     const prettified = prettier.format(html, {
25 |         printWidth: 1000,
26 |         tabWidth: 4,
27 |         singleQuote: true,
28 |         proseWrap: 'preserve',
29 |         endOfLine: 'lf',
30 |         parser: 'html',
31 |         htmlWhitespaceSensitivity: 'ignore'
32 |     });
33 | 
34 |     fs.writeFileSync(destPath, prettified);
35 | };
36 | 


--------------------------------------------------------------------------------
/scripts/render-scss.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | const autoprefixer = require('autoprefixer')
 3 | const fs = require('fs');
 4 | const packageJSON = require('../package.json');
 5 | const upath = require('upath');
 6 | const postcss = require('postcss')
 7 | const sass = require('sass');
 8 | const sh = require('shelljs');
 9 | 
10 | const stylesPath = '../src/scss/styles.scss';
11 | const destPath = upath.resolve(upath.dirname(__filename), '../dist/css/styles.css');
12 | 
13 | module.exports = function renderSCSS() {
14 |     
15 |     const results = sass.renderSync({
16 |         data: entryPoint,
17 |         includePaths: [
18 |             upath.resolve(upath.dirname(__filename), '../node_modules')
19 |         ],
20 |       });
21 | 
22 |     const destPathDirname = upath.dirname(destPath);
23 |     if (!sh.test('-e', destPathDirname)) {
24 |         sh.mkdir('-p', destPathDirname);
25 |     }
26 | 
27 |     postcss([ autoprefixer ]).process(results.css, {from: 'styles.css', to: 'styles.css'}).then(result => {
28 |         result.warnings().forEach(warn => {
29 |             console.warn(warn.toString())
30 |         })
31 |         fs.writeFileSync(destPath, result.css.toString());
32 |     })
33 | 
34 | };
35 | 
36 | const entryPoint = `/*!
37 | * Start Bootstrap - ${packageJSON.title} v${packageJSON.version} (${packageJSON.homepage})
38 | * Copyright 2013-${new Date().getFullYear()} ${packageJSON.author}
39 | * Licensed under ${packageJSON.license} (https://github.com/StartBootstrap/${packageJSON.name}/blob/master/LICENSE)
40 | */
41 | @import "${stylesPath}"
42 | `


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "title": "Shop Homepage",
 3 |     "name": "startbootstrap-shop-homepage",
 4 |     "version": "5.0.6",
 5 |     "scripts": {
 6 |         "build": "npm run clean && npm run build:pug && npm run build:scss && npm run build:scripts && npm run build:assets",
 7 |         "build:assets": "node scripts/build-assets.js",
 8 |         "build:pug": "node scripts/build-pug.js",
 9 |         "build:scripts": "node scripts/build-scripts.js",
10 |         "build:scss": "node scripts/build-scss.js",
11 |         "clean": "node scripts/clean.js",
12 |         "start": "npm run build && node scripts/start.js",
13 |         "start:debug": "npm run build && node scripts/start-debug.js"
14 |     },
15 |     "description": "A shop homepage HTML template built with Bootstrap",
16 |     "keywords": [
17 |         "css",
18 |         "sass",
19 |         "html",
20 |         "responsive",
21 |         "theme",
22 |         "template"
23 |     ],
24 |     "homepage": "https://startbootstrap.com/template/shop-homepage",
25 |     "bugs": {
26 |         "url": "https://github.com/StartBootstrap/startbootstrap-shop-homepage/issues",
27 |         "email": "feedback@startbootstrap.com"
28 |     },
29 |     "license": "MIT",
30 |     "author": "Start Bootstrap",
31 |     "contributors": [
32 |         "David Miller (https://davidmiller.io/)"
33 |     ],
34 |     "repository": {
35 |         "type": "git",
36 |         "url": "https://github.com/StartBootstrap/startbootstrap-shop-homepage.git"
37 |     },
38 |     "dependencies": {
39 |         "bootstrap": "5.2.3"
40 |     },
41 |     "devDependencies": {
42 |         "autoprefixer": "10.4.14",
43 |         "browser-sync": "2.29.1",
44 |         "chokidar": "3.5.3",
45 |         "concurrently": "6.3.0",
46 |         "postcss": "8.4.21",
47 |         "prettier": "2.8.6",
48 |         "pug": "3.0.2",
49 |         "sass": "1.60.0",
50 |         "shelljs": "0.8.5",
51 |         "upath": "2.0.1"
52 |     }
53 | }


--------------------------------------------------------------------------------
/scripts/sb-watch.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const _ = require('lodash');
 4 | const chokidar = require('chokidar');
 5 | const upath = require('upath');
 6 | const renderAssets = require('./render-assets');
 7 | const renderPug = require('./render-pug');
 8 | const renderScripts = require('./render-scripts');
 9 | const renderSCSS = require('./render-scss');
10 | 
11 | const watcher = chokidar.watch('src', {
12 |     persistent: true,
13 | });
14 | 
15 | let READY = false;
16 | 
17 | process.title = 'pug-watch';
18 | process.stdout.write('Loading');
19 | let allPugFiles = {};
20 | 
21 | watcher.on('add', filePath => _processFile(upath.normalize(filePath), 'add'));
22 | watcher.on('change', filePath => _processFile(upath.normalize(filePath), 'change'));
23 | watcher.on('ready', () => {
24 |     READY = true;
25 |     console.log(' READY TO ROLL!');
26 | });
27 | 
28 | _handleSCSS();
29 | 
30 | function _processFile(filePath, watchEvent) {
31 |     
32 |     if (!READY) {
33 |         if (filePath.match(/\.pug$/)) {
34 |             if (!filePath.match(/includes/) && !filePath.match(/mixins/) && !filePath.match(/\/pug\/layouts\//)) {
35 |                 allPugFiles[filePath] = true;
36 |             }    
37 |         }    
38 |         process.stdout.write('.');
39 |         return;
40 |     }
41 | 
42 |     console.log(`### INFO: File event: ${watchEvent}: ${filePath}`);
43 | 
44 |     if (filePath.match(/\.pug$/)) {
45 |         return _handlePug(filePath, watchEvent);
46 |     }
47 | 
48 |     if (filePath.match(/\.scss$/)) {
49 |         if (watchEvent === 'change') {
50 |             return _handleSCSS(filePath, watchEvent);
51 |         }
52 |         return;
53 |     }
54 | 
55 |     if (filePath.match(/src\/js\//)) {
56 |         return renderScripts();
57 |     }
58 | 
59 |     if (filePath.match(/src\/assets\//)) {
60 |         return renderAssets();
61 |     }
62 | 
63 | }
64 | 
65 | function _handlePug(filePath, watchEvent) {
66 |     if (watchEvent === 'change') {
67 |         if (filePath.match(/includes/) || filePath.match(/mixins/) || filePath.match(/\/pug\/layouts\//)) {
68 |             return _renderAllPug();
69 |         }
70 |         return renderPug(filePath);
71 |     }
72 |     if (!filePath.match(/includes/) && !filePath.match(/mixins/) && !filePath.match(/\/pug\/layouts\//)) {
73 |         return renderPug(filePath);
74 |     }
75 | }
76 | 
77 | function _renderAllPug() {
78 |     console.log('### INFO: Rendering All');
79 |     _.each(allPugFiles, (value, filePath) => {
80 |         renderPug(filePath);
81 |     });
82 | }
83 | 
84 | function _handleSCSS() {
85 |     renderSCSS();
86 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # [Start Bootstrap - Shop Homepage](https://startbootstrap.com/template/shop-homepage/)
 2 | 
 3 | [Shop Homepage](https://startbootstrap.com/template/shop-homepage/) is a basic HTML online store homepage template for [Bootstrap](https://getbootstrap.com/) created by [Start Bootstrap](https://startbootstrap.com/).
 4 | 
 5 | ## Preview
 6 | 
 7 | [![Shop Homepage Preview](https://assets.startbootstrap.com/img/screenshots/templates/shop-homepage.png)](https://startbootstrap.github.io/startbootstrap-shop-homepage/)
 8 | 
 9 | **[View Live Preview](https://startbootstrap.github.io/startbootstrap-shop-homepage/)**
10 | 
11 | ## Status
12 | 
13 | [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/StartBootstrap/startbootstrap-shop-homepage/master/LICENSE)
14 | [![npm version](https://img.shields.io/npm/v/startbootstrap-shop-homepage.svg)](https://www.npmjs.com/package/startbootstrap-shop-homepage)
15 | 
16 | ## Download and Installation
17 | 
18 | To begin using this template, choose one of the following options to get started:
19 | 
20 | * [Download the latest release on Start Bootstrap](https://startbootstrap.com/template/shop-homepage/)
21 | * Install via npm: `npm i startbootstrap-shop-homepage`
22 | * Clone the repo: `git clone https://github.com/StartBootstrap/startbootstrap-shop-homepage.git`
23 | * [Fork, Clone, or Download on GitHub](https://github.com/StartBootstrap/startbootstrap-shop-homepage)
24 | 
25 | ## Usage
26 | 
27 | ### Basic Usage
28 | 
29 | After downloading, simply edit the HTML and CSS files included with `dist` directory. These are the only files you need to worry about, you can ignore everything else! To preview the changes you make to the code, you can open the `index.html` file in your web browser.
30 | 
31 | ### Advanced Usage
32 | 
33 | Clone the source files of the theme and navigate into the theme's root directory. Run `npm install` and then run `npm start` which will open up a preview of the template in your default browser, watch for changes to core template files, and live reload the browser when changes are saved. You can view the `package.json` file to see which scripts are included.
34 | 
35 | #### npm Scripts
36 | 
37 | * `npm run build` builds the project - this builds assets, HTML, JS, and CSS into `dist`
38 | * `npm run build:assets` copies the files in the `src/assets/` directory into `dist`
39 | * `npm run build:pug` compiles the Pug located in the `src/pug/` directory into `dist`
40 | * `npm run build:scripts` brings the `src/js/scripts.js` file into `dist`
41 | * `npm run build:scss` compiles the SCSS files located in the `src/scss/` directory into `dist`
42 | * `npm run clean` deletes the `dist` directory to prepare for rebuilding the project
43 | * `npm run start:debug` runs the project in debug mode
44 | * `npm start` or `npm run start` runs the project, launches a live preview in your default browser, and watches for changes made to files in `src`
45 | 
46 | You must have npm installed in order to use this build environment.
47 | 
48 | ## Bugs and Issues
49 | 
50 | Have a bug or an issue with this template? [Open a new issue](https://github.com/StartBootstrap/startbootstrap-shop-homepage/issues) here on GitHub or leave a comment on the [template overview page at Start Bootstrap](https://startbootstrap.com/template/shop-homepage/).
51 | 
52 | ## About
53 | 
54 | Start Bootstrap is an open source library of free Bootstrap templates and themes. All of the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.
55 | 
56 | * <https://startbootstrap.com>
57 | * <https://twitter.com/SBootstrap>
58 | 
59 | Start Bootstrap was created by and is maintained by **[David Miller](https://davidmiller.io/)**.
60 | 
61 | * <https://davidmiller.io>
62 | * <https://twitter.com/davidmillerhere>
63 | * <https://github.com/davidtmiller>
64 | 
65 | Start Bootstrap is based on the [Bootstrap](https://getbootstrap.com/) framework created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thorton](https://twitter.com/fat).
66 | 
67 | ## Copyright and License
68 | 
69 | Copyright 2013-2023 Start Bootstrap LLC. Code released under the [MIT](https://github.com/StartBootstrap/startbootstrap-shop-homepage/blob/master/LICENSE) license.
70 | 


--------------------------------------------------------------------------------
/src/pug/index.pug:
--------------------------------------------------------------------------------
  1 | doctype html
  2 | html(lang='en')
  3 | 
  4 |     head
  5 | 
  6 |         meta(charset='utf-8')
  7 |         meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
  8 |         meta(name='description', content='')
  9 |         meta(name='author', content='')
 10 | 
 11 |         title Shop Homepage - Start Bootstrap Template
 12 | 
 13 |         // Favicon
 14 |         link(rel='icon', type='image/x-icon', href='assets/favicon.ico')
 15 | 
 16 |         // Bootstrap icons
 17 |         link(href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css', rel='stylesheet')
 18 | 
 19 |         // Core theme CSS (includes Bootstrap)
 20 |         link(href='css/styles.css', rel='stylesheet')
 21 | 
 22 |     body
 23 | 
 24 |         // Navigation
 25 |         nav.navbar.navbar-expand-lg.navbar-light.bg-light
 26 |             .container.px-4.px-lg-5
 27 |                 a.navbar-brand(href='#!') Start Bootstrap
 28 |                 button.navbar-toggler(type='button' data-bs-toggle='collapse' data-bs-target='#navbarSupportedContent' aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation')
 29 |                     span.navbar-toggler-icon
 30 |                 #navbarSupportedContent.collapse.navbar-collapse
 31 |                     ul.navbar-nav.me-auto.mb-2.mb-lg-0.ms-lg-4
 32 |                         li.nav-item
 33 |                             a.nav-link.active(aria-current='page' href='#!') Home
 34 |                         li.nav-item
 35 |                             a.nav-link(href='#!') About
 36 |                         li.nav-item.dropdown
 37 |                             a#navbarDropdown.nav-link.dropdown-toggle(href='#' role='button' data-bs-toggle='dropdown' aria-expanded='false')
 38 |                                 | Shop
 39 |                             ul.dropdown-menu(aria-labelledby='navbarDropdown')
 40 |                                 li
 41 |                                     a.dropdown-item(href='#!') All Products
 42 |                                 li
 43 |                                     hr.dropdown-divider
 44 |                                 li
 45 |                                     a.dropdown-item(href='#!') Popular Items
 46 |                                 li
 47 |                                     a.dropdown-item(href='#!') New Arrivals
 48 |                     form.d-flex
 49 |                         button.btn.btn-outline-dark(type='submit')
 50 |                             i.bi-cart-fill.me-1
 51 |                             | Cart
 52 |                             span.badge.bg-dark.text-white.ms-1.rounded-pill 0
 53 | 
 54 |         // Header
 55 |         header.bg-dark.py-5
 56 |             .container.px-4.px-lg-5.my-5
 57 |                 .text-center.text-white
 58 |                     h1.display-4.fw-bolder Shop in style
 59 |                     p.lead.fw-normal.text-white-50.mb-0 With this shop hompeage template
 60 | 
 61 |         // Section
 62 |         section.py-5
 63 |             .container.px-4.px-lg-5.mt-5
 64 |                 .row.gx-4.gx-lg-5.row-cols-2.row-cols-md-3.row-cols-xl-4.justify-content-center
 65 |                     .col.mb-5
 66 |                         .card.h-100
 67 |                             // Product image
 68 |                             img.card-img-top(src='https://dummyimage.com/450x300/dee2e6/6c757d.jpg', alt='...')
 69 |                             // Product details
 70 |                             .card-body.p-4
 71 |                                 .text-center
 72 |                                     // Product name
 73 |                                     h5.fw-bolder Fancy Product
 74 |                                     // Product price
 75 |                                     | $40.00 - $80.00
 76 |                             // Product actions
 77 |                             .card-footer.p-4.pt-0.border-top-0.bg-transparent
 78 |                                 .text-center
 79 |                                     a.btn.btn-outline-dark.mt-auto(href='#') View options
 80 |                     .col.mb-5
 81 |                         .card.h-100
 82 |                             // Sale badge
 83 |                             .badge.bg-dark.text-white.position-absolute(style='top: 0.5rem; right: 0.5rem;') Sale
 84 |                             // Product image
 85 |                             img.card-img-top(src='https://dummyimage.com/450x300/dee2e6/6c757d.jpg', alt='...')
 86 |                             // Product details
 87 |                             .card-body.p-4
 88 |                                 .text-center
 89 |                                     // Product name
 90 |                                     h5.fw-bolder Special Item
 91 |                                     // Product reviews
 92 |                                     .d-flex.justify-content-center.small.text-warning.mb-2
 93 |                                         .bi-star-fill
 94 |                                         .bi-star-fill
 95 |                                         .bi-star-fill
 96 |                                         .bi-star-fill
 97 |                                         .bi-star-fill
 98 |                                     // Product price
 99 |                                     span.text-muted.text-decoration-line-through $20.00
100 |                                     | $18.00
101 |                             // Product actions
102 |                             .card-footer.p-4.pt-0.border-top-0.bg-transparent
103 |                                 .text-center
104 |                                     a.btn.btn-outline-dark.mt-auto(href='#') Add to cart
105 |                     .col.mb-5
106 |                         .card.h-100
107 |                             // Sale badge
108 |                             .badge.bg-dark.text-white.position-absolute(style='top: 0.5rem; right: 0.5rem;') Sale
109 |                             // Product image
110 |                             img.card-img-top(src='https://dummyimage.com/450x300/dee2e6/6c757d.jpg', alt='...')
111 |                             // Product details
112 |                             .card-body.p-4
113 |                                 .text-center
114 |                                     // Product name
115 |                                     h5.fw-bolder Sale Item
116 |                                     // Product price
117 |                                     span.text-muted.text-decoration-line-through $50.00
118 |                                     | $25.00
119 |                             // Product actions
120 |                             .card-footer.p-4.pt-0.border-top-0.bg-transparent
121 |                                 .text-center
122 |                                     a.btn.btn-outline-dark.mt-auto(href='#') Add to cart
123 |                     .col.mb-5
124 |                         .card.h-100
125 |                             // Product image
126 |                             img.card-img-top(src='https://dummyimage.com/450x300/dee2e6/6c757d.jpg', alt='...')
127 |                             // Product details
128 |                             .card-body.p-4
129 |                                 .text-center
130 |                                     // Product name
131 |                                     h5.fw-bolder Popular Item
132 |                                     // Product reviews
133 |                                     .d-flex.justify-content-center.small.text-warning.mb-2
134 |                                         .bi-star-fill
135 |                                         .bi-star-fill
136 |                                         .bi-star-fill
137 |                                         .bi-star-fill
138 |                                         .bi-star-fill
139 |                                     // Product price
140 |                                     | $40.00
141 |                             // Product actions
142 |                             .card-footer.p-4.pt-0.border-top-0.bg-transparent
143 |                                 .text-center
144 |                                     a.btn.btn-outline-dark.mt-auto(href='#') Add to cart
145 |                     .col.mb-5
146 |                         .card.h-100
147 |                             // Sale badge
148 |                             .badge.bg-dark.text-white.position-absolute(style='top: 0.5rem; right: 0.5rem;') Sale
149 |                             // Product image
150 |                             img.card-img-top(src='https://dummyimage.com/450x300/dee2e6/6c757d.jpg', alt='...')
151 |                             // Product details
152 |                             .card-body.p-4
153 |                                 .text-center
154 |                                     // Product name
155 |                                     h5.fw-bolder Sale Item
156 |                                     // Product price
157 |                                     span.text-muted.text-decoration-line-through $50.00
158 |                                     | $25.00
159 |                             // Product actions
160 |                             .card-footer.p-4.pt-0.border-top-0.bg-transparent
161 |                                 .text-center
162 |                                     a.btn.btn-outline-dark.mt-auto(href='#') Add to cart
163 |                     .col.mb-5
164 |                         .card.h-100
165 |                             // Product image
166 |                             img.card-img-top(src='https://dummyimage.com/450x300/dee2e6/6c757d.jpg', alt='...')
167 |                             // Product details
168 |                             .card-body.p-4
169 |                                 .text-center
170 |                                     // Product name
171 |                                     h5.fw-bolder Fancy Product
172 |                                     // Product price
173 |                                     | $120.00 - $280.00
174 |                             // Product actions
175 |                             .card-footer.p-4.pt-0.border-top-0.bg-transparent
176 |                                 .text-center
177 |                                     a.btn.btn-outline-dark.mt-auto(href='#') View options
178 |                     .col.mb-5
179 |                         .card.h-100
180 |                             // Sale badge
181 |                             .badge.bg-dark.text-white.position-absolute(style='top: 0.5rem; right: 0.5rem;') Sale
182 |                             // Product image
183 |                             img.card-img-top(src='https://dummyimage.com/450x300/dee2e6/6c757d.jpg', alt='...')
184 |                             // Product details
185 |                             .card-body.p-4
186 |                                 .text-center
187 |                                     // Product name
188 |                                     h5.fw-bolder Special Item
189 |                                     // Product reviews
190 |                                     .d-flex.justify-content-center.small.text-warning.mb-2
191 |                                         .bi-star-fill
192 |                                         .bi-star-fill
193 |                                         .bi-star-fill
194 |                                         .bi-star-fill
195 |                                         .bi-star-fill
196 |                                     // Product price
197 |                                     span.text-muted.text-decoration-line-through $20.00
198 |                                     | $18.00
199 |                             // Product actions
200 |                             .card-footer.p-4.pt-0.border-top-0.bg-transparent
201 |                                 .text-center
202 |                                     a.btn.btn-outline-dark.mt-auto(href='#') Add to cart
203 |                     .col.mb-5
204 |                         .card.h-100
205 |                             // Product image
206 |                             img.card-img-top(src='https://dummyimage.com/450x300/dee2e6/6c757d.jpg', alt='...')
207 |                             // Product details
208 |                             .card-body.p-4
209 |                                 .text-center
210 |                                     // Product name
211 |                                     h5.fw-bolder Popular Item
212 |                                     // Product reviews
213 |                                     .d-flex.justify-content-center.small.text-warning.mb-2
214 |                                         .bi-star-fill
215 |                                         .bi-star-fill
216 |                                         .bi-star-fill
217 |                                         .bi-star-fill
218 |                                         .bi-star-fill
219 |                                     // Product price
220 |                                     | $40.00
221 |                             // Product actions
222 |                             .card-footer.p-4.pt-0.border-top-0.bg-transparent
223 |                                 .text-center
224 |                                     a.btn.btn-outline-dark.mt-auto(href='#') Add to cart
225 | 
226 |         // Footer
227 |         footer.py-5.bg-dark
228 |             .container
229 |                 p.m-0.text-center.text-white Copyright &copy; Your Website 2023
230 | 
231 |         // Bootstrap core JS
232 |         script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js')
233 | 
234 |         // Core theme JS
235 |         script(src='js/scripts.js')


--------------------------------------------------------------------------------
/dist/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, shrink-to-fit=no" />
  6 |         <meta name="description" content="" />
  7 |         <meta name="author" content="" />
  8 |         <title>Shop Homepage - Start Bootstrap Template</title>
  9 |         <!-- Favicon-->
 10 |         <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
 11 |         <!-- Bootstrap icons-->
 12 |         <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
 13 |         <!-- Core theme CSS (includes Bootstrap)-->
 14 |         <link href="css/styles.css" rel="stylesheet" />
 15 |     </head>
 16 |     <body>
 17 |         <!-- Navigation-->
 18 |         <nav class="navbar navbar-expand-lg navbar-light bg-light">
 19 |             <div class="container px-4 px-lg-5">
 20 |                 <a class="navbar-brand" href="#!">Start Bootstrap</a>
 21 |                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
 22 |                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
 23 |                     <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4">
 24 |                         <li class="nav-item"><a class="nav-link active" aria-current="page" href="#!">Home</a></li>
 25 |                         <li class="nav-item"><a class="nav-link" href="#!">About</a></li>
 26 |                         <li class="nav-item dropdown">
 27 |                             <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Shop</a>
 28 |                             <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 29 |                                 <li><a class="dropdown-item" href="#!">All Products</a></li>
 30 |                                 <li><hr class="dropdown-divider" /></li>
 31 |                                 <li><a class="dropdown-item" href="#!">Popular Items</a></li>
 32 |                                 <li><a class="dropdown-item" href="#!">New Arrivals</a></li>
 33 |                             </ul>
 34 |                         </li>
 35 |                     </ul>
 36 |                     <form class="d-flex">
 37 |                         <button class="btn btn-outline-dark" type="submit">
 38 |                             <i class="bi-cart-fill me-1"></i>
 39 |                             Cart
 40 |                             <span class="badge bg-dark text-white ms-1 rounded-pill">0</span>
 41 |                         </button>
 42 |                     </form>
 43 |                 </div>
 44 |             </div>
 45 |         </nav>
 46 |         <!-- Header-->
 47 |         <header class="bg-dark py-5">
 48 |             <div class="container px-4 px-lg-5 my-5">
 49 |                 <div class="text-center text-white">
 50 |                     <h1 class="display-4 fw-bolder">Shop in style</h1>
 51 |                     <p class="lead fw-normal text-white-50 mb-0">With this shop hompeage template</p>
 52 |                 </div>
 53 |             </div>
 54 |         </header>
 55 |         <!-- Section-->
 56 |         <section class="py-5">
 57 |             <div class="container px-4 px-lg-5 mt-5">
 58 |                 <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
 59 |                     <div class="col mb-5">
 60 |                         <div class="card h-100">
 61 |                             <!-- Product image-->
 62 |                             <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
 63 |                             <!-- Product details-->
 64 |                             <div class="card-body p-4">
 65 |                                 <div class="text-center">
 66 |                                     <!-- Product name-->
 67 |                                     <h5 class="fw-bolder">Fancy Product</h5>
 68 |                                     <!-- Product price-->
 69 |                                     $40.00 - $80.00
 70 |                                 </div>
 71 |                             </div>
 72 |                             <!-- Product actions-->
 73 |                             <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
 74 |                                 <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
 75 |                             </div>
 76 |                         </div>
 77 |                     </div>
 78 |                     <div class="col mb-5">
 79 |                         <div class="card h-100">
 80 |                             <!-- Sale badge-->
 81 |                             <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
 82 |                             <!-- Product image-->
 83 |                             <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
 84 |                             <!-- Product details-->
 85 |                             <div class="card-body p-4">
 86 |                                 <div class="text-center">
 87 |                                     <!-- Product name-->
 88 |                                     <h5 class="fw-bolder">Special Item</h5>
 89 |                                     <!-- Product reviews-->
 90 |                                     <div class="d-flex justify-content-center small text-warning mb-2">
 91 |                                         <div class="bi-star-fill"></div>
 92 |                                         <div class="bi-star-fill"></div>
 93 |                                         <div class="bi-star-fill"></div>
 94 |                                         <div class="bi-star-fill"></div>
 95 |                                         <div class="bi-star-fill"></div>
 96 |                                     </div>
 97 |                                     <!-- Product price-->
 98 |                                     <span class="text-muted text-decoration-line-through">$20.00</span>
 99 |                                     $18.00
100 |                                 </div>
101 |                             </div>
102 |                             <!-- Product actions-->
103 |                             <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
104 |                                 <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
105 |                             </div>
106 |                         </div>
107 |                     </div>
108 |                     <div class="col mb-5">
109 |                         <div class="card h-100">
110 |                             <!-- Sale badge-->
111 |                             <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
112 |                             <!-- Product image-->
113 |                             <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
114 |                             <!-- Product details-->
115 |                             <div class="card-body p-4">
116 |                                 <div class="text-center">
117 |                                     <!-- Product name-->
118 |                                     <h5 class="fw-bolder">Sale Item</h5>
119 |                                     <!-- Product price-->
120 |                                     <span class="text-muted text-decoration-line-through">$50.00</span>
121 |                                     $25.00
122 |                                 </div>
123 |                             </div>
124 |                             <!-- Product actions-->
125 |                             <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
126 |                                 <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
127 |                             </div>
128 |                         </div>
129 |                     </div>
130 |                     <div class="col mb-5">
131 |                         <div class="card h-100">
132 |                             <!-- Product image-->
133 |                             <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
134 |                             <!-- Product details-->
135 |                             <div class="card-body p-4">
136 |                                 <div class="text-center">
137 |                                     <!-- Product name-->
138 |                                     <h5 class="fw-bolder">Popular Item</h5>
139 |                                     <!-- Product reviews-->
140 |                                     <div class="d-flex justify-content-center small text-warning mb-2">
141 |                                         <div class="bi-star-fill"></div>
142 |                                         <div class="bi-star-fill"></div>
143 |                                         <div class="bi-star-fill"></div>
144 |                                         <div class="bi-star-fill"></div>
145 |                                         <div class="bi-star-fill"></div>
146 |                                     </div>
147 |                                     <!-- Product price-->
148 |                                     $40.00
149 |                                 </div>
150 |                             </div>
151 |                             <!-- Product actions-->
152 |                             <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
153 |                                 <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
154 |                             </div>
155 |                         </div>
156 |                     </div>
157 |                     <div class="col mb-5">
158 |                         <div class="card h-100">
159 |                             <!-- Sale badge-->
160 |                             <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
161 |                             <!-- Product image-->
162 |                             <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
163 |                             <!-- Product details-->
164 |                             <div class="card-body p-4">
165 |                                 <div class="text-center">
166 |                                     <!-- Product name-->
167 |                                     <h5 class="fw-bolder">Sale Item</h5>
168 |                                     <!-- Product price-->
169 |                                     <span class="text-muted text-decoration-line-through">$50.00</span>
170 |                                     $25.00
171 |                                 </div>
172 |                             </div>
173 |                             <!-- Product actions-->
174 |                             <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
175 |                                 <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
176 |                             </div>
177 |                         </div>
178 |                     </div>
179 |                     <div class="col mb-5">
180 |                         <div class="card h-100">
181 |                             <!-- Product image-->
182 |                             <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
183 |                             <!-- Product details-->
184 |                             <div class="card-body p-4">
185 |                                 <div class="text-center">
186 |                                     <!-- Product name-->
187 |                                     <h5 class="fw-bolder">Fancy Product</h5>
188 |                                     <!-- Product price-->
189 |                                     $120.00 - $280.00
190 |                                 </div>
191 |                             </div>
192 |                             <!-- Product actions-->
193 |                             <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
194 |                                 <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
195 |                             </div>
196 |                         </div>
197 |                     </div>
198 |                     <div class="col mb-5">
199 |                         <div class="card h-100">
200 |                             <!-- Sale badge-->
201 |                             <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
202 |                             <!-- Product image-->
203 |                             <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
204 |                             <!-- Product details-->
205 |                             <div class="card-body p-4">
206 |                                 <div class="text-center">
207 |                                     <!-- Product name-->
208 |                                     <h5 class="fw-bolder">Special Item</h5>
209 |                                     <!-- Product reviews-->
210 |                                     <div class="d-flex justify-content-center small text-warning mb-2">
211 |                                         <div class="bi-star-fill"></div>
212 |                                         <div class="bi-star-fill"></div>
213 |                                         <div class="bi-star-fill"></div>
214 |                                         <div class="bi-star-fill"></div>
215 |                                         <div class="bi-star-fill"></div>
216 |                                     </div>
217 |                                     <!-- Product price-->
218 |                                     <span class="text-muted text-decoration-line-through">$20.00</span>
219 |                                     $18.00
220 |                                 </div>
221 |                             </div>
222 |                             <!-- Product actions-->
223 |                             <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
224 |                                 <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
225 |                             </div>
226 |                         </div>
227 |                     </div>
228 |                     <div class="col mb-5">
229 |                         <div class="card h-100">
230 |                             <!-- Product image-->
231 |                             <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
232 |                             <!-- Product details-->
233 |                             <div class="card-body p-4">
234 |                                 <div class="text-center">
235 |                                     <!-- Product name-->
236 |                                     <h5 class="fw-bolder">Popular Item</h5>
237 |                                     <!-- Product reviews-->
238 |                                     <div class="d-flex justify-content-center small text-warning mb-2">
239 |                                         <div class="bi-star-fill"></div>
240 |                                         <div class="bi-star-fill"></div>
241 |                                         <div class="bi-star-fill"></div>
242 |                                         <div class="bi-star-fill"></div>
243 |                                         <div class="bi-star-fill"></div>
244 |                                     </div>
245 |                                     <!-- Product price-->
246 |                                     $40.00
247 |                                 </div>
248 |                             </div>
249 |                             <!-- Product actions-->
250 |                             <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
251 |                                 <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
252 |                             </div>
253 |                         </div>
254 |                     </div>
255 |                 </div>
256 |             </div>
257 |         </section>
258 |         <!-- Footer-->
259 |         <footer class="py-5 bg-dark">
260 |             <div class="container"><p class="m-0 text-center text-white">Copyright &copy; Your Website 2023</p></div>
261 |         </footer>
262 |         <!-- Bootstrap core JS-->
263 |         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
264 |         <!-- Core theme JS-->
265 |         <script src="js/scripts.js"></script>
266 |     </body>
267 | </html>
268 | 


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