<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 id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-expand-md fixed-top">
<a class="navbar-brand" href="#">BallBoy Games</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#game">Games</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#media">Social Media</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<div class="container-fluid">
<div class="header-content-inner">
<h1>Welcome to BallBoy Games</h1>
<h3>Play - Enjoy - Share</h3>
</div>
</div>
</div>
<section class="bg-about bg-section" id="about">
<div class="container-fluid">
<h1 class="container-h1">ABOUT</h1>
<div class="row">
<div class="col-sm-5">
<div class="hov-img">
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689870/gal_2_fygl3b.png" alt="BallBoy" class="hov-img-bottom img-fluid">
<a href="http://www.antenagames.com" target="_blank">
<div class="hov-img-top hov-img-slideup">
<div class="hov-img-text">
<h5>BallBoy</h5>
<p>It was a beautiful sunny day. BallBoy and his friend BallGirl enjoyed singing in the garden, when suddenly the sky darkened and strong noise filled the sky. Evil cubes suddenly appeared from neighbour village and kidnapped BallGirl. BallBoy was completely hopeless. .</p>
</div>
</div>
</a>
</div>
<div class="hov-img">
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689870/gal_1_ogatcw.png" alt="BallBoy" class="hov-img-bottom img-fluid">
<a href="http://www.antenagames.com" target="_blank">
<div class="hov-img-top hov-img-slideup">
<div class="hov-img-text">
<h5>BallBoy Plus</h5>
<p> BallBoy has to defeat evil cubes and save BallGirl. So help him on his mission. You can defeat evil cubes if the ball has the same color as evil cube when they collide.</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-sm-7">
<div class="row ">
<div class="about-antenagames slideanim">
<h3 class="section-heading">AntenaGames</h3>
<p class="about-history first">AntenaGames is small indie game studio based in Croatia. Founded in 2020, on a mission to make beautiful, fun and popular mobile games. The first game released was BallBoy, which belongs to franchise also called BallBoy, with game titles such as "BallBoy", "BallBoy Plus" and "BallBoy Plus". <br /> <br >
Building strong and loyal community with happy players that will come back to play our games is something that we really enjoy doing.
</p>
<button type="button" class="btn more" id="more" data-toggle="collapse" data-target="#demo">More</button>
<div id="demo" class="collapse">
<p class="about-history"> AntenaGames is small indie game studio based in Croatia. Founded in 2020, on a mission to make beautiful, fun and popular mobile games. The first game released was BallBoy, which belongs to franchise also called BallBoy, with game titles such as "BallBoy", "BallBoy Plus" and "BallBoy (...)". Building strong and loyal community with happy players that will come back to play our games is something that we really enjoy doing. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-games bg-section" id="game">
<div class="container-fluid">
<h1 class="container-h1">GAMES</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 slideanim">
<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>
<section class="bg-media bg-section" id="media">
<div class="container-fluid">
<h1 class="container-h1">SOCIAL MEDIA</h1>
<div class="row media-round-3 slideanim">
<div class="col-sm-4 text-center round">
<div class="media-round ">
<a href="https://www.facebook.com/AntenaGamesPlay/" target="_blank"><i class="fa fa-4x fa fa-facebook sr-icons"></i></a>
</div>
<h4>Facebook</h4>
<p>For more information please contact us.</p>
</div>
<div class="col-sm-4 text-center round">
<div class="media-round">
<a href="https://twitter.com/antenagames_com" target="_blank"><i class="fa fa-4x fa fa-twitter sr-icons"></i></a>
</div>
<h4>Twitter</h4>
<p>For more information please contact us</p>
</div>
<div class="col-sm-4 text-center round">
<div class="media-round ">
<a href="https://www.pinterest.com/antenagames10/" target="_blank"><i class="fa fa-4x fa fa-pinterest sr-icons"></i></a>
</div>
<h4>Pinterest</h4>
<p>For more information please contact us.</p>
</div>
</div>
<a href="#contact" class="btn">Contact us</a>
</div>
</section>
<section id="gallery" class="bg-gallery no-padding">
<div class="container-fluid">
<h3>Gallery</h3>
<hr class="hr-h3s">
<div class="row no-gutter gallery slideanim">
<div class="col-sm-4 portfolio-item">
<a href="https://www.facebook.com/pg/AntenaGamesPlay/photos/?ref=page_internal" class="portfolio-link" target="_blank">
<div class="caption">
<div class="caption-content">
<i class="fa fa-facebook fa-3x"></i>
</div>
</div>
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689870/gal_2_fygl3b.png" class="img-fluid
" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="https://www.facebook.com/pg/AntenaGamesPlay/photos/?ref=page_internal" class="portfolio-link" target="_blank">
<div class="caption">
<div class="caption-content">
<i class="fa fa-facebook fa-3x"></i>
</div>
</div>
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689870/gal_3_p7ekf9.png" class="img-fluid" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="https://www.facebook.com/pg/AntenaGamesPlay/photos/?ref=page_internal" class="portfolio-link" target="_blank">
<div class="caption">
<div class="caption-content">
<i class="fa fa-facebook fa-3x"></i>
</div>
</div>
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689870/gal_1_ogatcw.png" class="img-fluid" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="https://www.facebook.com/pg/AntenaGamesPlay/photos/?ref=page_internal" class="portfolio-link" target="_blank">
<div class="caption">
<div class="caption-content">
<i class="fa fa-facebook fa-3x"></i>
</div>
</div>
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689870/gal_6_iyj65r.png" class="img-fluid" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="https://www.facebook.com/pg/AntenaGamesPlay/photos/?ref=page_internal" class="portfolio-link" target="_blank">
<div class="caption">
<div class="caption-content">
<i class="fa fa-facebook fa-3x"></i>
</div>
</div>
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689824/c_pjdqi3.png" class="img-fluid" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="https://www.facebook.com/pg/AntenaGamesPlay/photos/?ref=page_internal" class="portfolio-link" target="_blank">
<div class="caption">
<div class="caption-content">
<i class="fa fa-facebook fa-3x"></i>
</div>
</div>
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689870/gal_4_j1twir.png" class="img-fluid" alt="">
</a>
</div>
</div>
<div class="row more-img">
<div class="to-gallery">
<h4>For more pictures visit us on</h4>
<div class="social-networks">
<a href="https://twitter.com/antenagames_com" target="_blank" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="https://www.facebook.com/AntenaGamesPlay/" target="_blank" class="facebook"><i class="fa fa-facebook"></i></a>
<a href="https://www.pinterest.com/antenagames10/" target="_blank" class="pinterest"><i class="fa fa-pinterest"></i></a>
</div>
</div>
</div>
</div>
</section>
<section class="bg-play" id="play">
<div class="container-fluid">
<h3>Download & Play</h3>
<hr class="hr-h3s">
<div class="row text-center slideanim thumbnail-row">
<div class="col-sm-4">
<div class="play">
<a href="https://play.google.com/store/apps/dev?id=8863209968855584140" target="_blank">
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689824/google-p_xrmgb1.png" class="" alt="googleplay" style="width:150px; height:50px">
</a>
<h5 class="">Google Play</h5>
<h6>AntenaGames</h6>
</div>
</div>
<div class="col-sm-4">
<div class="play">
<a href="https://www.amazon.com/s?rh=n%3A2350149011%2Cp_4%3AAntenaGames" target="_blank">
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1586535245/amazonico_tp3wtd.png" class="" alt="amazon appstore" style="width:80px; height: 80px">
</a>
<h5 class="">Amazon AppStore</h5>
<h6>AntenaGames</h6>
</div>
</div>
<div class="col-sm-4">
<div class="play">
<a href="https://play.google.com/store/apps/dev?id=8863209968855584140" target="_blank">
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689849/appstore_eq85ic.png" class="" alt="appstore" style="height:50px; width:150px;">
</a>
<h5 class="">AppStore</h5>
<h6>AntenaGames</h6>
</div>
</div>
</div>
</div>
</section>
<section class="bg-testimonials" id="testimonials">
<div class="container-fluid">
<h3 class="">What people say about our games</h3>
<hr class="hr-testimonials">
<div class="row slideanim">
<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>
<section class="bg-contact bg-section" id="contact">
<div class="container-fluid">
<h1 class="container-h1">Contact us</h1>
<div class="row slideanim">
<div class="col-md-6 col-sm-6 contact-left">
<div class="left-box">
<address class="contact">
<span class="span-contact">Call:</span>
<br>
www.antenagames.com
<br>
<span class="span-contact">Email:</span>
<br>
www.antenagames.com
<br>
<span class="span-contact">Visit:</span>
<br>
10 000, Zagreb Zagreb
<br>
Zagreb, Zagreb
<br>
Croatia
</address>
</div>
</div>
<div class="col-md-6 col-sm-6 contact-right" >
<form novalidate action="mailto:anttnew@gmmmail.com" name="frm" method="post">
<div class="form-group has-feedback">
<label class="sr-only">First name:</label>
<input type="text" name="name" class="form-control" placeholder="First name" required>
</div>
<div class="form-group has-feedback">
<label class="sr-only">Last name:</label>
<input type="text" name="surname" class="form-control" placeholder="Last name" required>
</div>
<div class="form-group has-feedback">
<label class="sr-only">Email:</label>
<input type="email" name="email" class="form-control" placeholder="Email" required>
</div>
<div class="form-group">
<label class="sr-only" name="comment" for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment" placeholder="Description"></textarea>
</div>
<div class="contact-buttons pull-left">
<input type="submit" name="submit" value="Send" />
<input type="reset" value="Reset" />
</div>
</form>
</div>
</div>
</div>
</section>
<footer class="-bg-footer" id="footer">
<div class="container-fluid">
<div class="row footer-align">
<div class="col-md-4 col-sm-4">
<h5>AntenaGames</h5>
<hr class="hr-foot">
<div class="footer-items">
<p class="footer">
AntenaGames is small indie game studio based in Croatia. Founded in 2020, on a mission to make beautiful, fun and popular mobile games.
</p>
<ul class="social-networks">
<a href="https://www.facebook.com/AntenaGamesPlay/" class="facebook" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="https://www.pinterest.com/antenagames10/" class="pinterest" target="_blank"><i class="fa fa-pinterest"></i></a>
<a href="https://twitter.com/antenagames_com" class="twitter" target="_blank"><i class="fa fa-twitter"></i></a>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-4">
<h5>Our contact</h5>
<hr class="hr-foot">
<div class="footer-items">
<address>
10 000 Zagreb, Zagreb
<br>
Zagreb, Zagreb
<br>
Croatia
<br>
<i class="fa fa-phone address"></i> www.antenagames.com
<br>
<i class="fa fa-fax address"></i> www.antenagames.com
<br>
<i class="fa fa-envelope address"></i> <a href="http://www.antenagames.com" target="_blank">www.antenagames.com</a>
</address>
</div>
</div>
<div class="col-md-4 col-sm-4">
<h5>Open hours</h5>
<hr class="hr-foot">
<div class="footer-items">
<ul>
<li>Mon-Fri: 08:00-16:00</li>
<li>Sat : Closed</li>
<li>Sun : Closed</li>
</ul>
</div>
</div>
</div>
</div>
<a class="to-top" href="#myPage" title="toTop">
<i class="fa fa-chevron-up"></i>
</a>
</footer>
<div class="footer-copyright">
<p>© 2020 Copyright <a href="http://www.antenagames.com" target="blank"> AntenaGames</a></p>
</div>
<script src="js/script.js"></script>
<script>
</script>
</body>
</html>
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;
}
.slideanim {
visibility: hidden;
}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
-moz-animation-name: slide;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
-moz-animation-duration: 1.5s;
visibility: visible;
}
@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%);
}
}
/* ******* Header + Navigation ******* */
.navbar {
background-color: orange;
border-color: rgb(51, 17, 0);
border-color: rgba(51, 17, 0, 0.2);
font-family: ;
font-weight: 700;
padding: 15px 0;
transition: padding .5s;
}
.navbar .navbar-brand {
color: #fff;
font-family: 'Leckerli One', cursive;
font-weight: 500;
text-transform: none;
font-size: 25px;
padding-left: 15px;
text-shadow: black 0.3em 0.3em 0.3em;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
color: #444;
transition: color 1s;
}
.navbar .navbar-nav {
padding-right: 50px;
}
.navbar .navbar-nav > li > a {
text-transform: uppercase;
font-weight: 600;
font-size: 16px;
color: #fff;
margin: auto 5px;
font-family: 'Leckerli One', cursive;
text-shadow: #222 0.2em 0.2em 0.2em;
}
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus:hover {
color: #444;
transition: color .3s;
}
.navbar .navbar-nav > li.active > a:hover,
.navbar .navbar-nav > li.active > a:focus:hover {
background-color: transparent;
}
.navbar.scrolled {
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
padding: 5px 0;
opacity: 0.9;
}
.jumbotron {
margin-bottom: 0px;
background-image: url(https://res.cloudinary.com/daa09eu5f/image/upload/v1586529783/500px1024px_gqyzzb.png);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
height: 700px;
}
.jumbotron .header-content-inner {
font-weight: 700;
text-transform: none;
margin-bottom: 0;
margin: 200px;
}
.jumbotron h1 {
font-size: 55px;
font-family: 'Leckerli One', cursive;
}
.jumbotron h3 {
font-size: 35px;
font-family: 'Leckerli One', cursive;
}
/* ******* About ******* */
.bg-about {
margin: auto 50px;
background-color: white;
}
#about h3 {
font-family: 'Leckerli One', cursive;
color: #ff6600;
}
#about .about-antenagames p {
padding: 20px 80px;
font-weight: 500;
font-family: 'Leckerli One', cursive;
font-size: 15px;
color: #777;
}
p.first::first-letter {
font-size: 150%;
color: orange;
}
#about h1 {
padding-top: 35px;
font-family: 'Leckerli One', cursive;
}
#about .image {
display: block;
width: 100%;
height: auto;
}
#about .hov-img * {
box-sizing: border-box;
}
#about .hov-img {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
#about .hov-img img {
max-width: 100%;
}
#about .hov-img-bottom {
display: block;
}
#about .hov-img-top {
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
#about .hov-img:hover .hov-img-top {
opacity: 1;
}
#about .hov-img-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
font-family: 'Leckerli One', cursive;
text-shadow: black .2em .2em .2em;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#about .hov-img-text p {
font-size: 15px;
line-height: 1.2em;
}
#about .hov-img-slideup {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
#about .hov-img:hover .hov-img-slideup {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
/* ******* GAMES ******* */
.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;
}
/* ******* Service ******* */
#media .media-round {
height: 100px;
width: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 8px solid orange;
text-align: center;
display: inline-block;
padding: 10px;
color: orange;
}
#media .media-round i {
color: orange;
}
#media h4 {
margin: 10px auto;
font-size: 20px;
color: #444;
font-weight: 700;
font-family: 'Leckerli One', cursive;
}
#media .round:hover .fa {
color: red;
transition: color 2s;
}
#media .round:hover .media-round {
border-color: red;
transition: border-color 2s;
}
#media p {
font-family: 'Leckerli One', cursive;
color: #444;
}
/* ******* Gallery ******* */
#gallery h3 {
font-family: 'Lato', sans-serif;
text-transform: none;
color: orage;
margin: 50px auto 10px auto;
font-weight: 700;
font-family: 'Leckerli One', cursive;
}
#gallery .gallery {
margin: 0px 80px;
}
#gallery .no-gutter > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
#gallery .caption-content {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
color: #f1f1f1;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
#gallery .portfolio-item:hover .caption-content {
bottom: 0;
height: 100%;
}
#gallery .caption-content .fa {
white-space: nowrap;
color: white;
font-size: 40px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#gallery .more-img {
margin: 0 80px;
background-color: orange
;
}
#gallery .more-img .to-gallery {
text-align: center;
text-transform: none;
color: #fff;
padding: 10px;
margin: 0px auto;
}
#gallery .more-img .to-gallery h4 {
text-transform: none;
color: #fff;
padding: 5px;
margin: auto;
font-size: 16px;
font-family: 'Leckerli One', cursive;
}
#gallery .more-img .social-networks .fa {
font-size: 20px;
margin: 5px 5px;
color: #fff;
}
#gallery .more-img .social-networks .fa:hover {
color: #ffc266;
}
/* ******* Our staff ******* */
#play .thumbnail-row {
margin: auto 60px;
}
#play h3 {
font-family: 'Leckerli One', cursive;
text-transform: none;
color: #444;
margin: 50px auto 10px auto;
}
#play img {
border-radius: ;
margin-bottom: 10px;
}
#play h5 {
color: #353535;
font-family: 'Leckerli One', cursive;
font-size: 18px;
}
#play h6 {
color: #555;
font-size: 16px;
font-family: 'Leckerli One', cursive;
}
#play img:hover {
box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.9);
transition: .3s;
}
/* ******* 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;
}
/* ******* Contact ******* */
#contact .form-group input,
#contact .form-group textarea {
border: 1px solid #000;
border-radius: 0;
font-family: 'Leckerli One', cursive;
}
#contact .form-group input:hover,
#contact .form-group textarea:hover {
border-color: #ababee;
box-shadow: 2px 2px 2px rgba(0,0,0, .2);
}
#contact .contact-buttons input,
#contact .contact-buttons input:focus {
color: #fff;
background-color: #182c39;
margin: 20px auto 40px auto;
border-radius: 0;
font-weight: 500;
padding: 10px;
border: 1px solid #182c39;
cursor: pointer;
font-family: 'Leckerli One', cursive;
}
#contact .contact-buttons input:hover {
color: #182c39;
background-color: #fff;
}
#contact .left-box {
background-color: orange;
margin: 0 20px;
font-size: 15px;
text-transform: none;
line-height: 1.8em;
font-weight: 500;
padding: 30px 50px;
color: #fff;
font-family: 'Leckerli One', cursive;
}
#contact .left-box .span-contact {
color: #fff;
font-weight: 700;
padding-right: 20px;
font-size: 17px;
}
/* ***** Footer ***** */
#footer {
background-color: orange;
color: white;
font-family: 'Leckerli One', cursive;
}
#footer ul {
list-style-type: none;
padding-left: 0;
line-height: 2.2;
}
#footer h5 {
font-size: 18px;
color: white;
margin-top: 40px;
margin-bottom: 10px;
text-transform: uppercase;
}
#footer a {
color: #aaa;
}
#footer a:hover,
#footer a:focus {
text-decoration: none;
color: white;
}
#footer .social-networks {
padding-top: 20px;
padding-bottom: 25px;
}
#footer .footer-items .fa {
font-size: 17px;
margin-bottom: 5px;
background-color: white;
color: #182c39;
border-radius: 50%;
padding-bottom: 25px;
height: 30px;
width: 30px;
text-align: center;
line-height: 31px;
text-decoration: none;
transition: color 1s;
}
#footer .footer-items {
margin: auto;
padding-left: 50px;
font-size: 15px;
}
#footer .fa-facebook:hover,
#footer .fa-instagram:hover {
border: 1px solid #fff;
color: #fff;
background-color: #182c39;
}
.footer-copyright {
background-color: #e67300;
}
.footer-copyright p {
text-align: center;
color: #fff;
font-size: 15px;
padding: 10px 0;
margin-bottom: 0;
font-family: 'Leckerli One', cursive;
}
#footer .hr-foot {
width: 80%;
margin: 10px auto;
border: 1px solid #fff;
}
#footer .to-top {
color: #fff;
font-size: 30px;
position: fixed;
right: 12px;
bottom: 12px;
height: 40px;
width: 40px;
text-decoration: none;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
background: rgba(0, 0, 0, 0.5);
background-repeat: no-repeat;
background-position: center;
}
#footer .to-top:hover {
background-color: #222;
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
/* Navbar scroll */
$(function(){
var nav = $('.navbar'),
doc = $(document),
win = $(window);
win.scroll(function() {
if (doc.scrollTop() > 80) {
nav.addClass('scrolled');
} else {
nav.removeClass('scrolled');
}
});
win.scroll();
});
/* ***** Btn More-Less ***** */
$("#more").click(function(){
var $this = $(this);
$this.toggleClass('more');
if($this.hasClass('more')){
$this.text('More');
} else {
$this.text('Less');
}
});
/* ***** Slideanim ***** */
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
/* ***** Smooth Scrolling ***** */
$(document).ready(function(){
$(".navbar a, #media a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
window.location.hash = hash;
});
}
});
/* ***** Scroll to Top ***** */
$(window).scroll(function() {
if ($(this).scrollTop() >= 300) {
$('.to-top').fadeIn(200);
} else {
$('.to-top').fadeOut(200);
}
});
$('.to-top').click(function() {
$('.body,html').animate({
scrollTop : 0
}, 500);
});
})
