<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 class="container cont-container cont-small">
<nav class="navbar navbar-expand-sm fixed-top">
<a class="navbar-brand logo" href="#"><img class="navbar-brand" src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689824/logo_oihtey.png" style="height: 60px"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav d-flex ">
<li class="nav-item">
<a class="nav-link" href="#cont-games">Games</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cont-gallery">Gallery</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#cont-about">About</a>
</li>
</ul>
<div class="d-inline-flex ml-auto nav-social">
<a href="https://www.facebook.com/AntenaGames-110509330561115" target="_blank"><i class='fa fa-facebook' target="_blank" style='font-size:28px;'></i></a>
<a href="https://www.pinterest.com/antenagames10/" target="_blank"><i class='fa fa-pinterest' style='font-size:28px;'></i></a>
</div>
</div>
</nav>
</div>
< class="jumbotron jumbotron-fluid">
<img class="img-fluid" src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689824/background_n8uazh.png" >
</div>
/*********************************************************
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;
}
$(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
});
});
