youplay

Documentation


Game HTML5 Template based on Bootstrap 3.

Preview Profile Support

Overview

Youplay is HTML5 template based on bootstrap 3.

Template Structure

All template files have fixed structure consisting of navbar, banner, search bar, content, social block and footer as shown below:

Page Head

Page head contains metadata, javascript and css files. This is blank example without additional plugins:
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>youplay</title>

  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Icon -->
  <link rel="icon" type="image/png" href="../assets/youplay/images/icon.png">

  <!-- Google Fonts -->
  <link href='http://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>

  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap/css/bootstrap.min.css" />

  <!-- FontAwesome -->
  <link rel="stylesheet" type="text/css" href="../assets/plugins/fontawesome/css/font-awesome.min.css" />

  <link rel="stylesheet" type="text/css" href="../assets/youplay/css/youplay.min.css" />
  <!--[if lt IE 9]>
      <script src="../assets/plugins/html5shiv/html5shiv.min.js"></script>
    <![endif]-->
</head>

Top Navbar

Top navbar have bootstrap navbar structure with some modifications (submenus):
<!-- Navbar -->
<nav class="navbar-youplay navbar navbar-default navbar-fixed-top ">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="off-canvas" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html">
        <img src="assets/images/logo.png" alt="">
      </a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown dropdown-hover ">
          <a href="#!" class="dropdown-toggle" role="button" aria-expanded="false">
                    Store <span class="caret"></span> <span class="label">games</span>
                  </a>
          <div class="dropdown-menu" style="width: 320px;">
            <ul role="menu">
              <li><a href="store-1.html">Store Style 1</a>
              </li>
              <li><a href="store-2.html">Store Style 2</a>
              </li>
              <li><a href="cart.html">Cart</a>
              </li>
            </ul>
            <!--
                      -->
            <ul role="menu">
              <li><a href="store-product-1.html">Product Style 1</a>
              </li>
              <li><a href="store-product-2.html">Product Style 2</a>
              </li>
              <li><a href="checkout.html">Checkout</a>
              </li>
            </ul>
          </div>
        </li>
        <li class="dropdown dropdown-hover ">
          <a href="#!" class="dropdown-toggle" role="button" aria-expanded="false">
                    Blog <span class="caret"></span> <span class="label">news</span>
                  </a>
          <div class="dropdown-menu" style="width: 320px;">
            <ul role="menu">
              <li><a href="blog-1.html">Blog Style 1</a>
              </li>
              <li><a href="blog-2.html">Blog Style 2</a>
              </li>
              <li><a href="blog-3.html">Blog Style 3</a>
              </li>
            </ul>
            <!--
                      -->
            <ul role="menu">
              <li><a href="blog-post-1.html">Blog Post 1</a>
              </li>
              <li><a href="blog-post-2.html">Blog Post 2</a>
              </li>
              <li><a href="blog-post-3.html">Blog Post 3</a>
              </li>
            </ul>
          </div>
        </li>
        <li class="dropdown dropdown-hover active">
          <a href="#!" class="dropdown-toggle" role="button" aria-expanded="false">
                    Features <span class="caret"></span> <span class="label">full list</span>
                  </a>
          <div class="dropdown-menu" style="width: 320px;">
            <ul role="menu">
              <li><a href="components.html">Components</a>
              </li>
              <li><a href="user-profile.html">User Profile</a>
              </li>
              <li><a href="forums.html">Forums</a>
              </li>
              <li><a href="forums-topics.html">Forums Topics</a>
              </li>
              <li><a href="forums-single-topic.html">Single Topic</a>
              </li>
            </ul>
            <!--
                      -->
            <ul role="menu">
              <li><a href="coming-soon.html">Coming Soon</a>
              </li>
              <li class="active"><a href="contact.html">Contact Us</a>
              </li>
              <li><a href="search.html">Search</a>
              </li>
              <li><a href="login.html">Login</a>
              </li>
              <li><a href="404.html">404</a>
              </li>
              <li><a href="blank.html">Blank</a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown dropdown-hover ">
          <a href="#!" class="dropdown-toggle" role="button" aria-expanded="false">
                    John Doe <span class="badge bg-default">2</span> <span class="caret"></span> <span class="label">it is you</span>
                  </a>
          <div class="dropdown-menu">
            <ul role="menu">
              <li><a href="../documentation">Documentation</a>
              </li>
              <li><a href="http://themeforest.net/item/youplay-game-template-based-on-bootstrap/11306207?ref=_nK">Purchase</a>
              </li>
              <li class="divider"></li>

              <li><a href="user-profile.html">Profile <span class="badge pull-right bg-warning">13</span></a>
              </li>
              <li><a href="cart.html">My Cart <span class="badge pull-right bg-default">3</span></a>
              </li>
              <li class="divider"></li>

              <li><a href="login.html">Log Out</a>
              </li>
              <li class="dropdown-submenu pull-left">
                <a href="#!">More..</a>
                <div class="dropdown-menu">
                  <ul role="menu">
                    <li><a href="#!">3rd level</a>
                    </li>
                    <li><a href="#!">3rd level</a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </li>
        <li>
          <a class="search-toggle" href="search.html">
            <i class="fa fa-search"></i>
          </a>
        </li>
        <li class="dropdown dropdown-hover dropdown-cart">
          <a href="#!" class="dropdown-toggle" role="button" aria-expanded="false">
            <i class="fa fa-shopping-cart"></i>
          </a>
          <div class="dropdown-menu" style="width: 300px;">
            <div class="row youplay-side-news">
              <div class="col-xs-3 col-md-4">
                <a href="#" class="angled-img">
                  <div class="img">

                    <img src="assets/images/game-bloodborne-500x375.jpg" alt="">
                  </div>
                </a>
              </div>
              <div class="col-xs-9 col-md-8">
                <a href="#" style="text-decoration: none;" class="pull-right mr-10"><i class="fa fa-times"></i></a>

                <h4 class="ellipsis"><a href="#">Bloodborne</a></h4>
                <span class="quantity">1 × <span class="amount">$50.00</span></span>
              </div>
            </div>

            <div class="row youplay-side-news">
              <div class="col-xs-3 col-md-4">
                <a href="#" class="angled-img">
                  <div class="img">

                    <img src="assets/images/game-kingdoms-of-amalur-reckoning-500x375.jpg" alt="">
                  </div>
                </a>
              </div>
              <div class="col-xs-9 col-md-8">
                <a href="#" style="text-decoration: none;" class="pull-right mr-10"><i class="fa fa-times"></i></a>

                <h4 class="ellipsis"><a href="#">Kingdoms of Amalur</a></h4>
                <span class="quantity">1 × <span class="amount">$20.00</span></span>
              </div>
            </div>

            <div class="ml-20 mr-20 pull-right"><strong>Subtotal:</strong>  <span class="amount">$70.00</span>
            </div>

            <div class="btn-group pull-right m-15">
              <a href="#" class="btn btn-default btn-sm">View Cart</a>
              <a href="#" class="btn btn-default btn-sm">Checkout</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- /Navbar -->

