Construyendo un Template para juegos (descarga gratis)

Saludos amigos esta vez construiremos un template para juegos usando la tecnología de Bootstrap, super fácil y sencillo . Se podrían hacer mejoras, pero para la demo esta bien, Usaremos una barra de navegación , dentro del body crearemos 4 secciones incluida una cabecera que nos proporcionará el último video subido. El estilo es bastante sencillo y responsive el cual está incluido dentro del index para no llamar archivos externos.

Comenzamos.

Archivos a utilizar

Index.html
bootstrap.min.css
fontawesome.css
bootstrap.min.js

Utilizaremos una página normal creada desde cero. Dentro del head colocaremos los enlaces a las librería externas usadas para esta demostración.

  <!doctype html>
  <html lang="es">
    <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="icon" href="https://i0.wp.com/www.bloguero-ec.com/wp-content/uploads/2018/08/cropped-bloguero_mini.png?fit=32%2C32&ssl=1" sizes="32x32" />
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
      <!-- fontawesome CSS -->
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

      <title>Mi Web</title>
      <style>
        .navbar ul li a:hover{
          color: #ffffff;
          text-decoration: underline;
        }
        .navbar ul li a{
          color: #d3cae8;
          font-size: 1rem;
          }
        .navbar ul li .dropdown-menu a:hover{
          color: #6441a4;
          font-size: 1rem;
          }
        .btn-lila{
          color: #fff;
          background-color: #803de2;
          border-color: 1px solid transparent;
          border-radius: 4px;
        }
        .btn-lila:hover {
          color: #fff;
          background-color: #996ee6;
          border-color: #0062cc;
        }
        .jumbotron-2 {
            margin-bottom: 0px;
            background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(img/background3.jpg);
            background-position: 0% 25%;
            background-size: cover;
            background-repeat: no-repeat;
            min-height: 580px;
            padding: 2rem 1rem;
            margin-bottom: 2rem;
            background-color: #e9ecef;
            color: #fff;
        }
        .resp-container {
            position: relative;
            overflow: hidden;
            padding-top: 56.25%;
        }
        .resp-iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
  }
      .detail-video{
        background: rgba(25,23,28,.5);
        padding: 2rem!important;
      }
      .detail-video a {
        color:#b19dd8;
        text-decoration: none;
        font-size: 1.2rem;
      }
      .detail-video p {
      font-size: 1rem;
      line-height: 1.5;
      }
      .card-img-overlay a{
        color: white;
      }
      .card-img-overlay a:hover{
        /*text-decoration: none;*/
        color: white;
      }

      /*CATEGORIES BADGE*/
  .badge {
    font-weight: 600;
    font-size: 13px;
    color: white;
    background-color: #289dcc;
  }
  /*FEATURED*/
  .mg-2, .mg-4{
    margin-left:-20px;
  }
  .linkfeat{
    background: rgba(76,76,76,0);
    background: -moz-linear-gradient(top, rgba(76,76,76,0) 0%, rgba(48,48,48,0) 49%, rgba(19,19,19,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(76,76,76,0)), color-stop(49%, rgba(48,48,48,0)), color-stop(100%, rgba(19,19,19,1)));
    background: -webkit-linear-gradient(top, rgba(76,76,76,0) 0%, rgba(48,48,48,0) 49%, rgba(19,19,19,1) 100%);
    background: -o-linear-gradient(top, rgba(76,76,76,0) 0%, rgba(48,48,48,0) 49%, rgba(19,19,19,1) 100%);
    background: -ms-linear-gradient(top, rgba(76,76,76,0) 0%, rgba(48,48,48,0) 49%, rgba(19,19,19,1) 100%);
    background: linear-gradient(to bottom, rgba(76,76,76,0) 0%, rgba(48,48,48,0) 49%, rgba(19,19,19,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 );
  }
  .center{
    margin: 0 auto;
  }
  /* MARKETING CONTENT
  -------------------------------------------------- */

  /* Center align the text within the three columns below the carousel */
  .marketing .col-md-6 {
    margin-bottom: 1.5rem;
    text-align: center;
  }
  .marketing h2 {
    font-weight: 400;
  }
  .marketing .col-md-6 p {
    margin-right: .75rem;
    margin-left: .75rem;
  }


  /* Featurettes
  ------------------------- */

  .featurette-divider {
    margin: 5rem 0; /* Space out the Bootstrap <hr> more */
  }

  /* Thin out the marketing headings */
  .featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.05rem;
  }
  /*
   * Footer
   */
  .blog-footer {
    padding: 2.5rem 0;
    color: #999;
    text-align: center;
    background-color: #f9f9f9;
    border-top: .05rem solid #e5e5e5;
  }
  .blog-footer p:last-child {
    margin-bottom: 0;
  }
      </style>
    </head>

