Pfthb

/*essentials css */
body 
 margin: 0;
 padding: 0;
 font-family: 'Roboto', sans-serif;
 font-weight: 400;
 line-height: 1.43;
 color: #484848;
 max-width: 100%;
 overflow-x: hidden;

p 
 font-size: 16px;
 margin: 0;
 padding: 0;

a:link 
 font-size: 16px;
 text-decoration: none;

a:visited 
 text-decoration: none;

h1,h2,h3,h4,h5,h6,ul,ol,li
 margin: 0;
 padding: 0;

ul,ol
 list-style-type;

::selection 
 color: #fff;
 background-color: #333;

::-moz-selection 
 color: #fff;
 background-color: #333;



/*-----------Top-Nav-------- */
.top-nav 
	position: fixed;
	width: 100%;
	border-bottom: 1px solid #c9c9c9;
	float: left;
	display: block;
	height: 95px;
	background: #fff;
	z-index: 99999999999;

.top-nav .logo
	width: 100%;
 float: left;
 display: block;
 height: 95px;
 border-right: 1px solid #e9e9e9;

.top-nav .logo img 
	width: 100%;
	padding: 14px 0;
	transition: all .9s;
	-webkit-filter: grayscale(0%);

.top-nav .logo a:hover img 
 -webkit-filter: grayscale(100%);



/*-----------Top-Nav-Search-------- */
.top-nav .search-container 
 float: left;
 width:100%;
 display:block;
 padding:22px 0;

.top-nav form
 position:relative;
 display:block;

.top-nav input[type="text"] 
	width: 100%;
	background: #fff;
	padding: 10px 12px;
	border: 1px solid #e1e1e1;
	border-right: none;
	color: #888;
	font-size: 14px;
 height:42px;

.top-nav .search-container button 
	float: right;
	padding: 8px 15px;
	background: orange;
	font-size: 17px;
	height: 42px;
	border: none;
	cursor: pointer;
	position: absolute;
	right: 0;
	color: #fff;

.top-nav .search-container button:hover 
 background: #ccc;




/*-----------Top-Nav-Navigation-------- */
.navigation
	width: auto;
	float: right;
	display: block;

.top-nav ul 
	float: right;
	padding: 35px 0;
	margin: 0;
	width: auto;
	display: block;

.top-nav ul li 
	list-style: none;
	margin: 0 34px;
	display: inline-block;

.top-nav ul li a 
	color: #777;
	font-size: 16px;
	font-weight: 400;
	text-transform: capitalize;
	letter-spacing: .5px;
 transition: all .9s;

.top-nav ul li a:hover 
	color: orange;




/*-----------Slideshow----------- */
.slideshow-container 
 width: 100%;
 position: relative;
 margin: auto;
 float: left;
 display: block;
 margin-top: 94px;

.slideshow-container .slider-text
 width:100%;
 float:left;
 display:block;
 background:#008080;
 height:510px;


.slideshow-container .slider-text h1 
	color: #fff;
	font-weight: 400;
	text-align: center;
	width: 100%;
	display: block;
	font-size: 35px;
	font-weight: 600;
	position: absolute;
	top: 30%;

.slideshow-container .slider-text p 
	color: #fff;
	font-size: 17px;
	text-align: center;
	width: 100%;
	display: block;
	font-weight: 400;
	letter-spacing: 0.5px;
	position: absolute;
	top: 50%;

.slideshow-container .prev, .slideshow-container .next 
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 11px 18px;
	margin-top: -22px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 48px;
	height: 48px;
	width: 48px;
	background: rgba(0,0,0, 0.4);

.slideshow-container .next
 right: 16px;

.slideshow-container .prev
 left: 16px;

.slideshow-container .prev:hover, .slideshow-container .next:hover 
 background-color: rgba(0,0,0,1);
 text-decoration:none;



/*-----------Slideshow-dot----------- */
.dot-area
 width:100%;
 float:left;
 display:block;
 padding:20px 0;
 background:orange;

.dot-area .dot 
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 5px;
	background-color: #f9f9f9;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;

.dot-area .active, .dot-area .dot:hover 
 background-color: #008080;

.fade 
 -webkit-animation-name: fade;
 -webkit-animation-duration: 1.5s;
 animation-name: fade;
 animation-duration: 1.5s;