Content

Content consists of page banner, page's main body and social block with footer. HTML code of Content container as shown below:
<!-- Main Content -->
<section class="content-wrap">

  <!-- Banner -->
  <div class="youplay-banner banner-top youplay-banner-parallax">
    ...
  </div>
  <!-- /Banner -->


  <div class="container youplay-content">
    ...
  </div>

  <!-- Footer -->
  <footer>
    <div class="wrapper">

      <!-- Social Buttons -->
      <div class="social">
        ...
      </div>
      <!-- /Social Buttons -->

      <!-- Copyright -->
      <div class="copyright">
        ...
      </div>
      <!-- /Copyright -->

    </div>
  </footer>
  <!-- /Footer -->

</section>
<!-- /Main Content -->

Banner

Banner code below:
<!-- Banner -->
<div class="youplay-banner banner-top youplay-banner-parallax">
  <div class="image" style="background-image: url('assets/images/banner-blog-bg.jpg')">
  </div>

  <div class="info">
    <div>
      <div class="container">
        <h2>Blank Page</h2>
      </div>
    </div>
  </div>
</div>
<!-- /Banner -->

Footer

Footer contains Social block and Copyright section. See code below:
<!-- Footer -->
<footer class="youplay-footer-parallax">
  <div class="wrapper" style="background-image: url('assets/images/footer-bg.jpg')">

    <!-- Social Buttons -->
    <div class="social">
      <div class="container">
        <h3>Connect socially with <strong>youplay</strong></h3>

        <div class="row icons">
          <div class="col-xs-6 col-sm-3">
            <a href="#!">
              <i class="fa fa-facebook-square"></i>
              <span>Like on Facebook</span>
            </a>
          </div>
          <div class="col-xs-6 col-sm-3">
            <a href="#!">
              <i class="fa fa-twitter-square"></i>
              <span>Follow on Twitter</span>
            </a>
          </div>
          <div class="col-xs-6 col-sm-3">
            <a href="#!">
              <i class="fa fa-google-plus-square"></i>
              <span>Follow on Google+</span>
            </a>
          </div>
          <div class="col-xs-6 col-sm-3">
            <a href="#!">
              <i class="fa fa-youtube-square"></i>
              <span>Watch on Youtube</span>
            </a>
          </div>
        </div>

      </div>
    </div>
    <!-- /Social Buttons -->

    <!-- Copyright -->
    <div class="copyright">
      <div class="container">
        <strong>nK</strong> © 2016. All rights reserved
      </div>
    </div>
    <!-- /Copyright -->

  </div>
