mirror of
https://github.com/dawidolko/Website-Templates.git
synced 2025-10-27 16:03:10 +01:00
109 lines
2.3 KiB
CSS
109 lines
2.3 KiB
CSS
body {
|
|
margin-top: 50px; /* 50px is the height of the navbar - change this if the navbarn height changes */
|
|
}
|
|
|
|
.header-image {
|
|
background: url(http://placehold.it/200x300) repeat;/* Use a tiling background image or a full width image - if you're using full width you will need to change no-repeat center center cover */
|
|
background-position: top;
|
|
height: auto;
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.headline {
|
|
padding: 120px 0;
|
|
}
|
|
|
|
.headline > .container > h1 {
|
|
font-size: 130px;
|
|
background: #ffffff;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.headline > .container > h2 {
|
|
font-size: 77px;
|
|
background: #ffffff;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.featurette-divider {
|
|
margin: 80px 0;
|
|
}
|
|
.featurette {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.featurette-image.pull-left {
|
|
margin-right: 40px;
|
|
}
|
|
.featurette-image.pull-right {
|
|
margin-left: 40px;
|
|
}
|
|
|
|
.featurette-heading {
|
|
font-size: 50px;
|
|
}
|
|
|
|
footer {
|
|
margin: 50px 0;
|
|
}
|
|
|
|
/* RESPONSIVE CSS */
|
|
|
|
@media (max-width: 1200px) {
|
|
|
|
.headline > .container > h1 {font-size: 140px;}
|
|
.headline > .container > h2 {font-size: 63px;}
|
|
.featurette-divider {margin: 50px 0;}
|
|
.featurette-image.pull-left {margin-right: 20px;}
|
|
.featurette-image.pull-right {margin-left: 20px;}
|
|
.featurette-heading {font-size: 35px;}
|
|
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
|
|
.headline > .container > h1 {font-size: 105px;}
|
|
.headline > .container > h2 {font-size: 50px;}
|
|
.featurette-divider {margin: 40px 0;}
|
|
.featurette-image {max-width: 50%;}
|
|
.featurette-image.pull-left {margin-right: 10px;}
|
|
.featurette-image.pull-right {margin-left: 10px;}
|
|
.featurette-heading {font-size: 30px;}
|
|
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
.container {margin: 0 15px;}
|
|
.featurette-divider {margin: 40px 0;}
|
|
.featurette-heading {font-size: 25px;}
|
|
|
|
}
|
|
|
|
|
|
@media (max-width: 668px) {
|
|
|
|
.headline > .container > h1 {font-size: 70px;}
|
|
.headline > .container > h2 {font-size: 32px;}
|
|
.featurette-divider {margin: 30px 0;}
|
|
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
|
|
.headline {padding: 75px 0 25px 0;}
|
|
.headline > .container > h1 {font-size: 60px;}
|
|
.headline > .container > h2 {font-size: 30px;}
|
|
|
|
}
|
|
|
|
@media (max-width: 375px) {
|
|
|
|
.featurette-divider {margin: 10px 0;}
|
|
.featurette-image {max-width: 100%;}
|
|
.featurette-image.pull-left {margin-right: 0; margin-bottom: 10px;}
|
|
.featurette-image.pull-right {margin-left: 0; margin-bottom: 10px;}
|
|
|
|
} |