Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*
- Portfolio Bootstrap Sass Theme
- Author : Zaky
- */
- /* BASE - Base styles, variables, mixins, etc */
- /* _variables */
- /* Font Colors */
- /* Background Colors */
- /* Mixins are basically functions */
- /* Mixins */
- /* _normalize */
- h1, h2, h3, h4, h5 {
- margin-top: 0;
- }
- .page-header {
- margin-top: 30px;
- }
- .no-pad-top {
- padding-top: 0;
- }
- .extra-pad {
- padding-top: 40px;
- padding-bottom: 40px;
- }
- .top-inner {
- padding: 90px 0 30px 0;
- }
- /* Image Sizes */
- .img-xsm {
- width: 100px;
- }
- .img-sm {
- width: 200px;
- }
- .img-lg {
- width: 400px;
- }
- .img-xlg {
- width: 700px;
- }
- .clearfix {
- clear: both;
- }
- /* _base */
- * {
- margin: 0;
- }
- html {
- height: 100%;
- }
- body {
- font-family: "Segoe UI", "Segoe WP", "Segoe Regular", sans-serif;
- font-size: 15px;
- line-height: 1.7em;
- color: #666666;
- height: 100%;
- }
- /* Container */
- .container-full {
- padding-right: 0px;
- padding-left: 0px;
- margin: 0 auto;
- width: 100%;
- }
- a {
- color: #FF5700;
- }
- ul, li {
- list-style: none;
- }
- input, textarea, button {
- -moz-border-radius: 0px;
- -webkit-border-radius: 0px;
- border-radius: 0px;
- }
- img.device {
- width: 100%;
- }
- img.device-small {
- width: 70%;
- margin-bottom: -40px;
- }
- /* MODULES - Individual site components */
- /* _typography.scss */
- /* Lists */
- .list, .list-feature {
- margin-bottom: 30px;
- }
- .list-feature {
- margin: 0;
- padding: 0;
- width: 80%;
- }
- .list-feature li {
- line-height: 3.6em;
- border-bottom: 1px solid #cccccc;
- overflow: auto;
- }
- .list-feature li:last-child {
- border: 0;
- }
- .list-feature span {
- vertical-align: top;
- padding-top: 9px;
- font-size: 120%;
- }
- .list-feature i {
- margin-top: -9px;
- margin-right: 5px;
- }
- .list-comments {
- margin: 0;
- padding: 0;
- }
- .list-comments li {
- padding: 10px 0 5px 0;
- border-bottom: 1px solid #cccccc;
- overflow: auto !important;
- }
- .list-comments li:last-child {
- border: 0;
- }
- .list-comments img {
- width: 100px;
- }
- /* Icons */
- .fa-2 {
- font-size: 18px;
- }
- .fa-3 {
- font-size: 24px;
- }
- .fa-4 {
- font-size: 27px;
- }
- .fa-5 {
- font-size: 35px;
- }
- .fa-6 {
- font-size: 40px;
- }
- .fa-primary {
- color: #FF5700;
- }
- .fa-border {
- border: 1px solid #FF5700;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- border-radius: 5px;
- padding: 13px 15px;
- width: 70px;
- margin-bottom: 10px;
- }
- /* Headings */
- .heading-primary, .heading-primary-a {
- color: #FF5700;
- }
- .heading-primary-a {
- border-bottom: 2px solid #FF5700;
- }
- .heading-secondary, .heading-secondary-a {
- color: #7fba00;
- }
- .heading-secondary-a {
- border-bottom: 2px solid #7fba00;
- }
- .heading-light, .heading-light-a {
- color: #e4eef2;
- }
- .heading-light-a {
- border-bottom: 2px solid #e4eef2;
- }
- .heading-dark, .heading-dark-a {
- color: #2b5464;
- }
- .heading-dark-a {
- border-bottom: 2px solid #2b5464;
- }
- /* Emphasis Text */
- .em-primary {
- color: #FF5700;
- }
- .em-secondary {
- color: #7fba00;
- }
- .em-dark {
- color: #2b5464;
- }
- .em-light {
- color: #e4eef2;
- }
- /* _blocks.scss */
- .block, .block-primary, .block-secondary, .block-light, .block-dark {
- padding: 15px;
- margin-bottom: 15px;
- }
- .block h3, .block-primary h3, .block-secondary h3, .block-light h3, .block-dark h3 {
- margin-top: 0;
- padding-top: 0;
- }
- .block iframe, .block-primary iframe, .block-secondary iframe, .block-light iframe, .block-dark iframe {
- width: 100%;
- }
- .block-primary {
- background: #FF5700;
- color: #ffffff;
- }
- .block-secondary {
- background: #7fba00;
- color: #ffffff;
- }
- .block-light {
- background: #e4eef2;
- color: #666666;
- }
- .block-dark {
- background: #2b5464;
- color: #ffffff;
- }
- .block-center {
- text-align: center !important;
- }
- .block-image img {
- width: 100%;
- }
- .block-border {
- border: 1px solid #cccccc;
- }
- .block-primary-head h3 {
- padding: 15px 5px 15px 10px;
- background: #FF5700;
- color: #ffffff;
- margin: 0;
- font-size: 18px;
- }
- .block-primary-head .block-content {
- border: 1px solid #FF5700;
- padding: 10px;
- }
- .block-icon h3 {
- padding: 0;
- margin: 0;
- }
- .block-icon .icon {
- float: left;
- width: 20%;
- margin-top: 10px;
- }
- .block-icon .icon-content {
- float: left;
- width: 70%;
- }
- .block-project {
- padding: 10px 0px 10px 0px;
- }
- /* _buttons.scss */
- .btn-primary {
- background: #FF5700;
- color: #ffffff;
- border: 2px solid #ffffff;
- }
- .btn-primary:hover {
- background: #cc4600;
- border: 2px solid #ffffff;
- }
- /* Sections */
- section {
- padding: 30px 0;
- }
- .section-showcase {
- background: linear-gradient(90deg, #FF5700, #7fba00);
- }
- .section-showcase .showcase-content {
- padding: 110px 15px 0px 15px;
- text-align: center;
- }
- .section-showcase h1 {
- color: #ffffff;
- }
- .section-primary, .section-primary-a, .section-primary-b {
- background: #FF5700;
- color: #ffffff;
- }
- .section-primary-a {
- border-top: 4px solid #7fba00;
- }
- .section-primary-b {
- border-bottom: 4px solid #7fba00;
- }
- .section-secondary {
- background: #7fba00;
- color: #ffffff;
- }
- .section-light {
- background: #e4eef2;
- color: #666666;
- }
- .section-dark {
- background: #2b5464;
- color: #ffffff;
- }
- .section-form {
- margin-top: 100px;
- }
- .section-main {
- padding-bottom: 0px;
- }
- .section-pagination {
- padding-top: 0px;
- }
- .section-about {
- margin-top: 90px;
- }
- .lead {
- color: #ffffff;
- }
- .zigzag {
- position: relative;
- top: 50%;
- width: 100%;
- height: 50%;
- background: #ffffff;
- padding: 0px 0;
- }
- .zigzag:before {
- content: "";
- position: relative;
- width: 100%;
- height: 15px;
- display: block;
- background: linear-gradient(-45deg, transparent 33.33%, #FF5700 33.33%, #7fba00 66.66%, transparent 66.66%), linear-gradient(45deg, transparent 33.33%, #FF5700 33.33%, #7fba00 66.66%, transparent 66.66%);
- background-size: 30px 60px;
- transform: rotateX(180deg);
- }
- @media only screen and (min-width: 992px) {
- .svg-container {
- display: inline-block;
- position: relative;
- width: 30%;
- min-width: 30%;
- padding-bottom: 1%;
- vertical-align: middle;
- overflow: hidden;
- }
- }
- @media only screen and (min-width: 468px) {
- /* For tablets: */
- .svg-container {
- display: inline-block;
- position: relative;
- width: 30%;
- padding-bottom: 1%;
- vertical-align: middle;
- overflow: hidden;
- }
- }
- @media only screen and (max-width: 468px) {
- /* For mobile phones: */
- .svg-container {
- display: inline-block;
- position: relative;
- width: 70%;
- padding-bottom: 1%;
- vertical-align: middle;
- overflow: hidden;
- }
- }
- .svg-content {
- display: inline-block;
- position: relative;
- top: 0;
- left: 0;
- }
- .equal-height {
- margin: auto;
- max-height: 150px;
- height: 150px;
- }
- .portfolio-item {
- margin-bottom: 25px;
- max-height: 350px;
- height: 350px;
- }
- .project-content ul li {
- list-style: initial;
- }
- .project-content ol li {
- list-style: decimal;
- }
- .over-img {
- /* currently commented out */
- /* max-width: 800px; */
- }
- /* _components.scss */
- /* Carousel */
- .carousel {
- margin-bottom: 20px;
- }
- .carousel img {
- padding: 3px;
- border: 1px solid #cccccc;
- }
- /* Tabs */
- .tab-pane {
- padding: 20px 10px;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- border-radius: 5px;
- margin-bottom: 20px;
- }
- .tab-primary .tab-pane, .tab-primary .nav-tabs > li.active > a, .tab-primary .nav-tabs > li.active > a:hover, .tab-primary .nav-tabs > li.active > a:focus {
- background: #FF5700;
- color: #ffffff;
- }
- .tab-secondary .tab-pane, .tab-secondary .nav-tabs > li.active > a, .tab-secondary .nav-tabs > li.active > a:hover, .tab-primary .nav-tabs > li.active > a:focus {
- background: #7fba00;
- color: #ffffff;
- }
- .tab-dark .tab-pane, .tab-dark.nav-tabs > li.active > a, .tab-dark .nav-tabs > li.active > a:hover, .tab-primary .nav-tabs > li.active > a:focus {
- background: #2b5464;
- color: #ffffff;
- }
- .tab-light .tab-pane, .tab-light .nav-tabs > li.active > a, .tab-light .nav-tabs > li.active > a:hover, .tab-primary .nav-tabs > li.active > a:focus {
- background: #e4eef2;
- color: #666666;
- }
- /* _forms.scss */
- /* Searchbox */
- .search {
- width: 100%;
- }
- .search h3 {
- margin-top: 0;
- padding-top: 0;
- }
- .search input[type="search"] {
- border: 0;
- height: 50px;
- width: 80%;
- border: 2px solid #FF5700;
- font-size: 18px;
- padding-left: 10px;
- padding-bottom: 5px;
- }
- .search button {
- border: 0;
- background: none;
- padding: 0;
- vertical-align: top;
- margin-left: -4px;
- }
- /* LAYOUTS - Page layout styles */
- /* Navbar */
- .navbar {
- width: 100%;
- margin: auto;
- border-left: 1px solid #e7e7e7;
- border-right: 1px solid #e7e7e7;
- border-color: #e7e7e7;
- min-height: 64px;
- background: #fff;
- margin-bottom: 30px;
- border-bottom: 0px;
- }
- .navbar a {
- color: #FF5700 !important;
- font-size: 20px;
- letter-spacing: -0.5px;
- padding-bottom: 24px !important;
- padding-top: 20px !important;
- }
- .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
- background: #FF5700 !important;
- color: #fff !important;
- }
- .navbar-brand {
- margin-top: -19px;
- }
- /* _footer.scss */
- .footer-main {
- background: #2b5464;
- color: #ffffff;
- border-top: 5px solid #7fba00;
- padding: 30px 0;
- z-index: 100;
- height: 100%;
- }
- .footer-main a {
- color: #ffffff;
- }
- .footer-main ul {
- margin: 0;
- padding: 0;
- }
- .footer-main li {
- line-height: 1.8em;
- list-style: none;
- }
- .wrapper {
- min-height: 100%;
- height: auto !important;
- height: 100%;
- margin: 0 auto 0px;
- /* the bottom margin is the negative value of the footer's height. Ik heb de negative value aangepast. */
- }
- @media (max-width: 768px) {
- .search {
- display: inline-block;
- text-align: center;
- }
- .device {
- display: block;
- margin: 20px auto 0 auto;
- }
- .device-small {
- margin-bottom: 20px !important;
- }
- .footer-main ul {
- margin-bottom: 20px;
- text-align: center;
- }
- .footer-main h4 {
- text-align: center;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement