├── .gitignore ├── src ├── js │ └── scripts.js ├── assets │ └── favicon.ico ├── scss │ └── styles.scss └── 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 ├── LICENSE ├── package.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store -------------------------------------------------------------------------------- /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-business-frontpage/HEAD/src/assets/favicon.ico -------------------------------------------------------------------------------- /dist/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-business-frontpage/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 | -------------------------------------------------------------------------------- /src/scss/styles.scss: -------------------------------------------------------------------------------- 1 | // Import Bootstrap 2 | @import "bootstrap/scss/bootstrap.scss"; 3 | 4 | // Custom SCSS for feature component with Bootstrap icon 5 | .feature { 6 | display: inline-flex; 7 | align-items: center; 8 | justify-content: center; 9 | height: 4rem; 10 | width: 4rem; 11 | font-size: 2rem; 12 | } -------------------------------------------------------------------------------- /dist/js/scripts.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Start Bootstrap - Business Frontpage v5.0.9 (https://startbootstrap.com/template/business-frontpage) 3 | * Copyright 2013-2023 Start Bootstrap 4 | * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-business-frontpage/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": "Business Frontpage", 3 | "name": "startbootstrap-business-frontpage", 4 | "version": "5.0.9", 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 simple business HTML landing page built with Bootstrap", 16 | "keywords": [ 17 | "css", 18 | "sass", 19 | "html", 20 | "responsive", 21 | "theme", 22 | "template" 23 | ], 24 | "homepage": "https://startbootstrap.com/template/business-frontpage", 25 | "bugs": { 26 | "url": "https://github.com/StartBootstrap/startbootstrap-business-frontpage/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-business-frontpage.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 - Business Frontpage](https://startbootstrap.com/template/business-frontpage/) 2 | 3 | [Business Frontpage](https://startbootstrap.com/template/business-frontpage/) is a basic business website template for [Bootstrap](https://getbootstrap.com/) created by [Start Bootstrap](https://startbootstrap.com/). 4 | 5 | ## Preview 6 | 7 | [![Business Frontpage Preview](https://assets.startbootstrap.com/img/screenshots/templates/business-frontpage.png)](https://startbootstrap.github.io/startbootstrap-business-frontpage/) 8 | 9 | **[View Live Preview](https://startbootstrap.github.io/startbootstrap-business-frontpage/)** 10 | 11 | ## Status 12 | 13 | [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/StartBootstrap/startbootstrap-business-frontpage/master/LICENSE) 14 | [![npm version](https://img.shields.io/npm/v/startbootstrap-business-frontpage.svg)](https://www.npmjs.com/package/startbootstrap-business-frontpage) 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/business-frontpage/) 21 | * Install via npm: `npm i startbootstrap-business-frontpage` 22 | * Clone the repo: `git clone https://github.com/StartBootstrap/startbootstrap-business-frontpage.git` 23 | * [Fork, Clone, or Download on GitHub](https://github.com/StartBootstrap/startbootstrap-business-frontpage) 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 | ### Contact Form 49 | 50 | The contact form available with this theme is prebuilt to use [SB Forms](https://startbootstrap.com/solution/contact-forms). 51 | SB Forms is a simple form solution for adding functional forms to your theme. Since this theme is prebuilt using our 52 | SB Forms markup, all you need to do is sign up for [SB Forms on Start Bootstrap](https://startbootstrap.com/solution/contact-forms). 53 | 54 | After signing up you will need to set the domain name your form will be used on, and you will then see your 55 | access key. Copy this and paste it into the `data-sb-form-api-token='API_TOKEN'` data attribute in place of 56 | `API_TOKEN`. That's it! Your forms will be up and running! 57 | 58 | If you aren't using SB Forms, simply delete the custom data attributes from the form, and remove the link above the 59 | closing `` tag to SB Forms. 60 | 61 | ## Bugs and Issues 62 | 63 | Have a bug or an issue with this template? [Open a new issue](https://github.com/StartBootstrap/startbootstrap-business-frontpage/issues) here on GitHub or leave a comment on the [template overview page at Start Bootstrap](https://startbootstrap.com/template/business-frontpage/). 64 | 65 | ## About 66 | 67 | 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. 68 | 69 | * 70 | * 71 | 72 | Start Bootstrap was created by and is maintained by **[David Miller](https://davidmiller.io/)**. 73 | 74 | * 75 | * 76 | * 77 | 78 | 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). 79 | 80 | ## Copyright and License 81 | 82 | Copyright 2013-2023 Start Bootstrap LLC. Code released under the [MIT](https://github.com/StartBootstrap/startbootstrap-business-frontpage/blob/master/LICENSE) license. 83 | -------------------------------------------------------------------------------- /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 Business Frontpage - 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.4.1/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 | // Responsive navbar 25 | nav.navbar.navbar-expand-lg.navbar-dark.bg-dark 26 | .container.px-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.ms-auto.mb-2.mb-lg-0 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 37 | a.nav-link(href='#!') Contact 38 | li.nav-item 39 | a.nav-link(href='#!') Services 40 | 41 | // Header 42 | header.bg-dark.py-5 43 | .container.px-5 44 | .row.gx-5.justify-content-center 45 | .col-lg-6 46 | .text-center.my-5 47 | h1.display-5.fw-bolder.text-white.mb-2 Present your business in a whole new way 48 | p.lead.text-white-50.mb-4 Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit! 49 | .d-grid.gap-3.d-sm-flex.justify-content-sm-center 50 | a.btn.btn-primary.btn-lg.px-4.me-sm-3(href='#features') Get Started 51 | a.btn.btn-outline-light.btn-lg.px-4(href='#!') Learn More 52 | 53 | // Features section 54 | section#features.py-5.border-bottom 55 | .container.px-5.my-5 56 | .row.gx-5 57 | .col-lg-4.mb-5.mb-lg-0 58 | .feature.bg-primary.bg-gradient.text-white.rounded-3.mb-3 59 | i.bi.bi-collection 60 | h2.h4.fw-bolder Featured title 61 | p 62 | | Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words. 63 | a.text-decoration-none(href='#!') 64 | | Call to action 65 | i.bi.bi-arrow-right 66 | .col-lg-4.mb-5.mb-lg-0 67 | .feature.bg-primary.bg-gradient.text-white.rounded-3.mb-3 68 | i.bi.bi-building 69 | h2.h4.fw-bolder Featured title 70 | p 71 | | Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words. 72 | a.text-decoration-none(href='#!') 73 | | Call to action 74 | i.bi.bi-arrow-right 75 | .col-lg-4 76 | .feature.bg-primary.bg-gradient.text-white.rounded-3.mb-3 77 | i.bi.bi-toggles2 78 | h2.h4.fw-bolder Featured title 79 | p 80 | | Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words. 81 | a.text-decoration-none(href='#!') 82 | | Call to action 83 | i.bi.bi-arrow-right 84 | 85 | // Pricing section 86 | section.bg-light.py-5.border-bottom 87 | .container.px-5.my-5 88 | .text-center.mb-5 89 | h2.fw-bolder Pay as you grow 90 | p.lead.mb-0 With our no hassle pricing plans 91 | .row.gx-5.justify-content-center 92 | // Pricing card free 93 | .col-lg-6.col-xl-4 94 | .card.mb-5.mb-xl-0 95 | .card-body.p-5 96 | .small.text-uppercase.fw-bold.text-muted Free 97 | .mb-3 98 | span.display-4.fw-bold $0 99 | span.text-muted / mo. 100 | ul.list-unstyled.mb-4 101 | li.mb-2 102 | i.bi.bi-check.text-primary 103 | strong 1 users 104 | li.mb-2 105 | i.bi.bi-check.text-primary 106 | | 5GB storage 107 | li.mb-2 108 | i.bi.bi-check.text-primary 109 | | Unlimited public projects 110 | li.mb-2 111 | i.bi.bi-check.text-primary 112 | | Community access 113 | li.mb-2.text-muted 114 | i.bi.bi-x 115 | | Unlimited private projects 116 | li.mb-2.text-muted 117 | i.bi.bi-x 118 | | Dedicated support 119 | li.mb-2.text-muted 120 | i.bi.bi-x 121 | | Free linked domain 122 | li.text-muted 123 | i.bi.bi-x 124 | | Monthly status reports 125 | .d-grid 126 | a.btn.btn-outline-primary(href='#!') Choose plan 127 | // Pricing card pro 128 | .col-lg-6.col-xl-4 129 | .card.mb-5.mb-xl-0 130 | .card-body.p-5 131 | .small.text-uppercase.fw-bold 132 | i.bi.bi-star-fill.text-warning 133 | | Pro 134 | .mb-3 135 | span.display-4.fw-bold $9 136 | span.text-muted / mo. 137 | ul.list-unstyled.mb-4 138 | li.mb-2 139 | i.bi.bi-check.text-primary 140 | strong 5 users 141 | li.mb-2 142 | i.bi.bi-check.text-primary 143 | | 5GB storage 144 | li.mb-2 145 | i.bi.bi-check.text-primary 146 | | Unlimited public projects 147 | li.mb-2 148 | i.bi.bi-check.text-primary 149 | | Community access 150 | li.mb-2 151 | i.bi.bi-check.text-primary 152 | | Unlimited private projects 153 | li.mb-2 154 | i.bi.bi-check.text-primary 155 | | Dedicated support 156 | li.mb-2 157 | i.bi.bi-check.text-primary 158 | | Free linked domain 159 | li.text-muted 160 | i.bi.bi-x 161 | | Monthly status reports 162 | .d-grid 163 | a.btn.btn-primary(href='#!') Choose plan 164 | // Pricing card enterprise 165 | .col-lg-6.col-xl-4 166 | .card 167 | .card-body.p-5 168 | .small.text-uppercase.fw-bold.text-muted Enterprise 169 | .mb-3 170 | span.display-4.fw-bold $49 171 | span.text-muted / mo. 172 | ul.list-unstyled.mb-4 173 | li.mb-2 174 | i.bi.bi-check.text-primary 175 | strong Unlimited users 176 | li.mb-2 177 | i.bi.bi-check.text-primary 178 | | 5GB storage 179 | li.mb-2 180 | i.bi.bi-check.text-primary 181 | | Unlimited public projects 182 | li.mb-2 183 | i.bi.bi-check.text-primary 184 | | Community access 185 | li.mb-2 186 | i.bi.bi-check.text-primary 187 | | Unlimited private projects 188 | li.mb-2 189 | i.bi.bi-check.text-primary 190 | | Dedicated support 191 | li.mb-2 192 | i.bi.bi-check.text-primary 193 | strong Unlimited 194 | | linked domains 195 | li.text-muted 196 | i.bi.bi-check.text-primary 197 | | Monthly status reports 198 | .d-grid 199 | a.btn.btn-outline-primary(href='#!') Choose plan 200 | 201 | // Testimonials section 202 | section.py-5.border-bottom 203 | .container.px-5.my-5.px-5 204 | .text-center.mb-5 205 | h2.fw-bolder Customer testimonials 206 | p.lead.mb-0 Our customers love working with us 207 | .row.gx-5.justify-content-center 208 | .col-lg-6 209 | // Testimonial 1 210 | .card.mb-4 211 | .card-body.p-4 212 | .d-flex 213 | .flex-shrink-0 214 | i.bi.bi-chat-right-quote-fill.text-primary.fs-1 215 | .ms-4 216 | p.mb-1 Thank you for putting together such a great product. We loved working with you and the whole team, and we will be recommending you to others! 217 | .small.text-muted - Client Name, Location 218 | // Testimonial 2 219 | .card 220 | .card-body.p-4 221 | .d-flex 222 | .flex-shrink-0 223 | i.bi.bi-chat-right-quote-fill.text-primary.fs-1 224 | .ms-4 225 | p.mb-1 The whole team was a huge help with putting things together for our company and brand. We will be hiring them again in the near future for additional work! 226 | .small.text-muted - Client Name, Location 227 | 228 | // Contact section 229 | section.bg-light.py-5 230 | .container.px-5.my-5.px-5 231 | .text-center.mb-5 232 | .feature.bg-primary.bg-gradient.text-white.rounded-3.mb-3 233 | i.bi.bi-envelope 234 | h2.fw-bolder Get in touch 235 | p.lead.mb-0 We'd love to hear from you 236 | .row.gx-5.justify-content-center 237 | .col-lg-6 238 | 239 | // * * * * * * * * * * * * * * * 240 | // * * SB Forms Contact Form * * 241 | // * * * * * * * * * * * * * * * 242 | 243 | // This form is pre-integrated with SB Forms. 244 | // To make this form functional, sign up at 245 | // https://startbootstrap.com/solution/contact-forms 246 | // to get an API token! 247 | 248 | form#contactForm(data-sb-form-api-token='API_TOKEN') 249 | 250 | // Name input 251 | .form-floating.mb-3 252 | input#name.form-control( 253 | type='text', 254 | placeholder='Enter your name...' 255 | data-sb-validations='required' 256 | ) 257 | label(for='name') Full name 258 | .invalid-feedback(data-sb-feedback='name:required') 259 | | A name is required. 260 | 261 | // Email address input 262 | .form-floating.mb-3 263 | input#email.form-control( 264 | type='email', 265 | placeholder='name@example.com' 266 | data-sb-validations='required,email' 267 | ) 268 | label(for='email') Email address 269 | .invalid-feedback(data-sb-feedback='email:required') 270 | | An email is required. 271 | .invalid-feedback(data-sb-feedback='email:email') 272 | | Email is not valid. 273 | 274 | // Phone number input 275 | .form-floating.mb-3 276 | input#phone.form-control( 277 | type='tel', 278 | placeholder='(123) 456-7890' 279 | data-sb-validations='required' 280 | ) 281 | label(for='phone') Phone number 282 | .invalid-feedback(data-sb-feedback='phone:required') 283 | | A phone number is required. 284 | 285 | // Message input 286 | .form-floating.mb-3 287 | textarea#message.form-control( 288 | type='text', 289 | placeholder='Enter your message here...', 290 | style='height: 10rem;' 291 | data-sb-validations='required' 292 | ) 293 | label(for='message') Message 294 | .invalid-feedback(data-sb-feedback='message:required') 295 | | A message is required. 296 | 297 | // Submit success message 298 | // 299 | // This is what your users will see when the form 300 | // has successfully submitted 301 | #submitSuccessMessage.d-none 302 | .text-center.mb-3 303 | .fw-bolder Form submission successful! 304 | | To activate this form, sign up at 305 | br 306 | a(href='https://startbootstrap.com/solution/contact-forms') https://startbootstrap.com/solution/contact-forms 307 | 308 | // Submit error message 309 | // 310 | // This is what your users will see when there is 311 | // an error submitting the form 312 | #submitErrorMessage.d-none 313 | .text-center.text-danger.mb-3 Error sending message! 314 | 315 | // Submit Button 316 | .d-grid 317 | button#submitButton.btn.btn-primary.btn-lg.disabled(type='submit') Submit 318 | 319 | // Footer 320 | footer.py-5.bg-dark 321 | .container.px-5 322 | p.m-0.text-center.text-white Copyright © Your Website 2023 323 | 324 | // Bootstrap core JS 325 | script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js') 326 | 327 | // Core theme JS 328 | script(src='js/scripts.js') 329 | 330 | // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 331 | // * * SB Forms JS * * 332 | // * * Activate your form at https://startbootstrap.com/solution/contact-forms * * 333 | // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 334 | 335 | script(src='https://cdn.startbootstrap.com/sb-forms-latest.js') 336 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Business Frontpage - Start Bootstrap Template 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 32 | 33 |
34 |
35 |
36 |
37 |
38 |

