63 lines
1.0 KiB
CSS
63 lines
1.0 KiB
CSS
html, body{
|
|
width:100%;
|
|
height:100%;
|
|
margin:0;
|
|
padding:0;
|
|
overflow-x:hidden;
|
|
}
|
|
@keyframes fadeIn {
|
|
0% {opacity:0; top:60%}
|
|
50%{top:51%}
|
|
100% {opacity:1; top:50%}
|
|
}
|
|
@keyframes fadeOut {
|
|
0% {opacity:1; top:50%; left:1%}
|
|
100% {opacity:0; left:-15%;}
|
|
}
|
|
#container{
|
|
position:absolute;
|
|
top:50%;
|
|
left:1%;
|
|
/* width:15%; */
|
|
max-width:25%;
|
|
transform: translateY(-50%);
|
|
|
|
}
|
|
.fadeIn{
|
|
animation: fadeIn ease 1s forwards;
|
|
}
|
|
.fadeOut{
|
|
animation: fadeOut ease 1s forwards;
|
|
}
|
|
#box{
|
|
width:100%;
|
|
background: linear-gradient(180deg, rgb(0, 153, 255) 0%, rgb(50, 173, 255) 100%);
|
|
border-radius:5px;
|
|
|
|
}
|
|
#box:after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
border: 8px solid transparent;
|
|
border-left-color: rgb(20, 143, 225);
|
|
border-left: 0;
|
|
margin-top: -8px;
|
|
margin-left: -8px;
|
|
}
|
|
|
|
#title, #text{
|
|
width:calc(100% - 20px);
|
|
}
|
|
#text{
|
|
padding:10px;
|
|
color:#fff;
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
font-size:16px;
|
|
text-align:center;
|
|
}
|
|
|