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 { .page-section {
padding: 100px 0; padding: 6rem 0;
} }
.page-section h2.section-heading { .page-section h2.section-heading {
font-size: 40px; font-size: 2.5rem;
margin-top: 0; margin-top: 0;
margin-bottom: 15px; margin-bottom: 1rem;
} }
.page-section h3.section-subheading { .page-section h3.section-subheading {
font-size: 16px; font-size: 1rem;
font-weight: 400; font-weight: 400;
font-style: italic; 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"; 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) { @media (min-width: 768px) {
section { section {
padding: 150px 0; padding: 9rem 0;
} }
} }
::-moz-selection { ::-moz-selection {
@ -10009,6 +10008,16 @@ img::-moz-selection {
font-weight: 700; 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 { #mainNav {
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
@ -10079,6 +10088,8 @@ img::-moz-selection {
} }
} }
header.masthead { header.masthead {
padding-top: 10.5rem;
padding-bottom: 6rem;
text-align: center; text-align: center;
color: #fff; color: #fff;
background-image: url("../assets/img/header-bg.jpg"); background-image: url("../assets/img/header-bg.jpg");
@ -10087,175 +10098,122 @@ header.masthead {
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
} }
header.masthead .intro-text { header.masthead .masthead-subheading {
padding-top: 150px; font-size: 1.5rem;
padding-bottom: 100px;
}
header.masthead .intro-text .intro-lead-in {
font-size: 22px;
font-style: italic; font-style: italic;
line-height: 22px; line-height: 1.5rem;
margin-bottom: 25px; 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"; 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 { header.masthead .masthead-heading {
font-size: 50px; font-size: 3.25rem;
font-weight: 700; font-weight: 700;
line-height: 50px; line-height: 3.25rem;
margin-bottom: 25px; 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"; 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) { @media (min-width: 768px) {
header.masthead .intro-text { header.masthead {
padding-top: 300px; padding-top: 17rem;
padding-bottom: 200px; padding-bottom: 12.5rem;
} }
header.masthead .intro-text .intro-lead-in { header.masthead .masthead-subheading {
font-size: 40px; font-size: 2.25rem;
font-style: italic; font-style: italic;
line-height: 40px; line-height: 2.25rem;
margin-bottom: 25px; margin-bottom: 2rem;
} }
header.masthead .intro-text .intro-heading { header.masthead .masthead-heading {
font-size: 75px; font-size: 4.5rem;
font-weight: 700; font-weight: 700;
line-height: 75px; line-height: 4.5rem;
margin-bottom: 50px; margin-bottom: 4rem;
} }
} }
.service-heading {
margin: 15px 0;
text-transform: none;
}
#portfolio .portfolio-item { #portfolio .portfolio-item {
right: 0; max-width: 25rem;
margin: 0 0 15px; margin-left: auto;
margin-right: auto;
} }
#portfolio .portfolio-item .portfolio-link { #portfolio .portfolio-item .portfolio-link {
position: relative; position: relative;
display: block; display: block;
max-width: 400px;
margin: 0 auto; margin: 0 auto;
cursor: pointer;
} }
#portfolio .portfolio-item .portfolio-link .portfolio-hover { #portfolio .portfolio-item .portfolio-link .portfolio-hover {
display: flex;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: all ease 0.5s;
opacity: 0;
background: rgba(254, 209, 54, 0.9); background: rgba(254, 209, 54, 0.9);
} align-items: center;
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover { justify-content: center;
opacity: 1; opacity: 0;
transition: opacity ease-in-out 0.25s;
} }
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content { #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
font-size: 20px; font-size: 1.25rem;
position: absolute;
top: 50%;
width: 100%;
height: 20px;
margin-top: -12px;
text-align: center;
color: white; color: white;
} }
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i { #portfolio .portfolio-item .portfolio-link:hover .portfolio-hover {
margin-top: -12px; opacity: 1;
}
#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-caption { #portfolio .portfolio-item .portfolio-caption {
max-width: 400px; padding: 1.5rem;
margin: 0 auto;
padding: 25px;
text-align: center; text-align: center;
background-color: #fff; background-color: #fff;
} }
#portfolio .portfolio-item .portfolio-caption h4 { #portfolio .portfolio-item .portfolio-caption .portfolio-caption-heading {
margin: 0; font-size: 1.5rem;
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";
font-weight: 700;
margin-bottom: 0;
} }
#portfolio .portfolio-item .portfolio-caption p { #portfolio .portfolio-item .portfolio-caption .portfolio-caption-subheading {
font-size: 16px;
font-style: italic; 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"; 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 { .portfolio-modal .modal-dialog {
margin: 1rem; margin: 1rem;
max-width: 100vw; max-width: 100vw;
} }
.portfolio-modal .modal-content { .portfolio-modal .modal-content {
padding: 100px 0; padding-top: 6rem;
padding-bottom: 6rem;
text-align: center; text-align: center;
} }
.portfolio-modal .modal-content h2 { .portfolio-modal .modal-content h2 {
font-size: 3em; font-size: 3rem;
margin-bottom: 15px; line-height: 3rem;
}
.portfolio-modal .modal-content p {
margin-bottom: 30px;
} }
.portfolio-modal .modal-content p.item-intro { .portfolio-modal .modal-content p.item-intro {
font-size: 16px;
font-style: italic; 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"; 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 { .portfolio-modal .modal-content ul.list-inline {
margin-top: 0; margin-bottom: 2rem;
margin-bottom: 30px;
} }
.portfolio-modal .modal-content img { .portfolio-modal .modal-content img {
margin-bottom: 30px; margin-bottom: 2rem;
}
.portfolio-modal .modal-content button {
cursor: pointer;
} }
.portfolio-modal .close-modal { .portfolio-modal .close-modal {
position: absolute; position: absolute;
top: 25px; top: 1.5rem;
right: 25px; right: 1.5rem;
width: 75px; width: 3rem;
height: 75px; height: 3rem;
cursor: pointer; cursor: pointer;
background-color: transparent; background-color: transparent;
} }
.portfolio-modal .close-modal:hover { .portfolio-modal .close-modal:hover {
opacity: 0.3; 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 { .timeline {
position: relative; position: relative;
@ -10425,21 +10383,17 @@ header.masthead .intro-text .intro-heading {
} }
} }
.team-member { .team-member {
margin-bottom: 50px; margin-bottom: 3rem;
text-align: center; text-align: center;
} }
.team-member img { .team-member img {
width: 225px; width: 14rem;
height: 225px; height: 14rem;
border: 7px solid rgba(0, 0, 0, 0.1); border: 0.5rem solid rgba(0, 0, 0, 0.1);
} }
.team-member h4 { .team-member h4 {
margin-top: 25px; margin-top: 1.5rem;
margin-bottom: 0; margin-bottom: 0;
text-transform: none;
}
.team-member p {
margin-top: 0;
} }
section#contact { section#contact {
@ -10497,38 +10451,7 @@ section#contact form#contactForm :-ms-input-placeholder {
} }
.footer { .footer {
padding: 25px 0;
text-align: center; text-align: center;
} font-size: 0.9rem;
.footer span.copyright {
font-size: 90%;
line-height: 40px;
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"; 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="description" content="" />
<meta name="author" content="" /> <meta name="author" content="" />
<title>Agency - Start Bootstrap Theme</title> <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)--> <!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" crossorigin="anonymous"></script> <script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts--> <!-- Google fonts-->
@ -35,121 +35,127 @@
<!-- Masthead--> <!-- Masthead-->
<header class="masthead"> <header class="masthead">
<div class="container"> <div class="container">
<div class="intro-text"> <div class="masthead-subheading">Welcome To Our Studio!</div>
<div class="intro-lead-in">Welcome To Our Studio!</div> <div class="masthead-heading text-uppercase">It's Nice To Meet You</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>
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>
</div>
</div> </div>
</header> </header>
<!-- Services--> <!-- Services-->
<section class="page-section" id="services"> <section class="page-section" id="services">
<div class="container"> <div class="container">
<div class="row"> <div class="text-center">
<div class="col-lg-12 text-center"> <h2 class="section-heading text-uppercase">Services</h2>
<h2 class="section-heading text-uppercase">Services</h2> <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div> </div>
<div class="row text-center"> <div class="row text-center">
<div class="col-md-4"> <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> <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> <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 class="col-md-4"> <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> <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> <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 class="col-md-4"> <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> <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> <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> </div>
</div> </div>
</section> </section>
<!-- Portfolio Grid--> <!-- Portfolio Grid-->
<section class="bg-light page-section" id="portfolio"> <section class="page-section bg-light" id="portfolio">
<div class="container"> <div class="container">
<div class="row"> <div class="text-center">
<div class="col-lg-12 text-center"> <h2 class="section-heading text-uppercase">Portfolio</h2>
<h2 class="section-heading text-uppercase">Portfolio</h2> <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-4 col-sm-6 portfolio-item"> <div class="col-lg-4 col-sm-6 mb-4">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal1" <div class="portfolio-item">
><div class="portfolio-hover"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1"
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> ><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> </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> </div>
<div class="col-md-4 col-sm-6 portfolio-item"> <div class="col-lg-4 col-sm-6 mb-4">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal2" <div class="portfolio-item">
><div class="portfolio-hover"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal2"
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> ><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> </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> </div>
<div class="col-md-4 col-sm-6 portfolio-item"> <div class="col-lg-4 col-sm-6 mb-4">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal3" <div class="portfolio-item">
><div class="portfolio-hover"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal3"
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> ><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> </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> </div>
<div class="col-md-4 col-sm-6 portfolio-item"> <div class="col-lg-4 col-sm-6 mb-4 mb-lg-0">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal4" <div class="portfolio-item">
><div class="portfolio-hover"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal4"
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> ><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> </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> </div>
<div class="col-md-4 col-sm-6 portfolio-item"> <div class="col-lg-4 col-sm-6 mb-4 mb-sm-0">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal5" <div class="portfolio-item">
><div class="portfolio-hover"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal5"
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> ><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> </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> </div>
<div class="col-md-4 col-sm-6 portfolio-item"> <div class="col-lg-4 col-sm-6">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal6" <div class="portfolio-item">
><div class="portfolio-hover"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal6"
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> ><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> </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> </div>
</div> </div>
@ -158,73 +164,65 @@
<!-- About--> <!-- About-->
<section class="page-section" id="about"> <section class="page-section" id="about">
<div class="container"> <div class="container">
<div class="row"> <div class="text-center">
<div class="col-lg-12 text-center"> <h2 class="section-heading text-uppercase">About</h2>
<h2 class="section-heading text-uppercase">About</h2> <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
<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> </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> </div>
</section> </section>
<!-- Team--> <!-- Team-->
<section class="bg-light page-section" id="team"> <section class="page-section bg-light" id="team">
<div class="container"> <div class="container">
<div class="row"> <div class="text-center">
<div class="col-lg-12 text-center"> <h2 class="section-heading text-uppercase">Our Amazing Team</h2>
<h2 class="section-heading text-uppercase">Our Amazing Team</h2> <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-4"> <div class="col-sm-4">
@ -232,17 +230,7 @@
<img class="mx-auto rounded-circle" src="assets/img/team/1.jpg" alt="" /> <img class="mx-auto rounded-circle" src="assets/img/team/1.jpg" alt="" />
<h4>Kay Garland</h4> <h4>Kay Garland</h4>
<p class="text-muted">Lead Designer</p> <p class="text-muted">Lead Designer</p>
<ul class="list-inline social-buttons"> <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>
<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>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
@ -250,17 +238,7 @@
<img class="mx-auto rounded-circle" src="assets/img/team/2.jpg" alt="" /> <img class="mx-auto rounded-circle" src="assets/img/team/2.jpg" alt="" />
<h4>Larry Parker</h4> <h4>Larry Parker</h4>
<p class="text-muted">Lead Marketer</p> <p class="text-muted">Lead Marketer</p>
<ul class="list-inline social-buttons"> <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>
<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>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
@ -268,17 +246,7 @@
<img class="mx-auto rounded-circle" src="assets/img/team/3.jpg" alt="" /> <img class="mx-auto rounded-circle" src="assets/img/team/3.jpg" alt="" />
<h4>Diana Pertersen</h4> <h4>Diana Pertersen</h4>
<p class="text-muted">Lead Developer</p> <p class="text-muted">Lead Developer</p>
<ul class="list-inline social-buttons"> <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>
<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>
</div> </div>
</div> </div>
@ -291,17 +259,17 @@
<section class="py-5"> <section class="py-5">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-6"> <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> <a href="#!"><img class="img-fluid d-block mx-auto" src="assets/img/logos/envato.jpg" alt="" /></a>
</div> </div>
<div class="col-md-3 col-sm-6"> <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> <a href="#!"><img class="img-fluid d-block mx-auto" src="assets/img/logos/designmodo.jpg" alt="" /></a>
</div> </div>
<div class="col-md-3 col-sm-6"> <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> <a href="#!"><img class="img-fluid d-block mx-auto" src="assets/img/logos/themeforest.jpg" alt="" /></a>
</div> </div>
<div class="col-md-3 col-sm-6"> <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> <a href="#!"><img class="img-fluid d-block mx-auto" src="assets/img/logos/creative-market.jpg" alt="" /></a>
</div> </div>
</div> </div>
</div> </div>
@ -309,11 +277,9 @@
<!-- Contact--> <!-- Contact-->
<section class="page-section" id="contact"> <section class="page-section" id="contact">
<div class="container"> <div class="container">
<div class="row"> <div class="text-center">
<div class="col-lg-12 text-center"> <h2 class="section-heading text-uppercase">Contact Us</h2>
<h2 class="section-heading text-uppercase">Contact Us</h2> <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div> </div>
<form id="contactForm" name="sentMessage" novalidate="novalidate"> <form id="contactForm" name="sentMessage" novalidate="novalidate">
<div class="row align-items-stretch mb-5"> <div class="row align-items-stretch mb-5">
@ -346,29 +312,14 @@
</div> </div>
</section> </section>
<!-- Footer--> <!-- Footer-->
<footer class="footer"> <footer class="footer py-4">
<div class="container"> <div class="container">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-md-4"><span class="copyright">Copyright © Your Website 2019</span></div> <div class="col-lg-4 text-lg-left">Copyright © Your Website 2020</div>
<div class="col-md-4"> <div class="col-lg-4 my-3 my-lg-0">
<ul class="list-inline social-buttons"> <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>
<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> </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>
</div> </div>
</footer> </footer>
@ -376,12 +327,10 @@
<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">
<div class="close-modal" data-dismiss="modal"> <div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" /></div>
<div class="lr"><div class="rl"></div></div>
</div>
<div class="container"> <div class="container">
<div class="row"> <div class="row justify-content-center">
<div class="col-lg-8 mx-auto"> <div class="col-lg-8">
<div class="modal-body"> <div class="modal-body">
<!-- Project Details Go Here--> <!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2> <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="" /> <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> <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 2017</li> <li>Date: January 2020</li>
<li>Client: Threads</li> <li>Client: Threads</li>
<li>Category: Illustration</li> <li>Category: Illustration</li>
</ul> </ul>
@ -405,12 +354,10 @@
<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">
<div class="close-modal" data-dismiss="modal"> <div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" /></div>
<div class="lr"><div class="rl"></div></div>
</div>
<div class="container"> <div class="container">
<div class="row"> <div class="row justify-content-center">
<div class="col-lg-8 mx-auto"> <div class="col-lg-8">
<div class="modal-body"> <div class="modal-body">
<!-- Project Details Go Here--> <!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2> <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="" /> <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> <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 2017</li> <li>Date: January 2020</li>
<li>Client: Explore</li> <li>Client: Explore</li>
<li>Category: Graphic Design</li> <li>Category: Graphic Design</li>
</ul> </ul>
@ -434,12 +381,10 @@
<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">
<div class="close-modal" data-dismiss="modal"> <div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" /></div>
<div class="lr"><div class="rl"></div></div>
</div>
<div class="container"> <div class="container">
<div class="row"> <div class="row justify-content-center">
<div class="col-lg-8 mx-auto"> <div class="col-lg-8">
<div class="modal-body"> <div class="modal-body">
<!-- Project Details Go Here--> <!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2> <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="" /> <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> <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 2017</li> <li>Date: January 2020</li>
<li>Client: Finish</li> <li>Client: Finish</li>
<li>Category: Identity</li> <li>Category: Identity</li>
</ul> </ul>
@ -463,12 +408,10 @@
<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">
<div class="close-modal" data-dismiss="modal"> <div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" /></div>
<div class="lr"><div class="rl"></div></div>
</div>
<div class="container"> <div class="container">
<div class="row"> <div class="row justify-content-center">
<div class="col-lg-8 mx-auto"> <div class="col-lg-8">
<div class="modal-body"> <div class="modal-body">
<!-- Project Details Go Here--> <!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2> <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="" /> <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> <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 2017</li> <li>Date: January 2020</li>
<li>Client: Lines</li> <li>Client: Lines</li>
<li>Category: Branding</li> <li>Category: Branding</li>
</ul> </ul>
@ -492,12 +435,10 @@
<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">
<div class="close-modal" data-dismiss="modal"> <div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" /></div>
<div class="lr"><div class="rl"></div></div>
</div>
<div class="container"> <div class="container">
<div class="row"> <div class="row justify-content-center">
<div class="col-lg-8 mx-auto"> <div class="col-lg-8">
<div class="modal-body"> <div class="modal-body">
<!-- Project Details Go Here--> <!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2> <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="" /> <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> <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 2017</li> <li>Date: January 2020</li>
<li>Client: Southwest</li> <li>Client: Southwest</li>
<li>Category: Website Design</li> <li>Category: Website Design</li>
</ul> </ul>
@ -521,12 +462,10 @@
<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">
<div class="close-modal" data-dismiss="modal"> <div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" /></div>
<div class="lr"><div class="rl"></div></div>
</div>
<div class="container"> <div class="container">
<div class="row"> <div class="row justify-content-center">
<div class="col-lg-8 mx-auto"> <div class="col-lg-8">
<div class="modal-body"> <div class="modal-body">
<!-- Project Details Go Here--> <!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2> <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="" /> <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> <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 2017</li> <li>Date: January 2020</li>
<li>Client: Window</li> <li>Client: Window</li>
<li>Category: Photography</li> <li>Category: Photography</li>
</ul> </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 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) // Font Awesome icons (free version)
script(src='https://use.fontawesome.com/releases/v5.12.1/js/all.js', crossorigin='anonymous') 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 li.nav-item
a.nav-link.js-scroll-trigger(href='#contact') Contact a.nav-link.js-scroll-trigger(href='#contact') Contact
// Masthead // Masthead
header.masthead header.masthead
.container .container
.intro-text .masthead-subheading Welcome To Our Studio!
.intro-lead-in Welcome To Our Studio! .masthead-heading.text-uppercase It's Nice To Meet You
.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
a.btn.btn-primary.btn-xl.text-uppercase.js-scroll-trigger(href='#services') Tell Me More
// Services // Services
section#services.page-section section#services.page-section
.container .container
.row .text-center
.col-lg-12.text-center h2.section-heading.text-uppercase Services
h2.section-heading.text-uppercase Services h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
.row.text-center .row.text-center
.col-md-4 .col-md-4
span.fa-stack.fa-4x span.fa-stack.fa-4x
i.fas.fa-circle.fa-stack-2x.text-primary i.fas.fa-circle.fa-stack-2x.text-primary
i.fas.fa-shopping-cart.fa-stack-1x.fa-inverse i.fas.fa-shopping-cart.fa-stack-1x.fa-inverse
h4.service-heading E-Commerce h4.my-3 E-Commerce
p.text-muted p.text-muted
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.
.col-md-4 .col-md-4
span.fa-stack.fa-4x span.fa-stack.fa-4x
i.fas.fa-circle.fa-stack-2x.text-primary i.fas.fa-circle.fa-stack-2x.text-primary
i.fas.fa-laptop.fa-stack-1x.fa-inverse i.fas.fa-laptop.fa-stack-1x.fa-inverse
h4.service-heading Responsive Design h4.my-3 Responsive Design
p.text-muted p.text-muted
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.
.col-md-4 .col-md-4
span.fa-stack.fa-4x span.fa-stack.fa-4x
i.fas.fa-circle.fa-stack-2x.text-primary i.fas.fa-circle.fa-stack-2x.text-primary
i.fas.fa-lock.fa-stack-1x.fa-inverse i.fas.fa-lock.fa-stack-1x.fa-inverse
h4.service-heading Web Security h4.my-3 Web Security
p.text-muted p.text-muted
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.
// Portfolio Grid // Portfolio Grid
section#portfolio.bg-light.page-section section#portfolio.page-section.bg-light
.container .container
.text-center
h2.section-heading.text-uppercase Portfolio
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
.row .row
.col-lg-12.text-center .col-lg-4.col-sm-6.mb-4
h2.section-heading.text-uppercase Portfolio .portfolio-item
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur. a.portfolio-link(data-toggle='modal', href='#portfolioModal1')
.row .portfolio-hover
.col-md-4.col-sm-6.portfolio-item .portfolio-hover-content
a.portfolio-link(data-toggle='modal', href='#portfolioModal1') i.fas.fa-plus.fa-3x
.portfolio-hover img.img-fluid(src='assets/img/portfolio/01-thumbnail.jpg', alt='')
.portfolio-hover-content .portfolio-caption
i.fas.fa-plus.fa-3x .portfolio-caption-heading Threads
img.img-fluid(src='assets/img/portfolio/01-thumbnail.jpg', alt='') .portfolio-caption-subheading.text-muted Illustration
.portfolio-caption .col-lg-4.col-sm-6.mb-4
h4 Threads .portfolio-item
p.text-muted Illustration a.portfolio-link(data-toggle='modal', href='#portfolioModal2')
.col-md-4.col-sm-6.portfolio-item .portfolio-hover
a.portfolio-link(data-toggle='modal', href='#portfolioModal2') .portfolio-hover-content
.portfolio-hover i.fas.fa-plus.fa-3x
.portfolio-hover-content img.img-fluid(src='assets/img/portfolio/02-thumbnail.jpg', alt='')
i.fas.fa-plus.fa-3x .portfolio-caption
img.img-fluid(src='assets/img/portfolio/02-thumbnail.jpg', alt='') .portfolio-caption-heading Explore
.portfolio-caption .portfolio-caption-subheading.text-muted Graphic Design
h4 Explore .col-lg-4.col-sm-6.mb-4
p.text-muted Graphic Design .portfolio-item
.col-md-4.col-sm-6.portfolio-item a.portfolio-link(data-toggle='modal', href='#portfolioModal3')
a.portfolio-link(data-toggle='modal', href='#portfolioModal3') .portfolio-hover
.portfolio-hover .portfolio-hover-content
.portfolio-hover-content i.fas.fa-plus.fa-3x
i.fas.fa-plus.fa-3x img.img-fluid(src='assets/img/portfolio/03-thumbnail.jpg', alt='')
img.img-fluid(src='assets/img/portfolio/03-thumbnail.jpg', alt='') .portfolio-caption
.portfolio-caption .portfolio-caption-heading Finish
h4 Finish .portfolio-caption-subheading.text-muted Identity
p.text-muted Identity .col-lg-4.col-sm-6.mb-4.mb-lg-0
.col-md-4.col-sm-6.portfolio-item .portfolio-item
a.portfolio-link(data-toggle='modal', href='#portfolioModal4') a.portfolio-link(data-toggle='modal', href='#portfolioModal4')
.portfolio-hover .portfolio-hover
.portfolio-hover-content .portfolio-hover-content
i.fas.fa-plus.fa-3x i.fas.fa-plus.fa-3x
img.img-fluid(src='assets/img/portfolio/04-thumbnail.jpg', alt='') img.img-fluid(src='assets/img/portfolio/04-thumbnail.jpg', alt='')
.portfolio-caption .portfolio-caption
h4 Lines .portfolio-caption-heading Lines
p.text-muted Branding .portfolio-caption-subheading.text-muted Branding
.col-md-4.col-sm-6.portfolio-item .col-lg-4.col-sm-6.mb-4.mb-sm-0
a.portfolio-link(data-toggle='modal', href='#portfolioModal5') .portfolio-item
.portfolio-hover a.portfolio-link(data-toggle='modal', href='#portfolioModal5')
.portfolio-hover-content .portfolio-hover
i.fas.fa-plus.fa-3x .portfolio-hover-content
img.img-fluid(src='assets/img/portfolio/05-thumbnail.jpg', alt='') i.fas.fa-plus.fa-3x
.portfolio-caption img.img-fluid(src='assets/img/portfolio/05-thumbnail.jpg', alt='')
h4 Southwest .portfolio-caption
p.text-muted Website Design .portfolio-caption-heading Southwest
.col-md-4.col-sm-6.portfolio-item .portfolio-caption-subheading.text-muted Website Design
a.portfolio-link(data-toggle='modal', href='#portfolioModal6') .col-lg-4.col-sm-6
.portfolio-hover .portfolio-item
.portfolio-hover-content a.portfolio-link(data-toggle='modal', href='#portfolioModal6')
i.fas.fa-plus.fa-3x .portfolio-hover
img.img-fluid(src='assets/img/portfolio/06-thumbnail.jpg', alt='') .portfolio-hover-content
.portfolio-caption i.fas.fa-plus.fa-3x
h4 Window img.img-fluid(src='assets/img/portfolio/06-thumbnail.jpg', alt='')
p.text-muted Photography .portfolio-caption
.portfolio-caption-heading Window
.portfolio-caption-subheading.text-muted Photography
// About // About
section#about.page-section section#about.page-section
.container .container
.row .text-center
.col-lg-12.text-center h2.section-heading.text-uppercase About
h2.section-heading.text-uppercase About h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur. ul.timeline
.row li
.col-lg-12 .timeline-image
ul.timeline img.rounded-circle.img-fluid(src='assets/img/about/1.jpg', alt='')
li .timeline-panel
.timeline-image .timeline-heading
img.rounded-circle.img-fluid(src='assets/img/about/1.jpg', alt='') h4 2009-2011
.timeline-panel h4.subheading Our Humble Beginnings
.timeline-heading .timeline-body
h4 2009-2011 p.text-muted
h4.subheading Our Humble Beginnings | 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!
.timeline-body li.timeline-inverted
p.text-muted .timeline-image
| 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! img.rounded-circle.img-fluid(src='assets/img/about/2.jpg', alt='')
li.timeline-inverted .timeline-panel
.timeline-image .timeline-heading
img.rounded-circle.img-fluid(src='assets/img/about/2.jpg', alt='') h4 March 2011
.timeline-panel h4.subheading An Agency is Born
.timeline-heading .timeline-body
h4 March 2011 p.text-muted
h4.subheading An Agency is Born | 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!
.timeline-body li
p.text-muted .timeline-image
| 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! img.rounded-circle.img-fluid(src='assets/img/about/3.jpg', alt='')
li .timeline-panel
.timeline-image .timeline-heading
img.rounded-circle.img-fluid(src='assets/img/about/3.jpg', alt='') h4 December 2012
.timeline-panel h4.subheading Transition to Full Service
.timeline-heading .timeline-body
h4 December 2012 p.text-muted
h4.subheading Transition to Full Service | 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!
.timeline-body li.timeline-inverted
p.text-muted .timeline-image
| 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! img.rounded-circle.img-fluid(src='assets/img/about/4.jpg', alt='')
li.timeline-inverted .timeline-panel
.timeline-image .timeline-heading
img.rounded-circle.img-fluid(src='assets/img/about/4.jpg', alt='') h4 July 2014
.timeline-panel h4.subheading Phase Two Expansion
.timeline-heading .timeline-body
h4 July 2014 p.text-muted
h4.subheading Phase Two Expansion | 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!
.timeline-body li.timeline-inverted
p.text-muted .timeline-image
| 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! h4
li.timeline-inverted | Be Part
.timeline-image br
h4 | Of Our
| Be Part br
br | Story!
| Of Our
br
| Story!
// Team // Team
section#team.bg-light.page-section section#team.page-section.bg-light
.container .container
.row .text-center
.col-lg-12.text-center h2.section-heading.text-uppercase Our Amazing Team
h2.section-heading.text-uppercase Our Amazing Team 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-sm-4 .col-sm-4
.team-member .team-member
img.mx-auto.rounded-circle(src='assets/img/team/1.jpg', alt='') img.mx-auto.rounded-circle(src='assets/img/team/1.jpg', alt='')
h4 Kay Garland h4 Kay Garland
p.text-muted Lead Designer p.text-muted Lead Designer
ul.list-inline.social-buttons a.btn.btn-dark.btn-social.mx-2(href='#!')
li.list-inline-item i.fab.fa-twitter
a(href='#') a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-twitter i.fab.fa-facebook-f
li.list-inline-item a.btn.btn-dark.btn-social.mx-2(href='#!')
a(href='#') i.fab.fa-linkedin-in
i.fab.fa-facebook-f
li.list-inline-item
a(href='#')
i.fab.fa-linkedin-in
.col-sm-4 .col-sm-4
.team-member .team-member
img.mx-auto.rounded-circle(src='assets/img/team/2.jpg', alt='') img.mx-auto.rounded-circle(src='assets/img/team/2.jpg', alt='')
h4 Larry Parker h4 Larry Parker
p.text-muted Lead Marketer p.text-muted Lead Marketer
ul.list-inline.social-buttons a.btn.btn-dark.btn-social.mx-2(href='#!')
li.list-inline-item i.fab.fa-twitter
a(href='#') a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-twitter i.fab.fa-facebook-f
li.list-inline-item a.btn.btn-dark.btn-social.mx-2(href='#!')
a(href='#') i.fab.fa-linkedin-in
i.fab.fa-facebook-f
li.list-inline-item
a(href='#')
i.fab.fa-linkedin-in
.col-sm-4 .col-sm-4
.team-member .team-member
img.mx-auto.rounded-circle(src='assets/img/team/3.jpg', alt='') img.mx-auto.rounded-circle(src='assets/img/team/3.jpg', alt='')
h4 Diana Pertersen h4 Diana Pertersen
p.text-muted Lead Developer p.text-muted Lead Developer
ul.list-inline.social-buttons a.btn.btn-dark.btn-social.mx-2(href='#!')
li.list-inline-item i.fab.fa-twitter
a(href='#') a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-twitter i.fab.fa-facebook-f
li.list-inline-item a.btn.btn-dark.btn-social.mx-2(href='#!')
a(href='#') i.fab.fa-linkedin-in
i.fab.fa-facebook-f
li.list-inline-item
a(href='#')
i.fab.fa-linkedin-in
.row .row
.col-lg-8.mx-auto.text-center .col-lg-8.mx-auto.text-center
p.large.text-muted p.large.text-muted
@ -268,26 +254,25 @@ html(lang='en')
section.py-5 section.py-5
.container .container
.row .row
.col-md-3.col-sm-6 .col-md-3.col-sm-6.my-3
a(href='#') a(href='#!')
img.img-fluid.d-block.mx-auto(src='assets/img/logos/envato.jpg', alt='') img.img-fluid.d-block.mx-auto(src='assets/img/logos/envato.jpg', alt='')
.col-md-3.col-sm-6 .col-md-3.col-sm-6.my-3
a(href='#') a(href='#!')
img.img-fluid.d-block.mx-auto(src='assets/img/logos/designmodo.jpg', alt='') img.img-fluid.d-block.mx-auto(src='assets/img/logos/designmodo.jpg', alt='')
.col-md-3.col-sm-6 .col-md-3.col-sm-6.my-3
a(href='#') a(href='#!')
img.img-fluid.d-block.mx-auto(src='assets/img/logos/themeforest.jpg', alt='') img.img-fluid.d-block.mx-auto(src='assets/img/logos/themeforest.jpg', alt='')
.col-md-3.col-sm-6 .col-md-3.col-sm-6.my-3
a(href='#') a(href='#!')
img.img-fluid.d-block.mx-auto(src='assets/img/logos/creative-market.jpg', alt='') img.img-fluid.d-block.mx-auto(src='assets/img/logos/creative-market.jpg', alt='')
// Contact // Contact
section#contact.page-section section#contact.page-section
.container .container
.row .text-center
.col-lg-12.text-center h2.section-heading.text-uppercase Contact Us
h2.section-heading.text-uppercase Contact Us h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
form#contactForm(name='sentMessage', novalidate='novalidate') form#contactForm(name='sentMessage', novalidate='novalidate')
.row.align-items-stretch.mb-5 .row.align-items-stretch.mb-5
.col-md-6 .col-md-6
@ -309,28 +294,21 @@ html(lang='en')
button#sendMessageButton.btn.btn-primary.btn-xl.text-uppercase(type='submit') Send Message button#sendMessageButton.btn.btn-primary.btn-xl.text-uppercase(type='submit') Send Message
// Footer // Footer
footer.footer footer.footer.py-4
.container .container
.row.align-items-center .row.align-items-center
.col-md-4 .col-lg-4.text-lg-left
span.copyright Copyright © Your Website 2019 | Copyright © Your Website 2020
.col-md-4 .col-lg-4.my-3.my-lg-0
ul.list-inline.social-buttons a.btn.btn-dark.btn-social.mx-2(href='#!')
li.list-inline-item i.fab.fa-twitter
a(href='#') a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-twitter i.fab.fa-facebook-f
li.list-inline-item a.btn.btn-dark.btn-social.mx-2(href='#!')
a(href='#') i.fab.fa-linkedin-in
i.fab.fa-facebook-f .col-lg-4.text-lg-right
li.list-inline-item a.mr-3(href='#!') Privacy Policy
a(href='#') a(href='#!') Terms of Use
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
// Portfolio Modals // Portfolio Modals
// Modal 1 // Modal 1
@ -338,11 +316,10 @@ html(lang='en')
.modal-dialog .modal-dialog
.modal-content .modal-content
.close-modal(data-dismiss='modal') .close-modal(data-dismiss='modal')
.lr img(src="assets/img/close-icon.svg")
.rl
.container .container
.row .row.justify-content-center
.col-lg-8.mx-auto .col-lg-8
.modal-body .modal-body
// Project Details Go Here // Project Details Go Here
h2.text-uppercase Project Name h2.text-uppercase Project Name
@ -351,7 +328,7 @@ html(lang='en')
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! | 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 ul.list-inline
li Date: January 2017 li Date: January 2020
li Client: Threads li Client: Threads
li Category: Illustration li Category: Illustration
button.btn.btn-primary(data-dismiss='modal', type='button') button.btn.btn-primary(data-dismiss='modal', type='button')
@ -362,11 +339,10 @@ html(lang='en')
.modal-dialog .modal-dialog
.modal-content .modal-content
.close-modal(data-dismiss='modal') .close-modal(data-dismiss='modal')
.lr img(src="assets/img/close-icon.svg")
.rl
.container .container
.row .row.justify-content-center
.col-lg-8.mx-auto .col-lg-8
.modal-body .modal-body
// Project Details Go Here // Project Details Go Here
h2.text-uppercase Project Name h2.text-uppercase Project Name
@ -375,7 +351,7 @@ html(lang='en')
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! | 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 ul.list-inline
li Date: January 2017 li Date: January 2020
li Client: Explore li Client: Explore
li Category: Graphic Design li Category: Graphic Design
button.btn.btn-primary(data-dismiss='modal', type='button') button.btn.btn-primary(data-dismiss='modal', type='button')
@ -386,11 +362,10 @@ html(lang='en')
.modal-dialog .modal-dialog
.modal-content .modal-content
.close-modal(data-dismiss='modal') .close-modal(data-dismiss='modal')
.lr img(src="assets/img/close-icon.svg")
.rl
.container .container
.row .row.justify-content-center
.col-lg-8.mx-auto .col-lg-8
.modal-body .modal-body
// Project Details Go Here // Project Details Go Here
h2.text-uppercase Project Name h2.text-uppercase Project Name
@ -399,7 +374,7 @@ html(lang='en')
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! | 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 ul.list-inline
li Date: January 2017 li Date: January 2020
li Client: Finish li Client: Finish
li Category: Identity li Category: Identity
button.btn.btn-primary(data-dismiss='modal', type='button') button.btn.btn-primary(data-dismiss='modal', type='button')
@ -410,11 +385,10 @@ html(lang='en')
.modal-dialog .modal-dialog
.modal-content .modal-content
.close-modal(data-dismiss='modal') .close-modal(data-dismiss='modal')
.lr img(src="assets/img/close-icon.svg")
.rl
.container .container
.row .row.justify-content-center
.col-lg-8.mx-auto .col-lg-8
.modal-body .modal-body
// Project Details Go Here // Project Details Go Here
h2.text-uppercase Project Name h2.text-uppercase Project Name
@ -423,7 +397,7 @@ html(lang='en')
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! | 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 ul.list-inline
li Date: January 2017 li Date: January 2020
li Client: Lines li Client: Lines
li Category: Branding li Category: Branding
button.btn.btn-primary(data-dismiss='modal', type='button') button.btn.btn-primary(data-dismiss='modal', type='button')
@ -434,11 +408,10 @@ html(lang='en')
.modal-dialog .modal-dialog
.modal-content .modal-content
.close-modal(data-dismiss='modal') .close-modal(data-dismiss='modal')
.lr img(src="assets/img/close-icon.svg")
.rl
.container .container
.row .row.justify-content-center
.col-lg-8.mx-auto .col-lg-8
.modal-body .modal-body
// Project Details Go Here // Project Details Go Here
h2.text-uppercase Project Name h2.text-uppercase Project Name
@ -447,7 +420,7 @@ html(lang='en')
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! | 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 ul.list-inline
li Date: January 2017 li Date: January 2020
li Client: Southwest li Client: Southwest
li Category: Website Design li Category: Website Design
button.btn.btn-primary(data-dismiss='modal', type='button') button.btn.btn-primary(data-dismiss='modal', type='button')
@ -458,11 +431,10 @@ html(lang='en')
.modal-dialog .modal-dialog
.modal-content .modal-content
.close-modal(data-dismiss='modal') .close-modal(data-dismiss='modal')
.lr img(src="assets/img/close-icon.svg")
.rl
.container .container
.row .row.justify-content-center
.col-lg-8.mx-auto .col-lg-8
.modal-body .modal-body
// Project Details Go Here // Project Details Go Here
h2.text-uppercase Project Name h2.text-uppercase Project Name
@ -471,7 +443,7 @@ html(lang='en')
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! | 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 ul.list-inline
li Date: January 2017 li Date: January 2020
li Client: Window li Client: Window
li Category: Photography li Category: Photography
button.btn.btn-primary(data-dismiss='modal', type='button') button.btn.btn-primary(data-dismiss='modal', type='button')

17
src/scss/_global.scss
View File

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

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

@ -6,3 +6,13 @@
font-size: 1.125rem; font-size: 1.125rem;
font-weight: $headings-font-weight; 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 { .timeline {
&:before { &:before {
left: 50%; left: 50%;
@ -132,7 +132,7 @@
} }
} }
} }
@media (min-width: 992px) { @include media-breakpoint-up(lg) {
.timeline { .timeline {
> li { > li {
min-height: 150px; min-height: 150px;
@ -155,7 +155,7 @@
} }
} }
} }
@media (min-width: 1200px) { @include media-breakpoint-up(xl) {
.timeline { .timeline {
> li { > li {
min-height: 170px; min-height: 170px;

15
src/scss/styles.scss
View File

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