<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 ----------> <link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet"> <div class="page" id="page_1" data-next="page_2" style="background-color: #fcf9ea;background-image: url(https://cdnmundo2.img.sputniknews.com/images/107781/83/1077818377.jpg);"> <div class="container"> <div class="row"> <div class="col-md-6"> <img src="https://cdn140.picsart.com/268642769009211.png?r1024x1024" width="150%;" alt="" class="img-galaxia"> </div> <div class="col-md-6"> <div class="contenido"> <h1>Galaxias</h1> <hr> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio repellat reiciendis vero aliquid explicabo eligendi doloremque quaerat perspiciatis aliquam impedit fugiat a minima, sint nostrum consequuntur nam. Tempora, magni doloribus.</p> </div> </div> </div> </div> </div> <div class="page" id="page_2" data-next="page_3" style="background-color: #badfdb;display: none;background-image: url(https://emtstatic.com/2017/12/iStock-485367030.jpg);"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="contenido"> <h1>Planetas</h1> <hr> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio repellat reiciendis vero aliquid explicabo eligendi doloremque quaerat perspiciatis aliquam impedit fugiat a minima, sint nostrum consequuntur nam. Tempora, magni doloribus.</p> </div> </div> <div class="col-md-6"> <img src="https://vignette.wikia.nocookie.net/warhammerrejects/images/1/13/Strineo.png/revision/latest?cb=20170218164822" width="150%;" alt="" class="img-planeta"> <img src="https://vignette.wikia.nocookie.net/halo/images/9/9d/PlanetReach.png/revision/latest?cb=20130104200402&path-prefix=es" width="20%;" alt=""> </div> </div> </div> </div> <div class="page" id="page_3" data-next="page_4" style="background-color: #49beb7;display: none;background-image: url(https://noticiasdeultimahora.com.ve/wp-content/uploads/2019/05/Nebulosa_1557279056.png);"> <div class="container"> <div class="row"> <div class="col-md-6"> <img src="https://cdn140.picsart.com/288538049000211.png?r1024x1024" width="150%;" alt="" class="img-nevulosa"> </div> <div class="col-md-6"> <div class="contenido"> <h1>Nevulosas</h1> <hr> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio repellat reiciendis vero aliquid explicabo eligendi doloremque quaerat perspiciatis aliquam impedit fugiat a minima, sint nostrum consequuntur nam. Tempora, magni doloribus.</p> </div> </div> </div> </div> </div> <div class="page" id="page_4" style="background-color: #ff8a5c;display: none;background-image: url(https://cdn.pixabay.com/photo/2016/01/27/15/25/space-1164579_960_720.png);"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="contenido"> <h1>Agujeros negros</h1> <hr> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio repellat reiciendis vero aliquid explicabo eligendi doloremque quaerat perspiciatis aliquam impedit fugiat a minima, sint nostrum consequuntur nam. Tempora, magni doloribus.</p> </div> </div> <div class="col-md-6"> <img src="https://vignette.wikia.nocookie.net/liberproeliis/images/0/01/Blackholewiki.png/revision/latest?cb=20171108002851&path-prefix=pt-br" width="150%;" alt="" class="img-agujero"> </div> </div> </div> </div>

html, body { margin:0; padding:0; height:100%; } .page{ width: 100%; height: 100%; position: absolute; background-repeat: no-repeat; background-size: cover; overflow:hidden; } h1{ color: #fff; font-size: 50px; font-family: 'Righteous', cursive; } hr{ background-color: #fff; font-family: 'Righteous', cursive; } p{ color: #fff; font-family: 'Righteous', cursive; font-size: 20px; } .img-galaxia{ position: relative; width: 300%; top: -150px; left: -130%; } .img-planeta{ position: relative; } .img-nevulosa{ position: relative; width: 200%; left: -500px; } .contenido{ margin-top: 30px; }

$(window).ready(function(){ $('.page').click(function(){ var id = "#" + $(this).attr('data-next'); $(id).slideDown('slow'); }); });