Sebastian Frank
275
website/project-files/css/main.css
Executable file
275
website/project-files/css/main.css
Executable file
@@ -0,0 +1,275 @@
|
||||
@charset "utf-8";
|
||||
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
src: url('../fonts/font-awesome/fontawesome-webfont.eot?v=4.5.0');
|
||||
src: url('../fonts/font-awesome/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/font-awesome/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/font-awesome/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/font-awesome/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/font-awesome/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Reset
|
||||
--------------------------------------------------------------*/
|
||||
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, div
|
||||
{margin:0; padding:0; border:0; outline:0;}
|
||||
mark {background:none;}
|
||||
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section
|
||||
{display:block;}
|
||||
nav ul {list-style:none;}
|
||||
blockquote, q {quotes:none;}
|
||||
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
|
||||
a {margin:0; padding:0; text-decoration:none;}
|
||||
hr { display:block; height:1px; border:0; border:none; padding:0;}
|
||||
input, select {vertical-align:middle;}
|
||||
input, select, textarea {-webkit-appearance: none; border-radius: 0;}
|
||||
.clear {clear:both; margin: 0; padding:0;}
|
||||
img {line-height:0;}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# General Settings
|
||||
--------------------------------------------------------------*/
|
||||
html,body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size:17px;
|
||||
line-height:1.4;
|
||||
color:#333;
|
||||
background:#FFF;
|
||||
}
|
||||
.clear {clear:both;}
|
||||
.section_padding {padding:80px 0px;}
|
||||
@media(max-width:768px){
|
||||
.section_padding {padding:60px 0px;}
|
||||
}
|
||||
@media(max-width:500px){
|
||||
.section_padding {padding:30px 0px;}
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Typo
|
||||
--------------------------------------------------------------*/
|
||||
h1, h2, h3, h4, h5, h6, .button {font-family: 'Open Sans', sans-serif; font-weight:700; line-height: 1.2;}
|
||||
p {margin-bottom:20px;}
|
||||
h1 {display: block; font-size: 32px; margin-bottom:20px; text-align:left; color:#333; text-transform:uppercase;}
|
||||
h2 {display: block; font-size: 28px; margin-bottom:20px; text-transform:uppercase;}
|
||||
h3 {display: block; font-size: 24px; margin-bottom:20px;}
|
||||
h4 {display: block; font-size: 20px; margin-bottom:20px;}
|
||||
h5 {display: block; font-size: 17px; margin-bottom:20px;}
|
||||
strong {font-weight:700;}
|
||||
mark {color:#464645;}
|
||||
a {text-decoration:none; color:#b5c50f;}
|
||||
a:hover {color:#d4543a;}
|
||||
hr {height:1px; background:none; border-bottom:dotted 1px #666; margin-bottom:20px;}
|
||||
|
||||
/* Button */
|
||||
.btn {
|
||||
padding:8px 15px;
|
||||
background:#464645;
|
||||
color:#FFF;
|
||||
transition:all 0.3s;
|
||||
text-transform:none;
|
||||
display:inline-block;
|
||||
margin-top:20px;
|
||||
}
|
||||
.btn:hover {background:#b5c50f; color:#FFF;}
|
||||
.center_btn { width:100%; text-align:center; }
|
||||
|
||||
/* White Color */
|
||||
.white_color {color:#FFF;}
|
||||
.white_color h1, .white_color h2, .white_color h3, .white_color h5, .white_color h5, .white_color h6 {color:#FFF;}
|
||||
.white_color .underline:after {background:#FFF;}
|
||||
.white_color p {color:#FFF;}
|
||||
|
||||
/* Center Text */
|
||||
.center_text {text-align:center;}
|
||||
.center_text h1 {text-align:center;}
|
||||
.center_text p {text-align:center;}
|
||||
.center_text ul {margin:20px auto; width:300px; text-align:left;}
|
||||
|
||||
/* Fullheight Container */
|
||||
.fullheight {
|
||||
position:relative;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
@media(max-width:768px){
|
||||
html,body {font-size:15px;}
|
||||
h1 {font-size:30px;}
|
||||
h2 {font-size:35px;}
|
||||
|
||||
}
|
||||
@media(max-width:450px){
|
||||
h1 {font-size:25px;}
|
||||
h2, article h2 {font-size:22px;}
|
||||
}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Forms
|
||||
--------------------------------------------------------------*/
|
||||
input, textarea, select {
|
||||
width:100%;
|
||||
display:block;
|
||||
height:45px;
|
||||
padding:0px 10px;
|
||||
color:#333;
|
||||
background:#FFF;
|
||||
border:solid 1px #CCC;
|
||||
outline:none;
|
||||
font-size:15px;
|
||||
transition:all 0.3s;
|
||||
-webkit-transition:all 0.3s;
|
||||
-moz-transition:all 0.3s;
|
||||
font-family: 'PT Sans', sans-serif;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
input:focus, textarea:focus, select:focus {background:#FFF; border-color:#464645;}
|
||||
input[type="submit"] {
|
||||
display:inline-block;
|
||||
text-align:center;
|
||||
padding:20px 30px;
|
||||
background:#b5c50f;
|
||||
color:#FFF;
|
||||
transition:all 0.3s;
|
||||
text-transform:uppercase;
|
||||
font-size:17px;
|
||||
height:auto;
|
||||
width:auto;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
cursor:pointer;
|
||||
border:none;
|
||||
margin-top:10px;
|
||||
}
|
||||
input[type="submit"]:hover {background:#464645; color:#FFF;}
|
||||
textarea {height:auto; padding:10px;}
|
||||
label {font-weight:600;}
|
||||
.form {max-width:800px; margin:60px auto 30px auto;}
|
||||
.form .row {margin:0px -5px;}
|
||||
.form .column {padding:0px 5px;}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Header
|
||||
--------------------------------------------------------------*/
|
||||
#header {height:80px;}
|
||||
#header .logo {height:70%; max-width:500px;}
|
||||
#header .logo img {height:100%;}
|
||||
|
||||
#header .container {
|
||||
height:100%;
|
||||
display:flex;
|
||||
display:-webkit-flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
#header {
|
||||
position:absolute;
|
||||
top:50px;
|
||||
left:150px;
|
||||
right:150px;
|
||||
height:auto;
|
||||
z-index:300;
|
||||
background:none;
|
||||
}
|
||||
#header .logo img {height:auto; width:100%;}
|
||||
}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Content
|
||||
--------------------------------------------------------------*/
|
||||
.contentfirst {
|
||||
background:#464645;
|
||||
}
|
||||
|
||||
|
||||
.maincontent {
|
||||
position:relative;
|
||||
background:#FFF;
|
||||
}
|
||||
.white_section {
|
||||
background:rgba(255,255,255,0.8);
|
||||
}
|
||||
|
||||
|
||||
.boxen {}
|
||||
.boxen .col-sm-6 {padding:15px;}
|
||||
.box {
|
||||
height:100%;
|
||||
background:#b1b1b1;
|
||||
color:#FFF;
|
||||
padding:30px;
|
||||
}
|
||||
.box h3 {color:#333;}
|
||||
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Footer
|
||||
--------------------------------------------------------------*/
|
||||
#footer {
|
||||
padding:60px 0px 80px 0px;
|
||||
background:#b1b1b1;
|
||||
color:#FFF;
|
||||
font-size:15px;
|
||||
}
|
||||
#footer h3 {font-size:15px; font-weight:600; text-transform:uppercase; margin-bottom:30px;}
|
||||
#footer .footmenu {
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style-type:none;
|
||||
}
|
||||
#footer .footmenu li {border-bottom:solid 1px #CCC;}
|
||||
#footer .footmenu li a {display:block; color:#FFF; padding:10px 0px; transition:all 0.3s;}
|
||||
#footer .footmenu li a:hover {color:#464645;}
|
||||
|
||||
.footer_info {background:#a4a4a4; padding:15px 0px; font-size:13px; color:#FFF; text-align:center;}
|
||||
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# GoogleMap
|
||||
--------------------------------------------------------------*/
|
||||
#googlemap {height:400px; width:100%; position:relative;}
|
||||
#googlemap iframe {height:100%; width:100%;}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Scrolltop
|
||||
--------------------------------------------------------------*/
|
||||
.scrolltop {
|
||||
position:fixed;
|
||||
bottom:50px;
|
||||
right:50px;
|
||||
z-index:1000;
|
||||
width:50px; height:50px;
|
||||
background:#2e2e2e;
|
||||
cursor:pointer;
|
||||
text-align:center;
|
||||
padding-top:9px;
|
||||
display:none;
|
||||
transition:all 0.3s;
|
||||
border-radius:100%;
|
||||
}
|
||||
.scrolltop .fa {color:#FFF; font-size:30px;}
|
||||
.scrolltop:hover {background:#b5c50f;}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.scrolltop {bottom:20px; right:20px;}
|
||||
}
|
||||
|
||||
.contentfirst ol, .contentfirst ul, .maincontent ol, .maincontent ul {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: -5px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
Reference in New Issue
Block a user