Present your business in a whole new way

39 |

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit!

40 |
41 | Get Started 42 | Learn More 43 |
44 |
45 |
46 |
47 |
48 |
49 | 50 |
51 |
52 |
53 |
54 |
55 |

Featured title

56 |

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

57 | 58 | Call to action 59 | 60 | 61 |
62 |
63 |
64 |

Featured title

65 |

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

66 | 67 | Call to action 68 | 69 | 70 |
71 |
72 |
73 |

Featured title

74 |

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

75 | 76 | Call to action 77 | 78 | 79 |
80 |
81 |
82 |
83 | 84 |
85 |
86 |
87 |

Pay as you grow

88 |

With our no hassle pricing plans

89 |
90 |
91 | 92 |
93 |
94 |
95 |
Free
96 |
97 | $0 98 | / mo. 99 |
100 |
    101 |
  • 102 | 103 | 1 users 104 |
    • 105 |
  • 106 | 107 | 5GB storage 108 |
    • 109 |
  • 110 | 111 | Unlimited public projects 112 |
    • 113 |
  • 114 | 115 | Community access 116 |
    • 117 |
  • 118 | 119 | Unlimited private projects 120 |
    • 121 |
  • 122 | 123 | Dedicated support 124 |
    • 125 |
  • 126 | 127 | Free linked domain 128 |
    • 129 |
  • 130 | 131 | Monthly status reports 132 |
    • 133 |
