├── .gitignore ├── LICENSE ├── README.md ├── dist ├── assets │ ├── favicon.ico │ └── img │ │ ├── bg-masthead.jpg │ │ ├── bg-showcase-1.jpg │ │ ├── bg-showcase-2.jpg │ │ ├── bg-showcase-3.jpg │ │ ├── testimonials-1.jpg │ │ ├── testimonials-2.jpg │ │ └── testimonials-3.jpg ├── css │ └── styles.css ├── index.html └── js │ └── scripts.js ├── package-lock.json ├── package.json ├── scripts ├── build-assets.js ├── build-pug.js ├── build-scripts.js ├── build-scss.js ├── clean.js ├── render-assets.js ├── render-pug.js ├── render-scripts.js ├── render-scss.js ├── sb-watch.js ├── start-debug.js └── start.js └── src ├── assets ├── favicon.ico └── img │ ├── bg-masthead.jpg │ ├── bg-showcase-1.jpg │ ├── bg-showcase-2.jpg │ ├── bg-showcase-3.jpg │ ├── testimonials-1.jpg │ ├── testimonials-2.jpg │ └── testimonials-3.jpg ├── js └── scripts.js ├── pug └── index.pug └── scss ├── _global.scss ├── _variables.scss ├── components └── _icons.scss ├── sections ├── _call-to-action.scss ├── _footer.scss ├── _masthead.scss ├── _showcase.scss └── _testimonials.scss ├── styles.scss └── variables ├── _colors.scss ├── _forms.scss └── _typography.scss /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Start Bootstrap - Landing Page](https://startbootstrap.com/theme/landing-page/) 2 | 3 | [Landing Page](https://startbootstrap.com/theme/landing-page/) is a multipurpose landing page template for [Bootstrap](https://getbootstrap.com/) created by [Start Bootstrap](https://startbootstrap.com/). 4 | 5 | ## Preview 6 | 7 | [![Landing Page Preview](https://assets.startbootstrap.com/img/screenshots/themes/landing-page.png)](https://startbootstrap.github.io/startbootstrap-landing-page/) 8 | 9 | **[View Live Preview](https://startbootstrap.github.io/startbootstrap-landing-page/)** 10 | 11 | ## Status 12 | 13 | [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/StartBootstrap/startbootstrap-landing-page/master/LICENSE) 14 | [![npm version](https://img.shields.io/npm/v/startbootstrap-landing-page.svg)](https://www.npmjs.com/package/startbootstrap-landing-page) 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/theme/landing-page/) 21 | * Install via npm: `npm i startbootstrap-landing-page` 22 | * Clone the repo: `git clone https://github.com/StartBootstrap/startbootstrap-landing-page.git` 23 | * [Fork, Clone, or Download on GitHub](https://github.com/StartBootstrap/startbootstrap-landing-page) 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-landing-page/issues) here on GitHub or leave a comment on the [template overview page at Start Bootstrap](https://startbootstrap.com/theme/landing-page/). 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 | * 57 | * 58 | 59 | Start Bootstrap was created by and is maintained by **[David Miller](https://davidmiller.io/)**. 60 | 61 | * 62 | * 63 | * 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-landing-page/blob/master/LICENSE) license. 70 | -------------------------------------------------------------------------------- /dist/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-landing-page/247a46a2503c91d1157179eab297953438ec498b/dist/assets/favicon.ico -------------------------------------------------------------------------------- /dist/assets/img/bg-masthead.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-landing-page/247a46a2503c91d1157179eab297953438ec498b/dist/assets/img/bg-masthead.jpg -------------------------------------------------------------------------------- /dist/assets/img/bg-showcase-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-landing-page/247a46a2503c91d1157179eab297953438ec498b/dist/assets/img/bg-showcase-1.jpg -------------------------------------------------------------------------------- /dist/assets/img/bg-showcase-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-landing-page/247a46a2503c91d1157179eab297953438ec498b/dist/assets/img/bg-showcase-2.jpg -------------------------------------------------------------------------------- /dist/assets/img/bg-showcase-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-landing-page/247a46a2503c91d1157179eab297953438ec498b/dist/assets/img/bg-showcase-3.jpg -------------------------------------------------------------------------------- /dist/assets/img/testimonials-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-landing-page/247a46a2503c91d1157179eab297953438ec498b/dist/assets/img/testimonials-1.jpg -------------------------------------------------------------------------------- /dist/assets/img/testimonials-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-landing-page/247a46a2503c91d1157179eab297953438ec498b/dist/assets/img/testimonials-2.jpg -------------------------------------------------------------------------------- /dist/assets/img/testimonials-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-landing-page/247a46a2503c91d1157179eab297953438ec498b/dist/assets/img/testimonials-3.jpg -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Landing Page - Start Bootstrap Theme 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 26 | 27 |
28 |
29 |
30 |
31 |
32 | 33 |

Generate more leads with a professional landing page!

34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 69 |
70 |
71 |
72 |
73 |
74 | 75 |
76 |
77 |
78 |
79 |
80 |
81 |

Fully Responsive

82 |

This theme will look great on any device, no matter the size!

83 |
84 |
85 |
86 |
87 |
88 |

Bootstrap 5 Ready

89 |

Featuring the latest build of the new Bootstrap 5 framework!

90 |
91 |
92 |
93 |
94 |
95 |

Easy to Use

96 |

Ready to use with your own content, or customize the source files!

97 |
98 |
99 |
100 |
101 |
102 | 103 |
104 |
105 |
106 |
107 |
108 |

Fully Responsive Design

109 |

When you use a theme created by Start Bootstrap, you know that the theme will look great on any device, whether it's a phone, tablet, or desktop the page will behave responsively!

110 |
111 |
112 |
113 |
114 |
115 |

Updated For Bootstrap 5

116 |

Newly improved, and full of great utility classes, Bootstrap 5 is leading the way in mobile responsive web development! All of the themes on Start Bootstrap are now using Bootstrap 5!

117 |
118 |
119 |
120 |
121 |
122 |

Easy to Use & Customize

123 |

Landing Page is just HTML and CSS with a splash of SCSS for users who demand some deeper customization options. Out of the box, just add your content and images, and your new landing page will be ready to go!

124 |
125 |
126 |
127 |
128 | 129 |
130 |
131 |

What people are saying...

132 |
133 |
134 |
135 | ... 136 |
Margaret E.
137 |

"This is fantastic! Thanks so much guys!"

138 |
139 |
140 |
141 |
142 | ... 143 |
Fred S.
144 |

"Bootstrap is amazing. I've been using it to create lots of super nice landing pages."

145 |
146 |
147 |
148 |
149 | ... 150 |
Sarah W.
151 |

"Thanks so much for making these free resources available to us!"

152 |
153 |
154 |
155 |
156 |
157 | 158 |
159 |
160 |
161 |
162 |

Ready to get started? Sign up now!

163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 198 |
199 |
200 |
201 |
202 | 203 |
204 |
205 |
206 |
207 | 216 |

© Your Website 2023. All Rights Reserved.

217 |
218 |
219 |
    220 |
  • 221 | 222 |
    • 223 |
  • 224 | 225 |
    • 226 |
  • 227 | 228 |
    • 229 |
230 |
231 |
232 |
233 |
234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | -------------------------------------------------------------------------------- /dist/js/scripts.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Start Bootstrap - Landing Page v6.0.6 (https://startbootstrap.com/theme/landing-page) 3 | * Copyright 2013-2023 Start Bootstrap 4 | * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-landing-page/blob/master/LICENSE) 5 | */ 6 | // This file is intentionally blank 7 | // Use this file to add JavaScript to your project -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Landing Page", 3 | "name": "startbootstrap-landing-page", 4 | "version": "6.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": "An HTML landing page template built with Bootstrap", 16 | "keywords": [ 17 | "css", 18 | "sass", 19 | "html", 20 | "responsive", 21 | "theme", 22 | "template" 23 | ], 24 | "homepage": "https://startbootstrap.com/theme/landing-page", 25 | "bugs": { 26 | "url": "https://github.com/StartBootstrap/startbootstrap-landing-page/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-landing-page.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/build-assets.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const renderAssets = require('./render-assets'); 4 | 5 | renderAssets(); -------------------------------------------------------------------------------- /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/build-scripts.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const renderScripts = require('./render-scripts'); 4 | 5 | renderScripts(); -------------------------------------------------------------------------------- /scripts/build-scss.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const renderSCSS = require('./render-scss'); 4 | 5 | renderSCSS(); 6 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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-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 | }; -------------------------------------------------------------------------------- /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 | ` -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /src/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-landing-page/247a46a2503c91d1157179eab297953438ec498b/src/assets/favicon.ico -------------------------------------------------------------------------------- /src/assets/img/bg-masthead.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-landing-page/247a46a2503c91d1157179eab297953438ec498b/src/assets/img/bg-masthead.jpg -------------------------------------------------------------------------------- /src/assets/img/bg-showcase-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-landing-page/247a46a2503c91d1157179eab297953438ec498b/src/assets/img/bg-showcase-1.jpg -------------------------------------------------------------------------------- /src/assets/img/bg-showcase-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-landing-page/247a46a2503c91d1157179eab297953438ec498b/src/assets/img/bg-showcase-2.jpg -------------------------------------------------------------------------------- /src/assets/img/bg-showcase-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-landing-page/247a46a2503c91d1157179eab297953438ec498b/src/assets/img/bg-showcase-3.jpg -------------------------------------------------------------------------------- /src/assets/img/testimonials-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-landing-page/247a46a2503c91d1157179eab297953438ec498b/src/assets/img/testimonials-1.jpg -------------------------------------------------------------------------------- /src/assets/img/testimonials-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-landing-page/247a46a2503c91d1157179eab297953438ec498b/src/assets/img/testimonials-2.jpg -------------------------------------------------------------------------------- /src/assets/img/testimonials-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-landing-page/247a46a2503c91d1157179eab297953438ec498b/src/assets/img/testimonials-3.jpg -------------------------------------------------------------------------------- /src/js/scripts.js: -------------------------------------------------------------------------------- 1 | // This file is intentionally blank 2 | // Use this file to add JavaScript to your project -------------------------------------------------------------------------------- /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 Landing Page - Start Bootstrap Theme 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', type='text/css') 18 | 19 | // Google fonts 20 | link(href='https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic', rel='stylesheet', type='text/css') 21 | 22 | // Core theme CSS (includes Bootstrap) 23 | link(href='css/styles.css', rel='stylesheet') 24 | 25 | body 26 | 27 | // Navigation 28 | nav.navbar.navbar-light.bg-light.static-top 29 | .container 30 | a.navbar-brand(href='#!') Start Bootstrap 31 | a.btn.btn-primary(href='#signup') Sign Up 32 | 33 | // Masthead 34 | header.masthead 35 | .container.position-relative 36 | .row.justify-content-center 37 | .col-xl-6 38 | .text-center.text-white 39 | // Page heading 40 | h1.mb-5 Generate more leads with a professional landing page! 41 | 42 | // Signup form 43 | 44 | // * * * * * * * * * * * * * * * 45 | // * * SB Forms Contact Form * * 46 | // * * * * * * * * * * * * * * * 47 | 48 | // This form is pre-integrated with SB Forms. 49 | // To make this form functional, sign up at 50 | // https://startbootstrap.com/solution/contact-forms 51 | // to get an API token! 52 | 53 | form.form-subscribe#contactForm(data-sb-form-api-token='API_TOKEN') 54 | 55 | // Email address input 56 | .row 57 | .col 58 | input#emailAddress.form-control.form-control-lg(type='email' placeholder='Email Address' data-sb-validations='required,email') 59 | .invalid-feedback.text-white(data-sb-feedback='emailAddress:required') 60 | | Email Address is required. 61 | .invalid-feedback.text-white(data-sb-feedback='emailAddress:email') 62 | | Email Address Email is not valid. 63 | 64 | .col-auto 65 | button#submitButton.btn.btn-primary.btn-lg.disabled(type='submit') Submit 66 | 67 | // Submit success message 68 | // 69 | // This is what your users will see when the form 70 | // has successfully submitted 71 | 72 | #submitSuccessMessage.d-none 73 | .text-center.mb-3 74 | .fw-bolder Form submission successful! 75 | p To activate this form, sign up at 76 | a.text-white(href='https://startbootstrap.com/solution/contact-forms') https://startbootstrap.com/solution/contact-forms 77 | 78 | // Submit error message 79 | // 80 | // This is what your users will see when there is 81 | // an error submitting the form 82 | 83 | #submitErrorMessage.d-none 84 | .text-center.text-danger.mb-3 Error sending message! 85 | 86 | // Icons Grid 87 | section.features-icons.bg-light.text-center 88 | .container 89 | .row 90 | .col-lg-4 91 | .features-icons-item.mx-auto.mb-5.mb-lg-0.mb-lg-3 92 | .features-icons-icon.d-flex 93 | i.bi-window.m-auto.text-primary 94 | h3 Fully Responsive 95 | p.lead.mb-0 This theme will look great on any device, no matter the size! 96 | .col-lg-4 97 | .features-icons-item.mx-auto.mb-5.mb-lg-0.mb-lg-3 98 | .features-icons-icon.d-flex 99 | i.bi-layers.m-auto.text-primary 100 | h3 Bootstrap 5 Ready 101 | p.lead.mb-0 Featuring the latest build of the new Bootstrap 5 framework! 102 | .col-lg-4 103 | .features-icons-item.mx-auto.mb-0.mb-lg-3 104 | .features-icons-icon.d-flex 105 | i.bi-terminal.m-auto.text-primary 106 | h3 Easy to Use 107 | p.lead.mb-0 Ready to use with your own content, or customize the source files! 108 | 109 | // Image Showcases 110 | section.showcase 111 | .container-fluid.p-0 112 | .row.g-0 113 | .col-lg-6.order-lg-2.text-white.showcase-img(style="background-image: url('assets/img/bg-showcase-1.jpg');") 114 | .col-lg-6.order-lg-1.my-auto.showcase-text 115 | h2 Fully Responsive Design 116 | p.lead.mb-0 117 | | When you use a theme created by Start Bootstrap, you know that the theme will look great on any device, whether it's a phone, tablet, or desktop the page will behave responsively! 118 | .row.g-0 119 | .col-lg-6.text-white.showcase-img(style="background-image: url('assets/img/bg-showcase-2.jpg');") 120 | .col-lg-6.my-auto.showcase-text 121 | h2 Updated For Bootstrap 5 122 | p.lead.mb-0 123 | | Newly improved, and full of great utility classes, Bootstrap 5 is leading the way in mobile responsive web development! All of the themes on Start Bootstrap are now using Bootstrap 5! 124 | .row.g-0 125 | .col-lg-6.order-lg-2.text-white.showcase-img(style="background-image: url('assets/img/bg-showcase-3.jpg');") 126 | .col-lg-6.order-lg-1.my-auto.showcase-text 127 | h2 Easy to Use & Customize 128 | p.lead.mb-0 129 | | Landing Page is just HTML and CSS with a splash of SCSS for users who demand some deeper customization options. Out of the box, just add your content and images, and your new landing page will be ready to go! 130 | 131 | // Testimonials 132 | section.testimonials.text-center.bg-light 133 | .container 134 | h2.mb-5 What people are saying... 135 | .row 136 | .col-lg-4 137 | .testimonial-item.mx-auto.mb-5.mb-lg-0 138 | img.img-fluid.rounded-circle.mb-3(src='assets/img/testimonials-1.jpg', alt='...') 139 | h5 Margaret E. 140 | p.font-weight-light.mb-0 "This is fantastic! Thanks so much guys!" 141 | .col-lg-4 142 | .testimonial-item.mx-auto.mb-5.mb-lg-0 143 | img.img-fluid.rounded-circle.mb-3(src='assets/img/testimonials-2.jpg', alt='...') 144 | h5 Fred S. 145 | p.font-weight-light.mb-0 146 | | "Bootstrap is amazing. I've been using it to create lots of super nice landing pages." 147 | .col-lg-4 148 | .testimonial-item.mx-auto.mb-5.mb-lg-0 149 | img.img-fluid.rounded-circle.mb-3(src='assets/img/testimonials-3.jpg', alt='...') 150 | h5 Sarah W. 151 | p.font-weight-light.mb-0 "Thanks so much for making these free resources available to us!" 152 | 153 | // Call to Action 154 | section#signup.call-to-action.text-white.text-center 155 | .container.position-relative 156 | .row.justify-content-center 157 | .col-xl-6 158 | h2.mb-4 Ready to get started? Sign up now! 159 | // Signup form 160 | 161 | // * * * * * * * * * * * * * * * 162 | // * * SB Forms Contact Form * * 163 | // * * * * * * * * * * * * * * * 164 | 165 | // This form is pre-integrated with SB Forms. 166 | // To make this form functional, sign up at 167 | // https://startbootstrap.com/solution/contact-forms 168 | // to get an API token! 169 | 170 | form.form-subscribe#contactFormFooter(data-sb-form-api-token='API_TOKEN') 171 | 172 | // Email address input 173 | .row 174 | .col 175 | input#emailAddressBelow.form-control.form-control-lg(type='email' placeholder='Email Address' data-sb-validations='required,email') 176 | .invalid-feedback.text-white(data-sb-feedback='emailAddressBelow:required') 177 | | Email Address is required. 178 | .invalid-feedback.text-white(data-sb-feedback='emailAddressBelow:email') 179 | | Email Address Email is not valid. 180 | 181 | .col-auto 182 | button#submitButton.btn.btn-primary.btn-lg.disabled(type='submit') Submit 183 | 184 | // Submit success message 185 | // 186 | // This is what your users will see when the form 187 | // has successfully submitted 188 | 189 | #submitSuccessMessage.d-none 190 | .text-center.mb-3 191 | .fw-bolder Form submission successful! 192 | p To activate this form, sign up at 193 | a.text-white(href='https://startbootstrap.com/solution/contact-forms') https://startbootstrap.com/solution/contact-forms 194 | 195 | // Submit error message 196 | // 197 | // This is what your users will see when there is 198 | // an error submitting the form 199 | 200 | #submitErrorMessage.d-none 201 | .text-center.text-danger.mb-3 Error sending message! 202 | 203 | // Footer 204 | footer.footer.bg-light 205 | .container 206 | .row 207 | .col-lg-6.h-100.text-center.text-lg-start.my-auto 208 | ul.list-inline.mb-2 209 | li.list-inline-item 210 | a(href='#!') About 211 | li.list-inline-item ⋅ 212 | li.list-inline-item 213 | a(href='#!') Contact 214 | li.list-inline-item ⋅ 215 | li.list-inline-item 216 | a(href='#!') Terms of Use 217 | li.list-inline-item ⋅ 218 | li.list-inline-item 219 | a(href='#!') Privacy Policy 220 | p.text-muted.small.mb-4.mb-lg-0 © Your Website 2023. All Rights Reserved. 221 | .col-lg-6.h-100.text-center.text-lg-end.my-auto 222 | ul.list-inline.mb-0 223 | li.list-inline-item.me-4 224 | a(href='#!') 225 | i.bi-facebook.fs-3 226 | li.list-inline-item.me-4 227 | a(href='#!') 228 | i.bi-twitter.fs-3 229 | li.list-inline-item 230 | a(href='#!') 231 | i.bi-instagram.fs-3 232 | 233 | // Bootstrap core JS 234 | script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js') 235 | 236 | // Core theme JS 237 | script(src='js/scripts.js') 238 | 239 | // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 240 | // * * SB Forms JS * * 241 | // * * Activate your form at https://startbootstrap.com/solution/contact-forms * * 242 | // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 243 | 244 | script(src='https://cdn.startbootstrap.com/sb-forms-latest.js') -------------------------------------------------------------------------------- /src/scss/_global.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Global 3 | // 4 | 5 | // Use this file to add styling to your theme -------------------------------------------------------------------------------- /src/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Variables 3 | // 4 | 5 | @import "./variables/colors.scss"; 6 | @import "./variables/typography.scss"; 7 | @import "./variables/forms.scss"; -------------------------------------------------------------------------------- /src/scss/components/_icons.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Icons 3 | // 4 | 5 | .features-icons { 6 | padding-top: 7rem; 7 | padding-bottom: 7rem; 8 | 9 | .features-icons-item { 10 | max-width: 20rem; 11 | 12 | .features-icons-icon { 13 | height: 7rem; 14 | 15 | i { 16 | font-size: 4.5rem; 17 | } 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /src/scss/sections/_call-to-action.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Call to action 3 | // 4 | 5 | .call-to-action { 6 | position: relative; 7 | background-color: $gray-800; 8 | background: url('../assets/img/bg-masthead.jpg') no-repeat center center; 9 | background-size: cover; 10 | padding-top: 7rem; 11 | padding-bottom: 7rem; 12 | 13 | &:before { 14 | content: ''; 15 | position: absolute; 16 | background-color: mix($gray-900, $primary, 75%); 17 | height: 100%; 18 | width: 100%; 19 | top: 0; 20 | left: 0; 21 | opacity: 0.5; 22 | } 23 | } -------------------------------------------------------------------------------- /src/scss/sections/_footer.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Footer 3 | // 4 | 5 | footer.footer { 6 | padding-top: 4rem; 7 | padding-bottom: 4rem; 8 | } -------------------------------------------------------------------------------- /src/scss/sections/_masthead.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Masthead 3 | // 4 | 5 | header.masthead { 6 | position: relative; 7 | background-color: $gray-800; 8 | background: url('../assets/img/bg-masthead.jpg') no-repeat center center; 9 | background-size: cover; 10 | padding-top: 8rem; 11 | padding-bottom: 8rem; 12 | 13 | &:before { 14 | content: ''; 15 | position: absolute; 16 | background-color: mix($gray-900, $primary, 75%); 17 | height: 100%; 18 | width: 100%; 19 | top: 0; 20 | left: 0; 21 | opacity: 0.5; 22 | } 23 | 24 | h1 { 25 | font-size: 2rem; 26 | } 27 | 28 | @media (min-width: 768px) { 29 | padding-top: 12rem; 30 | padding-bottom: 12rem; 31 | 32 | h1 { 33 | font-size: 3rem; 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /src/scss/sections/_showcase.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Showcase 3 | // 4 | 5 | .showcase { 6 | .showcase-text { 7 | padding: 3rem; 8 | } 9 | 10 | .showcase-img { 11 | min-height: 30rem; 12 | background-size: cover; 13 | } 14 | 15 | @media (min-width: 768px) { 16 | .showcase-text { 17 | padding: 7rem; 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /src/scss/sections/_testimonials.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Testimonials 3 | // 4 | 5 | .testimonials { 6 | padding-top: 7rem; 7 | padding-bottom: 7rem; 8 | 9 | .testimonial-item { 10 | max-width: 18rem; 11 | 12 | img { 13 | max-width: 12rem; 14 | box-shadow: 0px 5px 5px 0px $gray-500; 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /src/scss/styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Styles 3 | // 4 | 5 | @import "./variables"; 6 | 7 | // Import Bootstrap 8 | @import "bootstrap/scss/bootstrap.scss"; 9 | 10 | // Global CSS 11 | @import "./global"; 12 | 13 | // Components 14 | @import "./components/icons"; 15 | 16 | // Sections 17 | @import "./sections/masthead"; 18 | @import "./sections/showcase"; 19 | @import "./sections/testimonials"; 20 | @import "./sections/call-to-action"; 21 | @import "./sections/footer"; -------------------------------------------------------------------------------- /src/scss/variables/_colors.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Colors 3 | // 4 | 5 | // Use this file to override Bootstrap color defaults 6 | 7 | // Uncomment and build to see example 8 | // $primary: #10ac8a; -------------------------------------------------------------------------------- /src/scss/variables/_forms.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Buttons + Forms 3 | // 4 | // Shared variables that are reassigned to `$input-` and `$btn-` specific variables. 5 | 6 | $input-btn-padding-y: .75rem; 7 | $input-btn-padding-x: 1rem; 8 | 9 | $input-btn-padding-y-sm: .5rem; 10 | $input-btn-padding-x-sm: .75rem; 11 | 12 | $input-btn-padding-y-lg: 1rem; 13 | $input-btn-padding-x-lg: 1.25rem; -------------------------------------------------------------------------------- /src/scss/variables/_typography.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Typography 3 | // 4 | 5 | // Override Bootstrap typography variables 6 | 7 | $font-family-base: "Lato", 8 | -apple-system, 9 | BlinkMacSystemFont, 10 | "Segoe UI", 11 | Roboto, 12 | "Helvetica Neue", 13 | Arial, 14 | sans-serif, 15 | "Apple Color Emoji", 16 | "Segoe UI Emoji", 17 | "Segoe UI Symbol", 18 | "Noto Color Emoji"; 19 | 20 | $headings-font-weight: 700; --------------------------------------------------------------------------------