</footer>
<!-- /Footer -->

Search Block

Search Block contains big search input. HTML code as shown below:
Search Block
<!-- Search Block -->
<div class="search-block">
  <a href="#!" class="search-toggle glyphicon glyphicon-remove"></a>
  <form action="search.html">
    <div class="youplay-input">
      <input type="text" name="search" placeholder="Search...">
    </div>
  </form>
</div>
<!-- /Search Block -->

Page End

End of page contains JavaScript codes. This is blank example without additional plugins:
<!-- jQuery -->
<script type="text/javascript" src="../assets/plugins/jquery/jquery.min.js"></script>

<!-- Bootstrap -->
<script type="text/javascript" src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>

<!-- Jarallax -->
<script type="text/javascript" src="../assets/plugins/jarallax/jarallax/jarallax.js"></script>

<!-- youplay -->
<script type="text/javascript" src="../assets/youplay/js/youplay.min.js"></script>

<!-- init youplay -->
<script>
  youplay.init();
</script>

Fonts

Youplay uses Play font from Google fonts. Loaded in header.
<link href='http://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>

Demos

Youplay comes with 4 demos: Dark, Shooter, Anime and Light

To setup a selected theme use template from one of foldes: dark/, shooter/, anime/ or light/

Contact Form

Youplay have working AJAX contact form. You can check demo on this page contact.html. This is form HTML code:
<form action="contact.php" method="POST" role="form" class="youplay-form-ajax" data-toggle="validator">
    <div class="row">
        <div class="col-md-6">
            <div class="youplay-input form-group">
                <input type="text" name="name" placeholder="Name" required>
            </div>
        </div>
        <div class="col-md-6">
            <div class="youplay-input form-group">
                <input type="email" name="email" placeholder="Email" required>
            </div>
        </div>
    </div>
    <div class="youplay-textarea form-group">
        <textarea name="message" placeholder="Message" rows="5" required></textarea>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>
Before start, you need to configure contact.php file. First of all you need to add your email:
$to = '<your email here>';
Next step - remove demo cap:
// remove it if your php finally configured
die('This is demo message from PHP');
Thats all. Your form now ready to use.

New Page

To create a new page, you can use dark/blank.html, shooter/blank.html, anime/blank.html or light/blank.html which provides basic page layout with ALL plugins.

SASS

Youplay uses SASS for development. You can change predefined colors in files: scss/_variables.scss, scss/_variables-shooter.scss, scss/_variables-anime.scss or for light version scss/_variables-light.scss.

Main file for compile SCSS:
  • Dark: scss/youplay.scss
  • Shooter: scss/youplay-shooter.scss
  • Anime: scss/youplay-anime.scss
  • Light: scss/youplay-light.scss
