├── .gitignore ├── src ├── scss │ ├── sections │ │ ├── _footer.scss │ │ ├── _about.scss │ │ ├── _projects.scss │ │ ├── _signup.scss │ │ ├── _contact.scss │ │ └── _masthead.scss │ ├── _variables.scss │ ├── components │ │ ├── _buttons.scss │ │ └── _navbar.scss │ ├── _global.scss │ ├── styles.scss │ └── variables │ │ ├── _typography.scss │ │ └── _colors.scss ├── assets │ ├── favicon.ico │ └── img │ │ ├── ipad.png │ │ ├── bg-signup.jpg │ │ ├── bg-masthead.jpg │ │ ├── demo-image-01.jpg │ │ └── demo-image-02.jpg ├── js │ └── scripts.js └── 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 │ └── img │ │ ├── ipad.png │ │ ├── bg-signup.jpg │ │ ├── bg-masthead.jpg │ │ ├── demo-image-01.jpg │ │ └── demo-image-02.jpg ├── js │ └── scripts.js └── index.html ├── LICENSE ├── package.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store -------------------------------------------------------------------------------- /src/scss/sections/_footer.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Footer 3 | // 4 | 5 | .footer { 6 | padding: 5rem 0; 7 | } -------------------------------------------------------------------------------- /scripts/build-scss.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const renderSCSS = require('./render-scss'); 4 | 5 | renderSCSS(); 6 | -------------------------------------------------------------------------------- /dist/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-grayscale/HEAD/dist/assets/favicon.ico -------------------------------------------------------------------------------- /dist/assets/img/ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-grayscale/HEAD/dist/assets/img/ipad.png -------------------------------------------------------------------------------- /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-grayscale/HEAD/src/assets/favicon.ico -------------------------------------------------------------------------------- /src/assets/img/ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-grayscale/HEAD/src/assets/img/ipad.png -------------------------------------------------------------------------------- /dist/assets/img/bg-signup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-grayscale/HEAD/dist/assets/img/bg-signup.jpg -------------------------------------------------------------------------------- /src/assets/img/bg-signup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-grayscale/HEAD/src/assets/img/bg-signup.jpg -------------------------------------------------------------------------------- /dist/assets/img/bg-masthead.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-grayscale/HEAD/dist/assets/img/bg-masthead.jpg -------------------------------------------------------------------------------- /src/assets/img/bg-masthead.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-grayscale/HEAD/src/assets/img/bg-masthead.jpg -------------------------------------------------------------------------------- /dist/assets/img/demo-image-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-grayscale/HEAD/dist/assets/img/demo-image-01.jpg -------------------------------------------------------------------------------- /dist/assets/img/demo-image-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-grayscale/HEAD/dist/assets/img/demo-image-02.jpg -------------------------------------------------------------------------------- /src/assets/img/demo-image-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-grayscale/HEAD/src/assets/img/demo-image-01.jpg -------------------------------------------------------------------------------- /src/assets/img/demo-image-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StartBootstrap/startbootstrap-grayscale/HEAD/src/assets/img/demo-image-02.jpg -------------------------------------------------------------------------------- /src/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Variables 3 | // 4 | 5 | @import "./variables/colors.scss"; 6 | @import "./variables/typography.scss"; -------------------------------------------------------------------------------- /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/sections/_about.scss: -------------------------------------------------------------------------------- 1 | // 2 | // About 3 | // 4 | 5 | .about-section { 6 | padding-top: 10rem; 7 | background: linear-gradient(to bottom, 8 | $black 0%, 9 | #{fade-out($black, 0.1)} 75%, 10 | #{fade-out($black, 0.2)} 100%); 11 | 12 | p { 13 | margin-bottom: 5rem; 14 | } 15 | } -------------------------------------------------------------------------------- /src/scss/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Buttons 3 | // 4 | 5 | .btn { 6 | box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important; 7 | padding: 1.25rem 2rem; 8 | font-family: $font-family-special; 9 | font-size: 80%; 10 | text-transform: uppercase; 11 | letter-spacing: 0.15rem; 12 | border: 0; 13 | } -------------------------------------------------------------------------------- /src/scss/_global.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Global theme styling 3 | // 4 | 5 | // Scroll padding for all scroll targets on page used with 6 | // native CSS smooth scrolling 7 | // 8 | // https://caniuse.com/?search=scroll-padding 9 | 10 | html { 11 | scroll-padding-top: calc(4.5rem - 1px); 12 | } 13 | 14 | body { 15 | letter-spacing: $base-letter-spacing; 16 | } -------------------------------------------------------------------------------- /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 | }; -------------------------------------------------------------------------------- /src/scss/sections/_projects.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Projects 3 | // 4 | 5 | .projects-section { 6 | padding: 10rem 0; 7 | 8 | .featured-text { 9 | padding: 2rem; 10 | 11 | @include media-breakpoint-up(lg) { 12 | padding: 0 0 0 2rem; 13 | border-left: 0.5rem solid $primary; 14 | } 15 | } 16 | 17 | .project-text { 18 | padding: 3rem; 19 | font-size: 90%; 20 | 21 | @include media-breakpoint-up(lg) { 22 | padding: 5rem; 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /src/scss/styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Styles 3 | // 4 | 5 | // Import variables 6 | @import "./variables.scss"; 7 | 8 | // Import Bootstrap 9 | @import "bootstrap/scss/bootstrap.scss"; 10 | 11 | // Global CSS 12 | @import "./global.scss"; 13 | 14 | // Components 15 | @import "./components/navbar.scss"; 16 | @import "./components/buttons.scss"; 17 | 18 | // Sections 19 | @import "./sections/masthead.scss"; 20 | @import "./sections/about.scss"; 21 | @import "./sections/projects.scss"; 22 | @import "./sections/signup.scss"; 23 | @import "./sections/contact.scss"; 24 | @import "./sections/footer.scss"; -------------------------------------------------------------------------------- /src/scss/variables/_typography.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Typography 3 | // 4 | 5 | // Override Bootstrap typography variables 6 | 7 | $font-family-base: "Nunito", 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 | $base-letter-spacing: 0.0625em; 21 | 22 | // Custom font family for masthead H1 23 | 24 | $font-family-special: "Varela Round", 25 | -apple-system, 26 | BlinkMacSystemFont, 27 | "Segoe UI", 28 | Roboto, 29 | "Helvetica Neue", 30 | Arial, 31 | sans-serif, 32 | "Apple Color Emoji", 33 | "Segoe UI Emoji", 34 | "Segoe UI Symbol", 35 | "Noto Color Emoji"; -------------------------------------------------------------------------------- /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/scss/sections/_signup.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Signup 3 | // 4 | 5 | .signup-section { 6 | padding: 10rem 0; 7 | background: linear-gradient(to bottom, 8 | #{fade-out($black, 0.9)} 0%, 9 | #{fade-out($black, 0.5)} 75%, 10 | $black 100%), 11 | url("../assets/img/bg-signup.jpg"); 12 | background-position: center; 13 | background-repeat: no-repeat; 14 | background-attachment: scroll; 15 | background-size: cover; 16 | 17 | .form-signup { 18 | input { 19 | box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important; 20 | padding: 1.25rem 2rem; 21 | height: auto; 22 | font-family: $font-family-special; 23 | font-size: 80%; 24 | text-transform: uppercase; 25 | letter-spacing: 0.15rem; 26 | border: 0; 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /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 | }; -------------------------------------------------------------------------------- /src/scss/sections/_contact.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Contact 3 | // 4 | 5 | .contact-section { 6 | padding-top: 5rem; 7 | 8 | .card { 9 | border: 0; 10 | border-bottom: 0.25rem solid $primary; 11 | 12 | h4 { 13 | font-size: 0.8rem; 14 | font-family: $font-family-special; 15 | text-transform: uppercase; 16 | letter-spacing: 0.15rem; 17 | } 18 | 19 | hr { 20 | opacity: 1; 21 | border-color: $primary; 22 | border-width: 0.25rem; 23 | width: 3rem; 24 | } 25 | } 26 | 27 | .social { 28 | margin-top: 5rem; 29 | 30 | a { 31 | text-align: center; 32 | height: 3rem; 33 | width: 3rem; 34 | background: fade-out($white, 0.9); 35 | border-radius: 100%; 36 | line-height: 3rem; 37 | color: fade-out($white, 0.7); 38 | 39 | &:hover { 40 | color: fade-out($white, 0.5); 41 | } 42 | 43 | &:active { 44 | color: $white; 45 | } 46 | } 47 | } 48 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/scss/variables/_colors.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Colors 3 | // 4 | 5 | // Color system 6 | 7 | // Grayscale 8 | 9 | $white: #fff; 10 | $gray-100: #f8f9fa; 11 | $gray-200: #e9ecef; 12 | $gray-300: #dee2e6; 13 | $gray-400: #ced4da; 14 | $gray-500: #adb5bd; 15 | $gray-600: #6c757d; 16 | $gray-700: #495057; 17 | $gray-800: #343a40; 18 | $gray-900: #212529; 19 | $black: #000; 20 | 21 | // Colors 22 | 23 | $teal: #64a19d; 24 | $red: #a16468; 25 | $purple: #7464a1; 26 | $yellow: #e4c662; 27 | $green: #67c29c; 28 | $cyan: #1cabc4; 29 | 30 | // State colors 31 | 32 | $primary: $teal; 33 | $secondary: $purple; 34 | $success: $green; 35 | $info: $cyan; 36 | $warning: $yellow; 37 | $danger: $red; 38 | $light: $gray-100; 39 | $dark: $gray-900; 40 | 41 | // Bootstrap color map 42 | 43 | $theme-colors: ("primary": $primary, 44 | "secondary": $secondary, 45 | "success": $success, 46 | "info": $info, 47 | "warning": $warning, 48 | "danger": $danger, 49 | "light": $light, 50 | "dark": $dark); 51 | 52 | // Expanded color map 53 | 54 | $expanded-colors: ('black': $black, 55 | 'white': $white, 56 | ); 57 | 58 | // Merge the maps 59 | $theme-colors: map-merge($theme-colors, $expanded-colors); 60 | 61 | // Override Bootstrap contrast ratio 62 | 63 | $min-contrast-ratio: 2.5; -------------------------------------------------------------------------------- /src/scss/sections/_masthead.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Masthead 3 | // 4 | 5 | .masthead { 6 | position: relative; 7 | width: 100%; 8 | height: auto; 9 | min-height: 35rem; 10 | padding: 15rem 0; 11 | background: linear-gradient(to bottom, 12 | #{fade-out($black, 0.7)} 0%, 13 | #{fade-out($black, 0.3)} 75%, 14 | $black 100%), 15 | url("../assets/img/bg-masthead.jpg"); 16 | background-position: center; 17 | background-repeat: no-repeat; 18 | background-attachment: scroll; 19 | background-size: cover; 20 | 21 | h1 { 22 | font-family: $font-family-special; 23 | font-size: 2.5rem; 24 | line-height: 2.5rem; 25 | letter-spacing: 0.8rem; 26 | background: linear-gradient(fade-out($white, 0.1), fade-out($white, 1)); 27 | -webkit-text-fill-color: transparent; 28 | background-clip: text; 29 | } 30 | 31 | h2 { 32 | max-width: 20rem; 33 | font-size: 1rem; 34 | } 35 | 36 | @include media-breakpoint-up(md) { 37 | h1 { 38 | font-size: 4rem; 39 | line-height: 4rem; 40 | } 41 | } 42 | 43 | @include media-breakpoint-up(lg) { 44 | height: 100vh; 45 | padding: 0; 46 | 47 | h1 { 48 | font-size: 6.5rem; 49 | line-height: 6.5rem; 50 | letter-spacing: 0.8rem; 51 | } 52 | 53 | h2 { 54 | max-width: 30rem; 55 | font-size: 1.25rem; 56 | } 57 | } 58 | } -------------------------------------------------------------------------------- /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 | ` -------------------------------------------------------------------------------- /src/js/scripts.js: -------------------------------------------------------------------------------- 1 | // 2 | // Scripts 3 | // 4 | 5 | window.addEventListener('DOMContentLoaded', event => { 6 | 7 | // Navbar shrink function 8 | var navbarShrink = function () { 9 | const navbarCollapsible = document.body.querySelector('#mainNav'); 10 | if (!navbarCollapsible) { 11 | return; 12 | } 13 | if (window.scrollY === 0) { 14 | navbarCollapsible.classList.remove('navbar-shrink') 15 | } else { 16 | navbarCollapsible.classList.add('navbar-shrink') 17 | } 18 | 19 | }; 20 | 21 | // Shrink the navbar 22 | navbarShrink(); 23 | 24 | // Shrink the navbar when page is scrolled 25 | document.addEventListener('scroll', navbarShrink); 26 | 27 | // Activate Bootstrap scrollspy on the main nav element 28 | const mainNav = document.body.querySelector('#mainNav'); 29 | if (mainNav) { 30 | new bootstrap.ScrollSpy(document.body, { 31 | target: '#mainNav', 32 | rootMargin: '0px 0px -40%', 33 | }); 34 | }; 35 | 36 | // Collapse responsive navbar when toggler is visible 37 | const navbarToggler = document.body.querySelector('.navbar-toggler'); 38 | const responsiveNavItems = [].slice.call( 39 | document.querySelectorAll('#navbarResponsive .nav-link') 40 | ); 41 | responsiveNavItems.map(function (responsiveNavItem) { 42 | responsiveNavItem.addEventListener('click', () => { 43 | if (window.getComputedStyle(navbarToggler).display !== 'none') { 44 | navbarToggler.click(); 45 | } 46 | }); 47 | }); 48 | 49 | }); -------------------------------------------------------------------------------- /dist/js/scripts.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Start Bootstrap - Grayscale v7.0.6 (https://startbootstrap.com/theme/grayscale) 3 | * Copyright 2013-2023 Start Bootstrap 4 | * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-grayscale/blob/master/LICENSE) 5 | */ 6 | // 7 | // Scripts 8 | // 9 | 10 | window.addEventListener('DOMContentLoaded', event => { 11 | 12 | // Navbar shrink function 13 | var navbarShrink = function () { 14 | const navbarCollapsible = document.body.querySelector('#mainNav'); 15 | if (!navbarCollapsible) { 16 | return; 17 | } 18 | if (window.scrollY === 0) { 19 | navbarCollapsible.classList.remove('navbar-shrink') 20 | } else { 21 | navbarCollapsible.classList.add('navbar-shrink') 22 | } 23 | 24 | }; 25 | 26 | // Shrink the navbar 27 | navbarShrink(); 28 | 29 | // Shrink the navbar when page is scrolled 30 | document.addEventListener('scroll', navbarShrink); 31 | 32 | // Activate Bootstrap scrollspy on the main nav element 33 | const mainNav = document.body.querySelector('#mainNav'); 34 | if (mainNav) { 35 | new bootstrap.ScrollSpy(document.body, { 36 | target: '#mainNav', 37 | rootMargin: '0px 0px -40%', 38 | }); 39 | }; 40 | 41 | // Collapse responsive navbar when toggler is visible 42 | const navbarToggler = document.body.querySelector('.navbar-toggler'); 43 | const responsiveNavItems = [].slice.call( 44 | document.querySelectorAll('#navbarResponsive .nav-link') 45 | ); 46 | responsiveNavItems.map(function (responsiveNavItem) { 47 | responsiveNavItem.addEventListener('click', () => { 48 | if (window.getComputedStyle(navbarToggler).display !== 'none') { 49 | navbarToggler.click(); 50 | } 51 | }); 52 | }); 53 | 54 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Grayscale", 3 | "name": "startbootstrap-grayscale", 4 | "version": "7.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 grayscale one page HTML theme for Bootstrap.", 16 | "keywords": [ 17 | "css", 18 | "sass", 19 | "html", 20 | "responsive", 21 | "theme", 22 | "template" 23 | ], 24 | "homepage": "https://startbootstrap.com/theme/grayscale", 25 | "bugs": { 26 | "url": "https://github.com/StartBootstrap/startbootstrap-grayscale/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-grayscale.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 | } -------------------------------------------------------------------------------- /src/scss/components/_navbar.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Navbar 3 | // 4 | 5 | #mainNav { 6 | min-height: 3.5rem; 7 | background-color: $white; 8 | 9 | .navbar-toggler { 10 | font-size: 80%; 11 | padding: 0.75rem; 12 | color: $primary; 13 | border: $border-width solid $primary; 14 | 15 | &:focus { 16 | outline: none; 17 | } 18 | } 19 | 20 | .navbar-brand { 21 | color: $black; 22 | font-weight: 700; 23 | padding: 0.9rem 0; 24 | } 25 | 26 | .navbar-nav { 27 | .nav-item { 28 | &:hover { 29 | color: fade($white, 80%); 30 | outline: none; 31 | background-color: transparent; 32 | } 33 | 34 | &:active, 35 | &:focus { 36 | outline: none; 37 | background-color: transparent; 38 | } 39 | } 40 | } 41 | 42 | @include media-breakpoint-up(lg) { 43 | padding-top: 0; 44 | padding-bottom: 0; 45 | border-bottom: none; 46 | background-color: transparent; 47 | transition: background-color 0.3s ease-in-out; 48 | 49 | .navbar-brand { 50 | padding: 0.5rem 0; 51 | color: fade-out($white, 0.5); 52 | } 53 | 54 | .nav-link { 55 | transition: none; 56 | padding: 2rem 1.5rem; 57 | color: fade-out($white, 0.5); 58 | 59 | &:hover { 60 | color: fade-out($white, 0.25); 61 | } 62 | 63 | &:active { 64 | color: $white; 65 | } 66 | } 67 | 68 | &.navbar-shrink { 69 | background-color: $white; 70 | 71 | .navbar-brand { 72 | color: $black; 73 | } 74 | 75 | .nav-link { 76 | color: $black; 77 | padding: 1.5rem 1.5rem 1.25rem; 78 | border-bottom: 0.25rem solid transparent; 79 | 80 | &:hover { 81 | color: $primary; 82 | } 83 | 84 | &:active { 85 | color: darken($primary, 15%); 86 | } 87 | 88 | &.active { 89 | color: $primary; 90 | outline: none; 91 | border-bottom: 0.25rem solid $primary; 92 | } 93 | } 94 | } 95 | } 96 | } -------------------------------------------------------------------------------- /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 - Grayscale](https://startbootstrap.com/theme/grayscale/) 2 | 3 | [Grayscale](https://startbootstrap.com/theme/grayscale/) is a multipurpose, one page HTML theme for [Bootstrap](https://getbootstrap.com/) created by [Start Bootstrap](https://startbootstrap.com/). 4 | 5 | ## Preview 6 | 7 | [![Grayscale Preview](https://assets.startbootstrap.com/img/screenshots/themes/grayscale.png)](https://startbootstrap.github.io/startbootstrap-grayscale/) 8 | 9 | **[View Live Preview](https://startbootstrap.github.io/startbootstrap-grayscale/)** 10 | 11 | ## Status 12 | 13 | [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/StartBootstrap/startbootstrap-grayscale/master/LICENSE) 14 | [![npm version](https://img.shields.io/npm/v/startbootstrap-grayscale.svg)](https://www.npmjs.com/package/startbootstrap-grayscale) 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/grayscale/) 21 | - Install using npm: `npm i startbootstrap-grayscale` 22 | - Clone the repo: `git clone https://github.com/StartBootstrap/startbootstrap-grayscale.git` 23 | - [Fork, Clone, or Download on GitHub](https://github.com/StartBootstrap/startbootstrap-grayscale) 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-grayscale/issues) here on GitHub or leave a comment on the [theme overview page at Start Bootstrap](https://startbootstrap.com/theme/grayscale/). 51 | 52 | ## About 53 | 54 | Start Bootstrap is an open source library of free Bootstrap themes and templates. All of the free themes and templates 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-grayscale/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 Grayscale - Start Bootstrap Theme 12 | 13 | link(rel='icon', type='image/x-icon', href='assets/favicon.ico') 14 | 15 | // Font Awesome icons (free version) 16 | script(src='https://use.fontawesome.com/releases/v6.3.0/js/all.js', crossorigin='anonymous') 17 | 18 | // Google fonts 19 | link(href='https://fonts.googleapis.com/css?family=Varela+Round', rel='stylesheet') 20 | link(href='https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i', rel='stylesheet') 21 | 22 | // Core theme CSS (includes Bootstrap) 23 | link(href='css/styles.css', rel='stylesheet') 24 | 25 | body#page-top 26 | 27 | // Navigation 28 | nav#mainNav.navbar.navbar-expand-lg.navbar-light.fixed-top 29 | .container.px-4.px-lg-5 30 | a.navbar-brand(href='#page-top') Start Bootstrap 31 | button.navbar-toggler.navbar-toggler-right(type='button', data-bs-toggle='collapse', data-bs-target='#navbarResponsive', aria-controls='navbarResponsive', aria-expanded='false', aria-label='Toggle navigation') 32 | | Menu 33 | i.fas.fa-bars 34 | #navbarResponsive.collapse.navbar-collapse 35 | ul.navbar-nav.ms-auto 36 | li.nav-item 37 | a.nav-link(href='#about') About 38 | li.nav-item 39 | a.nav-link(href='#projects') Projects 40 | li.nav-item 41 | a.nav-link(href='#signup') Contact 42 | 43 | // Masthead 44 | header.masthead 45 | .container.px-4.px-lg-5.d-flex.h-100.align-items-center.justify-content-center 46 | .d-flex.justify-content-center 47 | .text-center 48 | h1.mx-auto.my-0.text-uppercase Grayscale 49 | h2.text-white-50.mx-auto.mt-2.mb-5 A free, responsive, one page Bootstrap theme created by Start Bootstrap. 50 | a.btn.btn-primary(href='#about') Get Started 51 | 52 | // About 53 | section#about.about-section.text-center 54 | .container.px-4.px-lg-5 55 | .row.gx-4.gx-lg-5.justify-content-center 56 | .col-lg-8 57 | h2.text-white.mb-4 Built with Bootstrap 5 58 | p.text-white-50 59 | | Grayscale is a free Bootstrap theme created by Start Bootstrap. It can be yours right now, simply download the template on 60 | a(href='https://startbootstrap.com/theme/grayscale/') the preview page. 61 | | The theme is open source, and you can use it for any purpose, personal or commercial. 62 | img.img-fluid(src='assets/img/ipad.png', alt='...') 63 | 64 | // Projects 65 | section#projects.projects-section.bg-light 66 | .container.px-4.px-lg-5 67 | // Featured Project Row 68 | .row.gx-0.mb-4.mb-lg-5.align-items-center 69 | .col-xl-8.col-lg-7 70 | img.img-fluid.mb-3.mb-lg-0(src='assets/img/bg-masthead.jpg', alt='...') 71 | .col-xl-4.col-lg-5 72 | .featured-text.text-center.text-lg-left 73 | h4 Shoreline 74 | p.text-black-50.mb-0 75 | | Grayscale is open source and MIT licensed. This means you can use it for any project - even commercial projects! Download it, customize it, and publish your website! 76 | // Project One Row 77 | .row.gx-0.mb-5.mb-lg-0.justify-content-center 78 | .col-lg-6 79 | img.img-fluid(src='assets/img/demo-image-01.jpg', alt='...') 80 | .col-lg-6 81 | .bg-black.text-center.h-100.project 82 | .d-flex.h-100 83 | .project-text.w-100.my-auto.text-center.text-lg-left 84 | h4.text-white Misty 85 | p.mb-0.text-white-50 86 | | An example of where you can put an image of a project, or anything else, along with a description. 87 | // Project Two Row 88 | .row.gx-0.justify-content-center 89 | .col-lg-6 90 | img.img-fluid(src='assets/img/demo-image-02.jpg', alt='...') 91 | .col-lg-6.order-lg-first 92 | .bg-black.text-center.h-100.project 93 | .d-flex.h-100 94 | .project-text.w-100.my-auto.text-center.text-lg-right 95 | h4.text-white Mountains 96 | p.mb-0.text-white-50 97 | | Another example of a project with its respective description. These sections work well responsively as well! 98 | 99 | // Signup 100 | section#signup.signup-section 101 | .container.px-4.px-lg-5 102 | .row.gx-4.gx-lg-5 103 | .col-md-10.col-lg-8.mx-auto.text-center 104 | i.far.fa-paper-plane.fa-2x.mb-2.text-white 105 | h2.text-white.mb-5 Subscribe to receive updates! 106 | 107 | // * * * * * * * * * * * * * * * 108 | // * * SB Forms Contact Form * * 109 | // * * * * * * * * * * * * * * * 110 | 111 | // This form is pre-integrated with SB Forms. 112 | // To make this form functional, sign up at 113 | // https://startbootstrap.com/solution/contact-forms 114 | // to get an API token! 115 | 116 | form#contactForm.form-signup(data-sb-form-api-token='API_TOKEN') 117 | 118 | // Email address input 119 | 120 | .row.input-group-newsletter 121 | .col 122 | input#emailAddress.form-control( 123 | type='email', 124 | placeholder='Enter email address...', 125 | aria-label='Enter email address...', 126 | data-sb-validations='required,email' 127 | ) 128 | .col-auto 129 | button#submitButton.btn.btn-primary.disabled(type='submit') Notify Me! 130 | .invalid-feedback.mt-2(data-sb-feedback='emailAddress:required') 131 | | An email is required. 132 | .invalid-feedback.mt-2(data-sb-feedback='emailAddress:email') 133 | | Email is not valid. 134 | 135 | // Submit success message 136 | // 137 | // This is what your users will see when the form 138 | // has successfully submitted 139 | 140 | #submitSuccessMessage.d-none 141 | .text-center.mb-3.mt-2.text-white 142 | .fw-bolder Form submission successful! 143 | | To activate this form, sign up at 144 | br 145 | a(href='https://startbootstrap.com/solution/contact-forms') https://startbootstrap.com/solution/contact-forms 146 | 147 | // Submit error message 148 | // 149 | // This is what your users will see when there is 150 | // an error submitting the form 151 | 152 | #submitErrorMessage.d-none 153 | .text-center.text-danger.mb-3.mt-2 Error sending message! 154 | 155 | // Contact 156 | section.contact-section.bg-black 157 | .container.px-4.px-lg-5 158 | .row.gx-4.gx-lg-5 159 | .col-md-4.mb-3.mb-md-0 160 | .card.py-4.h-100 161 | .card-body.text-center 162 | i.fas.fa-map-marked-alt.text-primary.mb-2 163 | h4.text-uppercase.m-0 Address 164 | hr.my-4.mx-auto 165 | .small.text-black-50 4923 Market Street, Orlando FL 166 | .col-md-4.mb-3.mb-md-0 167 | .card.py-4.h-100 168 | .card-body.text-center 169 | i.fas.fa-envelope.text-primary.mb-2 170 | h4.text-uppercase.m-0 Email 171 | hr.my-4.mx-auto 172 | .small.text-black-50 173 | a(href='#!') hello@yourdomain.com 174 | .col-md-4.mb-3.mb-md-0 175 | .card.py-4.h-100 176 | .card-body.text-center 177 | i.fas.fa-mobile-alt.text-primary.mb-2 178 | h4.text-uppercase.m-0 Phone 179 | hr.my-4.mx-auto 180 | .small.text-black-50 +1 (555) 902-8832 181 | .social.d-flex.justify-content-center 182 | a.mx-2(href='#!') 183 | i.fab.fa-twitter 184 | a.mx-2(href='#!') 185 | i.fab.fa-facebook-f 186 | a.mx-2(href='#!') 187 | i.fab.fa-github 188 | 189 | // Footer 190 | footer.footer.bg-black.small.text-center.text-white-50 191 | .container.px-4.px-lg-5 192 | | Copyright © Your Website 2023 193 | 194 | // Bootstrap core JS 195 | script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js') 196 | 197 | // Core theme JS 198 | script(src='js/scripts.js') 199 | 200 | // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 201 | // * * SB Forms JS * * 202 | // * * Activate your form at https://startbootstrap.com/solution/contact-forms * * 203 | // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 204 | 205 | script(src='https://cdn.startbootstrap.com/sb-forms-latest.js') 206 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Grayscale - Start Bootstrap Theme 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 36 | 37 |
38 |
39 |
40 |
41 |

