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

227
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,52 +35,47 @@
<!-- 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">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal1" <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1"
><div class="portfolio-hover"> ><div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
@ -88,11 +83,13 @@
<img class="img-fluid" src="assets/img/portfolio/01-thumbnail.jpg" alt="" <img class="img-fluid" src="assets/img/portfolio/01-thumbnail.jpg" alt=""
/></a> /></a>
<div class="portfolio-caption"> <div class="portfolio-caption">
<h4>Threads</h4> <div class="portfolio-caption-heading">Threads</div>
<p class="text-muted">Illustration</p> <div class="portfolio-caption-subheading text-muted">Illustration</div>
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-6 portfolio-item"> </div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal2" <a class="portfolio-link" data-toggle="modal" href="#portfolioModal2"
><div class="portfolio-hover"> ><div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
@ -100,11 +97,13 @@
<img class="img-fluid" src="assets/img/portfolio/02-thumbnail.jpg" alt="" <img class="img-fluid" src="assets/img/portfolio/02-thumbnail.jpg" alt=""
/></a> /></a>
<div class="portfolio-caption"> <div class="portfolio-caption">
<h4>Explore</h4> <div class="portfolio-caption-heading">Explore</div>
<p class="text-muted">Graphic Design</p> <div class="portfolio-caption-subheading text-muted">Graphic Design</div>
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-6 portfolio-item"> </div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal3" <a class="portfolio-link" data-toggle="modal" href="#portfolioModal3"
><div class="portfolio-hover"> ><div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
@ -112,11 +111,13 @@
<img class="img-fluid" src="assets/img/portfolio/03-thumbnail.jpg" alt="" <img class="img-fluid" src="assets/img/portfolio/03-thumbnail.jpg" alt=""
/></a> /></a>
<div class="portfolio-caption"> <div class="portfolio-caption">
<h4>Finish</h4> <div class="portfolio-caption-heading">Finish</div>
<p class="text-muted">Identity</p> <div class="portfolio-caption-subheading text-muted">Identity</div>
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-6 portfolio-item"> </div>
<div class="col-lg-4 col-sm-6 mb-4 mb-lg-0">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal4" <a class="portfolio-link" data-toggle="modal" href="#portfolioModal4"
><div class="portfolio-hover"> ><div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
@ -124,11 +125,13 @@
<img class="img-fluid" src="assets/img/portfolio/04-thumbnail.jpg" alt="" <img class="img-fluid" src="assets/img/portfolio/04-thumbnail.jpg" alt=""
/></a> /></a>
<div class="portfolio-caption"> <div class="portfolio-caption">
<h4>Lines</h4> <div class="portfolio-caption-heading">Lines</div>
<p class="text-muted">Branding</p> <div class="portfolio-caption-subheading text-muted">Branding</div>
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-6 portfolio-item"> </div>
<div class="col-lg-4 col-sm-6 mb-4 mb-sm-0">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal5" <a class="portfolio-link" data-toggle="modal" href="#portfolioModal5"
><div class="portfolio-hover"> ><div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
@ -136,11 +139,13 @@
<img class="img-fluid" src="assets/img/portfolio/05-thumbnail.jpg" alt="" <img class="img-fluid" src="assets/img/portfolio/05-thumbnail.jpg" alt=""
/></a> /></a>
<div class="portfolio-caption"> <div class="portfolio-caption">
<h4>Southwest</h4> <div class="portfolio-caption-heading">Southwest</div>
<p class="text-muted">Website Design</p> <div class="portfolio-caption-subheading text-muted">Website Design</div>
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-6 portfolio-item"> </div>
<div class="col-lg-4 col-sm-6">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal6" <a class="portfolio-link" data-toggle="modal" href="#portfolioModal6"
><div class="portfolio-hover"> ><div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
@ -148,8 +153,9 @@
<img class="img-fluid" src="assets/img/portfolio/06-thumbnail.jpg" alt="" <img class="img-fluid" src="assets/img/portfolio/06-thumbnail.jpg" alt=""
/></a> /></a>
<div class="portfolio-caption"> <div class="portfolio-caption">
<h4>Window</h4> <div class="portfolio-caption-heading">Window</div>
<p class="text-muted">Photography</p> <div class="portfolio-caption-subheading text-muted">Photography</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -158,14 +164,10 @@
<!-- 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>
<div class="row">
<div class="col-lg-12">
<ul class="timeline"> <ul class="timeline">
<li> <li>
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/1.jpg" alt="" /></div> <div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/1.jpg" alt="" /></div>
@ -214,35 +216,21 @@
</li> </li>
</ul> </ul>
</div> </div>
</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">
<div class="team-member"> <div class="team-member">
<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,12 +277,10 @@
<!-- 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">
<div class="col-md-6"> <div class="col-md-6">
@ -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

