Created
October 19, 2021 02:23
-
-
Save paolojoaquinp/55471cb94af3cfd3bd6bf7c721b135a2 to your computer and use it in GitHub Desktop.
lego-superheroes/styles/main.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
--primary-yellow: #ffd602; | |
--primary-red: #d5040a; | |
--primary-blue: #035cb6; | |
} | |
body { | |
font-family: 'Lato', sans-serif; | |
font-weight: 300; | |
height: 100vh; | |
margin: 0; | |
} | |
.page { | |
overflow: hidden; | |
height: 100%; | |
position: relative; | |
width: 100%; | |
} | |
.container { | |
position: absolute; | |
z-index:1; | |
width: 100%; | |
height:100%; | |
display: grid; | |
grid-template-columns: 55% 45%; | |
grid-template-rows: 20% 50% 30%; | |
grid-template-areas: "nav aside" | |
"section aside" | |
"footer aside"; | |
} | |
.navbar { | |
grid-area: nav; | |
display: flex; | |
} | |
.navbar__content { | |
display: flex; | |
align-items: center; | |
width: 100%; | |
padding: 0 0 0 80px; | |
animation: 2s navbar 0.5s ease-in-out; | |
} | |
@keyframes navbar { | |
0% { | |
transform: translateY(-200px); | |
} | |
100% { | |
transform: translateY(0px); | |
} | |
} | |
.navbar__content img { | |
width: 50px; | |
} | |
.navbar__content ul { | |
display: flex; | |
justify-content: space-evenly; | |
list-style: none; | |
padding: 0; | |
width: 450px; | |
} | |
.toggle__menu { | |
display: none; | |
} | |
.navbar__content a { | |
color: var(--primary-red); | |
font-weight: 700; | |
text-decoration: none; | |
} | |
.navbar__content a:hover::after { | |
transform: scaleX(1); | |
} | |
.navbar__content a::after { | |
content: ''; | |
display: block; | |
border-bottom: 2px solid var(--primary-red); | |
transform: scaleX(0); | |
transition: transform 300ms; | |
} | |
.main-content { | |
display: flex; | |
grid-area: section; | |
flex-direction: column; | |
justify-content: center; | |
padding-left: 80px; | |
animation: 2s main-content 0.5s ease-in-out; | |
} | |
.main-content p:first-child { | |
font-size: 36px; | |
font-weight: 300; | |
margin: 0 0 -14px 44px; | |
font-family: sans-serif; | |
} | |
.main-content h1 { | |
font-size: 48px; | |
font-weight: 700; | |
margin: 0 0 28px 0; | |
font-family: sans-serif; | |
} | |
.main-content p:last-child { | |
font-weight: 700; | |
margin: 0; | |
width: 60%; | |
} | |
@keyframes main-content { | |
0% { | |
transform: translateY(-600px); | |
} | |
100% { | |
transform: translateY(0px); | |
} | |
} | |
.side-content { | |
display: grid; | |
grid-template-columns: repeat(6, 1fr); | |
align-items: center; | |
grid-area: aside; | |
} | |
.side-content p { | |
transform: rotate(-90deg); | |
font-size: 36px; | |
font-weight: bold; | |
grid-row: 1 / 2; | |
grid-column: 1 / 2; | |
opacity: 0; | |
animation-name: side-content-text; | |
animation-duration: 0.5s; | |
animation-delay: 2.5s; | |
animation-timing-function: ease-in-out; | |
animation-fill-mode: forwards; | |
z-index: 1; | |
} | |
@keyframes side-content-text { | |
0% { | |
opacity: 0; | |
} | |
100% { | |
opacity: 1; | |
} | |
} | |
.side-content img { | |
width: 100%; | |
grid-column: 2/6; | |
grid-row: 1/2; | |
animation: 2s side-content-img 0.5s ease-in-out; | |
z-index: 3; | |
} | |
@keyframes side-content-img { | |
0% { | |
transform: translateX(600px); | |
} | |
100% { | |
transform: translateX(0px); | |
} | |
} | |
.side-content div { | |
background: var(--primary-yellow); | |
grid-column: 4/7; | |
grid-row: 1/2; | |
height: 100%; | |
z-index: 2; | |
} | |
.footer { | |
display: flex; | |
justify-content: space-evenly; | |
align-items: flex-end; | |
transform: translateX(100%); | |
background: var(--primary-yellow); | |
border-radius: 0 80px 0 0; | |
grid-area: footer; | |
animation-name: footer; | |
animation-duration: 0.5s; | |
animation-delay: 2.5s; | |
animation-timing-function: ease-in-out; | |
animation-fill-mode: forwards; | |
} | |
@keyframes footer { | |
0% { | |
transform: translateX(100%); | |
} | |
100% { | |
transform: translateX(0px); | |
} | |
} | |
.footer div img { | |
width: 160px; | |
position: absolute; | |
bottom: 30px; | |
transform: translateY(0px) scale(1); | |
transition: transform 0.5s ease-in-out; | |
} | |
.footer div:hover img { | |
cursor: pointer; | |
transform: translateY(-20px) scale(1.1); | |
transition: transform 0.3s ease-in-out; | |
} | |
.footer div { | |
background: var(--primary-blue); | |
width: 130px; | |
height: 50%; | |
border-radius: 20px 20px 0 0; | |
display: flex; | |
justify-content: center; | |
} | |
.loader { | |
background: var(--primary-yellow); | |
width: 100%; | |
height: 100%; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
position: absolute; | |
z-index: 3; | |
animation: loader 2s linear forwards; | |
} | |
.loader div { | |
background: white; | |
border-radius: 50%;; | |
height: 40px; | |
margin: 10px; | |
width: 40px; | |
transform: scale(0); | |
animation: scaling 2s ease-in-out infinite; | |
} | |
.loader div:nth-child(1) { | |
animation-delay: 0.2s; | |
} | |
.loader div:nth-child(2) { | |
animation-delay: 0.4s; | |
} | |
.loader div:nth-child(3) { | |
animation-delay: 0.6s; | |
} | |
@keyframes scaling { | |
0%, 100% { | |
transform: scale(0.2); | |
} | |
40% { | |
transform: scale(1); | |
} | |
50% { | |
transform: scale(1); | |
} | |
} | |
@keyframes loader { | |
0% { | |
opacity: 1; | |
visibility: visible; | |
} | |
95% { | |
opacity: 1; | |
visibility: visible; | |
} | |
100% { | |
opacity: 0; | |
visibility: hidden; | |
} | |
} | |
.visible { | |
display: grid; | |
} | |
.hidden { | |
display: none; | |
} | |
.modal { | |
width: 100%; | |
height: 100%; | |
background: rgba(0, 0, 0, 0.5); | |
position: absolute; | |
z-index: 4; | |
place-items: center; | |
} | |
.modal__content { | |
background: white; | |
width: 35%; | |
height: 50%; | |
display: grid; | |
place-items: center; | |
} | |
.modal__content--close { | |
place-self: end; | |
align-self: start; | |
} | |
.modal__content--close:hover { | |
cursor: pointer; | |
} | |
.modal__content--slider { | |
width: 300px; | |
height: 200px; | |
transform-style: preserve-3d; | |
} | |
.cards { | |
position: relative; | |
width: 100%; | |
height: 100%; | |
} | |
.card { | |
background: var(--primary-yellow); | |
position: absolute; | |
left: 0; | |
right: 0; | |
margin: 0 auto; | |
transition: transform 0.5s ease; | |
cursor: pointer; | |
display: grid; | |
place-items: center; | |
width: 50%; | |
height: 100%; | |
} | |
.card img { | |
width: 100%; | |
} | |
#radio-1:checked ~ .cards #card-1, | |
#radio-2:checked ~ .cards #card-2, | |
#radio-3:checked ~ .cards #card-3 { | |
transform: translateX(0) scale(1); | |
opacity: 1; | |
z-index: 1; | |
} | |
#radio-1:checked ~ .cards #card-2, | |
#radio-2:checked ~ .cards #card-3, | |
#radio-3:checked ~ .cards #card-1 { | |
transform: translateX(40%) scale(0.8); | |
opacity: 0.5; | |
z-index: 0; | |
} | |
#radio-1:checked ~ .cards #card-3, | |
#radio-2:checked ~ .cards #card-1, | |
#radio-3:checked ~ .cards #card-2 { | |
transform: translateX(-40%) scale(0.8); | |
opacity: 0.5; | |
z-index: 0; | |
} | |
input[type="radio"] { | |
visibility: hidden; | |
} | |
.button-red { | |
box-sizing: border-box; | |
padding: 5px 10px; | |
border: 3px solid var(--primary-blue); | |
background: var(--primary-red); | |
font-size: 1rem; | |
color: white; | |
border-radius: 20px; | |
margin: 20px 0 0 0; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment