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

break modals out into pug includes

Browse Source
This commit is contained in:
David Miller 2021-05-06 11:13:21 -04:00
parent 73b189fefc
commit 62801f1155
8 changed files with 234 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
dist/index.html vendored
View File

@ -88,6 +88,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-4 col-sm-6 mb-4"> <div class="col-lg-4 col-sm-6 mb-4">
<!-- Portfolio item 1-->
<div class="portfolio-item"> <div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal1"> <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal1">
<div class="portfolio-hover"> <div class="portfolio-hover">
@ -102,6 +103,7 @@
</div> </div>
</div> </div>
<div class="col-lg-4 col-sm-6 mb-4"> <div class="col-lg-4 col-sm-6 mb-4">
<!-- Portfolio item 2-->
<div class="portfolio-item"> <div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal2"> <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal2">
<div class="portfolio-hover"> <div class="portfolio-hover">
@ -116,6 +118,7 @@
</div> </div>
</div> </div>
<div class="col-lg-4 col-sm-6 mb-4"> <div class="col-lg-4 col-sm-6 mb-4">
<!-- Portfolio item 3-->
<div class="portfolio-item"> <div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal3"> <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal3">
<div class="portfolio-hover"> <div class="portfolio-hover">
@ -130,6 +133,7 @@
</div> </div>
</div> </div>
<div class="col-lg-4 col-sm-6 mb-4 mb-lg-0"> <div class="col-lg-4 col-sm-6 mb-4 mb-lg-0">
<!-- Portfolio item 4-->
<div class="portfolio-item"> <div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal4"> <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal4">
<div class="portfolio-hover"> <div class="portfolio-hover">
@ -144,6 +148,7 @@
</div> </div>
</div> </div>
<div class="col-lg-4 col-sm-6 mb-4 mb-sm-0"> <div class="col-lg-4 col-sm-6 mb-4 mb-sm-0">
<!-- Portfolio item 5-->
<div class="portfolio-item"> <div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal5"> <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal5">
<div class="portfolio-hover"> <div class="portfolio-hover">
@ -158,6 +163,7 @@
</div> </div>
</div> </div>
<div class="col-lg-4 col-sm-6"> <div class="col-lg-4 col-sm-6">
<!-- Portfolio item 6-->
<div class="portfolio-item"> <div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal6"> <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal6">
<div class="portfolio-hover"> <div class="portfolio-hover">
@ -361,7 +367,7 @@
</div> </div>
</footer> </footer>
<!-- Portfolio Modals--> <!-- 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="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
@ -370,17 +376,22 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-lg-8"> <div class="col-lg-8">
<div class="modal-body"> <div class="modal-body">
<!-- Project Details Go Here--> <!-- Project details-->
<h2 class="text-uppercase">Project Name</h2> <h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> <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/1.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> <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"> <ul class="list-inline">
<li>Date: January 2021</li> <li>
<li>Client: Threads</li> <strong>Client:</strong>
<li>Category: Illustration</li> Threads
</li>
<li>
<strong>Category:</strong>
Illustration
</li>
</ul> </ul>
<button class="btn btn-primary" data-bs-dismiss="modal" type="button"> <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-times me-1"></i> <i class="fas fa-times me-1"></i>
Close Project Close Project
</button> </button>
@ -391,7 +402,7 @@
</div> </div>
</div> </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="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
@ -400,17 +411,22 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-lg-8"> <div class="col-lg-8">
<div class="modal-body"> <div class="modal-body">
<!-- Project Details Go Here--> <!-- Project details-->
<h2 class="text-uppercase">Project Name</h2> <h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> <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/2.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> <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"> <ul class="list-inline">
<li>Date: January 2021</li> <li>
<li>Client: Explore</li> <strong>Client:</strong>
<li>Category: Graphic Design</li> Explore
</li>
<li>
<strong>Category:</strong>
Graphic Design
</li>
</ul> </ul>
<button class="btn btn-primary" data-bs-dismiss="modal" type="button"> <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-times me-1"></i> <i class="fas fa-times me-1"></i>
Close Project Close Project
</button> </button>
@ -421,7 +437,7 @@
</div> </div>
</div> </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="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
@ -430,17 +446,22 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-lg-8"> <div class="col-lg-8">
<div class="modal-body"> <div class="modal-body">
<!-- Project Details Go Here--> <!-- Project details-->
<h2 class="text-uppercase">Project Name</h2> <h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> <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/3.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> <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"> <ul class="list-inline">
<li>Date: January 2021</li> <li>
<li>Client: Finish</li> <strong>Client:</strong>
<li>Category: Identity</li> Finish
</li>
<li>
<strong>Category:</strong>
Identity
</li>
</ul> </ul>
<button class="btn btn-primary" data-bs-dismiss="modal" type="button"> <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-times me-1"></i> <i class="fas fa-times me-1"></i>
Close Project Close Project
</button> </button>
@ -451,7 +472,7 @@
</div> </div>
</div> </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="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
@ -460,17 +481,22 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-lg-8"> <div class="col-lg-8">
<div class="modal-body"> <div class="modal-body">
<!-- Project Details Go Here--> <!-- Project details-->
<h2 class="text-uppercase">Project Name</h2> <h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> <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/4.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> <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"> <ul class="list-inline">
<li>Date: January 2021</li> <li>
<li>Client: Lines</li> <strong>Client:</strong>
<li>Category: Branding</li> Lines
</li>
<li>
<strong>Category:</strong>
Branding
</li>
</ul> </ul>
<button class="btn btn-primary" data-bs-dismiss="modal" type="button"> <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-times me-1"></i> <i class="fas fa-times me-1"></i>
Close Project Close Project
</button> </button>
@ -481,7 +507,7 @@
</div> </div>
</div> </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="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
@ -490,17 +516,22 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-lg-8"> <div class="col-lg-8">
<div class="modal-body"> <div class="modal-body">
<!-- Project Details Go Here--> <!-- Project details-->
<h2 class="text-uppercase">Project Name</h2> <h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> <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/5.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> <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"> <ul class="list-inline">
<li>Date: January 2021</li> <li>
<li>Client: Southwest</li> <strong>Client:</strong>
<li>Category: Website Design</li> Southwest
</li>
<li>
<strong>Category:</strong>
Website Design
</li>
</ul> </ul>
<button class="btn btn-primary" data-bs-dismiss="modal" type="button"> <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-times me-1"></i> <i class="fas fa-times me-1"></i>
Close Project Close Project
</button> </button>
@ -511,7 +542,7 @@
</div> </div>
</div> </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="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
@ -520,17 +551,22 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-lg-8"> <div class="col-lg-8">
<div class="modal-body"> <div class="modal-body">
<!-- Project Details Go Here--> <!-- Project details-->
<h2 class="text-uppercase">Project Name</h2> <h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> <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/6.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> <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"> <ul class="list-inline">
<li>Date: January 2021</li> <li>
<li>Client: Window</li> <strong>Client:</strong>
<li>Category: Photography</li> Window
</li>
<li>
<strong>Category:</strong>
Photography
</li>
</ul> </ul>
<button class="btn btn-primary btn-lg" data-bs-dismiss="modal" type="button"> <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-times me-1"></i> <i class="fas fa-times me-1"></i>
Close Project Close Project
</button> </button>

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

