rdd.ro/nunta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #308 from StartBootstrap/develop

Browse Source 
Bootstrap 5 Update
This commit is contained in:
David Miller 2021-05-20 01:37:24 -04:00 committed by GitHub
commit de8f3260ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
78 changed files with 7960 additions and 7120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/assets/img/about/1.jpg vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
dist/assets/img/about/2.jpg vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
dist/assets/img/about/3.jpg vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
dist/assets/img/about/4.jpg vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
dist/assets/img/portfolio/01-full.jpg vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 52 KiB

BIN
dist/assets/img/portfolio/01-thumbnail.jpg vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
dist/assets/img/portfolio/02-full.jpg vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 31 KiB

BIN
dist/assets/img/portfolio/02-thumbnail.jpg vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
dist/assets/img/portfolio/03-full.jpg vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 52 KiB

BIN
dist/assets/img/portfolio/03-thumbnail.jpg vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
dist/assets/img/portfolio/04-full.jpg vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 40 KiB

BIN
dist/assets/img/portfolio/04-thumbnail.jpg vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
dist/assets/img/portfolio/05-full.jpg vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 102 KiB

BIN
dist/assets/img/portfolio/05-thumbnail.jpg vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
dist/assets/img/portfolio/06-full.jpg vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 36 KiB

BIN
dist/assets/img/portfolio/06-thumbnail.jpg vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
dist/assets/img/portfolio/1.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
dist/assets/img/portfolio/2.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
dist/assets/img/portfolio/3.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
dist/assets/img/portfolio/4.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
dist/assets/img/portfolio/5.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
dist/assets/img/portfolio/6.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
dist/assets/img/team/1.jpg vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 39 KiB

BIN
dist/assets/img/team/2.jpg vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 60 KiB

BIN
dist/assets/img/team/3.jpg vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 56 KiB

12394
dist/css/styles.css vendored
View File

File diff suppressed because it is too large Load Diff

221
dist/index.html vendored
View File

