titzi
/
anmeldeportal_hochzeit
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

continue the SCSS and Pug refactor - global style cleanup

master
David Miller 6 years ago
parent
ba21034d7c
commit
71fff054b0
22 changed files with 633 additions and 887 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      dist/assets/img/close-icon.svg
  2. BIN
      dist/assets/img/favicon.ico
  3. 1
      dist/assets/img/logo.svg
  4. 225
      dist/css/styles.css
  5. 227
      dist/index.html
  6. 1
      src/assets/img/close-icon.svg
  7. BIN
      src/assets/img/favicon.ico
  8. 204
      src/pug/index.pug
  9. 17
      src/scss/_global.scss
  10. 10
      src/scss/components/_buttons.scss
  11. 43
      src/scss/layout/_footer.scss
  12. 48
      src/scss/layout/_masthead.scss
  13. 140
      src/scss/layout/_portfolio.scss
  14. 5
      src/scss/layout/_services.scss
  15. 18
      src/scss/layout/_team.scss
  16. 0
      src/scss/sections/_contact.scss
  17. 6
      src/scss/sections/_footer.scss
  18. 45
      src/scss/sections/_masthead.scss
  19. 90
      src/scss/sections/_portfolio.scss
  20. 14
      src/scss/sections/_team.scss
  21. 6
      src/scss/sections/_timeline.scss
  22. 15
      src/scss/styles.scss

1
dist/assets/img/close-icon.svg vendored
Unescape 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
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
Unescape 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";
}
.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"; 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
Unescape 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>
<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="#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>
<div class="col-md-4 col-sm-6 portfolio-item"> <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>
<div class="col-md-4 col-sm-6 portfolio-item"> <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
Unescape 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

204
src/pug/index.pug
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape View File

6
src/scss/sections/_footer.scss
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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";

Write Preview
Loading…
Cancel
Save