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

continue the SCSS and Pug refactor - global style cleanup

Browse Source
This commit is contained in:
David Miller 2020-04-15 18:30:48 -04:00
parent ba21034d7c
commit 71fff054b0
22 changed files with 633 additions and 887 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dist/assets/img/close-icon.svg vendored Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 579.74 579.74"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:6px;}</style></defs><line class="cls-1" x1="2.12" y1="2.12" x2="577.62" y2="577.62"/><line class="cls-1" x1="2.12" y1="577.62" x2="577.62" y2="2.12"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 333 B

BIN
dist/assets/img/favicon.ico vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

1
dist/assets/img/logo.svg vendored
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

225
dist/css/styles.css vendored
View File

@ -9959,25 +9959,24 @@ p {
}
.page-section {
padding: 100px 0;
padding: 6rem 0;
}
.page-section h2.section-heading {
font-size: 40px;
font-size: 2.5rem;
margin-top: 0;
margin-bottom: 15px;
margin-bottom: 1rem;
}
.page-section h3.section-subheading {
font-size: 16px;
font-size: 1rem;
font-weight: 400;
font-style: italic;
margin-bottom: 75px;
text-transform: none;
font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
margin-bottom: 4rem;
}
@media (min-width: 768px) {
section {
padding: 150px 0;
padding: 9rem 0;
}
}
::-moz-selection {
@ -10009,6 +10008,16 @@ img::-moz-selection {
font-weight: 700;
}
.btn-social {
height: 2.5rem;
width: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 100%;
}
#mainNav {
padding-top: 1rem;
padding-bottom: 1rem;
@ -10079,6 +10088,8 @@ img::-moz-selection {
}
}
header.masthead {
padding-top: 10.5rem;
padding-bottom: 6rem;
text-align: center;
color: #fff;
background-image: url("../assets/img/header-bg.jpg");
@ -10087,175 +10098,122 @@ header.masthead {
background-position: center center;
background-size: cover;
}
header.masthead .intro-text {
padding-top: 150px;
padding-bottom: 100px;
}
header.masthead .intro-text .intro-lead-in {
font-size: 22px;
header.masthead .masthead-subheading {
font-size: 1.5rem;
font-style: italic;
line-height: 22px;
line-height: 1.5rem;
margin-bottom: 25px;
font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
header.masthead .intro-text .intro-heading {
font-size: 50px;
header.masthead .masthead-heading {
font-size: 3.25rem;
font-weight: 700;
line-height: 50px;
margin-bottom: 25px;
line-height: 3.25rem;
margin-bottom: 2rem;
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";
}
@media (min-width: 768px) {
header.masthead .intro-text {
padding-top: 300px;
padding-bottom: 200px;
header.masthead {
padding-top: 17rem;
padding-bottom: 12.5rem;
}
header.masthead .intro-text .intro-lead-in {
font-size: 40px;
header.masthead .masthead-subheading {
font-size: 2.25rem;
font-style: italic;
line-height: 40px;
margin-bottom: 25px;
line-height: 2.25rem;
margin-bottom: 2rem;
}
header.masthead .intro-text .intro-heading {
font-size: 75px;
header.masthead .masthead-heading {
font-size: 4.5rem;
font-weight: 700;
line-height: 75px;
margin-bottom: 50px;
line-height: 4.5rem;
margin-bottom: 4rem;
}
}
.service-heading {
margin: 15px 0;
text-transform: none;
}
#portfolio .portfolio-item {
right: 0;
margin: 0 0 15px;
max-width: 25rem;
margin-left: auto;
margin-right: auto;
}
#portfolio .portfolio-item .portfolio-link {
position: relative;
display: block;
max-width: 400px;
margin: 0 auto;
cursor: pointer;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover {
display: flex;
position: absolute;
width: 100%;
height: 100%;
transition: all ease 0.5s;
opacity: 0;
background: rgba(254, 209, 54, 0.9);
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
opacity: 1;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity ease-in-out 0.25s;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
font-size: 20px;
position: absolute;
top: 50%;
width: 100%;
height: 20px;
margin-top: -12px;
text-align: center;
font-size: 1.25rem;
color: white;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
margin-top: -12px;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
margin: 0;
#portfolio .portfolio-item .portfolio-link:hover .portfolio-hover {
opacity: 1;
}
#portfolio .portfolio-item .portfolio-caption {
max-width: 400px;
margin: 0 auto;
padding: 25px;
padding: 1.5rem;
text-align: center;
background-color: #fff;
}
#portfolio .portfolio-item .portfolio-caption h4 {
margin: 0;
text-transform: none;
#portfolio .portfolio-item .portfolio-caption .portfolio-caption-heading {
font-size: 1.5rem;
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-weight: 700;
margin-bottom: 0;
}
#portfolio .portfolio-item .portfolio-caption p {
font-size: 16px;
#portfolio .portfolio-item .portfolio-caption .portfolio-caption-subheading {
font-style: italic;
margin: 0;
font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
#portfolio * {
z-index: 2;
}
@media (min-width: 767px) {
#portfolio .portfolio-item {
margin: 0 0 30px;
}
}
.portfolio-modal .modal-dialog {
margin: 1rem;
max-width: 100vw;
}
.portfolio-modal .modal-content {
padding: 100px 0;
padding-top: 6rem;
padding-bottom: 6rem;
text-align: center;
}
.portfolio-modal .modal-content h2 {
font-size: 3em;
margin-bottom: 15px;
}
.portfolio-modal .modal-content p {
margin-bottom: 30px;
font-size: 3rem;
line-height: 3rem;
}
.portfolio-modal .modal-content p.item-intro {
font-size: 16px;
font-style: italic;
margin: 20px 0 30px;
margin-bottom: 2rem;
font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.portfolio-modal .modal-content p {
margin-bottom: 2rem;
}
.portfolio-modal .modal-content ul.list-inline {
margin-top: 0;
margin-bottom: 30px;
margin-bottom: 2rem;
}
.portfolio-modal .modal-content img {
margin-bottom: 30px;
}
.portfolio-modal .modal-content button {
cursor: pointer;
margin-bottom: 2rem;
}
.portfolio-modal .close-modal {
position: absolute;
top: 25px;
right: 25px;
width: 75px;
height: 75px;
top: 1.5rem;
right: 1.5rem;
width: 3rem;
height: 3rem;
cursor: pointer;
background-color: transparent;
}
.portfolio-modal .close-modal:hover {
opacity: 0.3;
}
.portfolio-modal .close-modal .lr {
/* Safari and Chrome */
z-index: 1051;
width: 1px;
height: 75px;
margin-left: 35px;
/* IE 9 */
transform: rotate(45deg);
background-color: #212529;
}
.portfolio-modal .close-modal .lr .rl {
/* Safari and Chrome */
z-index: 1052;
width: 1px;
height: 75px;
/* IE 9 */
transform: rotate(90deg);
background-color: #212529;
}
.timeline {
position: relative;
@ -10425,21 +10383,17 @@ header.masthead .intro-text .intro-heading {
}
}
.team-member {
margin-bottom: 50px;
margin-bottom: 3rem;
text-align: center;
}
.team-member img {
width: 225px;
height: 225px;
border: 7px solid rgba(0, 0, 0, 0.1);
width: 14rem;
height: 14rem;
border: 0.5rem solid rgba(0, 0, 0, 0.1);
}
.team-member h4 {
margin-top: 25px;
margin-top: 1.5rem;
margin-bottom: 0;
text-transform: none;
}
.team-member p {
margin-top: 0;
}
section#contact {
@ -10497,38 +10451,7 @@ section#contact form#contactForm :-ms-input-placeholder {
}
.footer {
padding: 25px 0;
text-align: center;
}
.footer span.copyright {
font-size: 90%;
line-height: 40px;
text-transform: none;
font-size: 0.9rem;
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";
}
.footer ul.quicklinks {
font-size: 90%;
line-height: 40px;
margin-bottom: 0;
text-transform: none;
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";
}
ul.social-buttons {
margin-bottom: 0;
}
ul.social-buttons li a {
font-size: 20px;
line-height: 50px;
display: block;
width: 50px;
height: 50px;
transition: all 0.3s;
color: #fff;
border-radius: 100%;
outline: none;
background-color: #212529;
}
ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
background-color: #fed136;
}

415
dist/index.html vendored
View File

@ -6,7 +6,7 @@
<meta name="description" content="" />
<meta name="author" content="" />
<title>Agency - Start Bootstrap Theme</title>
<link rel="icon" type="image/png" sizes="32x32" href="https://startbootstrap.com/assets/img/icons/favicon-32x32.png" />
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
@ -35,121 +35,127 @@
<!-- Masthead-->
<header class="masthead">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Welcome To Our Studio!</div>
<div class="intro-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>
</div>
<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>
</div>
</header>
<!-- Services-->
<section class="page-section" id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Services</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="text-center">
<h2 class="section-heading text-uppercase">Services</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x"><i class="fas fa-circle fa-stack-2x text-primary"></i><i class="fas fa-shopping-cart fa-stack-1x fa-inverse"></i></span>
<h4 class="service-heading">E-Commerce</h4>
<h4 class="my-3">E-Commerce</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x"><i class="fas fa-circle fa-stack-2x text-primary"></i><i class="fas fa-laptop fa-stack-1x fa-inverse"></i></span>
<h4 class="service-heading">Responsive Design</h4>
<h4 class="my-3">Responsive Design</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x"><i class="fas fa-circle fa-stack-2x text-primary"></i><i class="fas fa-lock fa-stack-1x fa-inverse"></i></span>
<h4 class="service-heading">Web Security</h4>
<h4 class="my-3">Web Security</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Grid-->
<section class="bg-light page-section" id="portfolio">
<section class="page-section bg-light" id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Portfolio</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="text-center">
<h2 class="section-heading text-uppercase">Portfolio</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal1"
><div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="portfolio-item">
<a class="portfolio-link" data-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=""
/></a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Threads</div>
<div class="portfolio-caption-subheading text-muted">Illustration</div>
</div>
<img class="img-fluid" src="assets/img/portfolio/01-thumbnail.jpg" alt=""
/></a>
<div class="portfolio-caption">
<h4>Threads</h4>
<p class="text-muted">Illustration</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal2"
><div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="portfolio-item">
<a class="portfolio-link" data-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=""
/></a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Explore</div>
<div class="portfolio-caption-subheading text-muted">Graphic Design</div>
</div>
<img class="img-fluid" src="assets/img/portfolio/02-thumbnail.jpg" alt=""
/></a>
<div class="portfolio-caption">
<h4>Explore</h4>
<p class="text-muted">Graphic Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal3"
><div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="portfolio-item">
<a class="portfolio-link" data-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=""
/></a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Finish</div>
<div class="portfolio-caption-subheading text-muted">Identity</div>
</div>
<img class="img-fluid" src="assets/img/portfolio/03-thumbnail.jpg" alt=""
/></a>
<div class="portfolio-caption">
<h4>Finish</h4>
<p class="text-muted">Identity</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal4"
><div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
<div class="col-lg-4 col-sm-6 mb-4 mb-lg-0">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal4"
><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=""
/></a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Lines</div>
<div class="portfolio-caption-subheading text-muted">Branding</div>
</div>
<img class="img-fluid" src="assets/img/portfolio/04-thumbnail.jpg" alt=""
/></a>
<div class="portfolio-caption">
<h4>Lines</h4>
<p class="text-muted">Branding</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal5"
><div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
<div class="col-lg-4 col-sm-6 mb-4 mb-sm-0">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal5"
><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=""
/></a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Southwest</div>
<div class="portfolio-caption-subheading text-muted">Website Design</div>
</div>
<img class="img-fluid" src="assets/img/portfolio/05-thumbnail.jpg" alt=""
/></a>
<div class="portfolio-caption">
<h4>Southwest</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal6"
><div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
<div class="col-lg-4 col-sm-6">
<div class="portfolio-item">
<a class="portfolio-link" data-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=""
/></a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Window</div>
<div class="portfolio-caption-subheading text-muted">Photography</div>
</div>
<img class="img-fluid" src="assets/img/portfolio/06-thumbnail.jpg" alt=""
/></a>
<div class="portfolio-caption">
<h4>Window</h4>
<p class="text-muted">Photography</p>
</div>
</div>
</div>
@ -158,73 +164,65 @@
<!-- About-->
<section class="page-section" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">About</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li>
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/1.jpg" alt="" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2009-2011</h4>
<h4 class="subheading">Our Humble Beginnings</h4>
</div>
<div class="timeline-body"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p></div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/2.jpg" alt="" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>March 2011</h4>
<h4 class="subheading">An Agency is Born</h4>
</div>
<div class="timeline-body"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p></div>
</div>
</li>
<li>
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/3.jpg" alt="" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>December 2012</h4>
<h4 class="subheading">Transition to Full Service</h4>
</div>
<div class="timeline-body"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p></div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/4.jpg" alt="" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>July 2014</h4>
<h4 class="subheading">Phase Two Expansion</h4>
</div>
<div class="timeline-body"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p></div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<h4>Be Part<br />Of Our<br />Story!</h4>
</div>
</li>
</ul>
</div>
<div class="text-center">
<h2 class="section-heading text-uppercase">About</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<ul class="timeline">
<li>
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/1.jpg" alt="" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2009-2011</h4>
<h4 class="subheading">Our Humble Beginnings</h4>
</div>
<div class="timeline-body"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p></div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/2.jpg" alt="" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>March 2011</h4>
<h4 class="subheading">An Agency is Born</h4>
</div>
<div class="timeline-body"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p></div>
</div>
</li>
<li>
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/3.jpg" alt="" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>December 2012</h4>
<h4 class="subheading">Transition to Full Service</h4>
</div>
<div class="timeline-body"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p></div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/4.jpg" alt="" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>July 2014</h4>
<h4 class="subheading">Phase Two Expansion</h4>
</div>
<div class="timeline-body"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p></div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<h4>Be Part<br />Of Our<br />Story!</h4>
</div>
</li>
</ul>
</div>
</section>
<!-- Team-->
<section class="bg-light page-section" id="team">
<section class="page-section bg-light" id="team">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Our Amazing Team</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="text-center">
<h2 class="section-heading text-uppercase">Our Amazing Team</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="row">
<div class="col-sm-4">
@ -232,17 +230,7 @@
<img class="mx-auto rounded-circle" src="assets/img/team/1.jpg" alt="" />
<h4>Kay Garland</h4>
<p class="text-muted">Lead Designer</p>
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fab fa-facebook-f"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</li>
</ul>
<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><a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="col-sm-4">
@ -250,17 +238,7 @@
<img class="mx-auto rounded-circle" src="assets/img/team/2.jpg" alt="" />
<h4>Larry Parker</h4>
<p class="text-muted">Lead Marketer</p>
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fab fa-facebook-f"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</li>
</ul>
<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><a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="col-sm-4">
@ -268,17 +246,7 @@
<img class="mx-auto rounded-circle" src="assets/img/team/3.jpg" alt="" />
<h4>Diana Pertersen</h4>
<p class="text-muted">Lead Developer</p>
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fab fa-facebook-f"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</li>
</ul>
<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><a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
@ -291,17 +259,17 @@
<section class="py-5">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/logos/envato.jpg" alt="" /></a>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid d-block mx-auto" src="assets/img/logos/envato.jpg" alt="" /></a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/logos/designmodo.jpg" alt="" /></a>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid d-block mx-auto" src="assets/img/logos/designmodo.jpg" alt="" /></a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/logos/themeforest.jpg" alt="" /></a>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid d-block mx-auto" src="assets/img/logos/themeforest.jpg" alt="" /></a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/logos/creative-market.jpg" alt="" /></a>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid d-block mx-auto" src="assets/img/logos/creative-market.jpg" alt="" /></a>
</div>
</div>
</div>
@ -309,11 +277,9 @@
<!-- Contact-->
<section class="page-section" id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Contact Us</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="text-center">
<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">
<div class="row align-items-stretch mb-5">
@ -346,29 +312,14 @@
</div>
</section>
<!-- Footer-->
<footer class="footer">
<footer class="footer py-4">
<div class="container">
<div class="row align-items-center">
<div class="col-md-4"><span class="copyright">Copyright © Your Website 2019</span></div>
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fab fa-facebook-f"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-inline quicklinks">
<li class="list-inline-item"><a href="#">Privacy Policy</a></li>
<li class="list-inline-item"><a href="#">Terms of Use</a></li>
</ul>
<div class="col-lg-4 text-lg-left">Copyright © Your Website 2020</div>
<div class="col-lg-4 my-3 my-lg-0">
<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><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>
</div>
</div>
</footer>
@ -376,12 +327,10 @@
<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">
<div class="lr"><div class="rl"></div></div>
</div>
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" /></div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
@ -389,7 +338,7 @@
<img class="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!</p>
<ul class="list-inline">
<li>Date: January 2017</li>
<li>Date: January 2020</li>
<li>Client: Threads</li>
<li>Category: Illustration</li>
</ul>
@ -405,12 +354,10 @@
<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">
<div class="lr"><div class="rl"></div></div>
</div>
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" /></div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
@ -418,7 +365,7 @@
<img class="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!</p>
<ul class="list-inline">
<li>Date: January 2017</li>
<li>Date: January 2020</li>
<li>Client: Explore</li>
<li>Category: Graphic Design</li>
</ul>
@ -434,12 +381,10 @@
<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">
<div class="lr"><div class="rl"></div></div>
</div>
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" /></div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
@ -447,7 +392,7 @@
<img class="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!</p>
<ul class="list-inline">
<li>Date: January 2017</li>
<li>Date: January 2020</li>
<li>Client: Finish</li>
<li>Category: Identity</li>
</ul>
@ -463,12 +408,10 @@
<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">
<div class="lr"><div class="rl"></div></div>
</div>
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" /></div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
@ -476,7 +419,7 @@
<img class="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!</p>
<ul class="list-inline">
<li>Date: January 2017</li>
<li>Date: January 2020</li>
<li>Client: Lines</li>
<li>Category: Branding</li>
</ul>
@ -492,12 +435,10 @@
<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">
<div class="lr"><div class="rl"></div></div>
</div>
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" /></div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
@ -505,7 +446,7 @@
<img class="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!</p>
<ul class="list-inline">
<li>Date: January 2017</li>
<li>Date: January 2020</li>
<li>Client: Southwest</li>
<li>Category: Website Design</li>
</ul>
@ -521,12 +462,10 @@
<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">
<div class="lr"><div class="rl"></div></div>
</div>
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" /></div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
@ -534,7 +473,7 @@
<img class="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!</p>
<ul class="list-inline">
<li>Date: January 2017</li>
<li>Date: January 2020</li>
<li>Client: Window</li>
<li>Category: Photography</li>
</ul>

1
src/assets/img/close-icon.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 579.74 579.74"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:6px;}</style></defs><line class="cls-1" x1="2.12" y1="2.12" x2="577.62" y2="577.62"/><line class="cls-1" x1="2.12" y1="577.62" x2="577.62" y2="2.12"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 333 B

BIN
src/assets/img/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

420
src/pug/index.pug
View File

@ -10,7 +10,7 @@ html(lang='en')
title Agency - Start Bootstrap Theme
link(rel='icon', type='image/png', sizes='32x32', href='https://startbootstrap.com/assets/img/icons/favicon-32x32.png')
link(rel='icon', type='image/x-icon', href='assets/img/favicon.ico')
// Font Awesome icons (free version)
script(src='https://use.fontawesome.com/releases/v5.12.1/js/all.js', crossorigin='anonymous')
@ -46,219 +46,205 @@ html(lang='en')
li.nav-item
a.nav-link.js-scroll-trigger(href='#contact') Contact
// Masthead
header.masthead
.container
.intro-text
.intro-lead-in Welcome To Our Studio!
.intro-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
.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
// Services
section#services.page-section
.container
.row
.col-lg-12.text-center
h2.section-heading.text-uppercase Services
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
.text-center
h2.section-heading.text-uppercase Services
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
.row.text-center
.col-md-4
span.fa-stack.fa-4x
i.fas.fa-circle.fa-stack-2x.text-primary
i.fas.fa-shopping-cart.fa-stack-1x.fa-inverse
h4.service-heading E-Commerce
h4.my-3 E-Commerce
p.text-muted
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.
.col-md-4
span.fa-stack.fa-4x
i.fas.fa-circle.fa-stack-2x.text-primary
i.fas.fa-laptop.fa-stack-1x.fa-inverse
h4.service-heading Responsive Design
h4.my-3 Responsive Design
p.text-muted
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.
.col-md-4
span.fa-stack.fa-4x
i.fas.fa-circle.fa-stack-2x.text-primary
i.fas.fa-lock.fa-stack-1x.fa-inverse
h4.service-heading Web Security
h4.my-3 Web Security
p.text-muted
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.
// Portfolio Grid
section#portfolio.bg-light.page-section
section#portfolio.page-section.bg-light
.container
.text-center
h2.section-heading.text-uppercase Portfolio
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
.row
.col-lg-12.text-center
h2.section-heading.text-uppercase Portfolio
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
.row
.col-md-4.col-sm-6.portfolio-item
a.portfolio-link(data-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='')
.portfolio-caption
h4 Threads
p.text-muted Illustration
.col-md-4.col-sm-6.portfolio-item
a.portfolio-link(data-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='')
.portfolio-caption
h4 Explore
p.text-muted Graphic Design
.col-md-4.col-sm-6.portfolio-item
a.portfolio-link(data-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='')
.portfolio-caption
h4 Finish
p.text-muted Identity
.col-md-4.col-sm-6.portfolio-item
a.portfolio-link(data-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='')
.portfolio-caption
h4 Lines
p.text-muted Branding
.col-md-4.col-sm-6.portfolio-item
a.portfolio-link(data-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='')
.portfolio-caption
h4 Southwest
p.text-muted Website Design
.col-md-4.col-sm-6.portfolio-item
a.portfolio-link(data-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='')
.portfolio-caption
h4 Window
p.text-muted Photography
.col-lg-4.col-sm-6.mb-4
.portfolio-item
a.portfolio-link(data-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='')
.portfolio-caption
.portfolio-caption-heading Threads
.portfolio-caption-subheading.text-muted Illustration
.col-lg-4.col-sm-6.mb-4
.portfolio-item
a.portfolio-link(data-toggle='modal', href='#portfolioModal2')
.portfolio-hover
.portfolio-hover-content
i.fas.fa-plus.fa-3x
img.img-fluid(src='assets/img/portfolio/02-thumbnail.jpg', alt='')
.portfolio-caption
.portfolio-caption-heading Explore
.portfolio-caption-subheading.text-muted Graphic Design
.col-lg-4.col-sm-6.mb-4
.portfolio-item
a.portfolio-link(data-toggle='modal', href='#portfolioModal3')
.portfolio-hover
.portfolio-hover-content
i.fas.fa-plus.fa-3x
img.img-fluid(src='assets/img/portfolio/03-thumbnail.jpg', alt='')
.portfolio-caption
.portfolio-caption-heading Finish
.portfolio-caption-subheading.text-muted Identity
.col-lg-4.col-sm-6.mb-4.mb-lg-0
.portfolio-item
a.portfolio-link(data-toggle='modal', href='#portfolioModal4')
.portfolio-hover
.portfolio-hover-content
i.fas.fa-plus.fa-3x
img.img-fluid(src='assets/img/portfolio/04-thumbnail.jpg', alt='')
.portfolio-caption
.portfolio-caption-heading Lines
.portfolio-caption-subheading.text-muted Branding
.col-lg-4.col-sm-6.mb-4.mb-sm-0
.portfolio-item
a.portfolio-link(data-toggle='modal', href='#portfolioModal5')
.portfolio-hover
.portfolio-hover-content
i.fas.fa-plus.fa-3x
img.img-fluid(src='assets/img/portfolio/05-thumbnail.jpg', alt='')
.portfolio-caption
.portfolio-caption-heading Southwest
.portfolio-caption-subheading.text-muted Website Design
.col-lg-4.col-sm-6
.portfolio-item
a.portfolio-link(data-toggle='modal', href='#portfolioModal6')
.portfolio-hover
.portfolio-hover-content
i.fas.fa-plus.fa-3x
img.img-fluid(src='assets/img/portfolio/06-thumbnail.jpg', alt='')
.portfolio-caption
.portfolio-caption-heading Window
.portfolio-caption-subheading.text-muted Photography
// About
section#about.page-section
.container
.row
.col-lg-12.text-center
h2.section-heading.text-uppercase About
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
.row
.col-lg-12
ul.timeline
li
.timeline-image
img.rounded-circle.img-fluid(src='assets/img/about/1.jpg', alt='')
.timeline-panel
.timeline-heading
h4 2009-2011
h4.subheading Our Humble Beginnings
.timeline-body
p.text-muted
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
li.timeline-inverted
.timeline-image
img.rounded-circle.img-fluid(src='assets/img/about/2.jpg', alt='')
.timeline-panel
.timeline-heading
h4 March 2011
h4.subheading An Agency is Born
.timeline-body
p.text-muted
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
li
.timeline-image
img.rounded-circle.img-fluid(src='assets/img/about/3.jpg', alt='')
.timeline-panel
.timeline-heading
h4 December 2012
h4.subheading Transition to Full Service
.timeline-body
p.text-muted
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
li.timeline-inverted
.timeline-image
img.rounded-circle.img-fluid(src='assets/img/about/4.jpg', alt='')
.timeline-panel
.timeline-heading
h4 July 2014
h4.subheading Phase Two Expansion
.timeline-body
p.text-muted
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
li.timeline-inverted
.timeline-image
h4
| Be Part
br
| Of Our
br
| Story!
.text-center
h2.section-heading.text-uppercase About
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
ul.timeline
li
.timeline-image
img.rounded-circle.img-fluid(src='assets/img/about/1.jpg', alt='')
.timeline-panel
.timeline-heading
h4 2009-2011
h4.subheading Our Humble Beginnings
.timeline-body
p.text-muted
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
li.timeline-inverted
.timeline-image
img.rounded-circle.img-fluid(src='assets/img/about/2.jpg', alt='')
.timeline-panel
.timeline-heading
h4 March 2011
h4.subheading An Agency is Born
.timeline-body
p.text-muted
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
li
.timeline-image
img.rounded-circle.img-fluid(src='assets/img/about/3.jpg', alt='')
.timeline-panel
.timeline-heading
h4 December 2012
h4.subheading Transition to Full Service
.timeline-body
p.text-muted
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
li.timeline-inverted
.timeline-image
img.rounded-circle.img-fluid(src='assets/img/about/4.jpg', alt='')
.timeline-panel
.timeline-heading
h4 July 2014
h4.subheading Phase Two Expansion
.timeline-body
p.text-muted
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
li.timeline-inverted
.timeline-image
h4
| Be Part
br
| Of Our
br
| Story!
// Team
section#team.bg-light.page-section
section#team.page-section.bg-light
.container
.row
.col-lg-12.text-center
h2.section-heading.text-uppercase Our Amazing Team
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
.text-center
h2.section-heading.text-uppercase Our Amazing Team
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
.row
.col-sm-4
.team-member
img.mx-auto.rounded-circle(src='assets/img/team/1.jpg', alt='')
h4 Kay Garland
p.text-muted Lead Designer
ul.list-inline.social-buttons
li.list-inline-item
a(href='#')
i.fab.fa-twitter
li.list-inline-item
a(href='#')
i.fab.fa-facebook-f
li.list-inline-item
a(href='#')
i.fab.fa-linkedin-in
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-twitter
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-facebook-f
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-linkedin-in
.col-sm-4
.team-member
img.mx-auto.rounded-circle(src='assets/img/team/2.jpg', alt='')
h4 Larry Parker
p.text-muted Lead Marketer
ul.list-inline.social-buttons
li.list-inline-item
a(href='#')
i.fab.fa-twitter
li.list-inline-item
a(href='#')
i.fab.fa-facebook-f
li.list-inline-item
a(href='#')
i.fab.fa-linkedin-in
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-twitter
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-facebook-f
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-linkedin-in
.col-sm-4
.team-member
img.mx-auto.rounded-circle(src='assets/img/team/3.jpg', alt='')
h4 Diana Pertersen
p.text-muted Lead Developer
ul.list-inline.social-buttons
li.list-inline-item
a(href='#')
i.fab.fa-twitter
li.list-inline-item
a(href='#')
i.fab.fa-facebook-f
li.list-inline-item
a(href='#')
i.fab.fa-linkedin-in
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-twitter
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-facebook-f
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-linkedin-in
.row
.col-lg-8.mx-auto.text-center
p.large.text-muted
@ -268,26 +254,25 @@ html(lang='en')
section.py-5
.container
.row
.col-md-3.col-sm-6
a(href='#')
.col-md-3.col-sm-6.my-3
a(href='#!')
img.img-fluid.d-block.mx-auto(src='assets/img/logos/envato.jpg', alt='')
.col-md-3.col-sm-6
a(href='#')
.col-md-3.col-sm-6.my-3
a(href='#!')
img.img-fluid.d-block.mx-auto(src='assets/img/logos/designmodo.jpg', alt='')
.col-md-3.col-sm-6
a(href='#')
.col-md-3.col-sm-6.my-3
a(href='#!')
img.img-fluid.d-block.mx-auto(src='assets/img/logos/themeforest.jpg', alt='')
.col-md-3.col-sm-6
a(href='#')
.col-md-3.col-sm-6.my-3
a(href='#!')
img.img-fluid.d-block.mx-auto(src='assets/img/logos/creative-market.jpg', alt='')
// Contact
section#contact.page-section
.container
.row
.col-lg-12.text-center
h2.section-heading.text-uppercase Contact Us
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
.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')
.row.align-items-stretch.mb-5
.col-md-6
@ -309,28 +294,21 @@ html(lang='en')
button#sendMessageButton.btn.btn-primary.btn-xl.text-uppercase(type='submit') Send Message
// Footer
footer.footer
footer.footer.py-4
.container
.row.align-items-center
.col-md-4
span.copyright Copyright © Your Website 2019
.col-md-4
ul.list-inline.social-buttons
li.list-inline-item
a(href='#')
i.fab.fa-twitter
li.list-inline-item
a(href='#')
i.fab.fa-facebook-f
li.list-inline-item
a(href='#')
i.fab.fa-linkedin-in
.col-md-4
ul.list-inline.quicklinks
li.list-inline-item
a(href='#') Privacy Policy
li.list-inline-item
a(href='#') Terms of Use
.col-lg-4.text-lg-left
| Copyright © Your Website 2020
.col-lg-4.my-3.my-lg-0
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-twitter
a.btn.btn-dark.btn-social.mx-2(href='#!')
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
// Portfolio Modals
// Modal 1
@ -338,11 +316,10 @@ html(lang='en')
.modal-dialog
.modal-content
.close-modal(data-dismiss='modal')
.lr
.rl
img(src="assets/img/close-icon.svg")
.container
.row
.col-lg-8.mx-auto
.row.justify-content-center
.col-lg-8
.modal-body
// Project Details Go Here
h2.text-uppercase Project Name
@ -351,7 +328,7 @@ html(lang='en')
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 2017
li Date: January 2020
li Client: Threads
li Category: Illustration
button.btn.btn-primary(data-dismiss='modal', type='button')
@ -362,11 +339,10 @@ html(lang='en')
.modal-dialog
.modal-content
.close-modal(data-dismiss='modal')
.lr
.rl
img(src="assets/img/close-icon.svg")
.container
.row
.col-lg-8.mx-auto
.row.justify-content-center
.col-lg-8
.modal-body
// Project Details Go Here
h2.text-uppercase Project Name
@ -375,7 +351,7 @@ html(lang='en')
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 2017
li Date: January 2020
li Client: Explore
li Category: Graphic Design
button.btn.btn-primary(data-dismiss='modal', type='button')
@ -386,11 +362,10 @@ html(lang='en')
.modal-dialog
.modal-content
.close-modal(data-dismiss='modal')
.lr
.rl
img(src="assets/img/close-icon.svg")
.container
.row
.col-lg-8.mx-auto
.row.justify-content-center
.col-lg-8
.modal-body
// Project Details Go Here
h2.text-uppercase Project Name
@ -399,7 +374,7 @@ html(lang='en')
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 2017
li Date: January 2020
li Client: Finish
li Category: Identity
button.btn.btn-primary(data-dismiss='modal', type='button')
@ -410,11 +385,10 @@ html(lang='en')
.modal-dialog
.modal-content
.close-modal(data-dismiss='modal')
.lr
.rl
img(src="assets/img/close-icon.svg")
.container
.row
.col-lg-8.mx-auto
.row.justify-content-center
.col-lg-8
.modal-body
// Project Details Go Here
h2.text-uppercase Project Name
@ -423,7 +397,7 @@ html(lang='en')
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 2017
li Date: January 2020
li Client: Lines
li Category: Branding
button.btn.btn-primary(data-dismiss='modal', type='button')
@ -434,11 +408,10 @@ html(lang='en')
.modal-dialog
.modal-content
.close-modal(data-dismiss='modal')
.lr
.rl
img(src="assets/img/close-icon.svg")
.container
.row
.col-lg-8.mx-auto
.row.justify-content-center
.col-lg-8
.modal-body
// Project Details Go Here
h2.text-uppercase Project Name
@ -447,7 +420,7 @@ html(lang='en')
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 2017
li Date: January 2020
li Client: Southwest
li Category: Website Design
button.btn.btn-primary(data-dismiss='modal', type='button')
@ -458,11 +431,10 @@ html(lang='en')
.modal-dialog
.modal-content
.close-modal(data-dismiss='modal')
.lr
.rl
img(src="assets/img/close-icon.svg")
.container
.row
.col-lg-8.mx-auto
.row.justify-content-center
.col-lg-8
.modal-body
// Project Details Go Here
h2.text-uppercase Project Name
@ -471,7 +443,7 @@ html(lang='en')
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 2017
li Date: January 2020
li Client: Window
li Category: Photography
button.btn.btn-primary(data-dismiss='modal', type='button')

17
src/scss/_global.scss
View File

@ -8,28 +8,29 @@ p {
}
.page-section {
padding: 100px 0;
padding: 6rem 0;
h2.section-heading {
font-size: 40px;
font-size: 2.5rem;
margin-top: 0;
margin-bottom: 15px;
margin-bottom: 1rem;
}
h3.section-subheading {
font-size: 16px;
font-size: 1rem;
font-weight: 400;
font-style: italic;
margin-bottom: 75px;
text-transform: none;
font-family: $subheadings-font-family;
margin-bottom: 4rem;
}
}
@media (min-width: 768px) {
@include media-breakpoint-up(md) {
section {
padding: 150px 0;
padding: 9rem 0;
}
}
// Highlight color customization
::-moz-selection {
background: $primary;
text-shadow: none;

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

@ -6,3 +6,13 @@
font-size: 1.125rem;
font-weight: $headings-font-weight;
}
.btn-social {
height: 2.5rem;
width: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 100%;
}

43
src/scss/layout/_footer.scss
View File

@ -1,43 +0,0 @@
// Styling for the footer
.footer {
padding: 25px 0;
text-align: center;
span.copyright {
font-size: 90%;
line-height: 40px;
text-transform: none;
font-family: $headings-font-family;
}
ul.quicklinks {
font-size: 90%;
line-height: 40px;
margin-bottom: 0;
text-transform: none;
font-family: $headings-font-family;
}
}
ul.social-buttons {
margin-bottom: 0;
li {
a {
font-size: 20px;
line-height: 50px;
display: block;
width: 50px;
height: 50px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
color: $white;
border-radius: 100%;
outline: none;
background-color: $gray-900;
&:active,
&:focus,
&:hover {
background-color: $primary;
}
}
}
}

48
src/scss/layout/_masthead.scss
View File

@ -1,48 +0,0 @@
// Styling for the masthead
header.masthead {
text-align: center;
color: $white;
background-image: url("../assets/img/header-bg.jpg");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
.intro-text {
padding-top: 150px;
padding-bottom: 100px;
.intro-lead-in {
font-size: 22px;
font-style: italic;
line-height: 22px;
margin-bottom: 25px;
font-family: $subheadings-font-family;
}
.intro-heading {
font-size: 50px;
font-weight: 700;
line-height: 50px;
margin-bottom: 25px;
font-family: $headings-font-family;
}
}
}
@media (min-width: 768px) {
header.masthead {
.intro-text {
padding-top: 300px;
padding-bottom: 200px;
.intro-lead-in {
font-size: 40px;
font-style: italic;
line-height: 40px;
margin-bottom: 25px;
}
.intro-heading {
font-size: 75px;
font-weight: 700;
line-height: 75px;
margin-bottom: 50px;
}
}
}
}

140
src/scss/layout/_portfolio.scss
View File

@ -1,140 +0,0 @@
// Styling for the portfolio section
#portfolio {
.portfolio-item {
right: 0;
margin: 0 0 15px;
.portfolio-link {
position: relative;
display: block;
max-width: 400px;
margin: 0 auto;
cursor: pointer;
.portfolio-hover {
position: absolute;
width: 100%;
height: 100%;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
transition: all ease 0.5s;
opacity: 0;
background: fade-out($primary, 0.1);
&:hover {
opacity: 1;
}
.portfolio-hover-content {
font-size: 20px;
position: absolute;
top: 50%;
width: 100%;
height: 20px;
margin-top: -12px;
text-align: center;
color: white;
i {
margin-top: -12px;
}
h3,
h4 {
margin: 0;
}
}
}
}
.portfolio-caption {
max-width: 400px;
margin: 0 auto;
padding: 25px;
text-align: center;
background-color: $white;
h4 {
margin: 0;
text-transform: none;
}
p {
font-size: 16px;
font-style: italic;
margin: 0;
font-family: $subheadings-font-family;
}
}
}
* {
z-index: 2;
}
}
@media (min-width: 767px) {
#portfolio {
.portfolio-item {
margin: 0 0 30px;
}
}
}
.portfolio-modal {
.modal-dialog {
margin: 1rem;
max-width: 100vw;
}
.modal-content {
padding: 100px 0;
text-align: center;
h2 {
font-size: 3em;
margin-bottom: 15px;
}
p {
margin-bottom: 30px;
}
p.item-intro {
font-size: 16px;
font-style: italic;
margin: 20px 0 30px;
font-family: $subheadings-font-family;
}
ul.list-inline {
margin-top: 0;
margin-bottom: 30px;
}
img {
margin-bottom: 30px;
}
button {
cursor: pointer;
}
}
.close-modal {
position: absolute;
top: 25px;
right: 25px;
width: 75px;
height: 75px;
cursor: pointer;
background-color: transparent;
&:hover {
opacity: 0.3;
}
.lr {
/* Safari and Chrome */
z-index: 1051;
width: 1px;
height: 75px;
margin-left: 35px;
/* IE 9 */
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background-color: $gray-900;
.rl {
/* Safari and Chrome */
z-index: 1052;
width: 1px;
height: 75px;
/* IE 9 */
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
background-color: $gray-900;
}
}
}
}