@-webkit-keyframes fade 
 from 
 opacity: .4
 
 to 
 opacity: 1
 

@keyframes fade 
 from 
 opacity: .4
 
 to 
 opacity: 1
 


@media only screen and (max-width: 300px) 
 .prev, .next,.text font-size: 11px



/*-----------your-name----------- */
.your-area
 width:100%;
 float:left;
 display:block;
 background:#003333;

.your-area h1
 padding:100px 0;
 font-size:34px;
 color:#fff;
 text-align: center;
 font-weight:600;

.your-area h1 span
 font-size:42px;
 text-transform:uppercase;

/* motto */

.row
position: : relation;
max-width: 970px;
height: :auto;
margin:0 auto;


@media all and (max-width:1000px)
.row
padding: 0 15px;
box-sizing: :border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;



#moto 
font-size: 48px;
font-weight: 300;
color:#484848;
padding: 60px 30px 10px;
letter-spacing: 0.8px;

#moto span
 color:#FFA500 !important;
 font-weight: 700;


/* Searchbar CSS */

#searchbar-wrapper
position:relative;
width: 100%;
height:auto;
margin-left: 30px;


 #searchbar
position:relative;
width: 100%;
height:auto;


#searchbar input
font-size: 19px;
outline: none;


#searchbar input [type="text"]
 padding:30px 15px;
 width: 770px;
 display: inline-block;
 border: 1px solid #ccc;


#searchbar input[type="text"]:focus
padding:19px 15px 17px;
border-bottom: 3px solid #FFA500;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition: all 0.3s ease;



#searchbar input[type="submit"]
 width:200px;
 display: inline-block;
 padding: 10px 0;
 border: none;
 color: #fff;
 background-color: #FFA500;
 cursor: pointer;
 transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;
 -moz-transition:all 0.3s ease;
 -o-transition: all 0.3s ease;
 border-top-right-radius: 3px;
 -moz-border-top-right-radius:3px;
 border-bottom-right-radius: 3px;
 -webkit-border-bottom-right-radius: 3px;
 -moz-border-bottom-right-radius: 3px;


#searchbar input[type="submit"]:hover
 background-color: #FFA500;

/*:::::::::::::::::Responsive Media Query:::::::::::::::::::*/

@media only screen and (max-width:1279px)
.top-nav ul li 
	margin: 0 20px;


@media only screen and (max-width:1023px)


@media only screen and (max-width:979px)
.top-nav 
	height: 70px;

.top-nav .logo 
	height: 70px;

.top-nav .search-container 
	padding: 13px 0;

.top-nav ul li a 
	font-size: 14px;
	letter-spacing: 0;

.top-nav ul 
	padding: 24px 0;

.slideshow-container 
	margin-top: 68px;

.slideshow-container .slider-text h1 
	width: 560px;
	font-size: 27px;

.slideshow-container .slider-text 
	height: 400px;


@media only screen and (max-width:899px)
.slideshow-container .slider-text p 
	max-width: 600px;

.top-nav ul li 
	margin: 0 15px;

.your-area h1 
	font-size: 18px;

.your-area h1 span
	font-size: 22px;


@media only screen and (max-width:799px)


@media only screen and (max-width:767px)
.top-nav 
	height: auto;

.top-nav .logo 
	height: auto;
 border:0;

.top-nav .logo img 
	width: 180px;
	margin: auto;
 display:block;

.top-nav .search-container 
	padding: 0;

.navigation 
	float: none;
	margin: auto;

.top-nav ul 
	float: none;
	padding: 12px 0;
	width: auto;
	display: table;
	margin: auto;

.top-nav input[type="text"] 
	height: 38px;

.top-nav .search-container button 
	height: 38px;

.slideshow-container 
	margin-top: 170px;

.slideshow-container .slider-text h1 
	width: 100%;
	padding: 0 90px;

.slideshow-container .slider-text p 
	max-width: 100%;
	padding: 0 90px;


@media only screen and (max-width:639px)


@media only screen and (max-width:599px)
.slideshow-container .slider-text h1 
	margin: 65px auto auto;


@media only screen and (max-width:479px)
.top-nav ul li 
	margin: 0 9px;

.slideshow-container .slider-text h1 
	padding: 0 85px;
 font-size: 16px;

