<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>
<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%);
}
}
/* ***** 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;
}