All references see in folder scss/parts/

RTL

To enable RTL support uncomment code in <head> section.

<!-- RTL (uncomment line before this to enable RTL support) -->
<!-- <link rel="stylesheet" type="text/css" href="../assets/youplay/css/youplay-rtl.css" /> -->

Instagram

Since 3.0 version, youplay comes with instagram widget. To configure it, see file php/instagram/config.php

Twitter

Since 3.0 version, youplay comes with twitter widget. To configure it, see file php/twitter/config.php

Plugins Usage

Choose plugin:

FontAwesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Plugin Page: http://fortawesome.github.io/Font-Awesome/

CSS Files:
<link rel="stylesheet" type="text/css" href="../assets/plugins/fontawesome/css/font-awesome.min.css" />
JavaScript Files:
No JavaScript
Usage Example:
<i class="fa fa-html5"></i>

Owl Carousel 2

Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

Plugin Page: http://www.owlcarousel.owlgraphic.com/

CSS Files:
<link rel="stylesheet" type="text/css" href="../assets/plugins/owl.carousel/owl.carousel.css" />
JavaScript Files:
<script type="text/javascript" src="../assets/plugins/owl.carousel/owl.carousel.min.js"></script>
Usage Example:
<div class="youplay-carousel">
  <a class="angled-img" href="store-product-1.html">
    <div class="img">
      <img src="assets/images/game-bloodborne-500x375.jpg" alt="">
    </div>
    <div class="over-info">
      <div>
        <div>
          <h4>Bloodborne</h4>
          <div class="rating">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
          </div>
        </div>
      </div>
    </div>
  </a>
  <a class="angled-img" href="#!">
    <div class="img">
      <img src="assets/images/game-dark-souls-ii-500x375.jpg" alt="">
    </div>
    <div class="over-info">
      <div>
        <div>
          <h4>Dark Souls II</h4>
          <div class="rating">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star-half-o"></i>
          </div>
        </div>
      </div>
    </div>
  </a>
</div>

jQuery Countdown

A simple and html agnostic date countdown plugin for jQuery

Plugin Page: http://hilios.github.io/jQuery.countdown/

CSS Files:
No CSS
JavaScript Files:
<script type="text/javascript" src="../assets/plugins/jquery.coundown/jquery.countdown.min.js"></script>
Usage Example:
<div class="countdown h2" data-end="2015/06/01"></div>

<script type="text/javascript">
  $(".countdown").each(function() {
      $(this).countdown($(this).attr('data-end'), function(event) {
          $(this).html(
              event.strftime([
                  '<div class="row">',
                      '<div class="col-xs-6 col-sm-3">',
                          '<span>Days</span>',
                          '<span><span>%D</span></span>',
                      '</div>',
                      '<div class="col-xs-6 col-sm-3">',
                          '<span>Hours</span>',
                          '<span><span>%H</span></span>',
                      '</div>',
                      '<div class="col-xs-6 col-sm-3">',
                          '<span>Minutes</span>',
                          '<span><span>%M</span></span>',
                      '</div>',
                      '<div class="col-xs-6 col-sm-3">',
                          '<span>Seconds</span>',
                          '<span><span>%S</span></span>',
                      '</div>',
                  '</div>'
              ].join(''))
          );
      });
  })
</script>

Magnific Popup

A simple and html agnostic date countdown plugin for jQuery

Plugin Page: http://dimsemenov.com/plugins/magnific-popup/

CSS Files:
<link rel="stylesheet" type="text/css" href="../assets/plugins/magnific-popup/magnific-popup.css" />
JavaScript Files:
<script type="text/javascript" src="../assets/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
Usage Example:
<!-- Image Popup -->
<a href="assets/images/game-kingdoms-of-amalur-reckoning-1440x900.jpg" class="angled-img image-popup">
  <div class="img">
    <img src="assets/images/game-kingdoms-of-amalur-reckoning-500x375.jpg" alt="">
  </div>
  <i class="fa fa-search-plus icon"></i>
</a>
<!-- Image Popup -->

