You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
195 lines
3.0 KiB
195 lines
3.0 KiB
* { |
|
margin: 0; |
|
padding: 0; |
|
box-sizing: border-box; |
|
} |
|
|
|
html { |
|
font-size: 62.5%; /* 1rem = 10px */ |
|
} |
|
|
|
body { |
|
font-family: "Lato", sans-serif; |
|
font-weight: 400; |
|
line-height: 1.7; |
|
color: #777; |
|
} |
|
|
|
.main-title { |
|
text-align: center; |
|
margin-top: 4rem; |
|
margin-bottom: 8rem; |
|
text-shadow: 1px 0px 1px #ccc, 0px 1px 1px #eee, 2px 1px 1px #ccc, |
|
1px 2px 1px #eee, 3px 2px 1px #ccc, 2px 3px 1px #eee, 4px 3px 1px #ccc, |
|
3px 4px 1px #eee, 5px 4px 1px #ccc, 4px 5px 1px #eee, 6px 5px 1px #ccc, |
|
5px 6px 1px #eee, 7px 6px 1px #ccc; |
|
} |
|
|
|
.main-title h1 { |
|
font-size: 7rem; |
|
text-transform: uppercase; |
|
font-weight: 800; |
|
color: #555; |
|
} |
|
|
|
.main-title h2 { |
|
font-size: 4rem; |
|
font-weight: 300; |
|
text-transform: uppercase; |
|
} |
|
|
|
.svg-img { |
|
display: block; |
|
margin: auto; |
|
} |
|
|
|
svg { |
|
display: block; |
|
margin: auto; |
|
} |
|
|
|
#clock { |
|
animation: clockHand 5s infinite linear; |
|
|
|
transform-box: fill-box; |
|
transform-origin: bottom; |
|
} |
|
|
|
#leftTree, |
|
#righTree { |
|
animation: tree 2s ease-in-out infinite alternate; |
|
transform-box: fill-box; |
|
transform-origin: bottom; |
|
} |
|
|
|
#man { |
|
animation: manBody 1s ease-in-out infinite alternate; |
|
transform-box: fill-box; |
|
transform-origin: bottom; |
|
} |
|
|
|
#pc-circle { |
|
fill: #6ace66; |
|
stroke-width: 4; |
|
animation: change-light 4s linear infinite alternate; |
|
} |
|
|
|
.footer { |
|
position: absolute; |
|
bottom: 0; |
|
width: 100%; |
|
height: 35px; |
|
line-height: 35px; |
|
background-color: #f5f5f5; |
|
font-size: 1.3rem; |
|
} |
|
|
|
@keyframes clockHand { |
|
from { |
|
transform: rotateZ(0deg); |
|
} |
|
from { |
|
transform: rotateZ(-360deg); |
|
} |
|
} |
|
|
|
@keyframes manBody { |
|
from { |
|
transform: rotateX(0deg); |
|
} |
|
to { |
|
transform: rotateX(10deg); |
|
} |
|
} |
|
|
|
@keyframes tree { |
|
from { |
|
transform: rotateZ(10deg); |
|
} |
|
to { |
|
transform: rotateZ(-20deg); |
|
} |
|
} |
|
|
|
@keyframes change-light { |
|
0% { |
|
stroke: #cd61f8; |
|
} |
|
25% { |
|
stroke: #6ace66; |
|
} |
|
75% { |
|
stroke: #2995c0; |
|
} |
|
100% { |
|
stroke: #e92949; |
|
} |
|
} |
|
|
|
/* Media Queries */ |
|
|
|
@media (min-width: 640px) { |
|
.main-title h1 { |
|
font-size: 5rem; |
|
text-transform: uppercase; |
|
font-weight: 700; |
|
color: #555; |
|
} |
|
|
|
.main-title h2 { |
|
font-size: 3rem; |
|
font-weight: 300; |
|
text-transform: uppercase; |
|
} |
|
} |
|
|
|
@media (min-width: 768px) { |
|
.main-title h1 { |
|
font-size: 6rem; |
|
text-transform: uppercase; |
|
font-weight: 800; |
|
color: #555; |
|
} |
|
|
|
.main-title h2 { |
|
font-size: 4rem; |
|
font-weight: 300; |
|
text-transform: uppercase; |
|
} |
|
} |
|
|
|
@media (min-width: 1024px) { |
|
.main-title h1 { |
|
font-size: 7rem; |
|
text-transform: uppercase; |
|
font-weight: 900; |
|
color: #555; |
|
} |
|
|
|
.main-title h2 { |
|
font-size: 5rem; |
|
font-weight: 300; |
|
text-transform: uppercase; |
|
} |
|
} |
|
|
|
@media (min-width: 1200px) { |
|
.main-title h1 { |
|
font-size: 8rem; |
|
text-transform: uppercase; |
|
font-weight: 900; |
|
color: #555; |
|
} |
|
|
|
.main-title h2 { |
|
font-size: 5rem; |
|
font-weight: 300; |
|
text-transform: uppercase; |
|
} |
|
|
|
.main-title { |
|
text-align: center; |
|
margin-top: 4rem; |
|
margin-bottom: 4rem; |
|
} |
|
}
|
|
|