144
src/pug/index.pug
View File

@ -89,6 +89,7 @@ html(lang='en')
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur. h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
.row .row
.col-lg-4.col-sm-6.mb-4 .col-lg-4.col-sm-6.mb-4
// Portfolio item 1
.portfolio-item .portfolio-item
a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal1') a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal1')
.portfolio-hover .portfolio-hover
@ -99,6 +100,7 @@ html(lang='en')
.portfolio-caption-heading Threads .portfolio-caption-heading Threads
.portfolio-caption-subheading.text-muted Illustration .portfolio-caption-subheading.text-muted Illustration
.col-lg-4.col-sm-6.mb-4 .col-lg-4.col-sm-6.mb-4
// Portfolio item 2
.portfolio-item .portfolio-item
a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal2') a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal2')
.portfolio-hover .portfolio-hover
@ -109,6 +111,7 @@ html(lang='en')
.portfolio-caption-heading Explore .portfolio-caption-heading Explore
.portfolio-caption-subheading.text-muted Graphic Design .portfolio-caption-subheading.text-muted Graphic Design
.col-lg-4.col-sm-6.mb-4 .col-lg-4.col-sm-6.mb-4
// Portfolio item 3
.portfolio-item .portfolio-item
a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal3') a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal3')
.portfolio-hover .portfolio-hover
@ -119,6 +122,7 @@ html(lang='en')
.portfolio-caption-heading Finish .portfolio-caption-heading Finish
.portfolio-caption-subheading.text-muted Identity .portfolio-caption-subheading.text-muted Identity
.col-lg-4.col-sm-6.mb-4.mb-lg-0 .col-lg-4.col-sm-6.mb-4.mb-lg-0
// Portfolio item 4
.portfolio-item .portfolio-item
a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal4') a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal4')
.portfolio-hover .portfolio-hover
@ -129,6 +133,7 @@ html(lang='en')
.portfolio-caption-heading Lines .portfolio-caption-heading Lines
.portfolio-caption-subheading.text-muted Branding .portfolio-caption-subheading.text-muted Branding
.col-lg-4.col-sm-6.mb-4.mb-sm-0 .col-lg-4.col-sm-6.mb-4.mb-sm-0
// Portfolio item 5
.portfolio-item .portfolio-item
a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal5') a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal5')
.portfolio-hover .portfolio-hover
@ -139,6 +144,7 @@ html(lang='en')
.portfolio-caption-heading Southwest .portfolio-caption-heading Southwest
.portfolio-caption-subheading.text-muted Website Design .portfolio-caption-subheading.text-muted Website Design
.col-lg-4.col-sm-6 .col-lg-4.col-sm-6
// Portfolio item 6
.portfolio-item .portfolio-item
a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal6') a.portfolio-link(data-bs-toggle='modal', href='#portfolioModal6')
.portfolio-hover .portfolio-hover
@ -315,138 +321,12 @@ html(lang='en')
a.link-dark.text-decoration-none(href='#!') Terms of Use a.link-dark.text-decoration-none(href='#!') Terms of Use
// Portfolio Modals // Portfolio Modals
// Modal 1 include includes/portfolio-modal-1
#portfolioModal1.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true') include includes/portfolio-modal-2
.modal-dialog include includes/portfolio-modal-3
.modal-content include includes/portfolio-modal-4
.close-modal(data-bs-dismiss='modal') include includes/portfolio-modal-5
img(src='assets/img/close-icon.svg', alt='Close modal') include includes/portfolio-modal-6
.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/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-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-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 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/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-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-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 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/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-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-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 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/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-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-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 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/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-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-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 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/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.btn-lg(data-bs-dismiss='modal', type='button')
i.fas.fa-times.me-1
| Close Project
// Bootstrap core JS // Bootstrap core JS
script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js') script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js')