Grayscale

42 |

A free, responsive, one page Bootstrap theme created by Start Bootstrap.

43 | Get Started 44 |
45 |
46 |
47 |
48 | 49 |
50 |
51 |
52 |
53 |

Built with Bootstrap 5

54 |

55 | Grayscale is a free Bootstrap theme created by Start Bootstrap. It can be yours right now, simply download the template on 56 | the preview page. 57 | The theme is open source, and you can use it for any purpose, personal or commercial. 58 |

59 |
60 |
61 | ... 62 |
63 |
64 | 65 |
66 |
67 | 68 |
69 |
...
70 |
71 |
72 |

Shoreline

73 |

Grayscale is open source and MIT licensed. This means you can use it for any project - even commercial projects! Download it, customize it, and publish your website!

74 |
75 |
76 |
77 | 78 |
79 |
...
80 |
81 |
82 |
83 |
84 |

Misty

85 |

An example of where you can put an image of a project, or anything else, along with a description.

86 |
87 |
88 |
89 |
90 |
91 | 92 |
93 |
...
94 |
95 |
96 |
97 |
98 |

Mountains

99 |

Another example of a project with its respective description. These sections work well responsively as well!

100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 | 108 | 151 | 152 |
153 |
154 |
155 |
156 |
157 |
158 | 159 |

Address

160 |
161 |
4923 Market Street, Orlando FL
162 |
163 |
164 |
165 |
166 |
167 |
168 | 169 |

Email

170 |
171 |
hello@yourdomain.com
172 |
173 |
174 |
175 |
176 |
177 |
178 | 179 |

Phone

180 |
181 |
+1 (555) 902-8832
182 |
183 |
184 |
185 |
186 | 191 |
192 |
193 | 194 |
Copyright © Your Website 2023
195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | --------------------------------------------------------------------------------