128 lines
2.0 KiB
CSS
128 lines
2.0 KiB
CSS
/* Global Secion */
|
|
body {
|
|
background: #233142;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.align-center {
|
|
text-align: center;
|
|
align: center;
|
|
}
|
|
/* Avatar Secion */
|
|
.avatar {
|
|
text-align: center;
|
|
margin-top: 5%;
|
|
}
|
|
|
|
.avatar-img {
|
|
width: 200px;
|
|
height: auto;
|
|
border-radius: 50%;
|
|
margin-top: 1%;
|
|
animation-name: avatar-picture-fadein;
|
|
animation-duration: 1.5s;
|
|
}
|
|
|
|
.avatar-text {
|
|
color: #7996b9;
|
|
font-family: 'Trebuchet MS', sans-serif;
|
|
animation-name: fadeIn;
|
|
animation-duration: 1.5s;
|
|
}
|
|
|
|
.avatar-subtext {
|
|
color: #7996b9;
|
|
font-family: 'Trebuchet MS', sans-serif;
|
|
animation-name: fadeIn;
|
|
animation-duration: 1.5s;
|
|
}
|
|
|
|
/* links Secion */
|
|
.links {
|
|
text-align: center;
|
|
margin-top: -2%;
|
|
}
|
|
|
|
.block {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
padding: 5%;
|
|
font-size: 38px;
|
|
color: #bfbfbf;
|
|
max-width: 14%;
|
|
opacity: 0;
|
|
}
|
|
|
|
@media only screen and (max-width: 967px) {
|
|
.block {
|
|
display: block;
|
|
text-align: center;
|
|
transform: translate(50%, 3%);
|
|
max-width: 40%;
|
|
}
|
|
}
|
|
|
|
.block-subtext {
|
|
font-size: 0.5em;
|
|
color: #7996b9;
|
|
font-family: 'Trebuchet MS', sans-serif;
|
|
}
|
|
|
|
.block-1{
|
|
animation-name: fadeIn;
|
|
animation-duration: 1.5s;
|
|
animation-delay: 0.2s;
|
|
animation-fill-mode:forwards;
|
|
}
|
|
|
|
.block-2{
|
|
animation-name: fadeIn;
|
|
animation-duration: 1.5s;
|
|
animation-delay: 0.5s;
|
|
animation-fill-mode:forwards;
|
|
}
|
|
|
|
.block-3 {
|
|
animation-name: fadeIn;
|
|
animation-duration: 1.5s;
|
|
animation-delay: 0.8s;
|
|
animation-fill-mode:forwards;
|
|
}
|
|
|
|
.button {
|
|
border: 0;
|
|
background: #354a64;
|
|
color: #bfbfbf;
|
|
width: 110px;
|
|
height: 40px;
|
|
margin: 20px auto;
|
|
border-radius: 5px;
|
|
display: block;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
font-family: 'Trebuchet MS', sans-serif;
|
|
font-size: 0.6em;
|
|
transition-duration: 0.4s;
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: #006080;
|
|
}
|
|
|
|
/* Footer section */
|
|
.footer {
|
|
text-align: center;
|
|
margin-top: -2%;
|
|
color: #7996b9;
|
|
font-family: 'Trebuchet MS', sans-serif;
|
|
animation-name: fadeIn;
|
|
animation-duration: 1.5s;
|
|
}
|
|
|
|
.footer-heart {
|
|
color: red;
|
|
}
|