stylew.css

body{
    background: url('http://iiitg.ac.in/images/new_pics1/index10.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
}
#main{
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}

#box1{
    width: 200px;
    height: 200px;
    background-image:url('IIITG1.png');
    border-radius: 50%;
    position: absolute;
    bottom: 50%;
    left: 30%;
    animation: anim 2s forwards, anim2 3s forwards 3s;
}
#box1:after{
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background-image: url('IIITG.png');
    border-radius: 50%;
    left: 0px;
    z-index: -1;

}

@keyframes anim{
    from{
        bottom: -100%;
    }
    to{
        bottom: 40%;
    }
}
@keyframes anim2{
    from{
        left: 30%;
        width: 200px;
    }
    to{
        width: 0px;
        left: 50%;
    }
}

#box2{
    width: auto;
    height: auto;
    font-family: 'Bahnschrift Condensed';
    color: rgb(8, 8, 8);
    font-size: 10em;
    font-weight: 500;
    line-height: 120px;
    position: absolute;
    top: 30px;
    left: 100px;
}
#text{
    color: rgb(255, 255, 255);
    position: relative;
   left: -200%;
    animation: anim3 2s forwards 3s;
}
@keyframes anim3{
    from{
        left: -180%;
    }
    to{
        left: 0%;
    }
}
#box3{
    overflow: hidden;
}
#container{
    width: 100%;
    position: absolute;
    top: -100%;
    animation: anim4 2s forwards 2.5s;
}
#logo{
    float: left;
    margin-left: 100px;
    margin-top: 20px;
}
#logo img{
    width: 70px;
}
#menu{
    font-family: 'Behnschrift Condensed';
    font-size: 14px;
    color: white;
    letter-spacing: 2px;
    margin-right: 150px;
    margin-top: 20px;
    float: right;

}
#menu ul{
    list-style: none;
}
#menu ul li{
    display: inline-block;
    margin-left: 100px;
}
@keyframes anim4{
    from{
        top: -100%;
    }
    to{
        top: 0%;
    }
}