Line 13: | Line 13: | ||
#intro-header svg { | #intro-header svg { | ||
− | height: | + | height: 50%; |
} | } | ||
Line 24: | Line 24: | ||
#intro-page #intro { | #intro-page #intro { | ||
− | z-index: | + | z-index: 4; |
height: calc(100vh - 14px); | height: calc(100vh - 14px); | ||
width: 100%; | width: 100%; | ||
Line 104: | Line 104: | ||
#bubbles-container { | #bubbles-container { | ||
− | height: | + | height: 100%; |
− | position: absolute; | + | position: absolute; |
− | width: 100%; | + | bottom: 0px; |
− | box-sizing: border-box; | + | width: 100%; |
− | + | box-sizing: border-box; | |
+ | |||
} | } | ||
Revision as of 13:47, 27 July 2020
.container { width: 100%; height: calc(100vh - 14px) }
- intro-page {
background-color: #121212; }
- intro-header {
height: 100vh }
- intro-header svg {
height: 50%; }
- intro-page #intro-header {
width: 100%; margin: 0 auto; position: absolute; z-index: 4; }
- intro-page #intro {
z-index: 4; height: calc(100vh - 14px); width: 100%; top: 0; position: absolute; }
- text-wrapper {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, 20%); width: 100%; z-index: 4; pointer-events: none }
- intro-page #intro #title::after {
content: 'project X'; position: absolute; color: transparent; -webkit-text-stroke-color: rgba(255, 255, 255, 0.2); -webkit-text-stroke-width: 1px; text-stroke-color: rgba(255, 255, 255, 0.2); text-stroke-width: 1px; font-size: 9em; text-transform: uppercase; font-family: 'lato-heavy'; transform: translate(-53%, -80%); top: 50%; left: 50%; width: -webkit-fit-content; }
- desc-wrapper {
padding-top: 30px; display: block; width: fit-content; margin: 0 auto; }
- center-desc {
display: flex; justify-content: center; width: -webkit-fit-content;
opacity:0%; transition: 2s
}
- desc-wrapper span {
color: white; font-family: "lato-regular"; font-size: 3em; text-align: right; }
- test-width {
visibility: hidden }
.container h1 { text-transform: uppercase; font-size: 70px; font-family: "lato-heavy"; text-align: center; margin: 0; }
- intro-page #intro h1 {
color: #FAFAFC; font-size: 9em; }
- intro-page #intro #lower {
color: transparent; stroke-color: rgba(255, 255, 255, 0.4); transform: translate(-0.3em, -0.8em); }
- bubbles-container {
height: 100%; position: absolute; bottom: 0px; width: 100%; box-sizing: border-box;
}
- problem-page, #links-page {
background-color: #FAFAFC; }
- problem-page #problem-header h1,
- links-page #links-header h1 {
color: #6281EF }
- solution-page{
background-color: #121212; }
- solution-page #solution-header h1{
color: #FFC43B }
@media (max-width:768px) { #intro-page #intro h1 { font-size: 4em; } #intro-page #intro #title::after { font-size: 4em; transform: translate(-53%, -130%); } .content-header { padding-top: 50px } .content-index h1 { font-size: 3.3em; } }