134 |
Choose plan
135 |
136 |
137 |
138 | 139 |
140 |
141 |
142 |
143 | 144 | Pro 145 |
146 |
147 | $9 148 | / mo. 149 |
150 |
    151 |
  • 152 | 153 | 5 users 154 |
    • 155 |
  • 156 | 157 | 5GB storage 158 |
    • 159 |
  • 160 | 161 | Unlimited public projects 162 |
    • 163 |
  • 164 | 165 | Community access 166 |
    • 167 |
  • 168 | 169 | Unlimited private projects 170 |
    • 171 |
  • 172 | 173 | Dedicated support 174 |
    • 175 |
  • 176 | 177 | Free linked domain 178 |
    • 179 |
  • 180 | 181 | Monthly status reports 182 |
    • 183 |
184 |
Choose plan
185 |
186 |
187 |
188 | 189 |
190 |
191 |
192 |
Enterprise
193 |
194 | $49 195 | / mo. 196 |
197 |
    198 |
  • 199 | 200 | Unlimited users 201 |
    • 202 |
  • 203 | 204 | 5GB storage 205 |
    • 206 |
  • 207 | 208 | Unlimited public projects 209 |
    • 210 |
  • 211 | 212 | Community access 213 |
    • 214 |
  • 215 | 216 | Unlimited private projects 217 |
    • 218 |
  • 219 | 220 | Dedicated support 221 |
    • 222 |
  • 223 | 224 | Unlimited 225 | linked domains 226 |
    • 227 |
  • 228 | 229 | Monthly status reports 230 |
    • 231 |