5
src/scss/layout/_services.scss
View File

@ -1,5 +0,0 @@
// Styling for the services section
.service-heading {
margin: 15px 0;
text-transform: none;
}

18
src/scss/layout/_team.scss
View File

@ -1,18 +0,0 @@
// Styling for the team section
.team-member {
margin-bottom: 50px;
text-align: center;
img {
width: 225px;
height: 225px;
border: 7px solid fade-out($black, 0.9);
}
h4 {
margin-top: 25px;
margin-bottom: 0;
text-transform: none;
}
p {
margin-top: 0;
}
}

0
src/scss/layout/_contact.scss → src/scss/sections/_contact.scss
View File

6
src/scss/sections/_footer.scss Normal file
View File

@ -0,0 +1,6 @@
// Styling for the footer
.footer {
text-align: center;
font-size: 0.9rem;
font-family: $headings-font-family;
}

45
src/scss/sections/_masthead.scss Normal file
View File

@ -0,0 +1,45 @@
// Styling for the masthead
header.masthead {
padding-top: 6rem + 4.5rem;
padding-bottom: 6rem;
text-align: center;
color: $white;
background-image: url("../assets/img/header-bg.jpg");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
.masthead-subheading {
font-size: 1.5rem;
font-style: italic;
line-height: 1.5rem;
margin-bottom: 25px;
font-family: $subheadings-font-family;
}
.masthead-heading {
font-size: 3.25rem;
font-weight: 700;
line-height: 3.25rem;
margin-bottom: 2rem;
font-family: $headings-font-family;
}
}
@include media-breakpoint-up(md) {
header.masthead {
padding-top: 12.5rem + 4.5rem;
padding-bottom: 12.5rem;
.masthead-subheading {
font-size: 2.25rem;
font-style: italic;
line-height: 2.25rem;
margin-bottom: 2rem;
}
.masthead-heading {
font-size: 4.5rem;
font-weight: 700;
line-height: 4.5rem;
margin-bottom: 4rem;
}
}
}

