├── .gitignore ├── dist ├── assets │ ├── favicon.ico │ └── img │ │ ├── team │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ └── 3.jpg │ │ ├── about │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ └── 4.jpg │ │ ├── header-bg.jpg │ │ ├── map-image.png │ │ ├── portfolio │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ └── 6.jpg │ │ ├── close-icon.svg │ │ ├── logos │ │ ├── ibm.svg │ │ ├── facebook.svg │ │ ├── google.svg │ │ └── microsoft.svg │ │ └── navbar-logo.svg ├── js │ └── scripts.js └── index.html ├── 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 ├── src ├── assets │ ├── favicon.ico │ └── img │ │ ├── about │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ └── 4.jpg │ │ ├── team │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ └── 3.jpg │ │ ├── header-bg.jpg │ │ ├── map-image.png │ │ ├── portfolio │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ └── 6.jpg │ │ ├── close-icon.svg │ │ ├── logos │ │ ├── ibm.svg │ │ ├── facebook.svg │ │ ├── google.svg │ │ └── microsoft.svg │ │ └── navbar-logo.svg ├── scss │ ├── _variables.scss │ ├── sections │ │ ├── _footer.scss │ │ ├── _team.scss │ │ ├── _masthead.scss │ │ ├── _contact.scss │ │ ├── _portfolio.scss │ │ └── _timeline.scss │ ├── variables │ │ ├── _colors.scss │ │ └── _typography.scss │ ├── components │ │ ├── _buttons.scss │ │ └── _navbar.scss │ ├── styles.scss │ └── _global.scss ├── js │ └── scripts.js └── pug │ ├── includes │ ├── portfolio-modal-4.pug │ ├── portfolio-modal-3.pug │ ├── portfolio-modal-6.pug │ ├── portfolio-modal-1.pug │ ├── portfolio-modal-2.pug │ └── portfolio-modal-5.pug │ └── index.pug ├── .editorconfig ├── LICENSE ├── README.md └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store -------------------------------------------------------------------------------- /dist/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/dist/assets/favicon.ico -------------------------------------------------------------------------------- /scripts/build-scss.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const renderSCSS = require('./render-scss'); 4 | 5 | renderSCSS(); 6 | -------------------------------------------------------------------------------- /src/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/src/assets/favicon.ico -------------------------------------------------------------------------------- /dist/assets/img/team/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/dist/assets/img/team/1.jpg -------------------------------------------------------------------------------- /dist/assets/img/team/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/dist/assets/img/team/2.jpg -------------------------------------------------------------------------------- /dist/assets/img/team/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/dist/assets/img/team/3.jpg -------------------------------------------------------------------------------- /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/img/about/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/src/assets/img/about/1.jpg -------------------------------------------------------------------------------- /src/assets/img/about/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/src/assets/img/about/2.jpg -------------------------------------------------------------------------------- /src/assets/img/about/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/src/assets/img/about/3.jpg -------------------------------------------------------------------------------- /src/assets/img/about/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/src/assets/img/about/4.jpg -------------------------------------------------------------------------------- /src/assets/img/team/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/src/assets/img/team/1.jpg -------------------------------------------------------------------------------- /src/assets/img/team/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/src/assets/img/team/2.jpg -------------------------------------------------------------------------------- /src/assets/img/team/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/src/assets/img/team/3.jpg -------------------------------------------------------------------------------- /dist/assets/img/about/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/dist/assets/img/about/1.jpg -------------------------------------------------------------------------------- /dist/assets/img/about/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/dist/assets/img/about/2.jpg -------------------------------------------------------------------------------- /dist/assets/img/about/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/dist/assets/img/about/3.jpg -------------------------------------------------------------------------------- /dist/assets/img/about/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/dist/assets/img/about/4.jpg -------------------------------------------------------------------------------- /dist/assets/img/header-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/dist/assets/img/header-bg.jpg -------------------------------------------------------------------------------- /dist/assets/img/map-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/dist/assets/img/map-image.png -------------------------------------------------------------------------------- /src/assets/img/header-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/src/assets/img/header-bg.jpg -------------------------------------------------------------------------------- /src/assets/img/map-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/src/assets/img/map-image.png -------------------------------------------------------------------------------- /dist/assets/img/portfolio/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/dist/assets/img/portfolio/1.jpg -------------------------------------------------------------------------------- /dist/assets/img/portfolio/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/dist/assets/img/portfolio/2.jpg -------------------------------------------------------------------------------- /dist/assets/img/portfolio/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/dist/assets/img/portfolio/3.jpg -------------------------------------------------------------------------------- /dist/assets/img/portfolio/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/dist/assets/img/portfolio/4.jpg -------------------------------------------------------------------------------- /dist/assets/img/portfolio/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/dist/assets/img/portfolio/5.jpg -------------------------------------------------------------------------------- /dist/assets/img/portfolio/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/dist/assets/img/portfolio/6.jpg -------------------------------------------------------------------------------- /src/assets/img/portfolio/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/src/assets/img/portfolio/1.jpg -------------------------------------------------------------------------------- /src/assets/img/portfolio/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/src/assets/img/portfolio/2.jpg -------------------------------------------------------------------------------- /src/assets/img/portfolio/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/src/assets/img/portfolio/3.jpg -------------------------------------------------------------------------------- /src/assets/img/portfolio/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/src/assets/img/portfolio/4.jpg -------------------------------------------------------------------------------- /src/assets/img/portfolio/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/src/assets/img/portfolio/5.jpg -------------------------------------------------------------------------------- /src/assets/img/portfolio/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frozen-dev71/startbootstrap-agency/main/src/assets/img/portfolio/6.jpg -------------------------------------------------------------------------------- /src/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Variables 3 | // 4 | 5 | // Import variables from src/scss/variables 6 | 7 | @import "./variables/colors.scss"; 8 | @import "./variables/typography.scss"; 9 | -------------------------------------------------------------------------------- /src/scss/sections/_footer.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Footer section styling 3 | // 4 | 5 | .footer { 6 | text-align: center; 7 | font-size: 0.9rem; 8 | font-family: $headings-font-family; 9 | } 10 | -------------------------------------------------------------------------------- /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/variables/_colors.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Colors 3 | // 4 | 5 | // Override Bootstrap color variables 6 | 7 | $yellow: #ffc800; 8 | 9 | // Override Bootstrap state colors variables 10 | 11 | $primary: $yellow; 12 | 13 | // Override Bootstrap contrast ratio 14 | 15 | $min-contrast-ratio: 1.5; 16 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 4 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /dist/assets/img/close-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/img/close-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /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/_team.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Team section styling 3 | // 4 | 5 | .team-member { 6 | margin-bottom: 3rem; 7 | text-align: center; 8 | 9 | img { 10 | width: 14rem; 11 | height: 14rem; 12 | border: 0.5rem solid fade-out($black, 0.9); 13 | } 14 | 15 | h4 { 16 | margin-top: 1.5rem; 17 | margin-bottom: 0; 18 | } 19 | } 20 | 21 | // Brand images for client section 22 | .img-brand { 23 | height: 2.75rem; 24 | } 25 | -------------------------------------------------------------------------------- /src/scss/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Buttons 3 | // 4 | 5 | // Create a new xl button variant 6 | 7 | .btn-xl { 8 | padding: 1.25rem 2.5rem; 9 | font-family: $headings-font-family; 10 | font-size: 1.125rem; 11 | font-weight: $headings-font-weight; 12 | } 13 | 14 | // Create a new social button variant 15 | 16 | .btn-social { 17 | height: 2.5rem; 18 | width: 2.5rem; 19 | display: inline-flex; 20 | align-items: center; 21 | justify-content: center; 22 | padding: 0; 23 | border-radius: 100%; 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/buttons.scss"; 16 | @import "./components/navbar.scss"; 17 | 18 | // Sections 19 | @import "./sections/masthead.scss"; 20 | @import "./sections/portfolio.scss"; 21 | @import "./sections/timeline.scss"; 22 | @import "./sections/team.scss"; 23 | @import "./sections/contact.scss"; 24 | @import "./sections/footer.scss"; 25 | -------------------------------------------------------------------------------- /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-2022 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/_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: 4.5rem; 12 | } 13 | 14 | body { 15 | position: relative; 16 | overflow-x: hidden; 17 | } 18 | 19 | // Adjust the line height of paragraphs 20 | 21 | p { 22 | line-height: $line-height-lg; 23 | } 24 | 25 | // Spacing and heading styling for page sections 26 | 27 | .page-section { 28 | padding: 6rem 0; 29 | 30 | h2.section-heading { 31 | font-size: 2.5rem; 32 | margin-top: 0; 33 | margin-bottom: 1rem; 34 | } 35 | 36 | h3.section-subheading { 37 | font-size: 1rem; 38 | font-weight: 400; 39 | font-style: italic; 40 | font-family: $subheadings-font-family; 41 | margin-bottom: 4rem; 42 | } 43 | } 44 | 45 | // Increase the padding on sections when screen size is greater 46 | // than the medium breakpoint (set by Bootstrap) 47 | 48 | @include media-breakpoint-up(md) { 49 | section { 50 | padding: 9rem 0; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/scss/variables/_typography.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Typography 3 | // 4 | 5 | // Override the default Bootstrap base font family 6 | // 7 | // Roboto Slab is being used below and is brought in 8 | // via Google fonts in the head of src/pug/index.pug. 9 | // The fonts listed afterwards are fallbacks. 10 | 11 | $font-family-base: "Roboto Slab", 12 | -apple-system, 13 | BlinkMacSystemFont, 14 | "Segoe UI", 15 | Roboto, 16 | "Helvetica Neue", 17 | Arial, 18 | sans-serif, 19 | "Apple Color Emoji", 20 | "Segoe UI Emoji", 21 | "Segoe UI Symbol", 22 | "Noto Color Emoji"; 23 | 24 | // Override the default Bootstrap headings font family 25 | // 26 | // Montserrat is being used below and is brought in 27 | // via Google fonts in the head of src/pug/index.pug. 28 | // The fonts listed afterwards are fallbacks. 29 | 30 | $headings-font-family: "Montserrat", 31 | -apple-system, 32 | BlinkMacSystemFont, 33 | "Segoe UI", 34 | Roboto, 35 | "Helvetica Neue", 36 | Arial, 37 | sans-serif, 38 | "Apple Color Emoji", 39 | "Segoe UI Emoji", 40 | "Segoe UI Symbol", 41 | "Noto Color Emoji"; 42 | 43 | // Create a subheadings font family 44 | 45 | $subheadings-font-family: $font-family-base; 46 | 47 | // Override Bootstrap default headings variables 48 | 49 | $headings-font-weight: 700; 50 | $headings-letter-spacing: 0.0625em; 51 | 52 | // Override default Bootstrap line height variables 53 | 54 | $line-height-lg: 1.75; 55 | -------------------------------------------------------------------------------- /src/scss/sections/_masthead.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Masthead section styling 3 | // 4 | 5 | header.masthead { 6 | padding-top: 6rem + 4.5rem; 7 | padding-bottom: 6rem; 8 | text-align: center; 9 | color: $white; 10 | background-image: url("../assets/img/header-bg.jpg"); 11 | background-repeat: no-repeat; 12 | background-attachment: scroll; 13 | background-position: center center; 14 | background-size: cover; 15 | 16 | .masthead-subheading { 17 | font-size: 1.5rem; 18 | font-style: italic; 19 | line-height: 1.5rem; 20 | margin-bottom: 25px; 21 | font-family: $subheadings-font-family; 22 | } 23 | 24 | .masthead-heading { 25 | font-size: 3.25rem; 26 | font-weight: 700; 27 | line-height: 3.25rem; 28 | margin-bottom: 2rem; 29 | font-family: $headings-font-family; 30 | } 31 | } 32 | 33 | @include media-breakpoint-up(md) { 34 | header.masthead { 35 | padding-top: 12.5rem + 4.5rem; 36 | padding-bottom: 12.5rem; 37 | 38 | .masthead-subheading { 39 | font-size: 2.25rem; 40 | font-style: italic; 41 | line-height: 2.25rem; 42 | margin-bottom: 2rem; 43 | } 44 | 45 | .masthead-heading { 46 | font-size: 4.5rem; 47 | font-weight: 700; 48 | line-height: 4.5rem; 49 | margin-bottom: 4rem; 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Editor for template content](https://github.com/TheNocoder/ncSimpleHtmlEditor) 2 | 3 | Allows you to edit the content of previously created templates or designs, it does not have options to change the design. 4 | 5 | ## Preview 6 | 7 | ![agency](https://user-images.githubusercontent.com/114579121/193446865-ef500949-f3f9-4374-9c27-32d2fb7d43f5.gif) 8 | 9 | ## Demo 10 | 11 | https://thenocoder.github.io/ncSimpleHtmlEditor/demo/grayscale/ 12 | 13 | ## Basic Usage 14 | 15 | Download your template from here https://startbootstrap.com/theme/agency or any other from here: https://github.com/StartBootstrap 16 | 17 | Add this code at the end of index.html, immediately before /body: 18 | 19 | ```html 20 | 21 |
22 | 23 | 24 | 28 |
29 | ``` 30 | 31 | When you finish editing your template click on save, you get an index.html file that you must replace with the one you downloaded with the template. 32 | 33 | And that's it! 34 | 35 | ## Advanced Usage 36 | 37 | Go: https://github.com/TheNocoder/ncSimpleHtmlEditor 38 | 39 | ## Copyright and License 40 | 41 | MIT license 42 | -------------------------------------------------------------------------------- /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 | offset: 74, 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 | }); 50 | -------------------------------------------------------------------------------- /src/pug/includes/portfolio-modal-4.pug: -------------------------------------------------------------------------------- 1 | // Portfolio item 4 modal popup 2 | #portfolioModal4.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true') 3 | .modal-dialog 4 | .modal-content 5 | .close-modal(data-bs-dismiss='modal') 6 | img(src='assets/img/close-icon.svg', alt='Close modal') 7 | .container 8 | .row.justify-content-center 9 | .col-lg-8 10 | .modal-body 11 | // Project details 12 | h2.text-uppercase Project Name 13 | p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur. 14 | img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/4.jpg', alt='...') 15 | p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo! 16 | ul.list-inline 17 | li 18 | strong Client: 19 | | Lines 20 | li 21 | strong Category: 22 | | Branding 23 | button.btn.btn-primary.btn-xl.text-uppercase(data-bs-dismiss='modal', type='button') 24 | i.fas.fa-xmark.me-1 25 | | Close Project -------------------------------------------------------------------------------- /src/pug/includes/portfolio-modal-3.pug: -------------------------------------------------------------------------------- 1 | // Portfolio item 3 modal popup 2 | #portfolioModal3.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true') 3 | .modal-dialog 4 | .modal-content 5 | .close-modal(data-bs-dismiss='modal') 6 | img(src='assets/img/close-icon.svg', alt='Close modal') 7 | .container 8 | .row.justify-content-center 9 | .col-lg-8 10 | .modal-body 11 | // Project details 12 | h2.text-uppercase Project Name 13 | p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur. 14 | img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/3.jpg', alt='...') 15 | p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo! 16 | ul.list-inline 17 | li 18 | strong Client: 19 | | Finish 20 | li 21 | strong Category: 22 | | Identity 23 | button.btn.btn-primary.btn-xl.text-uppercase(data-bs-dismiss='modal', type='button') 24 | i.fas.fa-xmark.me-1 25 | | Close Project -------------------------------------------------------------------------------- /src/pug/includes/portfolio-modal-6.pug: -------------------------------------------------------------------------------- 1 | // Portfolio item 6 modal popup 2 | #portfolioModal6.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true') 3 | .modal-dialog 4 | .modal-content 5 | .close-modal(data-bs-dismiss='modal') 6 | img(src='assets/img/close-icon.svg', alt='Close modal') 7 | .container 8 | .row.justify-content-center 9 | .col-lg-8 10 | .modal-body 11 | // Project details 12 | h2.text-uppercase Project Name 13 | p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur. 14 | img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/6.jpg', alt='...') 15 | p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo! 16 | ul.list-inline 17 | li 18 | strong Client: 19 | | Window 20 | li 21 | strong Category: 22 | | Photography 23 | button.btn.btn-primary.btn-xl.text-uppercase(data-bs-dismiss='modal', type='button') 24 | i.fas.fa-xmark.me-1 25 | | Close Project -------------------------------------------------------------------------------- /src/pug/includes/portfolio-modal-1.pug: -------------------------------------------------------------------------------- 1 | // Portfolio item 1 modal popup 2 | #portfolioModal1.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true') 3 | .modal-dialog 4 | .modal-content 5 | .close-modal(data-bs-dismiss='modal') 6 | img(src='assets/img/close-icon.svg', alt='Close modal') 7 | .container 8 | .row.justify-content-center 9 | .col-lg-8 10 | .modal-body 11 | // Project details 12 | h2.text-uppercase Project Name 13 | p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur. 14 | img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/1.jpg', alt='...') 15 | p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo! 16 | ul.list-inline 17 | li 18 | strong Client: 19 | | Threads 20 | li 21 | strong Category: 22 | | Illustration 23 | button.btn.btn-primary.btn-xl.text-uppercase(data-bs-dismiss='modal', type='button') 24 | i.fas.fa-xmark.me-1 25 | | Close Project -------------------------------------------------------------------------------- /src/pug/includes/portfolio-modal-2.pug: -------------------------------------------------------------------------------- 1 | // Portfolio item 2 modal popup 2 | #portfolioModal2.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true') 3 | .modal-dialog 4 | .modal-content 5 | .close-modal(data-bs-dismiss='modal') 6 | img(src='assets/img/close-icon.svg', alt='Close modal') 7 | .container 8 | .row.justify-content-center 9 | .col-lg-8 10 | .modal-body 11 | // Project details 12 | h2.text-uppercase Project Name 13 | p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur. 14 | img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/2.jpg', alt='...') 15 | p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo! 16 | ul.list-inline 17 | li 18 | strong Client: 19 | | Explore 20 | li 21 | strong Category: 22 | | Graphic Design 23 | button.btn.btn-primary.btn-xl.text-uppercase(data-bs-dismiss='modal', type='button') 24 | i.fas.fa-xmark.me-1 25 | | Close Project -------------------------------------------------------------------------------- /src/pug/includes/portfolio-modal-5.pug: -------------------------------------------------------------------------------- 1 | // Portfolio item 5 modal popup 2 | #portfolioModal5.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true') 3 | .modal-dialog 4 | .modal-content 5 | .close-modal(data-bs-dismiss='modal') 6 | img(src='assets/img/close-icon.svg', alt='Close modal') 7 | .container 8 | .row.justify-content-center 9 | .col-lg-8 10 | .modal-body 11 | // Project details 12 | h2.text-uppercase Project Name 13 | p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur. 14 | img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/5.jpg', alt='...') 15 | p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo! 16 | ul.list-inline 17 | li 18 | strong Client: 19 | | Southwest 20 | li 21 | strong Category: 22 | | Website Design 23 | button.btn.btn-primary.btn-xl.text-uppercase(data-bs-dismiss='modal', type='button') 24 | i.fas.fa-xmark.me-1 25 | | Close Project -------------------------------------------------------------------------------- /dist/js/scripts.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Start Bootstrap - Agency v7.0.11 (https://startbootstrap.com/theme/agency) 3 | * Copyright 2013-2022 Start Bootstrap 4 | * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-agency/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 | offset: 74, 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 | }); 55 | -------------------------------------------------------------------------------- /src/scss/sections/_contact.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Contact section styling 3 | // 4 | 5 | section#contact { 6 | background-color: $gray-900; 7 | background-image: url("../assets/img/map-image.png"); 8 | background-repeat: no-repeat; 9 | background-position: center; 10 | 11 | .section-heading { 12 | color: $white; 13 | } 14 | 15 | form#contactForm { 16 | .form-group { 17 | margin-bottom: $grid-gutter-width; 18 | 19 | input, 20 | textarea { 21 | padding: 1.25rem; 22 | } 23 | 24 | input.form-control { 25 | height: auto; 26 | } 27 | } 28 | 29 | .form-group-textarea { 30 | height: 100%; 31 | 32 | textarea { 33 | height: 100%; 34 | min-height: 10rem; 35 | } 36 | } 37 | 38 | p.help-block { 39 | margin: 0; 40 | } 41 | 42 | .form-control:focus { 43 | border-color: $primary; 44 | box-shadow: none; 45 | } 46 | 47 | ::-webkit-input-placeholder { 48 | font-family: $headings-font-family; 49 | font-weight: $headings-font-weight; 50 | color: $gray-400; 51 | } 52 | 53 | :-moz-placeholder { 54 | font-family: $headings-font-family; 55 | font-weight: $headings-font-weight; 56 | color: $gray-400; 57 | } 58 | 59 | ::-moz-placeholder { 60 | font-family: $headings-font-family; 61 | font-weight: $headings-font-weight; 62 | color: $gray-400; 63 | } 64 | 65 | :-ms-input-placeholder { 66 | font-family: $headings-font-family; 67 | font-weight: $headings-font-weight; 68 | color: $gray-400; 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Agency", 3 | "name": "startbootstrap-agency", 4 | "version": "7.0.11", 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": "Agency is a 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/agency", 25 | "bugs": { 26 | "url": "https://github.com/StartBootstrap/startbootstrap-agency/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-agency.git" 37 | }, 38 | "dependencies": { 39 | "bootstrap": "5.1.3" 40 | }, 41 | "devDependencies": { 42 | "autoprefixer": "10.4.4", 43 | "browser-sync": "2.27.9", 44 | "chokidar": "3.5.3", 45 | "concurrently": "6.3.0", 46 | "postcss": "8.4.12", 47 | "prettier": "2.6.0", 48 | "pug": "3.0.2", 49 | "sass": "1.49.9", 50 | "shelljs": "0.8.5", 51 | "upath": "2.0.1" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/assets/img/logos/ibm.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 24 | 25 | -------------------------------------------------------------------------------- /dist/assets/img/logos/ibm.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 24 | 25 | -------------------------------------------------------------------------------- /src/scss/components/_navbar.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Navbar 3 | // 4 | 5 | #mainNav { 6 | padding-top: 1rem; 7 | padding-bottom: 1rem; 8 | background-color: $gray-900; 9 | 10 | .navbar-toggler { 11 | 12 | padding: 0.75rem; 13 | font-size: 0.75rem; 14 | font-family: $headings-font-family; 15 | text-transform: uppercase; 16 | font-weight: $font-weight-bold; 17 | } 18 | 19 | .navbar-brand { 20 | color: $primary; 21 | font-family: $headings-font-family; 22 | font-weight: $headings-font-weight; 23 | letter-spacing: $headings-letter-spacing; 24 | text-transform: uppercase; 25 | 26 | img { 27 | height: 1.5rem; 28 | } 29 | } 30 | 31 | .navbar-nav { 32 | .nav-item { 33 | .nav-link { 34 | font-family: $headings-font-family; 35 | font-size: 0.95rem; 36 | color: $white; 37 | letter-spacing: $headings-letter-spacing; 38 | 39 | &.active, 40 | &:hover { 41 | color: $primary; 42 | } 43 | } 44 | } 45 | } 46 | } 47 | 48 | // Responsive styling for screen width equal to or greater than the large breakpoint 49 | @include media-breakpoint-up(lg) { 50 | #mainNav { 51 | padding-top: 1.5rem; 52 | padding-bottom: 1.5rem; 53 | border: none; 54 | background-color: transparent; 55 | transition: padding-top 0.3s ease-in-out, 56 | padding-bottom 0.3s ease-in-out; 57 | 58 | .navbar-brand { 59 | font-size: 1.5em; 60 | transition: font-size 0.3s ease-in-out; 61 | 62 | img { 63 | height: 2rem; 64 | transition: height 0.3s ease-in-out; 65 | } 66 | } 67 | 68 | // Styling for when the navbar shrinks on larger screens 69 | &.navbar-shrink { 70 | padding-top: 1rem; 71 | padding-bottom: 1rem; 72 | background-color: $gray-900; 73 | 74 | .navbar-brand { 75 | font-size: 1.25em; 76 | 77 | svg, 78 | img { 79 | height: 1.5rem; 80 | } 81 | } 82 | } 83 | 84 | .navbar-nav .nav-item { 85 | margin-right: 1rem; 86 | 87 | &:last-child { 88 | margin-right: 0; 89 | } 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /src/scss/sections/_portfolio.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Portfolio section styling 3 | // 4 | 5 | #portfolio { 6 | .portfolio-item { 7 | max-width: 26rem; 8 | margin-left: auto; 9 | margin-right: auto; 10 | 11 | .portfolio-link { 12 | position: relative; 13 | display: block; 14 | margin: 0 auto; 15 | 16 | .portfolio-hover { 17 | display: flex; 18 | position: absolute; 19 | width: 100%; 20 | height: 100%; 21 | background: fade-out($primary, 0.1); 22 | align-items: center; 23 | justify-content: center; 24 | opacity: 0; 25 | transition: opacity ease-in-out 0.25s; 26 | 27 | .portfolio-hover-content { 28 | font-size: 1.25rem; 29 | color: white; 30 | } 31 | } 32 | 33 | &:hover { 34 | .portfolio-hover { 35 | opacity: 1; 36 | } 37 | } 38 | } 39 | 40 | .portfolio-caption { 41 | padding: 1.5rem; 42 | text-align: center; 43 | background-color: $white; 44 | 45 | .portfolio-caption-heading { 46 | font-size: 1.5rem; 47 | font-family: $headings-font-family; 48 | font-weight: $headings-font-weight; 49 | margin-bottom: 0; 50 | } 51 | 52 | .portfolio-caption-subheading { 53 | font-style: italic; 54 | font-family: $subheadings-font-family; 55 | } 56 | } 57 | } 58 | } 59 | 60 | .portfolio-modal { 61 | .modal-dialog { 62 | margin: 1rem; 63 | max-width: 100vw; 64 | } 65 | 66 | .modal-content { 67 | padding-top: 6rem; 68 | padding-bottom: 6rem; 69 | text-align: center; 70 | 71 | h2 { 72 | font-size: 3rem; 73 | line-height: 3rem; 74 | } 75 | 76 | p.item-intro { 77 | font-style: italic; 78 | margin-bottom: 2rem; 79 | font-family: $subheadings-font-family; 80 | } 81 | 82 | p { 83 | margin-bottom: 2rem; 84 | } 85 | 86 | ul.list-inline { 87 | margin-bottom: 2rem; 88 | } 89 | 90 | img { 91 | margin-bottom: 2rem; 92 | } 93 | } 94 | 95 | .close-modal { 96 | position: absolute; 97 | top: 1.5rem; 98 | right: 1.5rem; 99 | width: 3rem; 100 | height: 3rem; 101 | cursor: pointer; 102 | background-color: transparent; 103 | 104 | &:hover { 105 | opacity: 0.3; 106 | } 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /dist/assets/img/logos/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/assets/img/logos/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /dist/assets/img/logos/google.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 13 | 14 | 19 | 23 | 30 | 35 | 36 | -------------------------------------------------------------------------------- /src/assets/img/logos/google.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 13 | 14 | 19 | 23 | 30 | 35 | 36 | -------------------------------------------------------------------------------- /dist/assets/img/logos/microsoft.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /src/assets/img/logos/microsoft.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /src/scss/sections/_timeline.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Timeline section styling 3 | // 4 | 5 | .timeline { 6 | position: relative; 7 | padding: 0; 8 | list-style: none; 9 | 10 | &:before { 11 | position: absolute; 12 | top: 0; 13 | bottom: 0; 14 | left: 40px; 15 | width: 2px; 16 | margin-left: -1.5px; 17 | content: ""; 18 | background-color: $gray-200; 19 | } 20 | 21 | >li { 22 | position: relative; 23 | min-height: 50px; 24 | margin-bottom: 50px; 25 | 26 | &:after, 27 | &:before { 28 | display: table; 29 | content: " "; 30 | } 31 | 32 | &:after { 33 | clear: both; 34 | } 35 | 36 | .timeline-panel { 37 | position: relative; 38 | float: right; 39 | width: 100%; 40 | padding: 0 20px 0 100px; 41 | text-align: left; 42 | 43 | &:before { 44 | right: auto; 45 | left: -15px; 46 | border-right-width: 15px; 47 | border-left-width: 0; 48 | } 49 | 50 | &:after { 51 | right: auto; 52 | left: -14px; 53 | border-right-width: 14px; 54 | border-left-width: 0; 55 | } 56 | } 57 | 58 | .timeline-image { 59 | position: absolute; 60 | z-index: 100; 61 | left: 0; 62 | width: 80px; 63 | height: 80px; 64 | margin-left: 0; 65 | text-align: center; 66 | color: white; 67 | border: 7px solid $gray-200; 68 | border-radius: 100%; 69 | background-color: $primary; 70 | 71 | h4 { 72 | font-size: 10px; 73 | line-height: 14px; 74 | margin-top: 12px; 75 | } 76 | } 77 | 78 | &.timeline-inverted>.timeline-panel { 79 | float: right; 80 | padding: 0 20px 0 100px; 81 | text-align: left; 82 | 83 | &:before { 84 | right: auto; 85 | left: -15px; 86 | border-right-width: 15px; 87 | border-left-width: 0; 88 | } 89 | 90 | &:after { 91 | right: auto; 92 | left: -14px; 93 | border-right-width: 14px; 94 | border-left-width: 0; 95 | } 96 | } 97 | 98 | &:last-child { 99 | margin-bottom: 0; 100 | } 101 | } 102 | 103 | .timeline-heading { 104 | h4 { 105 | margin-top: 0; 106 | color: inherit; 107 | 108 | &.subheading { 109 | text-transform: none; 110 | } 111 | } 112 | } 113 | 114 | .timeline-body { 115 | 116 | >ul, 117 | >p { 118 | margin-bottom: 0; 119 | } 120 | } 121 | } 122 | 123 | @include media-breakpoint-up(md) { 124 | .timeline { 125 | &:before { 126 | left: 50%; 127 | } 128 | 129 | >li { 130 | min-height: 100px; 131 | margin-bottom: 100px; 132 | 133 | .timeline-panel { 134 | float: left; 135 | width: 41%; 136 | padding: 0 20px 20px 30px; 137 | text-align: right; 138 | } 139 | 140 | .timeline-image { 141 | left: 50%; 142 | width: 100px; 143 | height: 100px; 144 | margin-left: -50px; 145 | 146 | h4 { 147 | font-size: 13px; 148 | line-height: 18px; 149 | margin-top: 16px; 150 | } 151 | } 152 | 153 | &.timeline-inverted>.timeline-panel { 154 | float: right; 155 | padding: 0 30px 20px 20px; 156 | text-align: left; 157 | } 158 | } 159 | } 160 | } 161 | 162 | @include media-breakpoint-up(lg) { 163 | .timeline { 164 | >li { 165 | min-height: 150px; 166 | 167 | .timeline-panel { 168 | padding: 0 20px 20px; 169 | } 170 | 171 | .timeline-image { 172 | width: 150px; 173 | height: 150px; 174 | margin-left: -75px; 175 | 176 | h4 { 177 | font-size: 18px; 178 | line-height: 26px; 179 | margin-top: 30px; 180 | } 181 | } 182 | 183 | &.timeline-inverted>.timeline-panel { 184 | padding: 0 20px 20px; 185 | } 186 | } 187 | } 188 | } 189 | 190 | @include media-breakpoint-up(xl) { 191 | .timeline { 192 | >li { 193 | min-height: 170px; 194 | 195 | .timeline-panel { 196 | padding: 0 20px 20px 100px; 197 | } 198 | 199 | .timeline-image { 200 | width: 170px; 201 | height: 170px; 202 | margin-left: -85px; 203 | 204 | h4 { 205 | margin-top: 40px; 206 | } 207 | } 208 | 209 | &.timeline-inverted>.timeline-panel { 210 | padding: 0 100px 20px 20px; 211 | } 212 | } 213 | } 214 | } 215 | -------------------------------------------------------------------------------- /dist/assets/img/navbar-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/img/navbar-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /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 Agency - Start Bootstrap Theme 12 | 13 | // Favicon 14 | link(rel='icon', type='image/x-icon', href='assets/favicon.ico') 15 | 16 | // Font Awesome icons (free version) 17 | script(src='https://use.fontawesome.com/releases/v6.1.0/js/all.js', crossorigin='anonymous') 18 | 19 | // Google fonts 20 | link(href='https://fonts.googleapis.com/css?family=Montserrat:400,700', rel='stylesheet', type='text/css') 21 | link(href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700', rel='stylesheet', type='text/css') 22 | 23 | // Core theme CSS (includes Bootstrap) 24 | link(href='css/styles.css', rel='stylesheet') 25 | 26 | body#page-top 27 | 28 | // Navigation 29 | nav#mainNav.navbar.navbar-expand-lg.navbar-dark.fixed-top 30 | .container 31 | a.navbar-brand(href='#page-top') 32 | img(src='assets/img/navbar-logo.svg', alt='...') 33 | button.navbar-toggler(type='button', data-bs-toggle='collapse', data-bs-target='#navbarResponsive', aria-controls='navbarResponsive', aria-expanded='false', aria-label='Toggle navigation') 34 | | Menu 35 | i.fas.fa-bars.ms-1 36 | #navbarResponsive.collapse.navbar-collapse 37 | ul.navbar-nav.text-uppercase.ms-auto.py-4.py-lg-0 38 | li.nav-item 39 | a.nav-link(href='#services') Services 40 | li.nav-item 41 | a.nav-link(href='#portfolio') Portfolio 42 | li.nav-item 43 | a.nav-link(href='#about') About 44 | li.nav-item 45 | a.nav-link(href='#team') Team 46 | li.nav-item 47 | a.nav-link(href='#contact') Contact 48 | // Masthead 49 | header.masthead 50 | .container 51 | .masthead-subheading Welcome To Our Studio! 52 | .masthead-heading.text-uppercase It's Nice To Meet You 53 | a.btn.btn-primary.btn-xl.text-uppercase(href='#services') Tell Me More 54 | 55 | // Services 56 | section#services.page-section 57 | .container 58 | .text-center 59 | h2.section-heading.text-uppercase Services 60 | h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur. 61 | .row.text-center 62 | .col-md-4 63 | span.fa-stack.fa-4x 64 | i.fas.fa-circle.fa-stack-2x.text-primary 65 | i.fas.fa-shopping-cart.fa-stack-1x.fa-inverse 66 | h4.my-3 E-Commerce 67 | p.text-muted 68 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit. 69 | .col-md-4 70 | span.fa-stack.fa-4x 71 | i.fas.fa-circle.fa-stack-2x.text-primary 72 | i.fas.fa-laptop.fa-stack-1x.fa-inverse 73 | h4.my-3 Responsive Design 74 | p.text-muted 75 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit. 76 | .col-md-4 77 | span.fa-stack.fa-4x 78 | i.fas.fa-circle.fa-stack-2x.text-primary 79 | i.fas.fa-lock.fa-stack-1x.fa-inverse 80 | h4.my-3 Web Security 81 | p.text-muted 82 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit. 83 | 84 | // Portfolio Grid 85 | section#portfolio.page-section.bg-light 86 | .container 87 | .text-center 88 | h2.section-heading.text-uppercase Portfolio 89 | h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur. 90 | .row 91 | .col-lg-4.col-sm-6.mb-4 92 | // Portfolio item 1 93 | .portfolio-item 94 | a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal1') 95 | .portfolio-hover 96 | .portfolio-hover-content 97 | i.fas.fa-plus.fa-3x 98 | img.img-fluid(src='assets/img/portfolio/1.jpg', alt='...') 99 | .portfolio-caption 100 | .portfolio-caption-heading Threads 101 | .portfolio-caption-subheading.text-muted Illustration 102 | .col-lg-4.col-sm-6.mb-4 103 | // Portfolio item 2 104 | .portfolio-item 105 | a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal2') 106 | .portfolio-hover 107 | .portfolio-hover-content 108 | i.fas.fa-plus.fa-3x 109 | img.img-fluid(src='assets/img/portfolio/2.jpg', alt='...') 110 | .portfolio-caption 111 | .portfolio-caption-heading Explore 112 | .portfolio-caption-subheading.text-muted Graphic Design 113 | .col-lg-4.col-sm-6.mb-4 114 | // Portfolio item 3 115 | .portfolio-item 116 | a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal3') 117 | .portfolio-hover 118 | .portfolio-hover-content 119 | i.fas.fa-plus.fa-3x 120 | img.img-fluid(src='assets/img/portfolio/3.jpg', alt='...') 121 | .portfolio-caption 122 | .portfolio-caption-heading Finish 123 | .portfolio-caption-subheading.text-muted Identity 124 | .col-lg-4.col-sm-6.mb-4.mb-lg-0 125 | // Portfolio item 4 126 | .portfolio-item 127 | a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal4') 128 | .portfolio-hover 129 | .portfolio-hover-content 130 | i.fas.fa-plus.fa-3x 131 | img.img-fluid(src='assets/img/portfolio/4.jpg', alt='...') 132 | .portfolio-caption 133 | .portfolio-caption-heading Lines 134 | .portfolio-caption-subheading.text-muted Branding 135 | .col-lg-4.col-sm-6.mb-4.mb-sm-0 136 | // Portfolio item 5 137 | .portfolio-item 138 | a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal5') 139 | .portfolio-hover 140 | .portfolio-hover-content 141 | i.fas.fa-plus.fa-3x 142 | img.img-fluid(src='assets/img/portfolio/5.jpg', alt='...') 143 | .portfolio-caption 144 | .portfolio-caption-heading Southwest 145 | .portfolio-caption-subheading.text-muted Website Design 146 | .col-lg-4.col-sm-6 147 | // Portfolio item 6 148 | .portfolio-item 149 | a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal6') 150 | .portfolio-hover 151 | .portfolio-hover-content 152 | i.fas.fa-plus.fa-3x 153 | img.img-fluid(src='assets/img/portfolio/6.jpg', alt='...') 154 | .portfolio-caption 155 | .portfolio-caption-heading Window 156 | .portfolio-caption-subheading.text-muted Photography 157 | 158 | // About 159 | section#about.page-section 160 | .container 161 | .text-center 162 | h2.section-heading.text-uppercase About 163 | h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur. 164 | ul.timeline 165 | li 166 | .timeline-image 167 | img.rounded-circle.img-fluid(src='assets/img/about/1.jpg', alt='...') 168 | .timeline-panel 169 | .timeline-heading 170 | h4 2009-2011 171 | h4.subheading Our Humble Beginnings 172 | .timeline-body 173 | p.text-muted 174 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur! 175 | li.timeline-inverted 176 | .timeline-image 177 | img.rounded-circle.img-fluid(src='assets/img/about/2.jpg', alt='...') 178 | .timeline-panel 179 | .timeline-heading 180 | h4 March 2011 181 | h4.subheading An Agency is Born 182 | .timeline-body 183 | p.text-muted 184 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur! 185 | li 186 | .timeline-image 187 | img.rounded-circle.img-fluid(src='assets/img/about/3.jpg', alt='...') 188 | .timeline-panel 189 | .timeline-heading 190 | h4 December 2015 191 | h4.subheading Transition to Full Service 192 | .timeline-body 193 | p.text-muted 194 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur! 195 | li.timeline-inverted 196 | .timeline-image 197 | img.rounded-circle.img-fluid(src='assets/img/about/4.jpg', alt='...') 198 | .timeline-panel 199 | .timeline-heading 200 | h4 July 2020 201 | h4.subheading Phase Two Expansion 202 | .timeline-body 203 | p.text-muted 204 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur! 205 | li.timeline-inverted 206 | .timeline-image 207 | h4 208 | | Be Part 209 | br 210 | | Of Our 211 | br 212 | | Story! 213 | 214 | // Team 215 | section#team.page-section.bg-light 216 | .container 217 | .text-center 218 | h2.section-heading.text-uppercase Our Amazing Team 219 | h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur. 220 | .row 221 | .col-lg-4 222 | .team-member 223 | img.mx-auto.rounded-circle(src='assets/img/team/1.jpg', alt='...') 224 | h4 Parveen Anand 225 | p.text-muted Lead Designer 226 | a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Parveen Anand Twitter Profile') 227 | i.fab.fa-twitter 228 | a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Parveen Anand Facebook Profile') 229 | i.fab.fa-facebook-f 230 | a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Parveen Anand LinkedIn Profile') 231 | i.fab.fa-linkedin-in 232 | .col-lg-4 233 | .team-member 234 | img.mx-auto.rounded-circle(src='assets/img/team/2.jpg', alt='...') 235 | h4 Diana Petersen 236 | p.text-muted Lead Marketer 237 | a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Diana Petersen Twitter Profile') 238 | i.fab.fa-twitter 239 | a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Diana Petersen Facebook Profile') 240 | i.fab.fa-facebook-f 241 | a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Diana Petersen LinkedIn Profile') 242 | i.fab.fa-linkedin-in 243 | .col-lg-4 244 | .team-member 245 | img.mx-auto.rounded-circle(src='assets/img/team/3.jpg', alt='...') 246 | h4 Larry Parker 247 | p.text-muted Lead Developer 248 | a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Larry Parker Twitter Profile') 249 | i.fab.fa-twitter 250 | a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Larry Parker Facebook Profile') 251 | i.fab.fa-facebook-f 252 | a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Larry Parker LinkedIn Profile') 253 | i.fab.fa-linkedin-in 254 | .row 255 | .col-lg-8.mx-auto.text-center 256 | p.large.text-muted 257 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde. 258 | 259 | // Clients 260 | div.py-5 261 | .container 262 | .row.align-items-center 263 | .col-md-3.col-sm-6.my-3 264 | a(href='#!') 265 | img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/microsoft.svg', alt='...', aria-label='Microsoft Logo') 266 | .col-md-3.col-sm-6.my-3 267 | a(href='#!') 268 | img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/google.svg', alt='...', aria-label='Google Logo') 269 | .col-md-3.col-sm-6.my-3 270 | a(href='#!') 271 | img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/facebook.svg', alt='...', aria-label='Facebook Logo') 272 | .col-md-3.col-sm-6.my-3 273 | a(href='#!') 274 | img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/ibm.svg', alt='...', aria-label='IBM Logo') 275 | 276 | // Contact 277 | section#contact.page-section 278 | .container 279 | .text-center 280 | h2.section-heading.text-uppercase Contact Us 281 | h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur. 282 | 283 | // * * * * * * * * * * * * * * * 284 | // * * SB Forms Contact Form * * 285 | // * * * * * * * * * * * * * * * 286 | 287 | // This form is pre-integrated with SB Forms. 288 | // To make this form functional, sign up at 289 | // https://startbootstrap.com/solution/contact-forms 290 | // to get an API token! 291 | 292 | form#contactForm(data-sb-form-api-token='API_TOKEN') 293 | .row.align-items-stretch.mb-5 294 | .col-md-6 295 | .form-group 296 | 297 | // Name input 298 | input#name.form-control( 299 | type='text', 300 | placeholder='Your Name *', 301 | data-sb-validations='required' 302 | ) 303 | .invalid-feedback(data-sb-feedback='name:required') 304 | | A name is required. 305 | 306 | .form-group 307 | 308 | // Email address input 309 | input#email.form-control( 310 | type='email', 311 | placeholder='Your Email *', 312 | data-sb-validations='required,email' 313 | ) 314 | .invalid-feedback(data-sb-feedback='email:required') 315 | | An email is required. 316 | .invalid-feedback(data-sb-feedback='email:email') 317 | | Email is not valid. 318 | 319 | .form-group.mb-md-0 320 | 321 | // Phone number input 322 | input#phone.form-control( 323 | type='tel', 324 | placeholder='Your Phone *', 325 | data-sb-validations='required' 326 | ) 327 | .invalid-feedback(data-sb-feedback='phone:required') 328 | | A phone number is required. 329 | 330 | .col-md-6 331 | .form-group.form-group-textarea.mb-md-0 332 | 333 | // Message input 334 | textarea#message.form-control( 335 | placeholder='Your Message *', 336 | data-sb-validations='required' 337 | ) 338 | .invalid-feedback(data-sb-feedback='message:required') 339 | | A message is required. 340 | 341 | // Submit success message 342 | // 343 | // This is what your users will see when the form 344 | // has successfully submitted 345 | 346 | #submitSuccessMessage.d-none 347 | .text-center.text-white.mb-3 348 | .fw-bolder Form submission successful! 349 | | To activate this form, sign up at 350 | br 351 | a(href='https://startbootstrap.com/solution/contact-forms') https://startbootstrap.com/solution/contact-forms 352 | 353 | // Submit error message 354 | // 355 | // This is what your users will see when there is 356 | // an error submitting the form 357 | 358 | #submitErrorMessage.d-none 359 | .text-center.text-danger.mb-3 Error sending message! 360 | 361 | // Submit Button 362 | .text-center 363 | button#submitButton.btn.btn-primary.btn-xl.text-uppercase.disabled(type='submit') Send Message 364 | 365 | // Footer 366 | footer.footer.py-4 367 | .container 368 | .row.align-items-center 369 | .col-lg-4.text-lg-start 370 | | Copyright © Your Website 2022 371 | .col-lg-4.my-3.my-lg-0 372 | a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Twitter') 373 | i.fab.fa-twitter 374 | a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='Facebook') 375 | i.fab.fa-facebook-f 376 | a.btn.btn-dark.btn-social.mx-2(href='#!', aria-label='LinkedIn') 377 | i.fab.fa-linkedin-in 378 | .col-lg-4.text-lg-end 379 | a.link-dark.text-decoration-none.me-3(href='#!') Privacy Policy 380 | a.link-dark.text-decoration-none(href='#!') Terms of Use 381 | 382 | // Portfolio Modals 383 | include includes/portfolio-modal-1 384 | include includes/portfolio-modal-2 385 | include includes/portfolio-modal-3 386 | include includes/portfolio-modal-4 387 | include includes/portfolio-modal-5 388 | include includes/portfolio-modal-6 389 | 390 | // Bootstrap core JS 391 | script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js') 392 | 393 | // Core theme JS 394 | script(src='js/scripts.js') 395 | 396 | // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 397 | // * * SB Forms JS * * 398 | // * * Activate your form at https://startbootstrap.com/solution/contact-forms * * 399 | // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 400 | 401 | script(src='https://cdn.startbootstrap.com/sb-forms-latest.js') 402 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Agency - Start Bootstrap Theme 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 39 | 40 |
41 |
42 |
Welcome To Our Studio!
43 |
It's Nice To Meet You
44 | Tell Me More 45 |
46 |
47 | 48 |
49 |
50 |
51 |

Services

52 |

Lorem ipsum dolor sit amet consectetur.

53 |
54 |
55 |
56 | 57 | 58 | 59 | 60 |

E-Commerce

61 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

62 |
63 |
64 | 65 | 66 | 67 | 68 |

Responsive Design

69 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

70 |
71 |
72 | 73 | 74 | 75 | 76 |

Web Security

77 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

78 |
79 |
80 |
81 |
82 | 83 |
84 |
85 |
86 |

Portfolio

87 |

Lorem ipsum dolor sit amet consectetur.

88 |
89 |
90 |
91 | 92 |
93 | 94 |
95 |
96 |
97 | ... 98 | 99 |
100 |
Threads
101 |
Illustration
102 |
103 |
104 |
105 |
106 | 107 |
108 | 109 |
110 |
111 |
112 | ... 113 | 114 |
115 |
Explore
116 |
Graphic Design
117 |
118 |
119 |
120 |
121 | 122 |
123 | 124 |
125 |
126 |
127 | ... 128 | 129 |
130 |
Finish
131 |
Identity
132 |
133 |
134 |
135 |
136 | 137 |
138 | 139 |
140 |
141 |
142 | ... 143 | 144 |
145 |
Lines
146 |
Branding
147 |
148 |
149 |
150 |
151 | 152 |
153 | 154 |
155 |
156 |
157 | ... 158 | 159 |
160 |
Southwest
161 |
Website Design
162 |
163 |
164 |
165 |
166 | 167 |
168 | 169 |
170 |
171 |
172 | ... 173 | 174 |
175 |
Window
176 |
Photography
177 |
178 |
179 |
180 |
181 |
182 |
183 | 184 |
185 |
186 |
187 |

About

188 |

Lorem ipsum dolor sit amet consectetur.

189 |
190 | 243 |
244 |
245 | 246 |
247 |
248 |
249 |

Our Amazing Team

250 |

Lorem ipsum dolor sit amet consectetur.

251 |
252 |
253 |
254 |
255 | ... 256 |

Parveen Anand

257 |

Lead Designer

258 | 259 | 260 | 261 |
262 |
263 |
264 |
265 | ... 266 |

Diana Petersen

267 |

Lead Marketer

268 | 269 | 270 | 271 |
272 |
273 |
274 |
275 | ... 276 |

Larry Parker

277 |

Lead Developer

278 | 279 | 280 | 281 |
282 |
283 |
284 |
285 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.

286 |
287 |
288 |
289 | 290 |
291 |
292 |
293 |
294 | ... 295 |
296 |
297 | ... 298 |
299 |
300 | ... 301 |
302 |
303 | ... 304 |
305 |
306 |
307 |
308 | 309 |
310 |
311 |
312 |

Contact Us

313 |

Lorem ipsum dolor sit amet consectetur.

314 |
315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 |
323 |
324 |
325 |
326 | 327 | 328 |
A name is required.
329 |
330 |
331 | 332 | 333 |
An email is required.
334 |
Email is not valid.
335 |
336 |
337 | 338 | 339 |
A phone number is required.
340 |
341 |
342 |
343 |
344 | 345 | 346 |
A message is required.
347 |
348 |
349 |
350 | 351 | 352 | 353 | 354 |
355 |
356 |
Form submission successful!
357 | To activate this form, sign up at 358 |
359 | https://startbootstrap.com/solution/contact-forms 360 |
361 |
362 | 363 | 364 | 365 | 366 |
Error sending message!
367 | 368 |
369 |
370 |
371 |
372 | 373 | 389 | 390 | 391 | 425 | 426 | 460 | 461 | 495 | 496 | 530 | 531 | 565 | 566 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 | 611 | 612 |
613 | 614 | 615 | 655 |
656 | 657 | 658 | 659 | --------------------------------------------------------------------------------