Line 131: | Line 131: | ||
/* Position and center the image to scale nicely on all screens */ | /* Position and center the image to scale nicely on all screens */ | ||
− | background-position: | + | background-position: center; |
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
− | background-size: | + | background-size: auto; |
position: relative; | position: relative; | ||
} | } |
Revision as of 21:17, 8 July 2020
/* LANDING PAGE CSS Imposter-Test-Style*/
/* TEXT STYLING */ h1, h2, p {
font-family: barlow;
}
.sub-heading {
background: #1e6273; padding: 7vw 15vw;
}
.sub-heading h1 {
color: #ff7700; font-weight: 200;
}
.sub-heading h2 {
color: #fbf6f3;
font-weight: 200; }
.intro-body {
background: #fbf6f3; padding: 4vw 15vw;
}
.intro-body p {
color: #1e6273; font-size: 22; font-weight: 100; text-align: left;
}
.intro-body h1 {
color: #ff7700; font-weight: 200;
}
/* FOR THE FADE EFFECT ON THE HEADER TEXT */
- fade {
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 2s; /* Firefox < 16 */ -ms-animation: fadein 2s; /* Internet Explorer */ -o-animation: fadein 2s; /* Opera < 12.1 */ animation: fadein 2s; opacity: 0; animation-fill-mode: forwards; animation-delay: 0.5s;
}
- fade-with-delay {
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 2s; /* Firefox < 16 */ -ms-animation: fadein 2s; /* Internet Explorer */ -o-animation: fadein 2s; /* Opera < 12.1 */ animation: fadein 2s; opacity: 0; animation-fill-mode: forwards; animation-delay: 1.5s;
}
@keyframes fadein {
from { opacity: 0; } to { opacity: 1; }
}
/* Firefox < 16 */ @-moz-keyframes fadein {
from { opacity: 0; } to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes fadein {
from { opacity: 0; } to { opacity: 1; }
}
/* Internet Explorer */ @-ms-keyframes fadein {
from { opacity: 0; } to { opacity: 1; }
}
/* Opera < 12.1 */ @-o-keyframes fadein {
from { opacity: 0; } to { opacity: 1; }
}
/* HEADER/BANNER */ body, html {
height: 100%;
}
/* The banner image */ .banner-image {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */ background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("");
/* Set a specific height */ height: 50vh;
/* Position and center the image to scale nicely on all screens */ background-position: center; background-repeat: no-repeat; background-size: auto; position: relative;
}
/* Place text in the middle of the image */ .banner-text {
text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #882916; /* Simulates outlining the text */ text-shadow: -0.5px -0.5px 0 #fbf6f3, 0.5px -0.5px 0 #fbf6f3, -0.5px 0.5px 0 #fbf6f3, 0.5px 0.5px 0 #fbf6f3;
}
.banner-text h1 {
font-size: 11vh;
}
.banner-text h2 {
font-size: 5vh;
}