Untitled

<!DOCTYPE html>
<html>
<head>
	<title>m & i apartments</title>
	<link rel="stylesheet" type="text/css" href="./css/style.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>

<header id="showcase">
    <h1>M & I Apartments</h1>
</header>
<div id="mySidenav" class="sidenav">
  <a href="#" id="about">About</a>
  <a href="#" id="blog">Blog</a>
  <a href="#" id="projects">Projects</a>
  <a href="#" id="contact">Contact</a>
</div>
<div id="MySocial" class="social">
  <a href="#" id="Facebook"><i class="fab fa-facebook-f"></i></a>
  <a href="#" id="Twitter"> <i class="fab fa-twitter"></i></a>
  <a href="#" id="Google"> <i class="fab fa-google-plus-g"></i></a>

</div>
<div id="content" class="container">
   The best apartments for your stay in Skopje,Maceddonia  <!-- <i class="fas fa-hand-holding-heart" style="color: white "></i> -->
</div>
<a href="tel:+38979215507" class="btn">+389 79 215 507</a>
 <footer>Coded with <i class="fas fa-heart" style="color: red"></i> by G.A.Krstanoska</footer>
</body>
</html>

  *{
  	margin: 0;
  	padding: 0;
  }

   body{

    font-family: Arial, Helvetica, sans-serif;
    background-image: url("http://www.dronestagr.am/wp-content/uploads/2015/06/Skopje-od-gore-1-1200x674.jpg");
    line-height: 1.6;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}
.container{
    max-width: 960px;
    margin: auto;
    padding: 0 30px;
}
#showcase{
    height: 300px;
}
#showcase h1{
font-size: 50px;
line-height: 1.3;
position: relative;
animation-name: heading;
animation-duration: 3s;
animation-fill-mode: forwards;
color: #A67C00;

}
@keyframes heading{
0% {top: -50px;}
100% {top:200px;}


}
#content{
position: relative;
animation-name: content;
animation-duration: 3s;
animation-fill-mode: forwards;
color: #E5C667;
font-size: 20px;

}
@keyframes content {
  0% {right: -1000px;}
  100% {right:  0;}


}
.btn{
    display: inline-block;
    color:white;
    text-decoration: none;
    padding: 1rem 2rem;
    border:#E5C667 2px solid;
    margin-top: 40px;
    opacity: 0;
    animation-name: btn;
    animation-duration: 3s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    font-size: 20px;

    transition-property: transform;
    transition-duration: 1s;
}
.btn:hover{
    transform: rotateY(180deg);
}
@keyframes btn{
  0% {opacity:0}
  100%{opacity: 1}

}
/*nav*/
#mySidenav a {
    position: absolute; /* Position them relative to the browser window */
    left: -50px; /* Position them outside of the screen */
    transition: 0.3s; /* Add transition on hover */
    padding: 15px; /* 15px padding */
    width: 100px; /* Set a specific width */
    text-decoration: none; /* Remove underline */
    font-size: 20px; /* Increase font size */
    text-align: right;
    color: white; /* White text color */
    border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}

#mySidenav a:hover {
    left: 0;
     /* On mouse-over, make the elements appear as they should */
     opacity: 0.5;
}

/* The about link: 20px from the top with a green background */
#about {
    top: 240px;
    background-color:#E5C667 ;
}

#blog {
    top: 290px;
    background-color: #A67C00; /* Blue */
}

#projects {
    top: 340px;
    background-color:#E5C667; /* Red */
}

#contact {
    top: 390px;
    background-color:#A67C00; /* Light Black */
}

footer{
	color: white;
	text-align: center;
	margin-bottom: 0;
	margin-top: 150px;
}
#MySocial a {
    position: fixed; /* Position them relative to the browser window */
    right: -70px; /* Position them outside of the screen */
    transition: 0.3s; /* Add transition on hover */
    padding: 15px; /* 15px padding */
    width: 100px; /* Set a specific width */
    text-decoration: none; /* Remove underline */
    font-size: 15px; /* Increase font size */
    text-align: left;
    color: white; /* White text color */
    border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}

#MySocial a:hover {
    right:  0;
     /* On mouse-over, make the elements appear as they should */
     opacity: 0.5;
}

/* The about link: 20px from the top with a green background */
#Facebook {
    top: 500px;
    background-color: #3B5998;
}

#Twitter{
    top: 540px;
    background-color:#1DA1F2; /* Blue */
}

#Google{
    top: 580px;
    background-color:#DB4437; /* Red */
}