website2.css

*{
    margin: 0; padding:0;
}
body{
    font-family:Arial, Helvetica, sans-serif;
    background-color: #12475f;
    color: #fff;
    line-height: 1.6em;
    text-align: center;
}
.container{
    max-width: 960px;
    margin:auto; /* pushed to the midlle */
    padding: 0 30px; /* 30px on the left and right*/

}
#showcase{
    height: 300px;
}
#showcase h1{
    font-size:50px;
    line-height:1.3em;
    position: relative;
animation:heading;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes heading{
    0%{top:-50px;}
    100%{top:200px;}
}

#content {
    position: relative;
    animation:content 3s forwards;
}
@keyframes content{
    0%{left:-1000px;}
    100%{left: 0;}
}
.btn{
    display: inline-block; /* on the next line like a block but we dont to go all away across  */
color: #fff;
text-decoration:none;
padding: 1rem 2rem;
border: #fff 1px solid;
margin-top:40px;
opacity:0; /* now we cant see it */
animation:btn 3s 3s forwards;

transition-property:transform;
transition-duration: 1s;
}
@keyframes btn{
    0%{opacity:0;}
    100%{opacity: 1;} /* full view */
}

.btn:hover{
    transform: rotateY(180deg);
}