.slideshow-container .slider-text p 
	padding: 0 78px;
 font-size:12px;

.slideshow-container .slider-text 
	height: 350px;

.slideshow-container .slider-text h1 
	margin: 100px auto auto;

.your-area h1 
	font-size: 13px;

.your-area h1 span 
	font-size: 14px;


@media only screen and (max-width:359px)
.top-nav ul li 
	margin: 0 5px;

!DOCTYPE html>
<html>

<head>
 <title>ElephantRoom</title>
 <meta charset="utf-8" />
 <meta name"viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
 <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,500" />
 <link rel="stylesheet" type="text/css" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
 <link rel="stylesheet" type="text/css" href="main.css" />
 <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 <!-- Top-NAV HTML-->
 <section class="top-nav">
 <div class="col-md-2 col-sm-2 col-xs-12">
 <div class="logo">
 <a href="index.php"><img src="logo.png" alt="ElephantRoom"/></a>
 </div>
 </div>
 <div class="col-md-4 col-sm-4 col-xs-12">
 <div class="search-container">
 <form action="/action_page.php">
 <input type="text" placeholder="Keywords.." name="search">
 <button type="submit">Search</button>
 </form>
 </div>
 </div>
 <div class="col-md-6 col-sm-6 col-xs-12">
 <div class="navigation">
 <ul>
 <li><a href="#">Become a Host</a></li>
 <li><a href="#">Help</a></li>
 <li><a href="#">Sign Up</a></li>
 <li><a href="#">Log In</a></li>
 </ul>
 </div>
 </div>
 </section>
 <section class="slideshow-container">
 <div class="mySlides fade">
 <div class="slider-text">
 <img src="img/slider-image1.jpg"/>
 <h1> why book an expensive hotel when you can book a cheap apartment</h1>
 <p>Lorem ipsum dolor sit amet, consecteur adipiscing<br/>
 elit. Donec venenatis bibendum nunc ut convallis. Suspendisse in nunc unterdum quam pellentesque.</p>
 </div>
 </div>
 <div class="mySlides fade">
 <div class="slider-text">
 <img src="img/slider-image2.jpg"/>
 <h1>We have you covered anywhere you go in Africa</h1>
 <p>Lorem ipsum dolor sit amet, consecteur adipiscing<br/>
 elit. Donec venenatis bibendum nunc ut convallis. Suspendisse in nunc unterdum quam pellentesque.</p>
 </div>
 </div>
 <div class="mySlides fade">
 <div class="slider-text">
 <img src="img/slider-image3.jpg"/>
 <h1> We believe in a world with no frontier</h1>
 <p>Lorem ipsum dolor sit amet, consecteur adipiscing</p>
 </div>
 </div>
 <a class="prev" onclick="plusSlides(-1)">❮</a>
 <a class="next" onclick="plusSlides(1)">❯</a>
 </section>
 <br>
 <section class="dot-area" style="text-align:center">
 <span class="dot" onclick="currentSlide(1)"></span>
 <span class="dot" onclick="currentSlide(2)"></span>
 <span class="dot" onclick="currentSlide(3)"></span>
 </section>

 <!-- Moto -->
 <div class="row">
 <h1 id="moto"><span>Are you ready?</span> Explore Africa<br /> on Elephant Room.</h1>
 </div>


 <!-- SEARCHBAR-->
 <div id="searchbar-wrapper">
 <div class="row">
 <form method="GET" action="index.html" ID="searchbar">
 <input type="text" name="destination" placeholder="Destination, city, address " />
 <input type="submit" name="search" value="Search" />

 </form>
 </div>
 </div>

 <!-- javascript import-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) 
 showSlides(slideIndex += n);

function currentSlide(n) 
 showSlides(slideIndex = n);

function showSlides(n) 
 var i;
 var slides = document.getElementsByClassName("mySlides");
 var dots = document.getElementsByClassName("dot");
 if (n > slides.length) slideIndex = 1
 if (n < 1) slideIndex = slides.length
 for (i = 0; i < slides.length; i++) 
 slides[i].style.display = "none";
 
 for (i = 0; i < dots.length; i++) 
 dots[i].className = dots[i].className.replace(" active", "");
 
 slides[slideIndex-1].style.display = "block";
 dots[slideIndex-1].className += " active";

</script>
</body>
</html>