<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="four-z-four bg_color"> <div class="four-z-top"> <div class="four_z"> <div class="four_z_three"> </div> </div> </div> <div class="four-zero-four" style="text-align: center;"> <div class="container" > <div class="row"> <div class="col-4"> <h1>4</h1> </div> <div class="col-4"> <h2> 0 </h2> </div> <div class="col-4"> <h3> 4 </h3> </div> </div> </div> </div> </div>

.four-zero-four h1{ font-size: 500px; color: #FF6666; text-align: center; } .four-zero-four h2{ font-size: 500px; color: #FFD845;text-align: center; } .four-zero-four h3{ font-size: 500px; color: #6F77F4;text-align: center; } .four-zero-four { padding-bottom: 120px; } @media only screen and (max-width: 1200px) { .four-zero-four h1{ font-size: 120px; color: #FF6666; text-align: center; } .four-zero-four h2{ font-size: 120px; color: #FFD845;text-align: center; } .four-zero-four h3{ font-size: 120px; color: #6F77F4;text-align: center; }} .four-z-four { background: #fbfbfd; } .four-z-top { padding: 120px 0px 270px; position: relative; overflow-x: hidden; } .four-z-top .four_z .four_z_three { background: url("https://studyshoot.com/wp-content/uploads/2020/04/volks.gif") no-repeat center center; width: 330px; height: 105px; background-size:100%; position: absolute; bottom: 0; left: 30%; -webkit-animation: myfirst 30s linear infinite; animation: myfirst 12s linear infinite; } @-moz-keyframes myfirst { 0% { left: -25%; } 100% { left: 100%; } } @-webkit-keyframes myfirst { 0% { left: -25%; } 100% { left: 100%; } } @keyframes myfirst { 0% { left: -25%; } 100% { left: 100%; } }