90
src/scss/sections/_portfolio.scss Normal file
View File

@ -0,0 +1,90 @@
// Styling for the portfolio section
#portfolio {
.portfolio-item {
max-width: 25rem;
margin-left: auto;
margin-right: auto;
.portfolio-link {
position: relative;
display: block;
margin: 0 auto;
.portfolio-hover {
display: flex;
position: absolute;
width: 100%;
height: 100%;
background: fade-out($primary, 0.1);
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity ease-in-out 0.25s;
.portfolio-hover-content {
font-size: 1.25rem;
color: white;
}
}
&:hover {
.portfolio-hover {
opacity: 1;
}
}
}
.portfolio-caption {
padding: 1.5rem;
text-align: center;
background-color: $white;
.portfolio-caption-heading {
font-size: 1.5rem;
font-family: $headings-font-family;
font-weight: $headings-font-weight;
margin-bottom: 0;
}
.portfolio-caption-subheading {
font-style: italic;
font-family: $subheadings-font-family;
}
}
}
}
.portfolio-modal {
.modal-dialog {
margin: 1rem;
max-width: 100vw;
}
.modal-content {
padding-top: 6rem;
padding-bottom: 6rem;
text-align: center;
h2 {
font-size: 3rem;
line-height: 3rem;
}
p.item-intro {
font-style: italic;
margin-bottom: 2rem;
font-family: $subheadings-font-family;
}
p {
margin-bottom: 2rem;
}
ul.list-inline {
margin-bottom: 2rem;
}
img {
margin-bottom: 2rem;
}
}
.close-modal {
position: absolute;
top: 1.5rem;
right: 1.5rem;
width: 3rem;
height: 3rem;
cursor: pointer;
background-color: transparent;
&:hover {
opacity: 0.3;
}
}
}

