<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="BallBoy Games, Mobile Games, AntenaGames">
<meta name="author" content="A.K.">
<title>BallBoy</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Custom Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Leckerli+One" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="bg-games bg-section" id="game">
<div class="container-fluid">
<h1 class="container-h1"></h1>
<div class="row">
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#ballboy1">BallBoy</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#ballboy2">BallBoy Plus</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#ballboy3">BallBoy Up</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#ballboy4">BallBoy</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#ballboy5">BallBoy Plus</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#ballboy6">BallBoy Up</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="ballboy1" class="tab-pane fade show active">
<div class="row">
<div class="col-sm-7">
<ul class="list-group">
<li class="list-group-item">
<h4 class="list-group-item-heading">Graphics<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Level Design<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Fun to play<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star
</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">General rank<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star</p>
</li>
</ul>
</div>
<div class="col-sm-5">
<div class="right-cover">
<h3>BallBoy</h3>
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1586529886/1280X800_amazon_y5ihd4.png" class="img-fluid">
</div>
<div class="row">
<div class="play-game">
<a href="https://play.google.com/store/apps/dev?id=8863209968855584140" target="_blank" class="googleplay" title="Android">
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689824/google-p_xrmgb1.png" class="googleplay-img" style="height:40px; width:150px; padding-left:20px;" >
</a>
</div>
<div class="social-games ml-auto">
<a href="https://www.facebook.com/BallBoy-110497490561791/" target="_blank"><i class='fa fa-facebook' target="_blank" style='font-size:28px; padding-right:15px;'></i></a>
<a href="https://www.pinterest.com/antenagames10/" target="_blank"><i class='fa fa-pinterest' target="_blank" style='font-size:28px; padding-right:15px;'></i></a>
</div>
</div>
</div>
</div>
</div>
<div id="ballboy2" class="tab-pane fade">
<div class="row">
<div class="col-sm-7">
<ul class="list-group">
<li class="list-group-item">
<h4 class="list-group-item-heading">Graphics<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Level Design<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Fun to play<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star
</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">General rank<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star</p>
</li>
</ul>
</div>
<div class="col-sm-5">
<div class="right-cover">
<h3>BallBoy Plus</h3>
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1586529873/amazon_1_k9nw1y.png" class="img-fluid">
</div>
<div class="row">
<div class="play-game">
<a href="https://play.google.com/store/apps/dev?id=8863209968855584140" target="_blank" class="googleplay" title="Android">
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689824/google-p_xrmgb1.png" class="googleplay-img" style="height:40px; width:150px; padding-left:20px;" >
</a>
</div>
<div class="social-games ml-auto">
<a href="https://www.facebook.com/BallBoy-110497490561791/" target="_blank"><i class='fa fa-facebook' target="_blank" style='font-size:28px; padding-right:15px;'></i></a>
<a href="https://www.pinterest.com/antenagames10/" target="_blank"><i class='fa fa-pinterest' target="_blank" style='font-size:28px; padding-right:15px;'></i></a>
</div>
</div>
</div>
</div>
</div>
<div id="ballboy3" class="tab-pane fade">
<div class="row">
<div class="col-sm-7">
<ul class="list-group">
<li class="list-group-item">
<h4 class="list-group-item-heading">Graphics<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Level Design<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Fun to play<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star
</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">General rank<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star</p>
</li>
</ul>
</div>
<div class="col-sm-5">
<div class="right-cover">
<h3>BallBoy Up</h3>
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689893/bb_coming_soon_pgfwy2.png" class="menu-img img-fluid" alt="BallBoy Up">
</div>
<div class="row">
<div class="play-game">
<a href="https://play.google.com/store/apps/dev?id=8863209968855584140" target="_blank" class="googleplay" title="Android">
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689824/google-p_xrmgb1.png" class="googleplay-img" style="height:40px; width:150px; padding-left:20px;" >
</a>
</div>
<div class="social-games ml-auto">
<a href="https://www.facebook.com/BallBoy-110497490561791/" target="_blank"><i class='fa fa-facebook' target="_blank" style='font-size:28px; padding-right:15px;'></i></a>
<a href="https://www.pinterest.com/antenagames10/" target="_blank"><i class='fa fa-pinterest' target="_blank" style='font-size:28px; padding-right:15px;'></i></a>
</div>
</div>
</div>
</div>
</div>
<div id="ballboy4" class="tab-pane fade">
<div class="row">
<div class="col-sm-7">
<ul class="list-group">
<li class="list-group-item">
<h4 class="list-group-item-heading">Graphics<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Level Design<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Fun to play<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star
</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">General rank<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star</p>
</li>
</ul>
</div>
<div class="col-sm-5">
<div class="right-cover">
<h3>BallBoy</h3>
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689870/gal_6_iyj65r.png" class=" img-fluid" alt="BallBoy">
</div>
<div class="row">
<div class="play-game">
<a href="https://play.google.com/store/apps/dev?id=8863209968855584140" target="_blank" class="googleplay" title="Android">
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689824/google-p_xrmgb1.png" class="googleplay-img" style="height:40px; width:150px; padding-left:20px;" >
</a>
</div>
<div class="social-games ml-auto">
<a href="https://www.facebook.com/BallBoy-110497490561791/" target="_blank"><i class='fa fa-facebook' target="_blank" style='font-size:28px; padding-right:15px;'></i></a>
<a href="https://www.pinterest.com/antenagames10/" target="_blank"><i class='fa fa-pinterest' target="_blank" style='font-size:28px; padding-right:15px;'></i></a>
</div>
</div>
</div>
</div>
</div>
<div id="ballboy5" class="tab-pane fade">
<div class="row">
<div class="col-sm-7">
<ul class="list-group">
<li class="list-group-item">
<h4 class="list-group-item-heading">Graphics<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Level Design<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Fun to play<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star
</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">General rank<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star</p>
</li>
</ul>
</div>
<div class="col-sm-5">
<div class="right-cover">
<h3>BallBoy Plus</h3>
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689870/gal_4_j1twir.png" class="img-fluid" alt="BallBoy Plus">
</div>
<div class="row">
<div class="play-game">
<a href="https://play.google.com/store/apps/dev?id=8863209968855584140" target="_blank" class="googleplay" title="Android">
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689824/google-p_xrmgb1.png" class="googleplay-img" style="height:40px; width:150px; padding-left:20px;" >
</a>
</div>
<div class="social-games ml-auto">
<a href="https://www.facebook.com/BallBoy-110497490561791/" target="_blank"><i class='fa fa-facebook' target="_blank" style='font-size:28px; padding-right:15px;'></i></a>
<a href="https://www.pinterest.com/antenagames10/" target="_blank"><i class='fa fa-pinterest' target="_blank" style='font-size:28px; padding-right:15px;'></i></a>
</div>
</div>
</div>
</div>
</div>
<div id="ballboy6" class="tab-pane fade">
<div class="row">
<div class="col-sm-7">
<ul class="list-group">
<li class="list-group-item">
<h4 class="list-group-item-heading">Graphics<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Level Design<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">Fun to play<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star
</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">General rank<span class="badge pull-right">5*(Star)</span></h4>
<p class="list-group-item-text">5 Star - 4Star - 3Start - 2Star - 1Star</p>
</li>
</ul>
</div>
<div class="col-sm-5">
<div class="right-cover">
<h3>BallBoy Up</h3>
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689870/gal_3_p7ekf9.png" class="img-fluid" alt="BallBoy Up">
</div>
<div class="row">
<div class="play-game">
<a href="https://play.google.com/store/apps/dev?id=8863209968855584140" target="_blank" class="googleplay" title="Android">
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689824/google-p_xrmgb1.png" class="googleplay-img" style="height:40px; width:150px; padding-left:20px;" >
</a>
</div>
<div class="social-games ml-auto">
<a href="https://www.facebook.com/BallBoy-110497490561791/" target="_blank"><i class='fa fa-facebook' target="_blank" style='font-size:28px; padding-right:15px;'></i></a>
<a href="https://www.pinterest.com/antenagames10/" target="_blank"><i class='fa fa-pinterest' target="_blank" style='font-size:28px; padding-right:15px;'></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
/************* GENERAL *********/
html, body {
overflow-x: hidden;
font-family: 'Leckerli One', cursive;
width: 100%;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
a:hover,
a:focus {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-transform: none;
font-weight: 600;
font-family: 'Leckerli One', cursive;
text-align: center;
}
hr {
border-color: #ffc266;
border-width: 5px;
max-width: 100%;
}
.container-h1 {
text-align: center;
font-size: 50px;
font-weight: 700;
margin: 50px auto;
color: #333;
font-family: 'Leckerli One', cursive;
}
.btn,
.btn:focus {
color: #fff;
background-color: #182c39;
margin: 20px auto;
font-weight: 500;
display: table;
padding: 10px;
border: 1px solid #182c39;
margin-left:50%;
border-radius: 0;
}
.btn:hover,
.btn:focus {
color: #182c39;
background-color: transparent;
border: 1px solid #182c39;
}
.hr-h3s {
border: 3px solid #E94B3C;
width: 70px;
margin: 0 auto 35px auto;
}
textarea {
resize: none;
}
section {
align-items: center;
padding: 50px 60px;
}
.bg-section h2 {
font-family: 'Leckerli One', cursive;
text-transform: none;
margin: 50px 0;
padding: 25px 20px;
border-radius: 50px;
}
/********** GAME **************/
.bg-games {
margin: auto 50px;
}
#game .nav-pills {
background-color: orange;
border-color: transparent;
font-weight: 500;
color: #000;
margin: 25px;
}
#game .nav-pills > li > a,
#game .nav-pills > li > a:focus {
font-weight: 500;
font-size: 15px;
color: #fff;
border-radius: 0;
border: 1px solid #fff;
text-transform: uppercase;
font-family: 'Leckerli One', cursive;
}
#game .nav-pills > li > a:hover,
#game .nav-pills > li > a:focus:hover {
color: #fff;
background-color: #944743;
}
#game .nav-pills > li > a.active,
#game .nav-pills > li > a.active:focus {
background-color: #944743;
color: #fff;
}
#game .hr-menu {
border: 2px solid #182c39;
width: 100%;
}
#game .list-group-item {
background-color: transparent;
border: none;
border-bottom: 1px solid #555;
padding: 0 auto;
}
#game .tab-content .tab-pane h3 {
text-align: center;
font-family: 'Leckerli One', cursive;
}
#game .list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
#game .list-group-item:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
#game .list-group-item h4 {
text-align: left;
color: #944743;
text-transform: none;
font-size: 18px;
font-family: 'Leckerli One', cursive;
}
#game .list-group-item p {
text-align: left;
color: #585858;
font-weight: 500;
font-style: italic;
text-transform: none;
font-size: 14px;
font-family: 'Leckerli One', cursive;
}
#game .badge {
border-radius: 50px;
background-color: green;
font-size: 12px;
color: #fff;
}
#game .right-cover {
background-color: #fff;
color: orange;
text-shadow: #DC4C46 .1em .1em .1em;
padding: 10px;
text-transform: none;
}
