<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 ---------->
<!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-testimonials" id="testimonials">
<h2>AntenaGames ( <a href="http://www.antenagames.com/" target="_blank">antenagames.com</a> )</h2>
<div class="container-fluid">
<h3 class="">What people say about our games</h3>
<hr class="hr-testimonials">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ul>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<h4>This game is so addictive, great time killer, requires quick reaction times. Highly recommend.</h4>
<h5>Maria Fernandez</h5>
</div>
<div class="carousel-item">
<h4>Great. There are many interesting levels for user to play and it's addictive. This game helps me much to relax after a long time studying.</h4>
<h5>John Smith</h5>
</div>
<div class="carousel-item">
<h4>Simple but nice game. I have been playing this game many times.</h4>
<h5>Anna Andersson</h5>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</section>
</body>
</head>
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;
}
@keyframes slide {
0% {
opacity: 0;
transform: translateX(50%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
/* ******* Testimonials ******* */
#testimonials .hr-testimonials {
border: 1px solid #222;
width: 50%;
margin: 0 auto 35px auto;
font-family: 'Leckerli One', cursive;
}
#testimonials h3 {
color: #353535;
margin: 40px auto;
font-family: 'Leckerli One', cursive;
}
#testimonials .carousel {
float: none;
margin: auto;
}
#testimonials .carousel-indicators li {
border: 2px solid #182c39;
background-color: #fff;
height: 10px;
width: 10px;
border-radius: 50%;
}
#testimonials .carousel-indicators li.active {
border-color: #fff;
background-color: #182c39;
}
#testimonials .carousel-item h4 {
font-size: 18px;
line-height: 1.2em;
font-weight: 500;
padding-bottom: 20px;
font-family: 'Leckerli One', cursive;
color: #353535;
}
#testimonials .carousel-item h5 {
font-size: 15px;
font-weight: 500;
margin-bottom: 80px;
font-style: italic;
font-family: 'Leckerli One', cursive;
color: #555;
}