@ -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-->
@ -87,12 +88,13 @@
</div>
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4">
<!-- Portfolio item 1-->
<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>
@ -101,12 +103,13 @@
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<!-- Portfolio item 2-->
<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>
@ -115,12 +118,13 @@
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<!-- Portfolio item 3-->
<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>
@ -129,12 +133,13 @@
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4 mb-lg-0">
<!-- Portfolio item 4-->
<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>
@ -143,12 +148,13 @@
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4 mb-sm-0">
<!-- Portfolio item 5-->
<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>
@ -157,12 +163,13 @@
</div>
</div>
<div class="col-lg-4 col-sm-6">
<!-- Portfolio item 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 +253,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 +263,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 +273,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 +312,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 +346,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 &copy; Your Website
<!-- This script automatically adds the current year to your website footer-->
<!-- (credit: https://updateyourfooter.com/)-->
@ -352,35 +359,40 @@
<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>
<a href="#!">Terms of Use</a>
<div class="col-lg-4 text-lg-end">
<a class="link-dark text-decoration-none me-3" href="#!">Privacy Policy</a>
<a class="link-dark text-decoration-none" href="#!">Terms of Use</a>
</div>
</div>
</div>
</footer>
<!-- Portfolio Modals-->
<!-- Modal 1-->
<!-- Portfolio item 1 modal popup-->
<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">
<div class="modal-body">
<!-- Project Details Go Here-->
<!-- Project details-->
<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>
<li>
<strong>Client:</strong>
Threads
</li>
<li>
<strong>Category:</strong>
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 btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-times me-1"></i>
Close Project
</button>
</div>
@ -390,27 +402,32 @@
</div>
</div>
</div>
<!-- Modal 2-->
<!-- Portfolio item 2 modal popup-->
<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">
<div class="modal-body">
<!-- Project Details Go Here-->
<!-- Project details-->
<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>
<li>
<strong>Client:</strong>
Explore
</li>
<li>
<strong>Category:</strong>
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 btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-times me-1"></i>
Close Project
</button>
</div>
@ -420,27 +437,32 @@
</div>
</div>
</div>
<!-- Modal 3-->
<!-- Portfolio item 3 modal popup-->
<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">
<div class="modal-body">
<!-- Project Details Go Here-->
<!-- Project details-->
<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>
<li>
<strong>Client:</strong>
Finish
</li>
<li>
<strong>Category:</strong>
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 btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-times me-1"></i>
Close Project
</button>
</div>
@ -450,27 +472,32 @@
</div>
</div>
</div>
<!-- Modal 4-->
<!-- Portfolio item 4 modal popup-->
<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">
<div class="modal-body">
<!-- Project Details Go Here-->
<!-- Project details-->
<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>
<li>
<strong>Client:</strong>
Lines
</li>
<li>
<strong>Category:</strong>
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 btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-times me-1"></i>
Close Project
</button>
</div>
@ -480,27 +507,32 @@
</div>
</div>
</div>
<!-- Modal 5-->
<!-- Portfolio item 5 modal popup-->
<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">
<div class="modal-body">
<!-- Project Details Go Here-->
<!-- Project details-->
<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>
<li>
<strong>Client:</strong>
Southwest
</li>
<li>
<strong>Category:</strong>
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 btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-times me-1"></i>
Close Project
</button>
</div>
@ -510,27 +542,32 @@
</div>
</div>
</div>
<!-- Modal 6-->
<!-- Portfolio item 6 modal popup-->
<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">
<div class="modal-body">
<!-- Project Details Go Here-->
<!-- Project details-->
<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>
<li>
<strong>Client:</strong>
Window
</li>
<li>
<strong>Category:</strong>
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-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-times me-1"></i>
Close Project
</button>
</div>
@ -541,13 +578,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.1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>

84
dist/js/scripts.js vendored
View File

@ -1,56 +1,54 @@
/*!
* 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 => {
// Navbar shrink function
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",
// Shrink the navbar
navbarShrink();
// Shrink the navbar when page is scrolled
document.addEventListener('scroll', navbarShrink);
// Activate Bootstrap scrollspy on the main nav 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
// Collapse responsive navbar when toggler is visible
const navbarToggler = document.body.querySelector('.navbar-toggler');
const responsiveNavItems = [].slice.call(
document.querySelectorAll('#navbarResponsive .nav-link')
);
responsiveNavItems.map(function (responsiveNavItem) {
responsiveNavItem.addEventListener('click', () => {
if (window.getComputedStyle(navbarToggler).display !== 'none') {
navbarToggler.click();
}
});
});
});

1436
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

12
package.json
View File

@ -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.1"
},
"devDependencies": {
"autoprefixer": "10.2.5",
"browser-sync": "2.26.14",
"chokidar": "3.5.1",
"concurrently": "6.0.2",
"postcss": "8.2.13",
"prettier": "2.2.1",
"concurrently": "6.1.0",
"postcss": "8.2.15",
"prettier": "2.3.0",
"pug": "3.0.2",
"sass": "1.32.11",
"sass": "1.32.13",
"shelljs": "0.8.4",
"upath": "2.0.1"
}

BIN
src/assets/img/about/1.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/assets/img/about/2.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
src/assets/img/about/3.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/assets/img/about/4.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/img/portfolio/01-full.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 52 KiB

BIN
src/assets/img/portfolio/01-thumbnail.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/img/portfolio/02-full.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 31 KiB

BIN
src/assets/img/portfolio/02-thumbnail.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/img/portfolio/03-full.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 52 KiB

BIN
src/assets/img/portfolio/03-thumbnail.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/img/portfolio/04-full.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 40 KiB

BIN
src/assets/img/portfolio/04-thumbnail.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/img/portfolio/05-full.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 102 KiB

BIN
src/assets/img/portfolio/05-thumbnail.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
src/assets/img/portfolio/06-full.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 36 KiB

BIN
src/assets/img/portfolio/06-thumbnail.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/img/portfolio/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/assets/img/portfolio/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
src/assets/img/portfolio/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/assets/img/portfolio/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/assets/img/portfolio/5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/assets/img/portfolio/6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
src/assets/img/team/1.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 39 KiB

BIN
src/assets/img/team/2.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 60 KiB

BIN
src/assets/img/team/3.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 56 KiB

82
src/js/scripts.js
View File

@ -1,51 +1,49 @@
(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 => {
// Navbar shrink function
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",
// Shrink the navbar
navbarShrink();
// Shrink the navbar when page is scrolled
document.addEventListener('scroll', navbarShrink);
// Activate Bootstrap scrollspy on the main nav 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
// Collapse responsive navbar when toggler is visible
const navbarToggler = document.body.querySelector('.navbar-toggler');
const responsiveNavItems = [].slice.call(
document.querySelectorAll('#navbarResponsive .nav-link')
);
responsiveNavItems.map(function (responsiveNavItem) {
responsiveNavItem.addEventListener('click', () => {
if (window.getComputedStyle(navbarToggler).display !== 'none') {
navbarToggler.click();
}
});
});
});

25
src/pug/includes/portfolio-modal-1.pug Normal file
View File

@ -0,0 +1,25 @@
// Portfolio item 1 modal popup
#portfolioModal1.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
.modal-dialog
.modal-content
.close-modal(data-bs-dismiss='modal')
img(src='assets/img/close-icon.svg', alt='Close modal')
.container
.row.justify-content-center
.col-lg-8
.modal-body
// Project details
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/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
strong Client:
| Threads
li
strong Category:
| Illustration
button.btn.btn-primary.btn-xl.text-uppercase(data-bs-dismiss='modal', type='button')
i.fas.fa-times.me-1
| Close Project

25
src/pug/includes/portfolio-modal-2.pug Normal file
View File

@ -0,0 +1,25 @@
// Portfolio item 2 modal popup
#portfolioModal2.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
.modal-dialog
.modal-content
.close-modal(data-bs-dismiss='modal')
img(src='assets/img/close-icon.svg', alt='Close modal')
.container
.row.justify-content-center
.col-lg-8
.modal-body
// Project details
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/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
strong Client:
| Explore
li
strong Category:
| Graphic Design
button.btn.btn-primary.btn-xl.text-uppercase(data-bs-dismiss='modal', type='button')
i.fas.fa-times.me-1
| Close Project

25
src/pug/includes/portfolio-modal-3.pug Normal file
View File

@ -0,0 +1,25 @@
// Portfolio item 3 modal popup
#portfolioModal3.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
.modal-dialog
.modal-content
.close-modal(data-bs-dismiss='modal')
img(src='assets/img/close-icon.svg', alt='Close modal')
.container
.row.justify-content-center
.col-lg-8
.modal-body
// Project details
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/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
strong Client:
| Finish
li
strong Category:
| Identity
button.btn.btn-primary.btn-xl.text-uppercase(data-bs-dismiss='modal', type='button')
i.fas.fa-times.me-1
| Close Project

25
src/pug/includes/portfolio-modal-4.pug Normal file
View File

@ -0,0 +1,25 @@
// Portfolio item 4 modal popup
#portfolioModal4.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
.modal-dialog
.modal-content
.close-modal(data-bs-dismiss='modal')
img(src='assets/img/close-icon.svg', alt='Close modal')
.container
.row.justify-content-center
.col-lg-8
.modal-body
// Project details
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/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
strong Client:
| Lines
li
strong Category:
| Branding
button.btn.btn-primary.btn-xl.text-uppercase(data-bs-dismiss='modal', type='button')
i.fas.fa-times.me-1
| Close Project

25
src/pug/includes/portfolio-modal-5.pug Normal file
View File

@ -0,0 +1,25 @@
// Portfolio item 5 modal popup
#portfolioModal5.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
.modal-dialog
.modal-content
.close-modal(data-bs-dismiss='modal')
img(src='assets/img/close-icon.svg', alt='Close modal')
.container
.row.justify-content-center
.col-lg-8
.modal-body
// Project details
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/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
strong Client:
| Southwest
li
strong Category:
| Website Design
button.btn.btn-primary.btn-xl.text-uppercase(data-bs-dismiss='modal', type='button')
i.fas.fa-times.me-1
| Close Project

25
src/pug/includes/portfolio-modal-6.pug Normal file
View File

@ -0,0 +1,25 @@
// Portfolio item 6 modal popup
#portfolioModal6.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
.modal-dialog
.modal-content
.close-modal(data-bs-dismiss='modal')
img(src='assets/img/close-icon.svg', alt='Close modal')
.container
.row.justify-content-center
.col-lg-8
.modal-body
// Project details
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/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
strong Client:
| Window
li
strong Category:
| Photography
button.btn.btn-primary.btn-xl.text-uppercase(data-bs-dismiss='modal', type='button')
i.fas.fa-times.me-1
| Close Project

223
src/pug/index.pug
View File

@ -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
@ -88,62 +89,68 @@ html(lang='en')
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
.row
.col-lg-4.col-sm-6.mb-4
// Portfolio item 1
.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 2
.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 3
.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 4
.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 5
.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 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 +221,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 +232,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 +243,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 +279,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 +303,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 &copy; Your Website
// This script automatically adds the current year to your website footer
// (credit: https://updateyourfooter.com/)
@ -309,154 +316,20 @@ 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
a(href='#!') Terms of Use
.col-lg-4.text-lg-end
a.link-dark.text-decoration-none.me-3(href='#!') Privacy Policy
a.link-dark.text-decoration-none(href='#!') Terms of Use
// Portfolio Modals
// Modal 1
#portfolioModal1.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
.modal-dialog
.modal-content
.close-modal(data-dismiss='modal')
img(src='assets/img/close-icon.svg', alt='Close modal')
.container
.row.justify-content-center
.col-lg-8
.modal-body
// 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='...')
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
| 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')
img(src='assets/img/close-icon.svg', alt='Close modal')
.container
.row.justify-content-center
.col-lg-8
.modal-body
// 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='...')
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
| 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')
img(src='assets/img/close-icon.svg', alt='Close modal')
.container
.row.justify-content-center
.col-lg-8
.modal-body
// 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='...')
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
| 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')
img(src='assets/img/close-icon.svg', alt='Close modal')
.container
.row.justify-content-center
.col-lg-8
.modal-body
// 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='...')
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
| 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')
img(src='assets/img/close-icon.svg', alt='Close modal')
.container
.row.justify-content-center
.col-lg-8
.modal-body
// 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='...')
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
| 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')
img(src='assets/img/close-icon.svg', alt='Close modal')
.container
.row.justify-content-center
.col-lg-8
.modal-body
// 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='...')
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
| Close Project
include includes/portfolio-modal-1
include includes/portfolio-modal-2
include includes/portfolio-modal-3
include includes/portfolio-modal-4
include includes/portfolio-modal-5
include includes/portfolio-modal-6
// 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.1/dist/js/bootstrap.bundle.min.js')
// Core theme JS
script(src='js/scripts.js')

44
src/scss/_global.scss
View File

@ -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;
}

8
src/scss/_variables.scss
View File

@ -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";

8
src/scss/components/_buttons.scss
View File

@ -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;

12
src/scss/components/_navbar.scss
View File

@ -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 {

5
src/scss/sections/_contact.scss
View File

@ -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");

5
src/scss/sections/_footer.scss
View File

@ -1,4 +1,7 @@
// Styling for the footer
//
// Footer section styling
//
.footer {
text-align: center;
font-size: 0.9rem;

5
src/scss/sections/_masthead.scss
View File

@ -1,4 +1,7 @@
// Styling for the masthead
//
// Masthead section styling
//
header.masthead {
padding-top: 6rem + 4.5rem;
padding-bottom: 6rem;

7
src/scss/sections/_portfolio.scss
View File

@ -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;

5
src/scss/sections/_team.scss
View File

@ -1,4 +1,7 @@
// Styling for the team section
//
// Team section styling
//
.team-member {
margin-bottom: 3rem;
text-align: center;

5
src/scss/sections/_timeline.scss
View File

@ -1,4 +1,7 @@
// Styling for the timeline section
//
// Timeline section styling
//
.timeline {
position: relative;
padding: 0;

4
src/scss/styles.scss
View File

@ -1,3 +1,7 @@
//
// Styles
//
// Import variables
@import "./variables.scss";

14
src/scss/variables/_colors.scss
View File

@ -1,11 +1,15 @@
// Override Bootstrap color system
//
// Colors
//
$yellow: #fed136;
// Override Bootstrap color variables
// Override Bootstrap default state colors
$yellow: #ffc800;
// Override Bootstrap state colors variables
$primary: $yellow;
// Override Bootstrap yiq lightness value
// Override Bootstrap contrast ratio
$yiq-contrasted-threshold: 205;
$min-contrast-ratio: 1.5;

5
src/scss/variables/_grid.scss
View File

@ -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;

7
src/scss/variables/_spacing.scss
View File

@ -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;

54
src/scss/variables/_typography.scss
View File

@ -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;