zeph
90 lines
1.4 KiB
CSS
90 lines
1.4 KiB
CSS
body {
|
|
font-family: 'Cairo', sans-serif;
|
|
font-size:30px;
|
|
background-color:black;
|
|
color:white;
|
|
}
|
|
|
|
a {
|
|
padding-left:25px;
|
|
}
|
|
|
|
i {
|
|
color:white;
|
|
}
|
|
|
|
input {
|
|
background-color:gray;
|
|
border-radius:15px;
|
|
color:rgb(226, 226, 226);
|
|
}
|
|
|
|
::placeholder {
|
|
color:white;
|
|
padding-left:5px;
|
|
}
|
|
|
|
#container {
|
|
/* margin: 0 auto; */
|
|
top:50%;
|
|
left:50%;
|
|
position:absolute;
|
|
transform: translate(-50%, -50%)
|
|
}
|
|
|
|
#textDiv {
|
|
display:inline-block;
|
|
animation: typingEffect 2s forwards;
|
|
width:0%;
|
|
border-width:1px;
|
|
overflow:hidden;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
#box {
|
|
background-color:gray;
|
|
width:15px;
|
|
opacity:0%;
|
|
height:35px;
|
|
border: 1px solid gray;
|
|
animation-name: cursorBlink;
|
|
animation-duration:0.5s;
|
|
animation-iteration-count: infinite;
|
|
margin: -25;
|
|
z-index:1;
|
|
position:absolute;
|
|
transform: translate(-65%, 100%);
|
|
}
|
|
|
|
#extraInfo {
|
|
opacity:0;
|
|
overflow:hidden;
|
|
animation:fadeIn 1s forwards;
|
|
animation-delay:2s;
|
|
}
|
|
|
|
#contact {
|
|
display:none;
|
|
}
|
|
|
|
.contactFade {
|
|
display:block;
|
|
animation: fadeIn 1s forwards;
|
|
animation-play-state:paused;
|
|
}
|
|
|
|
@keyframes cursorBlink {
|
|
0% {opacity:0%;}
|
|
25% {opacity:50%;}
|
|
75% {opacity:0%;}
|
|
}
|
|
|
|
@keyframes typingEffect {
|
|
from {width:0%;}
|
|
to {width:22%;}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {opacity:0;}
|
|
to {opacity:1;}
|
|
} |