Line 103: | Line 103: | ||
#bubbles-container { | #bubbles-container { | ||
− | height: | + | height: 0%; |
position: absolute; | position: absolute; | ||
bottom: 0px; | bottom: 0px; | ||
width: 100%; | width: 100%; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
+ | opacity:20%; | ||
+ | transition: 1s | ||
} | } | ||
Revision as of 11:26, 27 July 2020
.container { width: 100%; height: calc(100vh - 14px) }
- intro-page {
background-color: #121212; }
- intro-header {
height: 100vh }
- intro-header svg {
height: 50%; padding-top: 5em; }
- intro-page #intro-header {
width: 100%; margin: 0 auto; position: absolute; z-index: 1; }
- intro-page #intro {
z-index: 2; 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; }
- 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: 0%; position: absolute; bottom: 0px; width: 100%; box-sizing: border-box;
opacity:20%; transition: 1s
}
- 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%); } #problem-header { padding-top: 50px } #problem-header h1 { font-size: 3.3em; } }