14
src/scss/sections/_team.scss Normal file
View File

@ -0,0 +1,14 @@
// Styling for the team section
.team-member {
margin-bottom: 3rem;
text-align: center;
img {
width: 14rem;
height: 14rem;
border: 0.5rem solid fade-out($black, 0.9);
}
h4 {
margin-top: 1.5rem;
margin-bottom: 0;
}
}

6
src/scss/layout/_timeline.scss → src/scss/sections/_timeline.scss
View File

@ -99,7 +99,7 @@
}
}
}
@media (min-width: 768px) {
@include media-breakpoint-up(md) {
.timeline {
&:before {
left: 50%;
@ -132,7 +132,7 @@
}
}
}
@media (min-width: 992px) {
@include media-breakpoint-up(lg) {
.timeline {
> li {
min-height: 150px;
@ -155,7 +155,7 @@
}
}
}
@media (min-width: 1200px) {
@include media-breakpoint-up(xl) {
.timeline {
> li {
min-height: 170px;

15
src/scss/styles.scss
View File

@ -11,11 +11,10 @@
@import "./components/buttons.scss";
@import "./components/navbar.scss";
// Layout
@import "./layout/masthead.scss";
@import "./layout/services.scss";
@import "./layout/portfolio.scss";
@import "./layout/timeline.scss";
@import "./layout/team.scss";
@import "./layout/contact.scss";
@import "./layout/footer.scss";
// Sections
@import "./sections/masthead.scss";
@import "./sections/portfolio.scss";
@import "./sections/timeline.scss";
@import "./sections/team.scss";
@import "./sections/contact.scss";
@import "./sections/footer.scss";