initial Bootstrap 5 commit
This commit is contained in:
David Miller
parent
68298be8b9
commit
ca70462a27
BIN
dist/assets/img/about/1.jpg
vendored
BIN
dist/assets/img/about/1.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 19 KiB |
BIN
dist/assets/img/about/2.jpg
vendored
BIN
dist/assets/img/about/2.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 9.9 KiB |
BIN
dist/assets/img/about/3.jpg
vendored
BIN
dist/assets/img/about/3.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 18 KiB |
BIN
dist/assets/img/about/4.jpg
vendored
BIN
dist/assets/img/about/4.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 16 KiB |
BIN
dist/assets/img/portfolio/1.jpg
vendored
Normal file
BIN
dist/assets/img/portfolio/1.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
dist/assets/img/portfolio/2.jpg
vendored
Normal file
BIN
dist/assets/img/portfolio/2.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
dist/assets/img/portfolio/3.jpg
vendored
Normal file
BIN
dist/assets/img/portfolio/3.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
dist/assets/img/portfolio/4.jpg
vendored
Normal file
BIN
dist/assets/img/portfolio/4.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
dist/assets/img/portfolio/5.jpg
vendored
Normal file
BIN
dist/assets/img/portfolio/5.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
dist/assets/img/portfolio/6.jpg
vendored
Normal file
BIN
dist/assets/img/portfolio/6.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
dist/assets/img/team/1.jpg
vendored
BIN
dist/assets/img/team/1.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 39 KiB |
BIN
dist/assets/img/team/2.jpg
vendored
BIN
dist/assets/img/team/2.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 60 KiB |
BIN
dist/assets/img/team/3.jpg
vendored
BIN
dist/assets/img/team/3.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 56 KiB |
12573
dist/css/styles.css
vendored
12573
dist/css/styles.css
vendored
File diff suppressed because it is too large
Load Diff
123
dist/index.html
vendored
123
dist/index.html
vendored
@ -6,6 +6,7 @@
|
||||
<meta name="description" content="" />
|
||||
<meta name="author" content="" />
|
||||
<title>Agency - Start Bootstrap Theme</title>
|
||||
<!-- Favicon-->
|
||||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
||||
<!-- Font Awesome icons (free version)-->
|
||||
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
|
||||
@ -19,18 +20,18 @@
|
||||
<!-- Navigation-->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
|
||||
<div class="container">
|
||||
<a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="assets/img/navbar-logo.svg" alt="..." /></a>
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<a class="navbar-brand" href="#page-top"><img src="assets/img/navbar-logo.svg" alt="..." /></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
||||
Menu
|
||||
<i class="fas fa-bars ml-1"></i>
|
||||
<i class="fas fa-bars ms-1"></i>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarResponsive">
|
||||
<ul class="navbar-nav text-uppercase ml-auto">
|
||||
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Services</a></li>
|
||||
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a></li>
|
||||
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#team">Team</a></li>
|
||||
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
|
||||
<ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
|
||||
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#team">Team</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -40,7 +41,7 @@
|
||||
<div class="container">
|
||||
<div class="masthead-subheading">Welcome To Our Studio!</div>
|
||||
<div class="masthead-heading text-uppercase">It's Nice To Meet You</div>
|
||||
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>
|
||||
<a class="btn btn-primary btn-xl text-uppercase" href="#services">Tell Me More</a>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Services-->
|
||||
@ -88,11 +89,11 @@
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-sm-6 mb-4">
|
||||
<div class="portfolio-item">
|
||||
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
|
||||
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal1">
|
||||
<div class="portfolio-hover">
|
||||
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
|
||||
</div>
|
||||
<img class="img-fluid" src="assets/img/portfolio/01-thumbnail.jpg" alt="..." />
|
||||
<img class="img-fluid" src="assets/img/portfolio/1.jpg" alt="..." />
|
||||
</a>
|
||||
<div class="portfolio-caption">
|
||||
<div class="portfolio-caption-heading">Threads</div>
|
||||
@ -102,11 +103,11 @@
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 mb-4">
|
||||
<div class="portfolio-item">
|
||||
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal2">
|
||||
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal2">
|
||||
<div class="portfolio-hover">
|
||||
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
|
||||
</div>
|
||||
<img class="img-fluid" src="assets/img/portfolio/02-thumbnail.jpg" alt="..." />
|
||||
<img class="img-fluid" src="assets/img/portfolio/2.jpg" alt="..." />
|
||||
</a>
|
||||
<div class="portfolio-caption">
|
||||
<div class="portfolio-caption-heading">Explore</div>
|
||||
@ -116,11 +117,11 @@
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 mb-4">
|
||||
<div class="portfolio-item">
|
||||
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal3">
|
||||
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal3">
|
||||
<div class="portfolio-hover">
|
||||
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
|
||||
</div>
|
||||
<img class="img-fluid" src="assets/img/portfolio/03-thumbnail.jpg" alt="..." />
|
||||
<img class="img-fluid" src="assets/img/portfolio/3.jpg" alt="..." />
|
||||
</a>
|
||||
<div class="portfolio-caption">
|
||||
<div class="portfolio-caption-heading">Finish</div>
|
||||
@ -130,11 +131,11 @@
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 mb-4 mb-lg-0">
|
||||
<div class="portfolio-item">
|
||||
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal4">
|
||||
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal4">
|
||||
<div class="portfolio-hover">
|
||||
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
|
||||
</div>
|
||||
<img class="img-fluid" src="assets/img/portfolio/04-thumbnail.jpg" alt="..." />
|
||||
<img class="img-fluid" src="assets/img/portfolio/4.jpg" alt="..." />
|
||||
</a>
|
||||
<div class="portfolio-caption">
|
||||
<div class="portfolio-caption-heading">Lines</div>
|
||||
@ -144,11 +145,11 @@
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 mb-4 mb-sm-0">
|
||||
<div class="portfolio-item">
|
||||
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal5">
|
||||
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal5">
|
||||
<div class="portfolio-hover">
|
||||
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
|
||||
</div>
|
||||
<img class="img-fluid" src="assets/img/portfolio/05-thumbnail.jpg" alt="..." />
|
||||
<img class="img-fluid" src="assets/img/portfolio/5.jpg" alt="..." />
|
||||
</a>
|
||||
<div class="portfolio-caption">
|
||||
<div class="portfolio-caption-heading">Southwest</div>
|
||||
@ -158,11 +159,11 @@
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<div class="portfolio-item">
|
||||
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal6">
|
||||
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal6">
|
||||
<div class="portfolio-hover">
|
||||
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
|
||||
</div>
|
||||
<img class="img-fluid" src="assets/img/portfolio/06-thumbnail.jpg" alt="..." />
|
||||
<img class="img-fluid" src="assets/img/portfolio/6.jpg" alt="..." />
|
||||
</a>
|
||||
<div class="portfolio-caption">
|
||||
<div class="portfolio-caption-heading">Window</div>
|
||||
@ -246,7 +247,7 @@
|
||||
<div class="col-lg-4">
|
||||
<div class="team-member">
|
||||
<img class="mx-auto rounded-circle" src="assets/img/team/1.jpg" alt="..." />
|
||||
<h4>Kay Garland</h4>
|
||||
<h4>Parveen Anand</h4>
|
||||
<p class="text-muted">Lead Designer</p>
|
||||
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
|
||||
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
|
||||
@ -256,7 +257,7 @@
|
||||
<div class="col-lg-4">
|
||||
<div class="team-member">
|
||||
<img class="mx-auto rounded-circle" src="assets/img/team/2.jpg" alt="..." />
|
||||
<h4>Larry Parker</h4>
|
||||
<h4>Diana Petersen</h4>
|
||||
<p class="text-muted">Lead Marketer</p>
|
||||
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
|
||||
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
|
||||
@ -266,7 +267,7 @@
|
||||
<div class="col-lg-4">
|
||||
<div class="team-member">
|
||||
<img class="mx-auto rounded-circle" src="assets/img/team/3.jpg" alt="..." />
|
||||
<h4>Diana Petersen</h4>
|
||||
<h4>Larry Parker</h4>
|
||||
<p class="text-muted">Lead Developer</p>
|
||||
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
|
||||
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
|
||||
@ -305,25 +306,25 @@
|
||||
<h2 class="section-heading text-uppercase">Contact Us</h2>
|
||||
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
|
||||
</div>
|
||||
<form id="contactForm" name="sentMessage" novalidate="novalidate">
|
||||
<form id="contactForm">
|
||||
<div class="row align-items-stretch mb-5">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<input class="form-control" id="name" type="text" placeholder="Your Name *" required="required" data-validation-required-message="Please enter your name." />
|
||||
<input class="form-control" id="name" type="text" placeholder="Your Name *" required="required" />
|
||||
<p class="help-block text-danger"></p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input class="form-control" id="email" type="email" placeholder="Your Email *" required="required" data-validation-required-message="Please enter your email address." />
|
||||
<input class="form-control" id="email" type="email" placeholder="Your Email *" required="required" />
|
||||
<p class="help-block text-danger"></p>
|
||||
</div>
|
||||
<div class="form-group mb-md-0">
|
||||
<input class="form-control" id="phone" type="tel" placeholder="Your Phone *" required="required" data-validation-required-message="Please enter your phone number." />
|
||||
<input class="form-control" id="phone" type="tel" placeholder="Your Phone *" required="required" />
|
||||
<p class="help-block text-danger"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group form-group-textarea mb-md-0">
|
||||
<textarea class="form-control" id="message" placeholder="Your Message *" required="required" data-validation-required-message="Please enter a message."></textarea>
|
||||
<textarea class="form-control" id="message" placeholder="Your Message *" required="required"></textarea>
|
||||
<p class="help-block text-danger"></p>
|
||||
</div>
|
||||
</div>
|
||||
@ -339,7 +340,7 @@
|
||||
<footer class="footer py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-4 text-lg-left">
|
||||
<div class="col-lg-4 text-lg-start">
|
||||
Copyright © Your Website
|
||||
<!-- This script automatically adds the current year to your website footer-->
|
||||
<!-- (credit: https://updateyourfooter.com/)-->
|
||||
@ -352,8 +353,8 @@
|
||||
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
|
||||
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
|
||||
</div>
|
||||
<div class="col-lg-4 text-lg-right">
|
||||
<a class="mr-3" href="#!">Privacy Policy</a>
|
||||
<div class="col-lg-4 text-lg-end">
|
||||
<a class="me-3" href="#!">Privacy Policy</a>
|
||||
<a href="#!">Terms of Use</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -364,7 +365,7 @@
|
||||
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
@ -372,15 +373,15 @@
|
||||
<!-- Project Details Go Here-->
|
||||
<h2 class="text-uppercase">Project Name</h2>
|
||||
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
|
||||
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/01-full.jpg" alt="..." />
|
||||
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/1.jpg" alt="..." />
|
||||
<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!</p>
|
||||
<ul class="list-inline">
|
||||
<li>Date: January 2021</li>
|
||||
<li>Client: Threads</li>
|
||||
<li>Category: Illustration</li>
|
||||
</ul>
|
||||
<button class="btn btn-primary" data-dismiss="modal" type="button">
|
||||
<i class="fas fa-times mr-1"></i>
|
||||
<button class="btn btn-primary" data-bs-dismiss="modal" type="button">
|
||||
<i class="fas fa-times me-1"></i>
|
||||
Close Project
|
||||
</button>
|
||||
</div>
|
||||
@ -394,7 +395,7 @@
|
||||
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
@ -402,15 +403,15 @@
|
||||
<!-- Project Details Go Here-->
|
||||
<h2 class="text-uppercase">Project Name</h2>
|
||||
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
|
||||
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/02-full.jpg" alt="..." />
|
||||
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/2.jpg" alt="..." />
|
||||
<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!</p>
|
||||
<ul class="list-inline">
|
||||
<li>Date: January 2021</li>
|
||||
<li>Client: Explore</li>
|
||||
<li>Category: Graphic Design</li>
|
||||
</ul>
|
||||
<button class="btn btn-primary" data-dismiss="modal" type="button">
|
||||
<i class="fas fa-times mr-1"></i>
|
||||
<button class="btn btn-primary" data-bs-dismiss="modal" type="button">
|
||||
<i class="fas fa-times me-1"></i>
|
||||
Close Project
|
||||
</button>
|
||||
</div>
|
||||
@ -424,7 +425,7 @@
|
||||
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
@ -432,15 +433,15 @@
|
||||
<!-- Project Details Go Here-->
|
||||
<h2 class="text-uppercase">Project Name</h2>
|
||||
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
|
||||
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/03-full.jpg" alt="..." />
|
||||
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/3.jpg" alt="..." />
|
||||
<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!</p>
|
||||
<ul class="list-inline">
|
||||
<li>Date: January 2021</li>
|
||||
<li>Client: Finish</li>
|
||||
<li>Category: Identity</li>
|
||||
</ul>
|
||||
<button class="btn btn-primary" data-dismiss="modal" type="button">
|
||||
<i class="fas fa-times mr-1"></i>
|
||||
<button class="btn btn-primary" data-bs-dismiss="modal" type="button">
|
||||
<i class="fas fa-times me-1"></i>
|
||||
Close Project
|
||||
</button>
|
||||
</div>
|
||||
@ -454,7 +455,7 @@
|
||||
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
@ -462,15 +463,15 @@
|
||||
<!-- Project Details Go Here-->
|
||||
<h2 class="text-uppercase">Project Name</h2>
|
||||
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
|
||||
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/04-full.jpg" alt="..." />
|
||||
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/4.jpg" alt="..." />
|
||||
<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!</p>
|
||||
<ul class="list-inline">
|
||||
<li>Date: January 2021</li>
|
||||
<li>Client: Lines</li>
|
||||
<li>Category: Branding</li>
|
||||
</ul>
|
||||
<button class="btn btn-primary" data-dismiss="modal" type="button">
|
||||
<i class="fas fa-times mr-1"></i>
|
||||
<button class="btn btn-primary" data-bs-dismiss="modal" type="button">
|
||||
<i class="fas fa-times me-1"></i>
|
||||
Close Project
|
||||
</button>
|
||||
</div>
|
||||
@ -484,7 +485,7 @@
|
||||
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
@ -492,15 +493,15 @@
|
||||
<!-- Project Details Go Here-->
|
||||
<h2 class="text-uppercase">Project Name</h2>
|
||||
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
|
||||
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/05-full.jpg" alt="..." />
|
||||
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/5.jpg" alt="..." />
|
||||
<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!</p>
|
||||
<ul class="list-inline">
|
||||
<li>Date: January 2021</li>
|
||||
<li>Client: Southwest</li>
|
||||
<li>Category: Website Design</li>
|
||||
</ul>
|
||||
<button class="btn btn-primary" data-dismiss="modal" type="button">
|
||||
<i class="fas fa-times mr-1"></i>
|
||||
<button class="btn btn-primary" data-bs-dismiss="modal" type="button">
|
||||
<i class="fas fa-times me-1"></i>
|
||||
Close Project
|
||||
</button>
|
||||
</div>
|
||||
@ -514,7 +515,7 @@
|
||||
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
@ -522,15 +523,15 @@
|
||||
<!-- Project Details Go Here-->
|
||||
<h2 class="text-uppercase">Project Name</h2>
|
||||
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
|
||||
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/06-full.jpg" alt="..." />
|
||||
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/6.jpg" alt="..." />
|
||||
<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!</p>
|
||||
<ul class="list-inline">
|
||||
<li>Date: January 2021</li>
|
||||
<li>Client: Window</li>
|
||||
<li>Category: Photography</li>
|
||||
</ul>
|
||||
<button class="btn btn-primary" data-dismiss="modal" type="button">
|
||||
<i class="fas fa-times mr-1"></i>
|
||||
<button class="btn btn-primary btn-lg" data-bs-dismiss="modal" type="button">
|
||||
<i class="fas fa-times me-1"></i>
|
||||
Close Project
|
||||
</button>
|
||||
</div>
|
||||
@ -541,13 +542,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bootstrap core JS-->
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- Third party plugin JS-->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
|
||||
<!-- Contact form JS-->
|
||||
<script src="assets/mail/jqBootstrapValidation.js"></script>
|
||||
<script src="assets/mail/contact_me.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- Core theme JS-->
|
||||
<script src="js/scripts.js"></script>
|
||||
</body>
|
||||
|
||||
71
dist/js/scripts.js
vendored
71
dist/js/scripts.js
vendored
@ -1,56 +1,41 @@
|
||||
/*!
|
||||
* Start Bootstrap - Agency v6.0.5 (https://startbootstrap.com/theme/agency)
|
||||
* Start Bootstrap - Agency v7.0.0 (https://startbootstrap.com/theme/agency)
|
||||
* Copyright 2013-2021 Start Bootstrap
|
||||
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-agency/blob/master/LICENSE)
|
||||
*/
|
||||
(function ($) {
|
||||
"use strict"; // Start of use strict
|
||||
//
|
||||
// Scripts
|
||||
//
|
||||
|
||||
// Smooth scrolling using anime.js
|
||||
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('click', function () {
|
||||
if (
|
||||
location.pathname.replace(/^\//, "") ==
|
||||
this.pathname.replace(/^\//, "") &&
|
||||
location.hostname == this.hostname
|
||||
) {
|
||||
var target = $(this.hash);
|
||||
target = target.length ?
|
||||
target :
|
||||
$("[name=" + this.hash.slice(1) + "]");
|
||||
if (target.length) {
|
||||
anime({
|
||||
targets: 'html, body',
|
||||
scrollTop: target.offset().top - 72,
|
||||
duration: 1000,
|
||||
easing: 'easeInOutExpo'
|
||||
});
|
||||
return false;
|
||||
window.addEventListener('DOMContentLoaded', event => {
|
||||
|
||||
// Shrink navbar
|
||||
var navbarShrink = function () {
|
||||
const navbarCollapsible = document.body.querySelector('#mainNav');
|
||||
if (!navbarCollapsible) {
|
||||
return;
|
||||
}
|
||||
if (window.scrollY === 0) {
|
||||
navbarCollapsible.classList.remove('navbar-shrink')
|
||||
} else {
|
||||
navbarCollapsible.classList.add('navbar-shrink')
|
||||
}
|
||||
});
|
||||
|
||||
// Closes responsive menu when a scroll trigger link is clicked
|
||||
$(".js-scroll-trigger").on('click', function () {
|
||||
$(".navbar-collapse").collapse("hide");
|
||||
});
|
||||
};
|
||||
|
||||
// Activate scrollspy to add active class to navbar items on scroll
|
||||
$("body").scrollspy({
|
||||
target: "#mainNav",
|
||||
// Collapse the navbar if page is not at top
|
||||
navbarShrink();
|
||||
|
||||
// Collapse the navbar when page is scrolled
|
||||
document.addEventListener('scroll', navbarShrink);
|
||||
|
||||
// Activate Bootstrap scrollspy on the mainNav element
|
||||
const mainNav = document.body.querySelector('#mainNav');
|
||||
if (mainNav) {
|
||||
new bootstrap.ScrollSpy(document.body, {
|
||||
target: '#mainNav',
|
||||
offset: 74,
|
||||
});
|
||||
|
||||
// Collapse Navbar
|
||||
var navbarCollapse = function () {
|
||||
if ($("#mainNav").offset().top > 100) {
|
||||
$("#mainNav").addClass("navbar-shrink");
|
||||
} else {
|
||||
$("#mainNav").removeClass("navbar-shrink");
|
||||
}
|
||||
};
|
||||
// Collapse now if page is not at top
|
||||
navbarCollapse();
|
||||
// Collapse the navbar when page is scrolled
|
||||
$(window).on('scroll', navbarCollapse);
|
||||
|
||||
})(jQuery); // End of use strict
|
||||
});
|
||||
|
||||
1459
package-lock.json
generated
1459
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,7 @@
|
||||
{
|
||||
"title": "Agency",
|
||||
"name": "startbootstrap-agency",
|
||||
"version": "6.0.5",
|
||||
"version": "7.0.0",
|
||||
"scripts": {
|
||||
"build": "npm run clean && npm run build:pug && npm run build:scss && npm run build:scripts && npm run build:assets",
|
||||
"build:assets": "node scripts/build-assets.js",
|
||||
@ -36,17 +36,17 @@
|
||||
"url": "https://github.com/StartBootstrap/startbootstrap-agency.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "4.6.0"
|
||||
"bootstrap": "^5.0.0-beta3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "10.2.5",
|
||||
"browser-sync": "2.26.14",
|
||||
"browser-sync": "^2.19.0",
|
||||
"chokidar": "3.5.1",
|
||||
"concurrently": "6.0.2",
|
||||
"postcss": "8.2.13",
|
||||
"prettier": "2.2.1",
|
||||
"pug": "3.0.2",
|
||||
"sass": "1.32.11",
|
||||
"sass": "1.32.12",
|
||||
"shelljs": "0.8.4",
|
||||
"upath": "2.0.1"
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
BIN
src/assets/img/portfolio/1.jpg
Normal file
BIN
src/assets/img/portfolio/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/img/portfolio/2.jpg
Normal file
BIN
src/assets/img/portfolio/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/img/portfolio/3.jpg
Normal file
BIN
src/assets/img/portfolio/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
src/assets/img/portfolio/4.jpg
Normal file
BIN
src/assets/img/portfolio/4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
src/assets/img/portfolio/5.jpg
Normal file
BIN
src/assets/img/portfolio/5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
src/assets/img/portfolio/6.jpg
Normal file
BIN
src/assets/img/portfolio/6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 56 KiB |
@ -1,51 +1,36 @@
|
||||
(function ($) {
|
||||
"use strict"; // Start of use strict
|
||||
//
|
||||
// Scripts
|
||||
//
|
||||
|
||||
// Smooth scrolling using anime.js
|
||||
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('click', function () {
|
||||
if (
|
||||
location.pathname.replace(/^\//, "") ==
|
||||
this.pathname.replace(/^\//, "") &&
|
||||
location.hostname == this.hostname
|
||||
) {
|
||||
var target = $(this.hash);
|
||||
target = target.length ?
|
||||
target :
|
||||
$("[name=" + this.hash.slice(1) + "]");
|
||||
if (target.length) {
|
||||
anime({
|
||||
targets: 'html, body',
|
||||
scrollTop: target.offset().top - 72,
|
||||
duration: 1000,
|
||||
easing: 'easeInOutExpo'
|
||||
});
|
||||
return false;
|
||||
window.addEventListener('DOMContentLoaded', event => {
|
||||
|
||||
// Shrink navbar
|
||||
var navbarShrink = function () {
|
||||
const navbarCollapsible = document.body.querySelector('#mainNav');
|
||||
if (!navbarCollapsible) {
|
||||
return;
|
||||
}
|
||||
if (window.scrollY === 0) {
|
||||
navbarCollapsible.classList.remove('navbar-shrink')
|
||||
} else {
|
||||
navbarCollapsible.classList.add('navbar-shrink')
|
||||
}
|
||||
});
|
||||
|
||||
// Closes responsive menu when a scroll trigger link is clicked
|
||||
$(".js-scroll-trigger").on('click', function () {
|
||||
$(".navbar-collapse").collapse("hide");
|
||||
});
|
||||
};
|
||||
|
||||
// Activate scrollspy to add active class to navbar items on scroll
|
||||
$("body").scrollspy({
|
||||
target: "#mainNav",
|
||||
// Collapse the navbar if page is not at top
|
||||
navbarShrink();
|
||||
|
||||
// Collapse the navbar when page is scrolled
|
||||
document.addEventListener('scroll', navbarShrink);
|
||||
|
||||
// Activate Bootstrap scrollspy on the mainNav element
|
||||
const mainNav = document.body.querySelector('#mainNav');
|
||||
if (mainNav) {
|
||||
new bootstrap.ScrollSpy(document.body, {
|
||||
target: '#mainNav',
|
||||
offset: 74,
|
||||
});
|
||||
|
||||
// Collapse Navbar
|
||||
var navbarCollapse = function () {
|
||||
if ($("#mainNav").offset().top > 100) {
|
||||
$("#mainNav").addClass("navbar-shrink");
|
||||
} else {
|
||||
$("#mainNav").removeClass("navbar-shrink");
|
||||
}
|
||||
};
|
||||
// Collapse now if page is not at top
|
||||
navbarCollapse();
|
||||
// Collapse the navbar when page is scrolled
|
||||
$(window).on('scroll', navbarCollapse);
|
||||
|
||||
})(jQuery); // End of use strict
|
||||
});
|
||||
|
||||
@ -10,6 +10,7 @@ html(lang='en')
|
||||
|
||||
title Agency - Start Bootstrap Theme
|
||||
|
||||
// Favicon
|
||||
link(rel='icon', type='image/x-icon', href='assets/favicon.ico')
|
||||
|
||||
// Font Awesome icons (free version)
|
||||
@ -27,29 +28,29 @@ html(lang='en')
|
||||
// Navigation
|
||||
nav#mainNav.navbar.navbar-expand-lg.navbar-dark.fixed-top
|
||||
.container
|
||||
a.navbar-brand.js-scroll-trigger(href='#page-top')
|
||||
a.navbar-brand(href='#page-top')
|
||||
img(src='assets/img/navbar-logo.svg', alt='...')
|
||||
button.navbar-toggler.navbar-toggler-right(type='button', data-toggle='collapse', data-target='#navbarResponsive', aria-controls='navbarResponsive', aria-expanded='false', aria-label='Toggle navigation')
|
||||
button.navbar-toggler(type='button', data-bs-toggle='collapse', data-bs-target='#navbarResponsive', aria-controls='navbarResponsive', aria-expanded='false', aria-label='Toggle navigation')
|
||||
| Menu
|
||||
i.fas.fa-bars.ml-1
|
||||
i.fas.fa-bars.ms-1
|
||||
#navbarResponsive.collapse.navbar-collapse
|
||||
ul.navbar-nav.text-uppercase.ml-auto
|
||||
ul.navbar-nav.text-uppercase.ms-auto.py-4.py-lg-0
|
||||
li.nav-item
|
||||
a.nav-link.js-scroll-trigger(href='#services') Services
|
||||
a.nav-link(href='#services') Services
|
||||
li.nav-item
|
||||
a.nav-link.js-scroll-trigger(href='#portfolio') Portfolio
|
||||
a.nav-link(href='#portfolio') Portfolio
|
||||
li.nav-item
|
||||
a.nav-link.js-scroll-trigger(href='#about') About
|
||||
a.nav-link(href='#about') About
|
||||
li.nav-item
|
||||
a.nav-link.js-scroll-trigger(href='#team') Team
|
||||
a.nav-link(href='#team') Team
|
||||
li.nav-item
|
||||
a.nav-link.js-scroll-trigger(href='#contact') Contact
|
||||
a.nav-link(href='#contact') Contact
|
||||
// Masthead
|
||||
header.masthead
|
||||
.container
|
||||
.masthead-subheading Welcome To Our Studio!
|
||||
.masthead-heading.text-uppercase It's Nice To Meet You
|
||||
a.btn.btn-primary.btn-xl.text-uppercase.js-scroll-trigger(href='#services') Tell Me More
|
||||
a.btn.btn-primary.btn-xl.text-uppercase(href='#services') Tell Me More
|
||||
|
||||
// Services
|
||||
section#services.page-section
|
||||
@ -89,61 +90,61 @@ html(lang='en')
|
||||
.row
|
||||
.col-lg-4.col-sm-6.mb-4
|
||||
.portfolio-item
|
||||
a.portfolio-link(data-toggle='modal', href='#portfolioModal1')
|
||||
a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal1')
|
||||
.portfolio-hover
|
||||
.portfolio-hover-content
|
||||
i.fas.fa-plus.fa-3x
|
||||
img.img-fluid(src='assets/img/portfolio/01-thumbnail.jpg', alt='...')
|
||||
img.img-fluid(src='assets/img/portfolio/1.jpg', alt='...')
|
||||
.portfolio-caption
|
||||
.portfolio-caption-heading Threads
|
||||
.portfolio-caption-subheading.text-muted Illustration
|
||||
.col-lg-4.col-sm-6.mb-4
|
||||
.portfolio-item
|
||||
a.portfolio-link(data-toggle='modal', href='#portfolioModal2')
|
||||
a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal2')
|
||||
.portfolio-hover
|
||||
.portfolio-hover-content
|
||||
i.fas.fa-plus.fa-3x
|
||||
img.img-fluid(src='assets/img/portfolio/02-thumbnail.jpg', alt='...')
|
||||
img.img-fluid(src='assets/img/portfolio/2.jpg', alt='...')
|
||||
.portfolio-caption
|
||||
.portfolio-caption-heading Explore
|
||||
.portfolio-caption-subheading.text-muted Graphic Design
|
||||
.col-lg-4.col-sm-6.mb-4
|
||||
.portfolio-item
|
||||
a.portfolio-link(data-toggle='modal', href='#portfolioModal3')
|
||||
a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal3')
|
||||
.portfolio-hover
|
||||
.portfolio-hover-content
|
||||
i.fas.fa-plus.fa-3x
|
||||
img.img-fluid(src='assets/img/portfolio/03-thumbnail.jpg', alt='...')
|
||||
img.img-fluid(src='assets/img/portfolio/3.jpg', alt='...')
|
||||
.portfolio-caption
|
||||
.portfolio-caption-heading Finish
|
||||
.portfolio-caption-subheading.text-muted Identity
|
||||
.col-lg-4.col-sm-6.mb-4.mb-lg-0
|
||||
.portfolio-item
|
||||
a.portfolio-link(data-toggle='modal', href='#portfolioModal4')
|
||||
a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal4')
|
||||
.portfolio-hover
|
||||
.portfolio-hover-content
|
||||
i.fas.fa-plus.fa-3x
|
||||
img.img-fluid(src='assets/img/portfolio/04-thumbnail.jpg', alt='...')
|
||||
img.img-fluid(src='assets/img/portfolio/4.jpg', alt='...')
|
||||
.portfolio-caption
|
||||
.portfolio-caption-heading Lines
|
||||
.portfolio-caption-subheading.text-muted Branding
|
||||
.col-lg-4.col-sm-6.mb-4.mb-sm-0
|
||||
.portfolio-item
|
||||
a.portfolio-link(data-toggle='modal', href='#portfolioModal5')
|
||||
a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal5')
|
||||
.portfolio-hover
|
||||
.portfolio-hover-content
|
||||
i.fas.fa-plus.fa-3x
|
||||
img.img-fluid(src='assets/img/portfolio/05-thumbnail.jpg', alt='...')
|
||||
img.img-fluid(src='assets/img/portfolio/5.jpg', alt='...')
|
||||
.portfolio-caption
|
||||
.portfolio-caption-heading Southwest
|
||||
.portfolio-caption-subheading.text-muted Website Design
|
||||
.col-lg-4.col-sm-6
|
||||
.portfolio-item
|
||||
a.portfolio-link(data-toggle='modal', href='#portfolioModal6')
|
||||
a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal6')
|
||||
.portfolio-hover
|
||||
.portfolio-hover-content
|
||||
i.fas.fa-plus.fa-3x
|
||||
img.img-fluid(src='assets/img/portfolio/06-thumbnail.jpg', alt='...')
|
||||
img.img-fluid(src='assets/img/portfolio/6.jpg', alt='...')
|
||||
.portfolio-caption
|
||||
.portfolio-caption-heading Window
|
||||
.portfolio-caption-subheading.text-muted Photography
|
||||
@ -214,7 +215,7 @@ html(lang='en')
|
||||
.col-lg-4
|
||||
.team-member
|
||||
img.mx-auto.rounded-circle(src='assets/img/team/1.jpg', alt='...')
|
||||
h4 Kay Garland
|
||||
h4 Parveen Anand
|
||||
p.text-muted Lead Designer
|
||||
a.btn.btn-dark.btn-social.mx-2(href='#!')
|
||||
i.fab.fa-twitter
|
||||
@ -225,7 +226,7 @@ html(lang='en')
|
||||
.col-lg-4
|
||||
.team-member
|
||||
img.mx-auto.rounded-circle(src='assets/img/team/2.jpg', alt='...')
|
||||
h4 Larry Parker
|
||||
h4 Diana Petersen
|
||||
p.text-muted Lead Marketer
|
||||
a.btn.btn-dark.btn-social.mx-2(href='#!')
|
||||
i.fab.fa-twitter
|
||||
@ -236,7 +237,7 @@ html(lang='en')
|
||||
.col-lg-4
|
||||
.team-member
|
||||
img.mx-auto.rounded-circle(src='assets/img/team/3.jpg', alt='...')
|
||||
h4 Diana Petersen
|
||||
h4 Larry Parker
|
||||
p.text-muted Lead Developer
|
||||
a.btn.btn-dark.btn-social.mx-2(href='#!')
|
||||
i.fab.fa-twitter
|
||||
@ -272,21 +273,21 @@ html(lang='en')
|
||||
.text-center
|
||||
h2.section-heading.text-uppercase Contact Us
|
||||
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
|
||||
form#contactForm(name='sentMessage', novalidate='novalidate')
|
||||
form#contactForm
|
||||
.row.align-items-stretch.mb-5
|
||||
.col-md-6
|
||||
.form-group
|
||||
input#name.form-control(type='text', placeholder='Your Name *', required='required', data-validation-required-message='Please enter your name.')
|
||||
input#name.form-control(type='text', placeholder='Your Name *', required='required')
|
||||
p.help-block.text-danger
|
||||
.form-group
|
||||
input#email.form-control(type='email', placeholder='Your Email *', required='required', data-validation-required-message='Please enter your email address.')
|
||||
input#email.form-control(type='email', placeholder='Your Email *', required='required')
|
||||
p.help-block.text-danger
|
||||
.form-group.mb-md-0
|
||||
input#phone.form-control(type='tel', placeholder='Your Phone *', required='required', data-validation-required-message='Please enter your phone number.')
|
||||
input#phone.form-control(type='tel', placeholder='Your Phone *', required='required')
|
||||
p.help-block.text-danger
|
||||
.col-md-6
|
||||
.form-group.form-group-textarea.mb-md-0
|
||||
textarea#message.form-control(placeholder='Your Message *', required='required', data-validation-required-message='Please enter a message.')
|
||||
textarea#message.form-control(placeholder='Your Message *', required='required')
|
||||
p.help-block.text-danger
|
||||
.text-center
|
||||
#success
|
||||
@ -296,7 +297,7 @@ html(lang='en')
|
||||
footer.footer.py-4
|
||||
.container
|
||||
.row.align-items-center
|
||||
.col-lg-4.text-lg-left
|
||||
.col-lg-4.text-lg-start
|
||||
| Copyright © Your Website
|
||||
// This script automatically adds the current year to your website footer
|
||||
// (credit: https://updateyourfooter.com/)
|
||||
@ -309,8 +310,8 @@ html(lang='en')
|
||||
i.fab.fa-facebook-f
|
||||
a.btn.btn-dark.btn-social.mx-2(href='#!')
|
||||
i.fab.fa-linkedin-in
|
||||
.col-lg-4.text-lg-right
|
||||
a.mr-3(href='#!') Privacy Policy
|
||||
.col-lg-4.text-lg-end
|
||||
a.me-3(href='#!') Privacy Policy
|
||||
a(href='#!') Terms of Use
|
||||
|
||||
// Portfolio Modals
|
||||
@ -318,7 +319,7 @@ html(lang='en')
|
||||
#portfolioModal1.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
||||
.modal-dialog
|
||||
.modal-content
|
||||
.close-modal(data-dismiss='modal')
|
||||
.close-modal(data-bs-dismiss='modal')
|
||||
img(src='assets/img/close-icon.svg', alt='Close modal')
|
||||
.container
|
||||
.row.justify-content-center
|
||||
@ -327,20 +328,20 @@ html(lang='en')
|
||||
// Project Details Go Here
|
||||
h2.text-uppercase Project Name
|
||||
p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
|
||||
img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/01-full.jpg', alt='...')
|
||||
img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/1.jpg', alt='...')
|
||||
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!
|
||||
ul.list-inline
|
||||
li Date: January 2021
|
||||
li Client: Threads
|
||||
li Category: Illustration
|
||||
button.btn.btn-primary(data-dismiss='modal', type='button')
|
||||
i.fas.fa-times.mr-1
|
||||
button.btn.btn-primary(data-bs-dismiss='modal', type='button')
|
||||
i.fas.fa-times.me-1
|
||||
| Close Project
|
||||
// Modal 2
|
||||
#portfolioModal2.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
||||
.modal-dialog
|
||||
.modal-content
|
||||
.close-modal(data-dismiss='modal')
|
||||
.close-modal(data-bs-dismiss='modal')
|
||||
img(src='assets/img/close-icon.svg', alt='Close modal')
|
||||
.container
|
||||
.row.justify-content-center
|
||||
@ -349,20 +350,20 @@ html(lang='en')
|
||||
// Project Details Go Here
|
||||
h2.text-uppercase Project Name
|
||||
p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
|
||||
img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/02-full.jpg', alt='...')
|
||||
img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/2.jpg', alt='...')
|
||||
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!
|
||||
ul.list-inline
|
||||
li Date: January 2021
|
||||
li Client: Explore
|
||||
li Category: Graphic Design
|
||||
button.btn.btn-primary(data-dismiss='modal', type='button')
|
||||
i.fas.fa-times.mr-1
|
||||
button.btn.btn-primary(data-bs-dismiss='modal', type='button')
|
||||
i.fas.fa-times.me-1
|
||||
| Close Project
|
||||
// Modal 3
|
||||
#portfolioModal3.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
||||
.modal-dialog
|
||||
.modal-content
|
||||
.close-modal(data-dismiss='modal')
|
||||
.close-modal(data-bs-dismiss='modal')
|
||||
img(src='assets/img/close-icon.svg', alt='Close modal')
|
||||
.container
|
||||
.row.justify-content-center
|
||||
@ -371,20 +372,20 @@ html(lang='en')
|
||||
// Project Details Go Here
|
||||
h2.text-uppercase Project Name
|
||||
p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
|
||||
img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/03-full.jpg', alt='...')
|
||||
img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/3.jpg', alt='...')
|
||||
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!
|
||||
ul.list-inline
|
||||
li Date: January 2021
|
||||
li Client: Finish
|
||||
li Category: Identity
|
||||
button.btn.btn-primary(data-dismiss='modal', type='button')
|
||||
i.fas.fa-times.mr-1
|
||||
button.btn.btn-primary(data-bs-dismiss='modal', type='button')
|
||||
i.fas.fa-times.me-1
|
||||
| Close Project
|
||||
// Modal 4
|
||||
#portfolioModal4.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
||||
.modal-dialog
|
||||
.modal-content
|
||||
.close-modal(data-dismiss='modal')
|
||||
.close-modal(data-bs-dismiss='modal')
|
||||
img(src='assets/img/close-icon.svg', alt='Close modal')
|
||||
.container
|
||||
.row.justify-content-center
|
||||
@ -393,20 +394,20 @@ html(lang='en')
|
||||
// Project Details Go Here
|
||||
h2.text-uppercase Project Name
|
||||
p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
|
||||
img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/04-full.jpg', alt='...')
|
||||
img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/4.jpg', alt='...')
|
||||
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!
|
||||
ul.list-inline
|
||||
li Date: January 2021
|
||||
li Client: Lines
|
||||
li Category: Branding
|
||||
button.btn.btn-primary(data-dismiss='modal', type='button')
|
||||
i.fas.fa-times.mr-1
|
||||
button.btn.btn-primary(data-bs-dismiss='modal', type='button')
|
||||
i.fas.fa-times.me-1
|
||||
| Close Project
|
||||
// Modal 5
|
||||
#portfolioModal5.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
||||
.modal-dialog
|
||||
.modal-content
|
||||
.close-modal(data-dismiss='modal')
|
||||
.close-modal(data-bs-dismiss='modal')
|
||||
img(src='assets/img/close-icon.svg', alt='Close modal')
|
||||
.container
|
||||
.row.justify-content-center
|
||||
@ -415,20 +416,20 @@ html(lang='en')
|
||||
// Project Details Go Here
|
||||
h2.text-uppercase Project Name
|
||||
p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
|
||||
img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/05-full.jpg', alt='...')
|
||||
img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/5.jpg', alt='...')
|
||||
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!
|
||||
ul.list-inline
|
||||
li Date: January 2021
|
||||
li Client: Southwest
|
||||
li Category: Website Design
|
||||
button.btn.btn-primary(data-dismiss='modal', type='button')
|
||||
i.fas.fa-times.mr-1
|
||||
button.btn.btn-primary(data-bs-dismiss='modal', type='button')
|
||||
i.fas.fa-times.me-1
|
||||
| Close Project
|
||||
// Modal 6
|
||||
#portfolioModal6.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
||||
.modal-dialog
|
||||
.modal-content
|
||||
.close-modal(data-dismiss='modal')
|
||||
.close-modal(data-bs-dismiss='modal')
|
||||
img(src='assets/img/close-icon.svg', alt='Close modal')
|
||||
.container
|
||||
.row.justify-content-center
|
||||
@ -437,26 +438,18 @@ html(lang='en')
|
||||
// Project Details Go Here
|
||||
h2.text-uppercase Project Name
|
||||
p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
|
||||
img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/06-full.jpg', alt='...')
|
||||
img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/6.jpg', alt='...')
|
||||
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!
|
||||
ul.list-inline
|
||||
li Date: January 2021
|
||||
li Client: Window
|
||||
li Category: Photography
|
||||
button.btn.btn-primary(data-dismiss='modal', type='button')
|
||||
i.fas.fa-times.mr-1
|
||||
button.btn.btn-primary.btn-lg(data-bs-dismiss='modal', type='button')
|
||||
i.fas.fa-times.me-1
|
||||
| Close Project
|
||||
|
||||
// Bootstrap core JS
|
||||
script(src='https://code.jquery.com/jquery-3.5.1.min.js')
|
||||
script(src='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js')
|
||||
|
||||
// Third party plugin JS
|
||||
script(src='https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js')
|
||||
|
||||
// Contact form JS
|
||||
script(src='assets/mail/jqBootstrapValidation.js')
|
||||
script(src='assets/mail/contact_me.js')
|
||||
script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js')
|
||||
|
||||
// Core theme JS
|
||||
script(src='js/scripts.js')
|
||||
|
||||
@ -1,12 +1,29 @@
|
||||
// Global styling for this template
|
||||
//
|
||||
// Global theme styling
|
||||
//
|
||||
|
||||
// Scroll padding for all scroll targets on page used with
|
||||
// native CSS smooth scrolling
|
||||
//
|
||||
// https://caniuse.com/?search=scroll-padding
|
||||
|
||||
html {
|
||||
scroll-padding-top: 4.5rem;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// Adjust the line height of paragraphs
|
||||
|
||||
p {
|
||||
line-height: 1.75;
|
||||
line-height: $line-height-lg;
|
||||
}
|
||||
|
||||
// Spacing and heading styling for page sections
|
||||
|
||||
.page-section {
|
||||
padding: 6rem 0;
|
||||
|
||||
@ -25,28 +42,11 @@ p {
|
||||
}
|
||||
}
|
||||
|
||||
// Increase the padding on sections when screen size is greater
|
||||
// than the medium breakpoint (set by Bootstrap)
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
section {
|
||||
padding: 9rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Highlight color customization
|
||||
|
||||
::-moz-selection {
|
||||
background: $primary;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: $primary;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
img::selection {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
img::-moz-selection {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
//
|
||||
// Variables
|
||||
//
|
||||
|
||||
// Import variables from src/scss/variables
|
||||
|
||||
@import "./variables/colors.scss";
|
||||
@import "./variables/typography.scss";
|
||||
@import "./variables/spacing.scss";
|
||||
@import "./variables/grid.scss";
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
// Button Styles
|
||||
//
|
||||
// Buttons
|
||||
//
|
||||
|
||||
// Create a new xl button variant
|
||||
|
||||
.btn-xl {
|
||||
padding: 1.25rem 2.5rem;
|
||||
@ -7,6 +11,8 @@
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
|
||||
// Create a new social button variant
|
||||
|
||||
.btn-social {
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
|
||||
@ -1,17 +1,19 @@
|
||||
// Styling for the navbar
|
||||
//
|
||||
// Navbar
|
||||
//
|
||||
|
||||
#mainNav {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
background-color: $gray-900;
|
||||
|
||||
.navbar-toggler {
|
||||
|
||||
padding: 0.75rem;
|
||||
font-family: $headings-font-family;
|
||||
font-size: 0.75rem;
|
||||
color: $white;
|
||||
font-family: $headings-font-family;
|
||||
text-transform: uppercase;
|
||||
background-color: $primary;
|
||||
border: 0;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
// Styling for the contact section
|
||||
//
|
||||
// Contact section styling
|
||||
//
|
||||
|
||||
section#contact {
|
||||
background-color: $gray-900;
|
||||
background-image: url("../assets/img/map-image.png");
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
// Styling for the footer
|
||||
//
|
||||
// Footer section styling
|
||||
//
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
// Styling for the masthead
|
||||
//
|
||||
// Masthead section styling
|
||||
//
|
||||
|
||||
header.masthead {
|
||||
padding-top: 6rem + 4.5rem;
|
||||
padding-bottom: 6rem;
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
// Styling for the portfolio section
|
||||
//
|
||||
// Portfolio section styling
|
||||
//
|
||||
|
||||
#portfolio {
|
||||
.portfolio-item {
|
||||
max-width: 25rem;
|
||||
max-width: 26rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
// Styling for the team section
|
||||
//
|
||||
// Team section styling
|
||||
//
|
||||
|
||||
.team-member {
|
||||
margin-bottom: 3rem;
|
||||
text-align: center;
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
// Styling for the timeline section
|
||||
//
|
||||
// Timeline section styling
|
||||
//
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
//
|
||||
// Styles
|
||||
//
|
||||
|
||||
// Import variables
|
||||
@import "./variables.scss";
|
||||
|
||||
|
||||
@ -1,11 +1,18 @@
|
||||
// Override Bootstrap color system
|
||||
//
|
||||
// Colors
|
||||
//
|
||||
|
||||
// Override Bootstrap color variables
|
||||
|
||||
$yellow: #fed136;
|
||||
|
||||
// Override Bootstrap default state colors
|
||||
// Override Bootstrap state colors variables
|
||||
|
||||
$primary: $yellow;
|
||||
|
||||
// Override Bootstrap yiq lightness value
|
||||
// Override Bootstrap contrast ratio
|
||||
//
|
||||
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
|
||||
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
|
||||
|
||||
$yiq-contrasted-threshold: 205;
|
||||
$min-contrast-ratio: 3;
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
// Override Bootstrap grid column variables
|
||||
//
|
||||
// Override the spacing between columns to add symmetry to the layout
|
||||
|
||||
$grid-gutter-width: $spacer * 1.5;
|
||||
@ -1,7 +0,0 @@
|
||||
// Restate and add to the Bootstrap default spacing variables
|
||||
//
|
||||
// The spacer is restated in order to add new entries to the $spacers map
|
||||
// The 10 and n1 through n10 spacers are newly added allowing for larger
|
||||
// spacing options and negative padding and margin utilities
|
||||
|
||||
$spacer: 1rem;
|
||||
@ -1,14 +1,54 @@
|
||||
// Override Bootstrap typography variables
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
$font-family-base: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
// Override the default Bootstrap base font family
|
||||
//
|
||||
// Roboto Slab is being used below and is brought in
|
||||
// via Google fonts in the head of src/pug/index.pug.
|
||||
// The fonts listed afterwards are fallbacks.
|
||||
|
||||
$headings-font-family: "Montserrat", -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
$font-family-base: "Roboto Slab",
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
"Helvetica Neue",
|
||||
Arial,
|
||||
sans-serif,
|
||||
"Apple Color Emoji",
|
||||
"Segoe UI Emoji",
|
||||
"Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
|
||||
// Override the default Bootstrap headings font family
|
||||
//
|
||||
// Montserrat is being used below and is brought in
|
||||
// via Google fonts in the head of src/pug/index.pug.
|
||||
// The fonts listed afterwards are fallbacks.
|
||||
|
||||
$headings-font-family: "Montserrat",
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
"Helvetica Neue",
|
||||
Arial,
|
||||
sans-serif,
|
||||
"Apple Color Emoji",
|
||||
"Segoe UI Emoji",
|
||||
"Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
|
||||
// Create a subheadings font family
|
||||
|
||||
$subheadings-font-family: $font-family-base;
|
||||
|
||||
// Override Bootstrap default headings variables
|
||||
|
||||
$headings-font-weight: 700;
|
||||
$headings-letter-spacing: 0.0625em;
|
||||
|
||||
// Override default Bootstrap line height variables
|
||||
|
||||
$line-height-lg: 1.75;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user