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.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.
First-Website/css.css

125 lines
2.1 KiB

/* Main CSS */
.mainContent {
padding-top: 10rem;
width: 100%;
height: 100vh;
}
.name {
margin: 0 auto;
width: 80%;
font-size: 4rem;
white-space: nowrap;
text-align: center;
height: 5rem;
}
.quickButtons {
margin: 0 auto;
width: 50%;
display: flex;
justify-content: center;
}
.goButton {
background-color: #33353d;
border: 0;
margin-top: 8rem;
border-radius: .3rem;
color: white;
border-bottom: #26282f 5px solid;
padding: 2rem;
font-size: 2rem;
}
.goButton:active {
border: 0;
border-top: #26282f 5px solid;
}
.slideUp {
position: absolute;
padding: .7rem;
width: 4rem;
height: 4rem;
border-radius: 50%;
border: 2px solid white;
text-align: center;
left: calc(50% - 2rem);
top: 90vh;
}
.slideUp:hover {
color: white!important;
}
/* .name:hover + #rocket {
animation-name: launchRocket;
animation-duration: 2.5s;
animation-timing-function: ease-in-out;
}
@keyframes launchRocket {
from {top: 100vh}
to {top: -20vh}
}
#rocket {
position: absolute;
top: 100vh;
z-index: -1;
left: calc(50% - 7rem);
width: 12rem;
height: 14rem;
} */
.aboutPages {
height: 30vh;
float: left;
background-color: #33353d;
width: 100%;
box-shadow: 0 -1px 15px 5px hsla(0, 0%, 0%, 0.8);
}
.infoBlockPages {
width: 50%;
border-right: #454752 5px solid;
display: flex;
align-items: center;
height: 100%;
float: left;
}
.infoHeadPages {
margin-left: 1rem;
padding-right: 1rem;
border-right: 5px solid white;
}
.infoTextPages {
margin-left: 2rem;
}
/* About */
.about {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
float: left;
height: 30vh;
background-color: #454752;
}
.infoBlockMe {
padding: 1rem;
text-align: center;
display: inline-block;
height: 10rem;
width: 25rem;
border-right: 4px solid white;
}
/* Mobile support */
@viewport {
width: device-width;
zoom: 1.0;
}
/* Support for mobile devices */
@media screen and (min-width:0px) and (max-width:1000px) {
.mainContent {
width: 100%!important;
}
svg {
display: none;
}
.time {
font-size: 4rem!important;
}
}