204
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,19 +46,16 @@ 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
@ -66,96 +63,98 @@ html(lang='en')
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
.row .text-center
.col-lg-12.text-center
h2.section-heading.text-uppercase Portfolio h2.section-heading.text-uppercase Portfolio
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-md-4.col-sm-6.portfolio-item .col-lg-4.col-sm-6.mb-4
.portfolio-item
a.portfolio-link(data-toggle='modal', href='#portfolioModal1') a.portfolio-link(data-toggle='modal', href='#portfolioModal1')
.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/01-thumbnail.jpg', alt='') img.img-fluid(src='assets/img/portfolio/01-thumbnail.jpg', alt='')
.portfolio-caption .portfolio-caption
h4 Threads .portfolio-caption-heading Threads
p.text-muted Illustration .portfolio-caption-subheading.text-muted Illustration
.col-md-4.col-sm-6.portfolio-item .col-lg-4.col-sm-6.mb-4
.portfolio-item
a.portfolio-link(data-toggle='modal', href='#portfolioModal2') a.portfolio-link(data-toggle='modal', href='#portfolioModal2')
.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/02-thumbnail.jpg', alt='') img.img-fluid(src='assets/img/portfolio/02-thumbnail.jpg', alt='')
.portfolio-caption .portfolio-caption
h4 Explore .portfolio-caption-heading Explore
p.text-muted Graphic Design .portfolio-caption-subheading.text-muted Graphic Design
.col-md-4.col-sm-6.portfolio-item .col-lg-4.col-sm-6.mb-4
.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
h4 Finish .portfolio-caption-heading Finish
p.text-muted Identity .portfolio-caption-subheading.text-muted Identity
.col-md-4.col-sm-6.portfolio-item .col-lg-4.col-sm-6.mb-4.mb-lg-0
.portfolio-item
a.portfolio-link(data-toggle='modal', href='#portfolioModal4') a.portfolio-link(data-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
.portfolio-item
a.portfolio-link(data-toggle='modal', href='#portfolioModal5') a.portfolio-link(data-toggle='modal', href='#portfolioModal5')
.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/05-thumbnail.jpg', alt='') img.img-fluid(src='assets/img/portfolio/05-thumbnail.jpg', alt='')
.portfolio-caption .portfolio-caption
h4 Southwest .portfolio-caption-heading Southwest
p.text-muted Website Design .portfolio-caption-subheading.text-muted Website Design
.col-md-4.col-sm-6.portfolio-item .col-lg-4.col-sm-6
.portfolio-item
a.portfolio-link(data-toggle='modal', href='#portfolioModal6') a.portfolio-link(data-toggle='modal', href='#portfolioModal6')
.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/06-thumbnail.jpg', alt='') img.img-fluid(src='assets/img/portfolio/06-thumbnail.jpg', alt='')
.portfolio-caption .portfolio-caption
h4 Window .portfolio-caption-heading Window
p.text-muted Photography .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.
.row
.col-lg-12
ul.timeline ul.timeline
li li
.timeline-image .timeline-image
@ -207,10 +206,9 @@ html(lang='en')
| Story! | 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
@ -219,45 +217,33 @@ html(lang='en')
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
a(href='#')
i.fab.fa-twitter i.fab.fa-twitter
li.list-inline-item a.btn.btn-dark.btn-social.mx-2(href='#!')
a(href='#')
i.fab.fa-facebook-f 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-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
a(href='#')
i.fab.fa-twitter i.fab.fa-twitter
li.list-inline-item a.btn.btn-dark.btn-social.mx-2(href='#!')
a(href='#')
i.fab.fa-facebook-f 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-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
a(href='#')
i.fab.fa-twitter i.fab.fa-twitter
li.list-inline-item a.btn.btn-dark.btn-social.mx-2(href='#!')
a(href='#')
i.fab.fa-facebook-f 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-linkedin-in
.row .row
.col-lg-8.mx-auto.text-center .col-lg-8.mx-auto.text-center
@ -268,24 +254,23 @@ 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')
@ -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
a(href='#')
i.fab.fa-twitter i.fab.fa-twitter
li.list-inline-item a.btn.btn-dark.btn-social.mx-2(href='#!')
a(href='#')
i.fab.fa-facebook-f 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-linkedin-in
.col-md-4 .col-lg-4.text-lg-right
ul.list-inline.quicklinks a.mr-3(href='#!') Privacy Policy
li.list-inline-item a(href='#!') Terms of Use
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";