El estilo de la página lo he incluido dentro del head ya que es corto se encuentra comentado para su explicación.
Para la creación de la cabecera jumbotron de bootstrap e modificado su estilo para que se vea mejor y mas llamativo y le he cambiado a jumbotron-2 para mejorar un poco su aspecto.
Dentro del body crearemos nuestra navbar sacada de su web y modificada a nuestro estilo.

  <body>
    <nav class="navbar navbar-expand-md navbar-dark" style="background-color: #6441a4;">
      <a class="navbar-brand" target="_blank" href="https://www.bloguero-ec.com">
        <img src="img/bec.svg" width="30" height="30" class="d-inline-block align-top" alt="">
      </a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExample04">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" target="_blank" href="https://www.bloguero-ec.com">Inicio <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Explorar </a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Ver Usuarios</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link" href="#" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></a>
            <div class="dropdown-menu" aria-labelledby="dropdown04">
              <a class="dropdown-item" target="_blank" href="https://www.bloguero-ec.com/politica-de-privacidad">Políticas de Privacidad</a>
              <a class="dropdown-item" target="_blank" href="https://www.bloguero-ec.com/licencia-de-contenido">Términos</a>
              <a class="dropdown-item" target="_blank" href="https://www.bloguero-ec.com">Blog-ec</a>
            </div>
          </li>
          <li class="nav-item">
            <div class="row no-gutters">
              <div class="col">
                  <input class="form-control border-secondary border-right-0 rounded-0" type="text" placeholder="Buscar" id="example-search-input4">
              </div>
              <div class="col-auto">
                  <button class="btn btn-outline-secondary border-left-0 rounded-0 rounded-right" type="button">
                      <i class="fa fa-search"></i>
                  </button>
              </div>
            </div>
          </li>

        </ul>

        <ul class="nav navbar-nav navbar-right">
          <li class="nav-item">
            <button type="button" class="btn btn-sm pull-right btn-lila">Iniciar Sesión</button>
            <button type="button" class="btn btn-sm pull-right btn-lila">Registrarse</button>
          </li>
        </ul>
        <ul class="nav navbar-nav left">
          <li class="nav-item">
            <a href="#" class="nav-link"> <i class="fas fa-donate"></i></a>
          </li>
        </ul>
      </div>
    </nav>

Creacion de jumbotron de bootstrap.

  <div class="jumbotron-2">
    <div class="row">
      <div class="col-md-2"></div>

      <div class="col-md-8">
        <div class="row">
          <div class="col-md-12">
            <div class="resp-container">
            <iframe class="resp-iframe" src="https://www.youtube.com/embed/p9SHe8LDBLo" gesture="media"  allow="encrypted-media" allowfullscreen></iframe>
            </div>
          </div>
          <div class="col-md-12">
            <div class="detail-video">
              <a href="#">Esto Pasa Cuando me ESCONDEN el TUBO de la Victoria 😡- SUPER EXPERTO NO SKIP | Mario Maker - ZetaSSJ</a>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

