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

227
dist/index.html vendored
Unescape View File

@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
<meta name="description" content="" />
<meta name="author" content="" />
<title>Agency - Start Bootstrap Theme</title>
<link rel="icon" type="image/png" sizes="32x32" href="https://startbootstrap.com/assets/img/icons/favicon-32x32.png" />
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
@ -35,52 +35,47 @@ @@ -35,52 +35,47 @@
<!-- Masthead-->
<header class="masthead">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Welcome To Our Studio!</div>
<div class="intro-heading text-uppercase">It's Nice To Meet You</div>
<div class="masthead-subheading">Welcome To Our Studio!</div>
<div class="masthead-heading text-uppercase">It's Nice To Meet You</div>
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>
</div>
</div>
</header>
<!-- Services-->
<section class="page-section" id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="text-center">
<h2 class="section-heading text-uppercase">Services</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x"><i class="fas fa-circle fa-stack-2x text-primary"></i><i class="fas fa-shopping-cart fa-stack-1x fa-inverse"></i></span>
<h4 class="service-heading">E-Commerce</h4>
<h4 class="my-3">E-Commerce</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x"><i class="fas fa-circle fa-stack-2x text-primary"></i><i class="fas fa-laptop fa-stack-1x fa-inverse"></i></span>
<h4 class="service-heading">Responsive Design</h4>
<h4 class="my-3">Responsive Design</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x"><i class="fas fa-circle fa-stack-2x text-primary"></i><i class="fas fa-lock fa-stack-1x fa-inverse"></i></span>
<h4 class="service-heading">Web Security</h4>
<h4 class="my-3">Web Security</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Grid-->
<section class="bg-light page-section" id="portfolio">
<section class="page-section bg-light" id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="text-center">
<h2 class="section-heading text-uppercase">Portfolio</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<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"
><div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
@ -88,11 +83,13 @@ @@ -88,11 +83,13 @@
<img class="img-fluid" src="assets/img/portfolio/01-thumbnail.jpg" alt=""
/></a>
<div class="portfolio-caption">
<h4>Threads</h4>
<p class="text-muted">Illustration</p>
<div class="portfolio-caption-heading">Threads</div>
<div class="portfolio-caption-subheading text-muted">Illustration</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"
><div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
@ -100,11 +97,13 @@ @@ -100,11 +97,13 @@
<img class="img-fluid" src="assets/img/portfolio/02-thumbnail.jpg" alt=""
/></a>
<div class="portfolio-caption">
<h4>Explore</h4>
<p class="text-muted">Graphic Design</p>
<div class="portfolio-caption-heading">Explore</div>
<div class="portfolio-caption-subheading text-muted">Graphic Design</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"
><div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
@ -112,11 +111,13 @@ @@ -112,11 +111,13 @@
<img class="img-fluid" src="assets/img/portfolio/03-thumbnail.jpg" alt=""
/></a>
<div class="portfolio-caption">
<h4>Finish</h4>
<p class="text-muted">Identity</p>
<div class="portfolio-caption-heading">Finish</div>
<div class="portfolio-caption-subheading text-muted">Identity</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"
><div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
@ -124,11 +125,13 @@ @@ -124,11 +125,13 @@
<img class="img-fluid" src="assets/img/portfolio/04-thumbnail.jpg" alt=""
/></a>
<div class="portfolio-caption">
<h4>Lines</h4>
<p class="text-muted">Branding</p>
<div class="portfolio-caption-heading">Lines</div>
<div class="portfolio-caption-subheading text-muted">Branding</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"
><div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
@ -136,11 +139,13 @@ @@ -136,11 +139,13 @@
<img class="img-fluid" src="assets/img/portfolio/05-thumbnail.jpg" alt=""
/></a>
<div class="portfolio-caption">
<h4>Southwest</h4>
<p class="text-muted">Website Design</p>
<div class="portfolio-caption-heading">Southwest</div>
<div class="portfolio-caption-subheading text-muted">Website Design</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"
><div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
@ -148,8 +153,9 @@ @@ -148,8 +153,9 @@
<img class="img-fluid" src="assets/img/portfolio/06-thumbnail.jpg" alt=""
/></a>
<div class="portfolio-caption">
<h4>Window</h4>
<p class="text-muted">Photography</p>
<div class="portfolio-caption-heading">Window</div>
<div class="portfolio-caption-subheading text-muted">Photography</div>
</div>
</div>
</div>
</div>
@ -158,14 +164,10 @@ @@ -158,14 +164,10 @@
<!-- About-->
<section class="page-section" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="text-center">
<h2 class="section-heading text-uppercase">About</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li>
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/1.jpg" alt="" /></div>
@ -214,35 +216,21 @@ @@ -214,35 +216,21 @@
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Team-->
<section class="bg-light page-section" id="team">
<section class="page-section bg-light" id="team">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="text-center">
<h2 class="section-heading text-uppercase">Our Amazing Team</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="team-member">
<img class="mx-auto rounded-circle" src="assets/img/team/1.jpg" alt="" />
<h4>Kay Garland</h4>
<p class="text-muted">Lead Designer</p>
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fab fa-facebook-f"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</li>
</ul>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a><a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a><a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="col-sm-4">
@ -250,17 +238,7 @@ @@ -250,17 +238,7 @@
<img class="mx-auto rounded-circle" src="assets/img/team/2.jpg" alt="" />
<h4>Larry Parker</h4>
<p class="text-muted">Lead Marketer</p>
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fab fa-facebook-f"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</li>
</ul>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a><a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a><a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="col-sm-4">
@ -268,17 +246,7 @@ @@ -268,17 +246,7 @@
<img class="mx-auto rounded-circle" src="assets/img/team/3.jpg" alt="" />
<h4>Diana Pertersen</h4>
<p class="text-muted">Lead Developer</p>
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fab fa-facebook-f"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</li>
</ul>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a><a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a><a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
@ -291,17 +259,17 @@ @@ -291,17 +259,17 @@
<section class="py-5">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/logos/envato.jpg" alt="" /></a>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid d-block mx-auto" src="assets/img/logos/envato.jpg" alt="" /></a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/logos/designmodo.jpg" alt="" /></a>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid d-block mx-auto" src="assets/img/logos/designmodo.jpg" alt="" /></a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/logos/themeforest.jpg" alt="" /></a>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid d-block mx-auto" src="assets/img/logos/themeforest.jpg" alt="" /></a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/logos/creative-market.jpg" alt="" /></a>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid d-block mx-auto" src="assets/img/logos/creative-market.jpg" alt="" /></a>
</div>
</div>
</div>
@ -309,12 +277,10 @@ @@ -309,12 +277,10 @@
<!-- Contact-->
<section class="page-section" id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="text-center">
<h2 class="section-heading text-uppercase">Contact Us</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<form id="contactForm" name="sentMessage" novalidate="novalidate">
<div class="row align-items-stretch mb-5">
<div class="col-md-6">
@ -346,29 +312,14 @@ @@ -346,29 +312,14 @@
</div>
</section>
<!-- Footer-->
<footer class="footer">
<footer class="footer py-4">
<div class="container">
<div class="row align-items-center">
<div class="col-md-4"><span class="copyright">Copyright © Your Website 2019</span></div>
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fab fa-facebook-f"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-inline quicklinks">
<li class="list-inline-item"><a href="#">Privacy Policy</a></li>
<li class="list-inline-item"><a href="#">Terms of Use</a></li>
</ul>
<div class="col-lg-4 text-lg-left">Copyright © Your Website 2020</div>
<div class="col-lg-4 my-3 my-lg-0">
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a><a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a><a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
</div>
<div class="col-lg-4 text-lg-right"><a class="mr-3" href="#!">Privacy Policy</a><a href="#!">Terms of Use</a></div>
</div>
</div>
</footer>
@ -376,12 +327,10 @@ @@ -376,12 +327,10 @@
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr"><div class="rl"></div></div>
</div>
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" /></div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
@ -389,7 +338,7 @@ @@ -389,7 +338,7 @@
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/01-full.jpg" alt="" />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>Date: January 2017</li>
<li>Date: January 2020</li>
<li>Client: Threads</li>
<li>Category: Illustration</li>
</ul>
@ -405,12 +354,10 @@ @@ -405,12 +354,10 @@
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr"><div class="rl"></div></div>
</div>
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" /></div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
@ -418,7 +365,7 @@ @@ -418,7 +365,7 @@
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/02-full.jpg" alt="" />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>Date: January 2017</li>
<li>Date: January 2020</li>
<li>Client: Explore</li>
<li>Category: Graphic Design</li>
</ul>
@ -434,12 +381,10 @@ @@ -434,12 +381,10 @@
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr"><div class="rl"></div></div>
</div>
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" /></div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
@ -447,7 +392,7 @@ @@ -447,7 +392,7 @@
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/03-full.jpg" alt="" />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>Date: January 2017</li>
<li>Date: January 2020</li>
<li>Client: Finish</li>
<li>Category: Identity</li>
</ul>
@ -463,12 +408,10 @@ @@ -463,12 +408,10 @@
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr"><div class="rl"></div></div>
</div>
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" /></div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
@ -476,7 +419,7 @@ @@ -476,7 +419,7 @@
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/04-full.jpg" alt="" />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>Date: January 2017</li>
<li>Date: January 2020</li>
<li>Client: Lines</li>
<li>Category: Branding</li>
</ul>
@ -492,12 +435,10 @@ @@ -492,12 +435,10 @@
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr"><div class="rl"></div></div>
</div>
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" /></div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
@ -505,7 +446,7 @@ @@ -505,7 +446,7 @@
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/05-full.jpg" alt="" />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>Date: January 2017</li>
<li>Date: January 2020</li>
<li>Client: Southwest</li>
<li>Category: Website Design</li>
</ul>
@ -521,12 +462,10 @@ @@ -521,12 +462,10 @@
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr"><div class="rl"></div></div>
</div>
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" /></div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
@ -534,7 +473,7 @@ @@ -534,7 +473,7 @@
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/06-full.jpg" alt="" />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>Date: January 2017</li>
<li>Date: January 2020</li>
<li>Client: Window</li>
<li>Category: Photography</li>
</ul>

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

