Difference between revisions of "User:Loch210/Rufus styleCSS"
Jump to navigation
Jump to search
(Created page with ".large-header { position: relative; width: 100%; background: #111; overflow: hidden; background-size: cover; background-position: center center; z-index:...") |
|||
| Line 1: | Line 1: | ||
| − | .large-header { | + | .large-header { |
| − | + | position: relative; | |
| − | + | width: 100%; | |
| − | + | background: #111; | |
| − | + | overflow: hidden; | |
| − | + | background-size: cover; | |
| − | + | background-position: center center; | |
| − | + | z-index: 1; | |
| − | } | + | } |
| − | .demo .large-header { | + | .demo .large-header { |
| − | + | background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/499416/demo-bg.jpg"); | |
| − | } | + | } |
| − | .main-title { | + | .main-title { |
| − | + | position: absolute; | |
| − | + | margin: 0; | |
| − | + | padding: 0; | |
| − | + | color: #F9F1E9; | |
| − | + | text-align: center; | |
| − | + | top: 50%; | |
| − | + | left: 50%; | |
| − | + | -webkit-transform: translate3d(-50%, -50%, 0); | |
| − | + | transform: translate3d(-50%, -50%, 0); | |
| − | } | + | } |
| − | .demo .main-title { | + | .demo .main-title { |
| − | + | text-transform: uppercase; | |
| − | + | font-size: 4.2em; | |
| − | + | letter-spacing: 0.1em; | |
| − | } | + | } |
| − | .main-title .thin { | + | .main-title .thin { |
| − | + | font-weight: 200; | |
| − | } | + | } |
| − | @media only screen and (max-width: 768px) { | + | @media only screen and (max-width: 768px) { |
| − | + | .demo .main-title { | |
| − | + | font-size: 3em; | |
| − | + | } | |
| − | } | + | } |
Revision as of 12:14, 4 August 2020
.large-header {
position: relative;
width: 100%;
background: #111;
overflow: hidden;
background-size: cover;
background-position: center center;
z-index: 1;
}
.demo .large-header {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/499416/demo-bg.jpg");
}
.main-title {
position: absolute;
margin: 0;
padding: 0;
color: #F9F1E9;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.demo .main-title {
text-transform: uppercase;
font-size: 4.2em;
letter-spacing: 0.1em;
}
.main-title .thin {
font-weight: 200;
}
@media only screen and (max-width: 768px) {
.demo .main-title {
font-size: 3em;
}
}