<!-- Video Popup -->
<a href="http://www.youtube.com/watch?v=1nKW9kTjsps" class="angled-img pull-left video-popup">
  <div class="img">
    <img src="assets/images/game-bloodborne-500x375.jpg" alt="">
  </div>
  <i class="fa fa-play icon"></i>
</a>
<!-- /Video Popup -->

<!-- Gallery Popup -->
<div class="gallery-popup">
  <a href="assets/images/game-kingdoms-of-amalur-reckoning-2-1940x1185.jpg" class="angled-img pull-left">
    <div class="img">
      <img src="assets/images/game-kingdoms-of-amalur-reckoning-2-500x375.jpg" alt="">
    </div>
    <i class="fa fa-search-plus icon"></i>
  </a>
  <a href="assets/images/game-kingdoms-of-amalur-reckoning-3-1920x1080.jpg" class="angled-img pull-left">
    <div class="img">
      <img src="assets/images/game-kingdoms-of-amalur-reckoning-3-500x375.jpg" alt="">
    </div>
    <i class="fa fa-search-plus icon"></i>
  </a>
</div>
<!-- /Gallery Popup -->

Revolution Slider

Slider Revolution is an all-purpose slide displaying solution that allows for showing almost any kind of content with highly customizable, transitions, effects and custom animations.

Plugin Page: http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848

CSS Files:
<link rel="stylesheet" type="text/css" href="../assets/plugins/slider-revolution/examples&source/rs-plugin/css/settings.css" />
JavaScript Files:
<script type="text/javascript" src="../assets/plugins/slider-revolution/examples&source/rs-plugin/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="../assets/plugins/slider-revolution/examples&source/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
Usage Example:
<!-- Slider Revolution-->
<!--
    Use classes:
    rs-fullscreen
-->
<div class="tp-banner-container rs-youplay">
  <div class="tp-banner">
    <ul>
      <!-- SLIDE NR. 1  -->
      <li data-thumb="assets/images/game-dark-souls-ii-500x375.jpg" data-saveperformance="on" data-transition="random-static" data-slotamount="7" data-masterspeed="700">
        <!-- MAIN IMAGE -->
        <img src="assets/images/dummy.png" alt="" data-lazyload="assets/images/game-dark-souls-ii-1920x1080.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
        <!-- LAYERS -->

        <!-- LAYER NR. 1 -->
        <div class="tp-caption customin customout" href="#!" data-x="left" data-hoffset="60" data-y="center" data-voffset="-60" data-customin="x:0;" data-customout="x:0;" data-start="0" data-speed="500" data-endspeed="500">
          <h2 class="h1">Dark Souls II</h2>
        </div>

        <!-- LAYER NR. 2 -->
        <div class="tp-caption customin customout" href="#!" data-x="left" data-hoffset="60" data-y="center" data-voffset="60" data-customin="x:0;" data-customout="x:0;" data-start="0" data-speed="500" data-endspeed="500">
          <a class="btn btn-lg" href="#!">$39.99</a>
        </div>
      </li>

      <!-- SLIDE NR. 2  -->
      <li data-thumb="assets/images/game-dark-souls-ii-2-500x375.jpg" data-saveperformance="on" data-transition="random-static" data-slotamount="7" data-masterspeed="700">
        <!-- MAIN IMAGE -->
        <img src="assets/images/dummy.png" alt="" data-lazyload="assets/images/game-dark-souls-ii-2-1920x1248.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
        <!-- LAYERS -->

        <!-- LAYER NR. 1 -->
        <div class="tp-caption customin customout" href="#!" data-x="left" data-hoffset="60" data-y="center" data-voffset="-60" data-customin="x:0;" data-customout="x:0;" data-start="0" data-speed="500" data-endspeed="500">
          <h2 class="h1">Dark Souls II</h2>
        </div>

        <!-- LAYER NR. 2 -->
        <div class="tp-caption customin customout" href="#!" data-x="left" data-hoffset="60" data-y="center" data-voffset="60" data-customin="x:0;" data-customout="x:0;" data-start="0" data-speed="500" data-endspeed="500">
          <a class="btn btn-lg" href="#!">$39.99</a>
        </div>
      </li>

      <!-- SLIDE NR. 3  -->
      <li data-thumb="assets/images/game-dark-souls-ii-3-500x375.jpg" data-saveperformance="on" data-transition="random-static" data-slotamount="7" data-masterspeed="700">
        <!-- MAIN IMAGE -->
        <img src="assets/images/dummy.png" alt="" data-lazyload="assets/images/game-dark-souls-ii-3-1920x1080.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
        <!-- LAYERS -->

        <!-- LAYER NR. 1 -->
        <div class="tp-caption customin customout" href="#!" data-x="left" data-hoffset="60" data-y="center" data-voffset="-60" data-customin="x:0;" data-customout="x:0;" data-start="0" data-speed="500" data-endspeed="500">
          <h2 class="h1">Dark Souls II</h2>
        </div>

        <!-- LAYER NR. 2 -->
        <div class="tp-caption customin customout" href="#!" data-x="left" data-hoffset="60" data-y="center" data-voffset="60" data-customin="x:0;" data-customout="x:0;" data-start="0" data-speed="500" data-endspeed="500">
          <a class="btn btn-lg" href="#!">$39.99</a>
        </div>
      </li>
    </ul>
    <div class="tp-bannertimer"></div>
  </div>
