Created
November 24, 2018 20:45
-
-
Save Spesm/10dd8110fb6b509268433a3efe63c311 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* --------------------- */ | |
/* Body styling */ | |
body { | |
position: relative; | |
background-image: url("../img/wild-sea.png"); | |
overflow: auto; | |
} | |
* { | |
font-family: Fahkwang, Futura, Helvetica, Trebuchet, sans-serif; | |
} | |
/* --------------------- */ | |
/* Jumbotron styling */ | |
.top-image { | |
position: relative; | |
top: 4em; | |
height: 343px; | |
background-image: url("../img/tara-panorama.jpg"); | |
background-size: cover; | |
background-position: center; | |
border-bottom: 3px solid #ff9934; | |
} | |
.main-header { | |
width: 100%; | |
margin: 0; | |
padding: 0 6%; | |
} | |
.main-header h1 { | |
font-size: 12.5vw; | |
font-weight: 600; | |
color: #012622; | |
} | |
@media screen and (min-width: 768px) { | |
.main-header h1 { | |
font-size: 4em; | |
} | |
} | |
.main-header p { | |
font-size: 7.5vw; | |
font-weight: 600; | |
color: #012622; | |
} | |
@media screen and (min-width: 768px) { | |
.main-header p { | |
font-size: 2.5em; | |
} | |
} | |
/* --------------------- */ | |
/* Inner body containing page sections */ | |
.inner-body { | |
overflow: auto; | |
width: 100%; | |
margin: 0 auto; | |
} | |
@media screen and (min-width: 375px) { | |
.inner-body { | |
width: 90%; | |
} | |
} | |
@media screen and (min-width: 1440px) { | |
.inner-body { | |
width: 80%; | |
} | |
} | |
.portfolio { | |
padding-top: 2em; | |
} | |
/* --------------------- */ | |
/* Styling for headers */ | |
section .header { | |
text-align: center; | |
padding: 1em 0; | |
margin: 1em; | |
background-color: #012622; | |
color: #fff; | |
} | |
/* --------------------- */ | |
/* Styling for responsive grid blocks */ | |
.vertical-space { | |
margin-bottom: 1em; | |
} | |
.split-block { | |
padding: 1em; | |
background-color: #2a4d14; | |
color: #fff; | |
min-height: 100%; | |
} | |
/* --------------------- */ | |
/* Work carousel styling */ | |
.work-carousel { | |
margin: 1em; | |
} | |
.owl-stage { | |
display: flex; | |
} | |
.owl-carousel img { | |
border: 2px solid #2a4d14; | |
} | |
.work-item { | |
position: relative; | |
background-color: #317b22; | |
color: #fff; | |
padding: 1em 1em 0; | |
min-height: 100%; | |
} | |
.work-title { | |
position: absolute; | |
background-color: rgba(42, 77, 20, 0.7); | |
color: #fff; | |
font-size: 3vh; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
text-align: center; | |
padding: 0.5em 1em; | |
display: none; | |
} | |
.work-anchor { | |
position: relative; | |
} | |
.work-anchor h4 { | |
padding: 0.7em 0; | |
} | |
.work-info { | |
padding: 1em 0 2.5em; | |
} | |
.work-button { | |
position: absolute; | |
bottom: 1em; | |
} | |
/* --------------------- */ | |
/* About section styling */ | |
.learn-more { | |
padding: 1em 0; | |
margin: 0 1em 1em; | |
background-color: #317b22; | |
color: #fff; | |
} | |
.modal-body embed { | |
max-width: 100%; | |
} | |
/* --------------------- */ | |
/* Contact section styling */ | |
.parallax-image { | |
background-image: url("../img/eckhard-hoehmann-telephone-4.jpg"); | |
background-attachment: fixed; | |
background-size: cover; | |
background-position: center; | |
border-top: 2px solid #ff9934; | |
border-bottom: 2px solid #ff9934; | |
} | |
/* For transparent backgrounds instead of .split-block */ | |
.form-block { | |
padding: 1em; | |
min-height: 100%; | |
color: #012622; | |
} | |
.form-block h3 { | |
font-weight: 600; | |
} | |
/* Contact details list */ | |
.details ul { | |
font-size: 1.2em; | |
font-weight: 600; | |
list-style-type: none; | |
margin: 1em -1.8em; | |
} | |
/* Contact form */ | |
.form label { | |
font-size: 1.2em; | |
font-weight: 600; | |
} | |
.form input { | |
border: 1px solid black; | |
} | |
.form textarea { | |
border: 1px solid black; | |
} | |
/* Character counter */ | |
.counter { | |
margin-bottom: 1em; | |
} | |
.counter p { | |
display: inline; | |
font-size: 1.2em; | |
font-weight: 600; | |
} | |
/* Google map */ | |
.map { | |
border: 1px solid black; | |
} | |
#map { | |
height: 500px; | |
width: 100%; | |
} | |
/* --------------------- */ | |
/* FAQ accordion styling */ | |
.accordion { | |
margin: 1em 0; | |
} | |
.card { | |
background-color: #2a4d14; | |
} | |
.card-header h5 { | |
color: #fff; | |
white-space: normal; | |
text-decoration: none; | |
text-align: left; | |
font-size: 1em; | |
font-weight: 400; | |
transition: color 1200ms; | |
-webkit-transition: color 1200ms; | |
} | |
.card-header h5:hover { | |
text-decoration: none; | |
color: #317b22; | |
} | |
.card-body { | |
background-color: #317b22; | |
color: #fff; | |
} | |
/* --------------------- */ | |
/* Footer styling */ | |
.footer { | |
padding: 1em; | |
background-color: #012622; | |
color: #fff; | |
} | |
.footer a { | |
color: #317b22; | |
} | |
.social-media { | |
max-width: 100%; | |
overflow: hidden; | |
} | |
.twitter-follow-button { | |
vertical-align: top; | |
margin-bottom: 0.5em; | |
} | |
.footer-video { | |
max-width: 750px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment