<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>
<title>AntenaGames | Fun Mobile Games</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Indie game studio, Mobile games">
<meta name="author" content="A.K.">
<link rel="stylesheet" href="bootstrap-4/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
-->
<link rel="stylesheet" href="fontawesome-free-5.8.2/css/all.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Mali|Patrick+Hand" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="pagecontent">
<div id="cont-about" class="container-fluid cont cont-about" style="margin-top:50px; margin-bottom: 20px;">
<h2>About</h2>
<hr class="hr-class">
<div class="row about-content">
<!-- Nav pills -->
<div class="col-sm-3">
<ul class="nav nav-pills flex-column" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Antenagames</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Privacy Policy</a>
</li>
</ul>
</div>
<!-- Tab panes -->
<div class="col-sm-6">
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<div class="row about-box">
<h3 class="text-center">AntenaGames</h3>
<p>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>
<p>Founder & CEO<br />
A.K.</p>
</div>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<div class="row about-box">
<div class="row">
<h3 class="text-center">Contact</h3>
</div>
<div class="row">
<p>If you have any questions feel free to ask. :) <br></p>
<p>It's important that email has right title, so we can easily notice your question. <br>
(For example: Title: Problem-Ballboy-Android (and then you can describe your problem in
description.)),<br>
Problem-Ballboy-iOS (For iOS device),<br>
Question-AntenaGames (For general question about company, games, typically for media).</p>
<!--<br><p>For media: <br><a href="#"><span>games.com</span></a></p><br>-->
<br><p>Thank you for visiting AntenaGames website, we hope you like it. :)</p>
<br><p>Help & Support: <br><span>support@company.com</span></p>
</div>
</div>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<div class="row about-box menu-box-2">
<div class="row">
<h3 class="text-center">Privacy Policy</h3>
</div>
<div class="row">
<p>Last updated: </p>
<p>This Privacy Policy describes Our policies and procedures on the collection, use and disclosure of Your information when You use the Service and tells You about Your privacy rights and how the law protects You.</p>
<p>We use Your Personal data to provide and improve the Service. By using the Service, You agree to the collection and use of information in accordance with this Privacy Policy. <!-- This Privacy Policy is maintained by the <a href="https://www.freeprivacypolicy.com/free-privacy-policy-generator/">Free Privacy Policy Generator</a>.</p> -->
<p>This Privacy Policy describes Our policies and procedures on the collection, use and disclosure of Your information when You use the Service and tells You about Your privacy rights and how the law protects You.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3 right gray_img">
<div class="row">
<a href="https://www.facebook.com/AntenaGames-110509330561115" target="_blank"><img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689824/img_gray_rse8qf.png" class="img-fluid">
</a>
</div>
</div>
</div>
</div>
</body>
</html>
/*********************************************************
GENERAL
*********************************************************/
* {
font-family: 'Mali', cursive;
/* font-family: 'Roboto', sans-serif; */
}
a:hover,
a:focus {
text-decoration: none;
}
h2 {
text-transform: uppercase;
text-align: center;
font-weight: 700;
font-size: 40px;
color: #22aaee;
}
h3 {
text-align: center;
font-weight: 700;
color: #55aaee;
}
p {
color: #444;
}
hr {
width: 10%;
height: 5px;
background-color: yellow;
color: yellow;
padding: 0 auto;
margin: 0 auto 30px auto;
}
/*
.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%);
}
}
*/
.cont {
padding: 60px;
}
.navbar {
background-color: #55aaee;
}
.navbar-nav {
padding-left: 10%;
}
.navbar-nav li a {
font-size: 20px;
font-weight: 700;
color: #fff;
margin: auto 20px;
}
.navbar-nav li a:hover {
color: yellow;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.nav-social a {
padding-right: 30px;
}
.nav-social i{
color: white;
}
.nav-social i:hover {
color: yellow;
}
.navbar a.active{
color: yellow;
}
.navbar.scrolled {
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
padding: 5px 0;
opacity: 0.9;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.cont-small {
background-color: #ddeeff;
}
.carousel-inner img {
width: 100%;
}
.fa-bars {
color: white;
}
.fa-bars:hover,
.fa-bars.active {
color: yellow;
}
.cont-container {
background-color:;
}
#demo {
background-color: #efefef;
border:
}
.logo {
padding: 0 0 0 10px;
margin: 0;
}
.jumbotron {
background-color: #55aaee;
padding:0;
margin:0;
}
/**********************************************************
ABOUT
**********************************************************/
.cont-about {
background-color: #fff;
}
.cont-about .tab-content {
background-color: #fff;
}
.nav-pills > .nav-item a,
.nav-pills > .nav-item a:focus {
color: #fff;
text-align: center;
padding: 25px;
text-transform: uppercase;
font-size: 18px;
font-weight: 700;
background-color: #55aacc;
border-radius: 50px;
margin: 5px 0;
}
.nav-pills > .nav-item > a.active {
background-color: #2288bb;
}
.nav-pills > li > a:hover,
.nav-pills > li > a:focus:hover {
background-color: #2288bb;
}
.nav-pills > li > a.active ,
.nav-pills > li > a.active:focus {
background-color: #2288bb;
}
.menu-box-2 {
height: 485px;
overflow: auto;
}
.menu-box-2 {
padding:20px;
}
.gray_img img {
filter: grayscale(100%);
}
.gray_img img:hover {
filter: grayscale(0%);
}
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.to-top').fadeIn();
} else {
$('.to-top').fadeOut();
}
});
//Click event to scroll to top
$('.to-top').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
/***** Bootstrap JS Scrollspy *****/
$(document).ready(function(){
$('body').scrollspy({target: ".navbar", offset: 50});
});
/***** Navbar smaller scroll *****/
$(document).ready(function(){
var nav = $('.navbar'),
doc = $(document),
win = $(window);
win.scroll(function() {
if (doc.scrollTop() > 50) {
nav.addClass('scrolled');
} else {
nav.removeClass('scrolled');
}
});
win.scroll();
});
/***** Smooth Scrolling *****/
$(document).ready(function(){
// Add smooth scrolling to navbar a
$(".navbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