@ -0,0 +1 @@ @@ -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') @@ -10,7 +10,7 @@ html(lang='en')
title Agency - Start Bootstrap Theme
link(rel='icon', type='image/png', sizes='32x32', href='https://startbootstrap.com/assets/img/icons/favicon-32x32.png')
link(rel='icon', type='image/x-icon', href='assets/img/favicon.ico')
// Font Awesome icons (free version)
script(src='https://use.fontawesome.com/releases/v5.12.1/js/all.js', crossorigin='anonymous')
@ -46,19 +46,16 @@ html(lang='en') @@ -46,19 +46,16 @@ html(lang='en')
li.nav-item
a.nav-link.js-scroll-trigger(href='#contact') Contact
// Masthead
header.masthead
.container
.intro-text
.intro-lead-in Welcome To Our Studio!
.intro-heading.text-uppercase It's Nice To Meet You
.masthead-subheading Welcome To Our Studio!
.masthead-heading.text-uppercase It's Nice To Meet You
a.btn.btn-primary.btn-xl.text-uppercase.js-scroll-trigger(href='#services') Tell Me More
// Services
section#services.page-section
.container
.row
.col-lg-12.text-center
.text-center
h2.section-heading.text-uppercase Services
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
.row.text-center
@ -66,96 +63,98 @@ html(lang='en') @@ -66,96 +63,98 @@ html(lang='en')
span.fa-stack.fa-4x
i.fas.fa-circle.fa-stack-2x.text-primary
i.fas.fa-shopping-cart.fa-stack-1x.fa-inverse
h4.service-heading E-Commerce
h4.my-3 E-Commerce
p.text-muted
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.
.col-md-4
span.fa-stack.fa-4x
i.fas.fa-circle.fa-stack-2x.text-primary
i.fas.fa-laptop.fa-stack-1x.fa-inverse
h4.service-heading Responsive Design
h4.my-3 Responsive Design
p.text-muted
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.
.col-md-4
span.fa-stack.fa-4x
i.fas.fa-circle.fa-stack-2x.text-primary
i.fas.fa-lock.fa-stack-1x.fa-inverse
h4.service-heading Web Security
h4.my-3 Web Security
p.text-muted
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.
// Portfolio Grid
section#portfolio.bg-light.page-section
section#portfolio.page-section.bg-light
.container
.row
.col-lg-12.text-center
.text-center
h2.section-heading.text-uppercase Portfolio
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
.row
.col-md-4.col-sm-6.portfolio-item
.col-lg-4.col-sm-6.mb-4
.portfolio-item
a.portfolio-link(data-toggle='modal', href='#portfolioModal1')
.portfolio-hover
.portfolio-hover-content
i.fas.fa-plus.fa-3x
img.img-fluid(src='assets/img/portfolio/01-thumbnail.jpg', alt='')
.portfolio-caption
h4 Threads
p.text-muted Illustration
.col-md-4.col-sm-6.portfolio-item
.portfolio-caption-heading Threads
.portfolio-caption-subheading.text-muted Illustration
.col-lg-4.col-sm-6.mb-4
.portfolio-item
a.portfolio-link(data-toggle='modal', href='#portfolioModal2')
.portfolio-hover
.portfolio-hover-content
i.fas.fa-plus.fa-3x
img.img-fluid(src='assets/img/portfolio/02-thumbnail.jpg', alt='')
.portfolio-caption
h4 Explore
p.text-muted Graphic Design
.col-md-4.col-sm-6.portfolio-item
.portfolio-caption-heading Explore
.portfolio-caption-subheading.text-muted Graphic Design
.col-lg-4.col-sm-6.mb-4
.portfolio-item
a.portfolio-link(data-toggle='modal', href='#portfolioModal3')
.portfolio-hover
.portfolio-hover-content
i.fas.fa-plus.fa-3x
img.img-fluid(src='assets/img/portfolio/03-thumbnail.jpg', alt='')
.portfolio-caption
h4 Finish
p.text-muted Identity
.col-md-4.col-sm-6.portfolio-item
.portfolio-caption-heading Finish
.portfolio-caption-subheading.text-muted Identity
.col-lg-4.col-sm-6.mb-4.mb-lg-0
.portfolio-item
a.portfolio-link(data-toggle='modal', href='#portfolioModal4')
.portfolio-hover
.portfolio-hover-content
i.fas.fa-plus.fa-3x
img.img-fluid(src='assets/img/portfolio/04-thumbnail.jpg', alt='')
.portfolio-caption
h4 Lines
p.text-muted Branding
.col-md-4.col-sm-6.portfolio-item
.portfolio-caption-heading Lines
.portfolio-caption-subheading.text-muted Branding
.col-lg-4.col-sm-6.mb-4.mb-sm-0
.portfolio-item
a.portfolio-link(data-toggle='modal', href='#portfolioModal5')
.portfolio-hover
.portfolio-hover-content
i.fas.fa-plus.fa-3x
img.img-fluid(src='assets/img/portfolio/05-thumbnail.jpg', alt='')
.portfolio-caption
h4 Southwest
p.text-muted Website Design
.col-md-4.col-sm-6.portfolio-item
.portfolio-caption-heading Southwest
.portfolio-caption-subheading.text-muted Website Design
.col-lg-4.col-sm-6
.portfolio-item
a.portfolio-link(data-toggle='modal', href='#portfolioModal6')
.portfolio-hover
.portfolio-hover-content
i.fas.fa-plus.fa-3x
img.img-fluid(src='assets/img/portfolio/06-thumbnail.jpg', alt='')
.portfolio-caption
h4 Window
p.text-muted Photography
.portfolio-caption-heading Window
.portfolio-caption-subheading.text-muted Photography
// About
section#about.page-section
.container
.row
.col-lg-12.text-center
.text-center
h2.section-heading.text-uppercase About
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
.row
.col-lg-12
ul.timeline
li
.timeline-image
@ -207,10 +206,9 @@ html(lang='en') @@ -207,10 +206,9 @@ html(lang='en')
| Story!
// Team
section#team.bg-light.page-section
section#team.page-section.bg-light
.container
.row
.col-lg-12.text-center
.text-center
h2.section-heading.text-uppercase Our Amazing Team
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
.row
@ -219,45 +217,33 @@ html(lang='en') @@ -219,45 +217,33 @@ html(lang='en')
img.mx-auto.rounded-circle(src='assets/img/team/1.jpg', alt='')
h4 Kay Garland
p.text-muted Lead Designer
ul.list-inline.social-buttons
li.list-inline-item
a(href='#')
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-twitter
li.list-inline-item
a(href='#')
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-facebook-f
li.list-inline-item
a(href='#')
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-linkedin-in
.col-sm-4
.team-member
img.mx-auto.rounded-circle(src='assets/img/team/2.jpg', alt='')
h4 Larry Parker
p.text-muted Lead Marketer
ul.list-inline.social-buttons
li.list-inline-item
a(href='#')
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-twitter
li.list-inline-item
a(href='#')
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-facebook-f
li.list-inline-item
a(href='#')
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-linkedin-in
.col-sm-4
.team-member
img.mx-auto.rounded-circle(src='assets/img/team/3.jpg', alt='')
h4 Diana Pertersen
p.text-muted Lead Developer
ul.list-inline.social-buttons
li.list-inline-item
a(href='#')
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-twitter
li.list-inline-item
a(href='#')
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-facebook-f
li.list-inline-item
a(href='#')
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-linkedin-in
.row
.col-lg-8.mx-auto.text-center
@ -268,24 +254,23 @@ html(lang='en') @@ -268,24 +254,23 @@ html(lang='en')
section.py-5
.container
.row
.col-md-3.col-sm-6
a(href='#')
.col-md-3.col-sm-6.my-3
a(href='#!')
img.img-fluid.d-block.mx-auto(src='assets/img/logos/envato.jpg', alt='')
.col-md-3.col-sm-6
a(href='#')
.col-md-3.col-sm-6.my-3
a(href='#!')
img.img-fluid.d-block.mx-auto(src='assets/img/logos/designmodo.jpg', alt='')
.col-md-3.col-sm-6
a(href='#')
.col-md-3.col-sm-6.my-3
a(href='#!')
img.img-fluid.d-block.mx-auto(src='assets/img/logos/themeforest.jpg', alt='')
.col-md-3.col-sm-6
a(href='#')
.col-md-3.col-sm-6.my-3
a(href='#!')
img.img-fluid.d-block.mx-auto(src='assets/img/logos/creative-market.jpg', alt='')
// Contact
section#contact.page-section
.container
.row
.col-lg-12.text-center
.text-center
h2.section-heading.text-uppercase Contact Us
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
form#contactForm(name='sentMessage', novalidate='novalidate')
@ -309,28 +294,21 @@ html(lang='en') @@ -309,28 +294,21 @@ html(lang='en')
button#sendMessageButton.btn.btn-primary.btn-xl.text-uppercase(type='submit') Send Message
// Footer
footer.footer
footer.footer.py-4
.container
.row.align-items-center
.col-md-4
span.copyright Copyright © Your Website 2019
.col-md-4
ul.list-inline.social-buttons
li.list-inline-item
a(href='#')
.col-lg-4.text-lg-left
| Copyright © Your Website 2020
.col-lg-4.my-3.my-lg-0
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-twitter
li.list-inline-item
a(href='#')
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-facebook-f
li.list-inline-item
a(href='#')
a.btn.btn-dark.btn-social.mx-2(href='#!')
i.fab.fa-linkedin-in
.col-md-4
ul.list-inline.quicklinks
li.list-inline-item
a(href='#') Privacy Policy
li.list-inline-item
a(href='#') Terms of Use
.col-lg-4.text-lg-right
a.mr-3(href='#!') Privacy Policy
a(href='#!') Terms of Use
// Portfolio Modals
// Modal 1
@ -338,11 +316,10 @@ html(lang='en') @@ -338,11 +316,10 @@ html(lang='en')
.modal-dialog
.modal-content
.close-modal(data-dismiss='modal')
.lr
.rl
img(src="assets/img/close-icon.svg")
.container
.row
.col-lg-8.mx-auto
.row.justify-content-center
.col-lg-8
.modal-body
// Project Details Go Here
h2.text-uppercase Project Name
@ -351,7 +328,7 @@ html(lang='en') @@ -351,7 +328,7 @@ html(lang='en')
p
| Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
ul.list-inline
li Date: January 2017
li Date: January 2020
li Client: Threads
li Category: Illustration
button.btn.btn-primary(data-dismiss='modal', type='button')
@ -362,11 +339,10 @@ html(lang='en') @@ -362,11 +339,10 @@ html(lang='en')
.modal-dialog
.modal-content
.close-modal(data-dismiss='modal')
.lr
.rl
img(src="assets/img/close-icon.svg")
.container
.row
.col-lg-8.mx-auto
.row.justify-content-center
.col-lg-8
.modal-body
// Project Details Go Here
h2.text-uppercase Project Name
@ -375,7 +351,7 @@ html(lang='en') @@ -375,7 +351,7 @@ html(lang='en')
p
| Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
ul.list-inline
li Date: January 2017
li Date: January 2020
li Client: Explore
li Category: Graphic Design
button.btn.btn-primary(data-dismiss='modal', type='button')
@ -386,11 +362,10 @@ html(lang='en') @@ -386,11 +362,10 @@ html(lang='en')
.modal-dialog
.modal-content
.close-modal(data-dismiss='modal')
.lr
.rl
img(src="assets/img/close-icon.svg")
.container
.row
.col-lg-8.mx-auto
.row.justify-content-center
.col-lg-8
.modal-body
// Project Details Go Here
h2.text-uppercase Project Name
@ -399,7 +374,7 @@ html(lang='en') @@ -399,7 +374,7 @@ html(lang='en')
p
| Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
ul.list-inline
li Date: January 2017
li Date: January 2020
li Client: Finish
li Category: Identity
button.btn.btn-primary(data-dismiss='modal', type='button')
@ -410,11 +385,10 @@ html(lang='en') @@ -410,11 +385,10 @@ html(lang='en')
.modal-dialog
.modal-content
.close-modal(data-dismiss='modal')
.lr
.rl
img(src="assets/img/close-icon.svg")
.container
.row
.col-lg-8.mx-auto
.row.justify-content-center
.col-lg-8
.modal-body
// Project Details Go Here
h2.text-uppercase Project Name
@ -423,7 +397,7 @@ html(lang='en') @@ -423,7 +397,7 @@ html(lang='en')
p
| Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
ul.list-inline
li Date: January 2017
li Date: January 2020
li Client: Lines
li Category: Branding
button.btn.btn-primary(data-dismiss='modal', type='button')
@ -434,11 +408,10 @@ html(lang='en') @@ -434,11 +408,10 @@ html(lang='en')
.modal-dialog
.modal-content
.close-modal(data-dismiss='modal')
.lr
.rl
img(src="assets/img/close-icon.svg")
.container
.row
.col-lg-8.mx-auto
.row.justify-content-center
.col-lg-8
.modal-body
// Project Details Go Here
h2.text-uppercase Project Name
@ -447,7 +420,7 @@ html(lang='en') @@ -447,7 +420,7 @@ html(lang='en')
p
| Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
ul.list-inline
li Date: January 2017
li Date: January 2020
li Client: Southwest
li Category: Website Design
button.btn.btn-primary(data-dismiss='modal', type='button')
@ -458,11 +431,10 @@ html(lang='en') @@ -458,11 +431,10 @@ html(lang='en')
.modal-dialog
.modal-content
.close-modal(data-dismiss='modal')
.lr
.rl
img(src="assets/img/close-icon.svg")
.container
.row
.col-lg-8.mx-auto
.row.justify-content-center
.col-lg-8
.modal-body
// Project Details Go Here
h2.text-uppercase Project Name
@ -471,7 +443,7 @@ html(lang='en') @@ -471,7 +443,7 @@ html(lang='en')
p
| Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
ul.list-inline
li Date: January 2017
li Date: January 2020
li Client: Window
li Category: Photography
button.btn.btn-primary(data-dismiss='modal', type='button')

17
src/scss/_global.scss
Unescape View File

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

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

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

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

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

15
src/scss/styles.scss
Unescape View File

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

Write Preview
Loading…
Cancel
Save