-
+
-
@@ -62,8 +62,8 @@
Welcome To Our Studio!
- It's Nice To Meet You
- Tell Me More
+ It's Nice To Meet You
+ Tell Me More
-
Services
+Services
Lorem ipsum dolor sit amet consectetur.
-
Portfolio
+Portfolio
Lorem ipsum dolor sit amet consectetur.
-
About
+About
Lorem ipsum dolor sit amet consectetur.
-
Our Amazing Team
+Our Amazing Team
Lorem ipsum dolor sit amet consectetur.
-
Contact Us
+Contact Us
Lorem ipsum dolor sit amet consectetur.
-
+
- 
Project Name
+Project Name
Lorem ipsum dolor sit amet consectetur.
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!
@@ -539,7 +539,7 @@
- 
Project Name
+Project Name
Lorem ipsum dolor sit amet consectetur.
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!
@@ -573,7 +573,7 @@
- 
Project Name
+Project Name
Lorem ipsum dolor sit amet consectetur.
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!
@@ -607,7 +607,7 @@
- 
Project Name
+Project Name
Lorem ipsum dolor sit amet consectetur.
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!
@@ -641,7 +641,7 @@
- 
Project Name
+Project Name
Lorem ipsum dolor sit amet consectetur.
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!
@@ -675,7 +675,7 @@
- 
Project Name
+Project Name
Lorem ipsum dolor sit amet consectetur.
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!
diff --git a/scss/_bootstrap-overrides.scss b/scss/_bootstrap-overrides.scss deleted file mode 100644 index 2ae2ff7..0000000 --- a/scss/_bootstrap-overrides.scss +++ /dev/null @@ -1,19 +0,0 @@ -// Bootstrap overrides for this template -.text-primary { - color: $theme-primary !important; -} - -.btn-primary { - font-weight: 700; - @include button-variant(white, $theme-primary, $theme-primary); - @include heading-font; -} - -.btn-xl { - font-size: 18px; - font-weight: 700; - padding: 20px 40px; - border-radius: 3px; - @include button-variant(white, $theme-primary, $theme-primary); - @include heading-font; -} diff --git a/scss/_contact.scss b/scss/_contact.scss index 875cf72..52f3737 100644 --- a/scss/_contact.scss +++ b/scss/_contact.scss @@ -1,11 +1,11 @@ // Styling for the contact section section#contact { - background-color: $gray-darker; + background-color: $gray-900; background-image: url('../img/map-image.png'); background-repeat: no-repeat; background-position: center; .section-heading { - color: white; + color: $white; } .form-group { margin-bottom: 25px; @@ -17,36 +17,33 @@ section#contact { height: auto; } textarea.form-control { - height: 236px; + height: 248px; } } .form-control:focus { - border-color: $theme-primary; + border-color: $primary; box-shadow: none; } ::-webkit-input-placeholder { font-weight: 700; - color: $gray-lighter; + color: $gray-400; @include heading-font; } :-moz-placeholder { font-weight: 700; - color: $gray-lighter; + color: $gray-400; /* Firefox 18- */ @include heading-font; } ::-moz-placeholder { font-weight: 700; - color: $gray-lighter; + color: $gray-400; /* Firefox 19+ */ @include heading-font; } :-ms-input-placeholder { font-weight: 700; - color: $gray-lighter; + color: $gray-400; @include heading-font; } - .text-danger { - color: $theme-danger; - } } diff --git a/scss/_footer.scss b/scss/_footer.scss index 9e354d7..c13ef91 100644 --- a/scss/_footer.scss +++ b/scss/_footer.scss @@ -32,11 +32,11 @@ ul.social-buttons { color: white; border-radius: 100%; outline: none; - background-color: $gray-darker; + background-color: $gray-900; &:active, &:focus, &:hover { - background-color: $theme-primary; + background-color: $primary; } } } diff --git a/scss/_global.scss b/scss/_global.scss index 8055306..b23cfd3 100644 --- a/scss/_global.scss +++ b/scss/_global.scss @@ -9,15 +9,19 @@ p { } a { - color: $theme-primary; + color: $primary; &.active, &:active, &:focus, &:hover { - color: darken($theme-primary, 10%); + color: darken($primary, 10%); } } +.text-primary { + color: $primary !important; +} + h1, h2, h3, @@ -50,14 +54,29 @@ section { } } +// Button Styles +.btn { + @include heading-font; + font-weight: 700; +} + +.btn-primary { + @include button-variant(white, $primary, $primary); +} + +.btn-xl { + font-size: 18px; + padding: 20px 40px; +} + // Highlight color customization ::-moz-selection { - background: $theme-primary; + background: $primary; text-shadow: none; } ::selection { - background: $theme-primary; + background: $primary; text-shadow: none; } @@ -70,5 +89,5 @@ img::-moz-selection { } body { - -webkit-tap-highlight-color: $theme-primary; + -webkit-tap-highlight-color: $primary; } diff --git a/scss/_mixins.scss b/scss/_mixins.scss index d140a74..aea2041 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -70,5 +70,4 @@ } @mixin heading-font { font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; - text-transform: uppercase; } diff --git a/scss/_navbar.scss b/scss/_navbar.scss index d99090b..0025c3a 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -1,6 +1,6 @@ // Styling for the navbar #mainNav { - background-color: $gray-darker; + background-color: $gray-900; .navbar-toggler { font-size: 12px; right: 0; @@ -8,17 +8,17 @@ text-transform: uppercase; color: white; border: 0; - background-color: $theme-primary; + background-color: $primary; @include heading-font; } .navbar-brand { - color: $theme-primary; + color: $primary; @include script-font; &.active, &:active, &:focus, &:hover { - color: darken($theme-primary, 10%); + color: darken($primary, 10%); } } .navbar-nav { @@ -32,7 +32,7 @@ @include heading-font; &.active, &:hover { - color: $theme-primary; + color: $primary; } } } @@ -63,7 +63,7 @@ &.navbar-shrink { padding-top: 0; padding-bottom: 0; - background-color: $gray-darker; + background-color: $gray-900; .navbar-brand { font-size: 1.25em; padding: 12px 0; diff --git a/scss/_portfolio.scss b/scss/_portfolio.scss index 7f94328..b34a901 100644 --- a/scss/_portfolio.scss +++ b/scss/_portfolio.scss @@ -17,7 +17,7 @@ -moz-transition: all ease 0.5s; transition: all ease 0.5s; opacity: 0; - background: fade-out($theme-primary, .1); + background: fade-out($primary, .1); &:hover { opacity: 1; } @@ -45,7 +45,7 @@ margin: 0 auto; padding: 25px; text-align: center; - background-color: white; + background-color: $white; h4 { margin: 0; text-transform: none; @@ -130,7 +130,7 @@ -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); - background-color: $gray-darker; + background-color: $gray-900; .rl { /* Safari and Chrome */ z-index: 1052; @@ -140,7 +140,7 @@ -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); - background-color: $gray-darker; + background-color: $gray-900; } } } diff --git a/scss/_team.scss b/scss/_team.scss index f68424f..4d47613 100644 --- a/scss/_team.scss +++ b/scss/_team.scss @@ -5,7 +5,7 @@ img { width: 225px; height: 225px; - border: 7px solid white; + border: 7px solid $white; } h4 { margin-top: 25px; diff --git a/scss/_timeline.scss b/scss/_timeline.scss index 783cbf7..a9e83e1 100644 --- a/scss/_timeline.scss +++ b/scss/_timeline.scss @@ -11,7 +11,7 @@ width: 2px; margin-left: -1.5px; content: ''; - background-color: #f1f1f1; + background-color: $gray-200; } > li { position: relative; @@ -53,9 +53,9 @@ margin-left: 0; text-align: center; color: white; - border: 7px solid #f1f1f1; + border: 7px solid $gray-200; border-radius: 100%; - background-color: $theme-primary; + background-color: $primary; h4 { font-size: 10px; line-height: 14px; diff --git a/scss/_variables.scss b/scss/_variables.scss index 77bdf4b..80d8e8d 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1,13 +1,35 @@ // Variables -// Gray and Brand Colors for use across theme +// Restated Bootstrap Variables -$theme-primary: #fed136; -$theme-danger: #e74c3c; +$white: #fff !default; +$gray-100: #f8f9fa !default; +$gray-200: #e9ecef !default; +$gray-300: #dee2e6 !default; +$gray-400: #ced4da !default; +$gray-500: #adb5bd !default; +$gray-600: #868e96 !default; +$gray-700: #495057 !default; +$gray-800: #343a40 !default; +$gray-900: #212529 !default; +$black: #000 !default; -$gray-base: #000 !default; -$gray-darker: lighten($gray-base, 13.5%) !default; -$gray-dark: lighten($gray-base, 20%) !default; -$gray: lighten($gray-base, 33.5%) !default; -$gray-light: lighten($gray-base, 46.7%) !default; -$gray-lighter: lighten($gray-base, 93.5%) !default; +$blue: #007bff !default; +$indigo: #6610f2 !default; +$purple: #6f42c1 !default; +$pink: #e83e8c !default; +$red: #dc3545 !default; +$orange: #fd7e14 !default; +$yellow: #fed136 !default; +$green: #28a745 !default; +$teal: #20c997 !default; +$cyan: #17a2b8 !default; + +$primary: $yellow !default; +$secondary: $gray-600 !default; +$success: $green !default; +$info: $cyan !default; +$warning: $yellow !default; +$danger: $red !default; +$light: $gray-100 !default; +$dark: $gray-800 !default; diff --git a/scss/agency.scss b/scss/agency.scss index 9a941b0..2cd08bb 100644 --- a/scss/agency.scss +++ b/scss/agency.scss @@ -12,5 +12,3 @@ @import "team.scss"; @import "contact.scss"; @import "footer.scss"; -// Bootstrap Overrides -@import "bootstrap-overrides.scss";