232 |
Choose plan
233 |
234 |
235 |
236 |
237 |
238 |
239 | 240 |
241 |
242 |
243 |

Customer testimonials

244 |

Our customers love working with us

245 |
246 |
247 |
248 | 249 |
250 |
251 |
252 |
253 |
254 |

Thank you for putting together such a great product. We loved working with you and the whole team, and we will be recommending you to others!

255 |
- Client Name, Location
256 |
257 |
258 |
259 |
260 | 261 |
262 |
263 |
264 |
265 |
266 |

The whole team was a huge help with putting things together for our company and brand. We will be hiring them again in the near future for additional work!

267 |
- Client Name, Location
268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 | 277 |
278 |
279 |
280 |
281 |

Get in touch

282 |

We'd love to hear from you

283 |
284 |
285 |
286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 |
294 | 295 |
296 | 297 | 298 |
A name is required.
299 |
300 | 301 |
302 | 303 | 304 |
An email is required.
305 |
Email is not valid.
306 |
307 | 308 |
309 | 310 | 311 |
A phone number is required.
312 |
313 | 314 |
315 | 316 | 317 |
A message is required.
318 |
319 | 320 | 321 | 322 | 323 |
324 |
325 |
Form submission successful!
326 | To activate this form, sign up at 327 |
328 | https://startbootstrap.com/solution/contact-forms 329 |
330 |
331 | 332 | 333 | 334 | 335 |
Error sending message!
336 | 337 |
338 |
339 |
340 |
341 |
342 |
343 | 344 |
345 |

Copyright © Your Website 2023

346 |
347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | --------------------------------------------------------------------------------