Se está usando videos de Youtube para esta demostración .
Dentro de la sección de últimos videos se está utilizando un carousel para mostrar varios videos y una sección simple para mostrar un video ya sea al azar o last-videos dependiendo la configuración que se use con un lenguaje de programación.

  <div class="container">

    <div class="row">
      <div class="clo-md-12 center">
      <h2>Ultimos Videos</h2>
    </div>
    </div>
    <div class="row">
      <div class="col-sm-12 col-md-6 col-lg-6  py-0 pl-3 pr-1 featcard">
        <div id="featured" class="carousel slide carousel-fade" data-ride="carousel">
         <div class="carousel-inner">
          <div class="carousel-item active">
              <div class="card bg-dark text-white">
                <iframe height="315" src="https://www.youtube.com/embed/8y1yDNswFgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <div class="card-img-overlay d-flex linkfeat">
                  <a href="#" class="align-self-end">
                  <span class="badge">MarkGamer03</span>
                    <h4 class="card-title">QUE CLASE DE BUG ES ESTO !? - 99% TROLL #6 | Super Mario Maker</h4>
                    <p class="textfeat" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                  </a>
                </div>
              </div>
          </div>
          <div class="carousel-item">
              <div class="card bg-dark text-white">
                <iframe height="315" src="https://www.youtube.com/embed/iKyoR8BLbfM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <div class="card-img-overlay d-flex linkfeat">
                  <a href="#" class="align-self-end">
                  <span class="badge">Tanessi Maker</span>
                    <h4 class="card-title">¡PROHIBIDO reiniciar! Monedas rojas y checkpoints | Mario maker en español</h4>
                    <p class="textfeat" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                  </a>
                </div>
              </div>
          </div>
          <div class="carousel-item">
              <div class="card bg-dark text-white">
                <iframe height="315" src="https://www.youtube.com/embed/nEdVNtR8An8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <div class="card-img-overlay d-flex linkfeat">
                  <a href="#" class="align-self-end">
                  <span class="badge">PangaeaPanga</span>
                    <h4 class="card-title">Super Mario Maker - White Land (Expert) [Sadistic Level]</h4>
                    <p class="textfeat" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                  </a>
                </div>
              </div>
          </div>
          <div class="carousel-item">
              <div class="card bg-dark text-white">
                <iframe height="315" src="https://www.youtube.com/embed/NFIEpZD3enk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <div class="card-img-overlay d-flex linkfeat">
                  <a href="#" class="align-self-end">
                  <span class="badge">PangaeaPanga</span>
                    <h4 class="card-title">Pit of Panga: U-Break (Hardest Super Mario Maker Level Ever Made)</h4>
                    <p class="textfeat" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                  </a>
                </div>
              </div>
          </div>
          <div class="carousel-item">
            <div class="card bg-dark text-white">
                <iframe height="315" src="https://www.youtube.com/embed/YivFG11od2M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <div class="card-img-overlay d-flex linkfeat">
                  <a href="#" class="align-self-end">
                  <span class="badge">ZetaSSJ</span>
                    <h4 class="card-title">Pit of Panga: P-Break - NIVELES 99% IMPOSIBLES #54 | Super Mario Maker en Español - ZetaSSJ</h4>
                    <p class="textfeat" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                  </a>
                </div>
              </div>
          </div>
          <div class="carousel-item">
            <div class="card bg-dark text-white">
                <iframe height="315" src="https://www.youtube.com/embed/8Yw7DWAKtC4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <div class="card-img-overlay d-flex linkfeat">
                  <a href="#" class="align-self-end">
                  <span class="badge">Tanessi Maker</span>
                    <h4 class="card-title">PIT OF PANGA x 3 (serie, niveles de Panga #3) | Mario maker español latino</h4>
                    <p class="textfeat" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                  </a>
                </div>
              </div>
          </div>
         </div><!--//carousel-inner-->
       </div><!--//#featured-->
      </div><!--//col-sm-12 col-md-6 col-lg-6  py-0 pl-3 pr-1 featcard-->


      <div class="col-6 py-0 px-1 d-none d-lg-block">
        <div class="row">
          <div class="col-6 pb-2 mg-1    ">
            <div class="card bg-dark text-white">
                <iframe src="https://www.youtube.com/embed/mQVMrDydNwA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <div class="card-img-overlay d-flex">
                  <a href="#" class="align-self-end">
                  <span class="badge">Tanessi Maker</span>
                    <h6 class="card-title">GLITCH + TROLL = La mejor combinación ☠ | Mario maker en español</h6>
                  </a>
                </div>
                </div>
          </div>
          <div class="col-6 pb-2 mg-2    ">
            <div class="card bg-dark text-white">
                <iframe src="https://www.youtube.com/embed/9GUXQpssMkM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <div class="card-img-overlay d-flex">
                  <a href="#" class="align-self-end">
                  <span class="badge">Ali-A</span>
                    <h6 class="card-title">Fortnite’s trying to HIDE this from us!</h6>
                  </a>
                </div>
                </div>
          </div>
          <div class="col-6 pb-2 mg-3    ">
            <div class="card bg-dark text-white">
                <iframe src="https://www.youtube.com/embed/IHZePmObX9s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <div class="card-img-overlay d-flex">
                  <a href="#" class="align-self-end">
                  <span class="badge">Hueva</span>
                    <h6 class="card-title">¿Como conseguir la sexta estrella ROJA en GTA 5? - Grand Theft Auto V</h6>
                  </a>
                </div>
             </div>
          </div>
          <div class="col-6 pb-2 mg-4    ">
            <div class="card bg-dark text-white">
                <iframe src="https://www.youtube.com/embed/ODuVF_SAJm8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <div class="card-img-overlay d-flex">
                  <a href="#" class="align-self-end">
                  <span class="badge">Hueva</span>
                    <h6 class="card-title">¿Qué pasa si matas a DONALD TRUMP en GTA 5? - Grand Theft Auto V</h6>
                  </a>
                </div>
             </div>
          </div>
        </div><!--//row-->
      </div><!--//col-6 py-0 px-1 d-none d-lg-block-->

    </div><!--//row-->

Para la sección de últimos juegos se está utilizando cards de bootstrap con un estilo sencillo dentro de una fila con columnas de 4 mostrando 3 tarjetas.

  <div class="row">
    <div class="clo-md-12 center">
    <h2>Últimos Juegos</h2>
    </div>
  </div>

  <div class="row">

    <div class="col-md-4">
      <div class="card mb-4 shadow-sm">
        <img class="bd-placeholder-img card-img-top" width="100%" height="225" src="img/streetfighter.jpg">
        <div class="card-body">
          <h4>Street fighter II</h4>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
              <button type="button" class="btn btn-sm btn-outline-secondary">Jugar</button>
            </div>
            <small class="text-muted">9 mins</small>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card mb-4 shadow-sm">
        <img class="bd-placeholder-img card-img-top" width="100%" height="225" src="img/kingoffighters.jpg">
        <div class="card-body">
          <h4>King of Fighters EX</h4>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
              <button type="button" class="btn btn-sm btn-outline-secondary">Jugar</button>
            </div>
            <small class="text-muted">9 mins</small>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card mb-4 shadow-sm">
        <img class="bd-placeholder-img card-img-top" width="100%" height="225" src="img/digimonfighting.jpg">
        <div class="card-body">
          <h4>Digimon fighter </h4>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
              <button type="button" class="btn btn-sm btn-outline-secondary">Jugar</button>
            </div>
            <small class="text-muted">9 mins</small>
          </div>
        </div>
      </div>
    </div>

  </div><!--//row-->

Por último mostramos un área de autores y seguidores utilizando un contenedor dentro encerramos una fila para que se alinee de forma horizontal y en una ventana mas pequeña se alinee uno bajo el otro.

  <div class="row">
    <div class="clo-md-12 center">
    <h2>Autores</h2>
    </div>
  </div>

  <div class="row">
    <div class="col-md-8">
      <div class="container marketing">
      <div class="row">
        <div class="col-md-6">
          <img class="bd-placeholder-img rounded-circle" width="140" height="140" src="img/admin.jpg">
          <h2>Administrador</h2>
          <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
          <p><a class="btn btn-secondary" href="#" role="button">Ver »</a></p>
        </div>
        <div class="col-md-6">
          <img class="bd-placeholder-img rounded-circle" width="140" height="140" src="img/admin2.jpg">
          <h2>Marketing</h2>
          <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
          <p><a class="btn btn-secondary" href="#" role="button">Ver »</a></p>
        </div>
      </div>
      </div><!--//row-->
    </div><!--//col-md-8-->
    <div class="col-md-4">
      <div class="my-3 p-3 bg-white rounded shadow-sm">
        <h6 class="border-bottom border-gray pb-2 mb-0">Seguidores</h6>
        <div class="media text-muted pt-3">
          <img class="bd-placeholder-img rounded-circle" width="32" height="32" src="img/twitter-icon-png-32x32-2.png">
          <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
            <div class="d-flex justify-content-between align-items-center w-100">
              <strong class="text-gray-dark">  User 1</strong>
              <a href="#">Seguir</a>
            </div>
            <span class="d-block">  @username</span>
          </div>
        </div>
        <div class="media text-muted pt-3">
          <img class="bd-placeholder-img rounded-circle" width="32" height="32" src="img/twitter-icon-png-32x32-2.png">
          <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
            <div class="d-flex justify-content-between align-items-center w-100">
              <strong class="text-gray-dark">  User 2</strong>
              <a href="#">Seguir</a>
            </div>
            <span class="d-block">  @username</span>
          </div>
        </div>
        <div class="media text-muted pt-3">
          <img class="bd-placeholder-img rounded-circle" width="32" height="32" src="img/twitter-icon-png-32x32-2.png">
          <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
            <div class="d-flex justify-content-between align-items-center w-100">
              <strong class="text-gray-dark">  User 3</strong>
              <a href="#">Seguir</a>
            </div>
            <span class="d-block">  @username</span>
          </div>
        </div>
        <small class="d-block text-right mt-3">
          <a href="#">Todos los usuarios</a>
        </small>
      </div>
    </div><!--//col-md-4-->
  </div><!--//row-->

</div><!--//container-->

<footer class="blog-footer">
  <p>Construido por <a href="https://bloguero-ec.com/">bloguero-ec</a> | <a href="https://twitter.com/Blogueroec">@blogueroec</a>.</p>
  <p>
    <a href="#">Subir</a>
  </p>
</footer>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".linkfeat").hover(
    function () {
        $(".textfeat").show(500);
    },
    function () {
        $(".textfeat").hide(500);
    }
  );
});
</script>
</body>
</html>

Y así tenemos nuestra pagina creada para juegos, recuerden descargar los archivos de bootstrap desde su página oficial.
Bootstrap es una framework css que nos facilita la vida a la hora de diseñar, existen mas frameworks css pero por el momento este es mas compatible con la mayoria de navegadores.

Si desean que suba este template para juegos hecho en MVC PHP MYSQL haganlo saber en nuestra página de facebook o twitter no se olviden compartir y seguirnos.

Espero les haya gustado esta plantilla seguiremos subiendo más gracias.

DESCARGAR | DEMOSTRACIÓN

Relacionado