</div>
<!-- /Slider Revolution-->

Isotope

Filter & sort magical layouts

Plugin Page: http://isotope.metafizzy.co/

CSS Files:
No CSS
JavaScript Files:
<script type="text/javascript" src="../assets/plugins/isotope/isotope.pkgd.min.js"></script>
Usage Example:
<div class="isotope">
  <!-- Sort Categories -->
  <ul class="pagination isotope-options">
    <li data-filter="all" class="active"><span>All</span>
    </li>
    <li data-filter="free"><span>Free</span>
    </li>
    <li data-filter="popular"><span>Popular</span>
    </li>
    <li data-filter="specials"><span>Specials</span>
    </li>
  </ul>
  <!-- /Sort Categories -->

  <div class="isotope-list row">

    <!-- Single Product Block -->
    <div class="item col-lg-4 col-md-6 col-xs-12" data-filters="popular">
      <a href="#!" class="angled-img">
        <div class="img img-offset">
          <img src="assets/images/game-bloodborne-500x375.jpg" alt="">
        </div>
        <div class="bottom-info">
          <h4>Bloodborne</h4>
          <div class="row">
            <div class="col-xs-6">
              <div class="rating">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
              </div>
            </div>
            <div class="col-xs-6">
              <div class="price">
                $50.00
              </div>
            </div>
          </div>
        </div>
      </a>
    </div>
    <!-- /Single Product Block -->

    <!-- Single Product Block -->
    <div class="item col-lg-4 col-md-6 col-xs-12" data-filters="popular,specials">
      <a href="#!" class="angled-img">
        <div class="img img-offset">
          <img src="assets/images/game-dark-souls-ii-500x375.jpg" alt="">
          <div class="badge show-half bg-default">-20%</div>
        </div>
        <div class="bottom-info">
          <h4>Dark Souls II</h4>
          <div class="row">
            <div class="col-xs-6">
              <div class="rating">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-half-o"></i>
              </div>
            </div>
            <div class="col-xs-6">
              <div class="price">
                $39.99 <sup><del>$49.99</del></sup>
              </div>
            </div>
          </div>
        </div>
      </a>
    </div>
    <!-- /Single Product Block -->

    <!-- Single Product Block -->
    <div class="item col-lg-4 col-md-6 col-xs-12" data-filters="Free">
      <a href="#!" class="angled-img">
        <div class="img img-offset">
          <img src="assets/images/game-kingdoms-of-amalur-reckoning-500x375.jpg" alt="">
        </div>
        <div class="bottom-info">
          <h4>Kingdoms of Amalur</h4>
          <div class="row">
            <div class="col-xs-6">
              <div class="rating">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
              </div>
            </div>
            <div class="col-xs-6">
              <div class="price">
                $20.00
              </div>
            </div>
          </div>
        </div>
      </a>
    </div>
    <!-- /Single Product Block -->
  </div>
</div>

End of Documentation

Thanks for purchasing Youplay. I hope you will enjoy using it for your next project.