<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>AnimeBnB</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="pageWrapper"> 
  <!-- ================ header css starts================== -->
  <header class="header">
    <div class="headerWrap clearfix">
      <div class="container">
        <div class="row">
          <div class="logoDiv"> <a class="logo" href="index.html"> <img width="173" height="20" src="images/logo.jpg" alt="ANIME BNB LOGO"> </a> </div>
          <div class="header-menu clearfix">
            <div class="menu-Items clearfix">
              <ul id="navigation" class="nav-main-menu clearfix">
                <li><a href="#">How It works</a></li>
                <li><a href="#">Listing</a></li>
                <li><a href="#">Login</a></li>
                <li class="btnMenu"><a href="#">Sign Up</a></li>
              </ul>
              <div class="toggleMenu"><i class="fa fa-bars"></i></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- ================ header css end================== --> 
  <!-- ================ page css starts================== -->
  <div class="site-content" id="pageItem">
    <section class="homeSlider">
      <div id="slidesCol" class="carousel slide" data-ride="carousel"> 
        
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active" style="background:url('images/animationbg11.jpg') no-repeat center top"> </div>
          <div class="item" style="background:url('images/animationbg21.jpg') no-repeat center top"></div>
        </div>
      </div>
      <div class="searchDiv">
        <h1>OKAERI MINNA SAN!</h1>
        <p>Search For Anime Places to stay all over the world</p>
        <div class="searchinput">
          <form>
            <span class="searchIcon"><i class="fa fa-search"></i></span>
            <input type="text" placeholder="Search For A Location">
            <button type="submit">Search</button>
          </form>
        </div>
      </div>
    </section>
    <section class="placesSection">
      <div class="container">
        <div class="row clearfix">
          <div class="col-md-12 col-xs-12">
            <h2>Popular Places</h2>
          </div>
          <div class="col-md-3 col-sm-6 col-xs-6">
            <div class="placeWrap"> <img src="images/japan1.jpg" width="500" height="500" alt="Japan">
              <div class="imgOverlay"><span><a href="#">Japan</a></span></div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 col-xs-6">
            <div class="placeWrap"> <img src="images/paris.jpg" width="500" height="500" alt="Paris">
              <div class="imgOverlay"><span><a href="#">Paris</a></span></div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 col-xs-6">
            <div class="placeWrap"> <img src="images/newyork1.jpg" width="500" height="500" alt="New York">
              <div class="imgOverlay"><span><a href="#">New York</a></span></div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 col-xs-6">
            <div class="placeWrap"> <img src="images/singapore1.jpg" width="500" height="500" alt="Singapore">
              <div class="imgOverlay"><span><a href="#">Singapore</a></span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="hotelsSection">
      <div class="container">
        <div class="row clearfix">
          <div class="col-md-12 col-xs-12">
            <div class="textPara">
              <h2>Large selection of otaku places to stay</h2>
              <p>We will introduce you to various otaku all over the world who offer a place to stay at their humble abode and help you find a suitable place to stay.</p>
            </div>
          </div>
        </div>
        <div class="hotelTab"> 
          
          <!-- Nav tabs -->
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#familyHomes" aria-controls="familyHomes" role="tab" data-toggle="tab">Family Homes</a></li>
            <li role="presentation"><a href="#singleRooms" aria-controls="singleRooms" role="tab" data-toggle="tab">Single Rooms</a></li>
            <li role="presentation"><a href="#withaView" aria-controls="withaView" role="tab" data-toggle="tab">With a View</a></li>
          </ul>
          
          <!-- Tab panes -->
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="familyHomes">
              <ul class="hotelListItems">
                <li>
                  <div class="himageWrap"><img src="images/hotel1.jpg" width="263" height="160" alt="Phasellus viverra nulla ut"></div>
                  <div class="hText">
                    <h5>Phasellus viverra nulla ut</h5>
                    <h6>Rome, Lazio, Italy</h6>
                    <span>4 People Stay</span> <a href="#">$ 300 Per Day</a> </div>
                </li>
                <li>
                  <div class="himageWrap"><img src="images/hotel2.jpg" width="263" height="160" alt="Phasellus viverra nulla ut"></div>
                  <div class="hText">
                    <h5>Phasellus viverra nulla ut</h5>
                    <h6>Rome, Lazio, Italy</h6>
                    <span>4 People Stay</span> <a href="#">$ 300 Per Day</a> </div>
                </li>
                <li>
                  <div class="himageWrap"><img src="images/hotel1.jpg" width="263" height="160" alt="Phasellus viverra nulla ut"></div>
                  <div class="hText">
                    <h5>Phasellus viverra nulla ut</h5>
                    <h6>Rome, Lazio, Italy</h6>
                    <span>4 People Stay</span> <a href="#">$ 300 Per Day</a> </div>
                </li>
                <li>
                  <div class="himageWrap"><img src="images/hotel3.jpg" width="263" height="160" alt="Phasellus viverra nulla ut"></div>
                  <div class="hText">
                    <h5>Phasellus viverra nulla ut</h5>
                    <h6>Rome, Lazio, Italy</h6>
                    <span>4 People Stay</span> <a href="#">$ 300 Per Day</a> </div>
                </li>
              </ul>
            </div>
            <div role="tabpanel" class="tab-pane" id="singleRooms">
            	<ul class="hotelListItems">
                <li>
                  <div class="himageWrap"><img src="images/hotel1.jpg" width="263" height="160" alt="Phasellus viverra nulla ut"></div>
                  <div class="hText">
                    <h5>Phasellus viverra nulla ut</h5>
                    <h6>Rome, Lazio, Italy</h6>
                    <span>4 People Stay</span> <a href="#">$ 300 Per Day</a> </div>
                </li>
                <li>
                  <div class="himageWrap"><img src="images/hotel2.jpg" width="263" height="160" alt="Phasellus viverra nulla ut"></div>
                  <div class="hText">
                    <h5>Phasellus viverra nulla ut</h5>
                    <h6>Rome, Lazio, Italy</h6>
                    <span>4 People Stay</span> <a href="#">$ 300 Per Day</a> </div>
                </li>
                <li>
                  <div class="himageWrap"><img src="images/hotel1.jpg" width="263" height="160" alt="Phasellus viverra nulla ut"></div>
                  <div class="hText">
                    <h5>Phasellus viverra nulla ut</h5>
                    <h6>Rome, Lazio, Italy</h6>
                    <span>4 People Stay</span> <a href="#">$ 300 Per Day</a> </div>
                </li>
                <li>
                  <div class="himageWrap"><img src="images/hotel3.jpg" width="263" height="160" alt="Phasellus viverra nulla ut"></div>
                  <div class="hText">
                    <h5>Phasellus viverra nulla ut</h5>
                    <h6>Rome, Lazio, Italy</h6>
                    <span>4 People Stay</span> <a href="#">$ 300 Per Day</a> </div>
                </li>
              </ul>
            </div>
            <div role="tabpanel" class="tab-pane" id="withaView">
            	<ul class="hotelListItems">
                <li>
                  <div class="himageWrap"><img src="images/hotel1.jpg" width="263" height="160" alt="Phasellus viverra nulla ut"></div>
                  <div class="hText">
                    <h5>Phasellus viverra nulla ut</h5>
                    <h6>Rome, Lazio, Italy</h6>
                    <span>4 People Stay</span> <a href="#">$ 300 Per Day</a> </div>
                </li>
                <li>
                  <div class="himageWrap"><img src="images/hotel2.jpg" width="263" height="160" alt="Phasellus viverra nulla ut"></div>
                  <div class="hText">
                    <h5>Phasellus viverra nulla ut</h5>
                    <h6>Rome, Lazio, Italy</h6>
                    <span>4 People Stay</span> <a href="#">$ 300 Per Day</a> </div>
                </li>
                <li>
                  <div class="himageWrap"><img src="images/hotel1.jpg" width="263" height="160" alt="Phasellus viverra nulla ut"></div>
                  <div class="hText">
                    <h5>Phasellus viverra nulla ut</h5>
                    <h6>Rome, Lazio, Italy</h6>
                    <span>4 People Stay</span> <a href="#">$ 300 Per Day</a> </div>
                </li>
                <li>
                  <div class="himageWrap"><img src="images/hotel3.jpg" width="263" height="160" alt="Phasellus viverra nulla ut"></div>
                  <div class="hText">
                    <h5>Phasellus viverra nulla ut</h5>
                    <h6>Rome, Lazio, Italy</h6>
                    <span>4 People Stay</span> <a href="#">$ 300 Per Day</a> </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="workSection">
      <div class="container">
        <div class="row clearfix">
          <div class="col-md-12 col-xs-12">
            <h2>How we work</h2>
            <ul class="workList">
              <li>
                <div class="wk_imagewrap"><i class="fa fa-search"></i></div>
                <p>Search For a Place</p>
              </li>
              <li>
                <div class="wk_imagewrap"><i class="fa fa-calendar"></i></div>
                <p>Choose date and book</p>
              </li>
              <li>
                <div class="wk_imagewrap"><i class="fa fa-briefcase"></i></div>
                <p>Pack your bags for an amazing experience</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </div>
  <!-- ================ page css end================== -->
  <footer class="siteFooter">
  <div class="subsCribeRow">
    <div class="container">
      <div class="row clearfix">
        <div class="col-md-12 col-xs-12">
        <h2>Subscribe us for daily updates about places</h2>
        <div class="searchinput">
          <form>
            <input type="text">
            <button type="submit">Subscribe</button>
          </form>
        </div>
        </div>
      </div>
    </div>
  </div>
<div class="copyRightDiv">
<div class="container">
  <div class="row clearfix">
    <div class="col-md-4 col-xs-12">© animebnb.com, all rights reserved</div>
    <div class="col-md-8 col-xs-12"><ul class="footerList"><li><a href="#">Home</a></li><li><a href="#">Search</a></li><li><a href="#">Listing</a></li><li><a href="#">Sign Up</a></li><li><a href="#">Login</a></li><li><a href="#">About</a></li></ul></div>
  </div>
</div>
</div>
</footer>
</div>
<!-- jQuery --> 
<script src="js/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/custom.js"></script>
</body>
</html>






@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Droid+Serif:400,700');
html { min-height: 100%; position: relative; }
* { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; }
body { height: 100%; margin: 0; font-family: 'Open Sans', sans-serif; }
a:focus, input:focus, textarea:focus, button:focus { outline:none; text-decoration:none; }
a:hover { color:#e53a40; text-decoration:none; }
img { max-width: 100%; height:auto; }
h1, h2, h3, h4, h5, h6 { font-weight:700; margin-top:0; color:#525252; }
h1 { font-size:40px; }
h2 { font-size:30px; }
h3 { font-size:26px; }
h4 { font-size:20px; }
h5 { font-size:18px; }
h6 { font-size:16px; }
p { line-height:24px; }
.pageWrapper { }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
/*header css start*/
.logoDiv { float:left; padding:27px 0; }
.header-menu { float:right; padding-top:17px;}
#navigation { z-index: 9999; padding-left:0; }
#navigation li { display:inline-block; vertical-align:top; margin-left:10px; }
#navigation li a { color:#696969; font-size:14px; font-weight:600; display:block; padding:10px 15px; transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; }
#navigation li a:hover, #navigation li.currentMenu a { color:#e53a40;}
.logoDiv .logo { display:block; }
.header { box-shadow: 1px 2px 3px #ccc; -moz-box-shadow: 1px 2px 3px #ccc; -o-box-shadow: 1px 2px 3px #ccc; -webkit-box-shadow: 1px 2px 3px #ccc; -ms-box-shadow: 1px 2px 3px #ccc; }
#navigation .btnMenu a{padding: 10px 35px; border:1px solid #b02d31; background:#e53a40; color:#fff;border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -o-border-radius:4px; -ms-border-radius:4px;}
#navigation .btnMenu a:hover{color:#fff; background:#b02d31;}
.toggleMenu { display:none; }
/*pagecss*/
.homeSlider{position:relative;}
.homeSlider:before{ left:0; right:0; top:0; bottom:0; content:''; position:absolute; z-index: 1; background:rgba(0,0,0,0.4);}
.searchDiv{position:absolute; z-index:2; top:30%; text-align:center; left:15px; right:15px; max-width:960px; width:100%;margin:auto;}
.searchDiv h1{font-weight:600; color:#fff; font-size:60px;}
.searchDiv p{color:#fff;font-weight:600; font-size:20px;}
.searchinput{ margin-top:30px; position:relative;}
.searchinput input{width:100%;font-size:16px; padding: 0 160px 0 40px; height:50px; border:none; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -o-border-radius:4px; -ms-border-radius:4px;}
.searchIcon{ display:block; position:absolute;  left:10px;top: 10px; font-size:20px; color:#6567a5}
.searchinput button{font-size:16px; width:151px; position:absolute; right:0; z-index:1; top:0; height:50px; border:none; color:#fff; background:#e53a40;border-radius:0 4px 4px 0; -moz-border-radius:0 4px 4px 0; -webkit-border-radius:0 4px 4px 0; -o-border-radius:0 4px 4px 0; -ms-border-radius:0 4px 4px 0;}
/*slider css*/
#slidesCol .item{ height:470px;}
.placesSection{ padding:40px 0;}
.placesSection h2{text-align:center; text-transform:uppercase; color:#e53a40; margin-bottom:30px;}
.placeWrap{position:relative;}
.placeWrap img{ border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -o-border-radius:4px; -ms-border-radius:4px; }
.imgOverlay{position:absolute; cursor:pointer; visibility:hidden; opacity:0;transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; left:0px; background:rgba(101,103,165,0.8); right:0; top:0; bottom:0;}
.imgOverlay span{ text-align:center; position:absolute; margin:auto; left:0; right:0;line-height: 24px; bottom:10px; width:165px; padding:6px 10px; background:#fff; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -o-border-radius:4px; -ms-border-radius:4px; display:block; font-size:20px; font-weight:600; color:#8d8d8d;}
.imgOverlay span a{color:#8d8d8d; text-transform:uppercase;}
.placeWrap:hover .imgOverlay{ visibility:visible; opacity:1;}
.hotelsSection{ background:#f5f8fb; padding:45px 0 55px;}
.textPara p{text-align:center; width:80%; margin:0 auto 15px; color:#88898a}
.textPara h2{text-align:center; text-transform:uppercase; color:#e53a40; margin-bottom:15px;}
.hotelTab .nav.nav-tabs {text-align: center; border:none;}
.hotelTab .nav-tabs > li {display: inline-block; float: none; margin-bottom: 0px;}
.hotelTab .nav-tabs > li a{ font-weight:600; font-size:16px; color:#6567a5;padding:8px 37px;border: 1px solid transparent; background:none; }
.hotelTab .nav-tabs > li.active a{ border:1px solid #858a8e; background:#adb3b9; color:#fff;border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -o-border-radius:4px; -ms-border-radius:4px;}
.hotelTab .nav-tabs > li.active a:hover{border:1px solid #858a8e; background:#adb3b9;   }
.hotelListItems{padding-left:0; margin-top:20px; list-style:none;}
.hotelListItems li{ margin-top:50px; width:49.5%; display:inline-block; vertical-align:top;}
.himageWrap { display: inline-block; padding-right: 30px; vertical-align: top; width: 49.5%;}
.himageWrap img{border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -o-border-radius:4px; -ms-border-radius:4px;}
.hText{ display: inline-block; padding-right: 30px; vertical-align: top; width: 49.5%;}
.hText h5{font-size: 18px; color:#444; margin-bottom: 8px; font-weight: 600;}
.hText h6{font-size: 17px;margin-bottom: 6px; color:#7e7f80; font-weight:400;}
.hText span{ display:block;font-size: 13px; color:#777;}
.hText a{color:#e53a40; margin-top:15%; display:block;font-weight: 600;}
.workSection{ padding:45px 0 10px;}
.workSection h2{text-align:center; text-transform:uppercase; color:#e53a40; margin-bottom:15px;}
.workList {list-style: outside none none;margin:50px auto 0; text-align:center;padding-left: 0;width: 70%;}
.workList li{width:32%; margin-bottom:35px; display:inline-block; padding:0 20px; vertical-align:top;}
.wk_imagewrap { margin:0 auto 15px; height: 125px; line-height: 125px; width: 125px; background:#6567a5; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; -o-border-radius:50%; -ms-border-radius:50%; color:#fff; font-size:35px;}
.workList li p{ color:#727273; font-size:16px; font-weight:600;}

/*pagecss end*/
.subsCribeRow {padding: 70px 0;}
.siteFooter { position:absolute; bottom:0; width:100%; color:#fff; background:url('../images/footerbg.jpg') no-repeat center top; }
.subsCribeRow h2{color:#fff; text-transform:uppercase; text-align:center;}
.subsCribeRow .searchinput{ margin:40px auto 0; width:80%;}
.subsCribeRow .searchinput button{ background:#6567a5}
.siteFooter a { color:#fff; }
.siteFooter a:hover { color:#609d1e; }
.copyRightDiv{ font-size:12px; padding:25px 0; background:rgba(0,0,0,0.7)}
.footerList{ margin-bottom:0; text-align:right; padding-left:0; list-style:none;}
.footerList li{ display:inline-block; padding:0 10px; vertical-align:top;}

@media screen and (max-width:1199px) {
	.workList{width:100%;}
}
@media screen and (max-width:991px) {
.searchLi span {display: inline-block;color: #666;border: 1px solid #666;}
#navigation .btnMenu a{ padding:10px 15px; border-radius:0;}
.searchDiv{ max-width:100%; padding:0 15px; left:0; right:0;}
.placeWrap{ margin-bottom:30px;}
.himageWrap{width:100%; margin-bottom:30px;}
.hText{width:100%;}
.hText a{margin-top: 20px;}
.subsCribeRow .searchinput{width: 100%;}
.subsCribeRow h2{ font-size: 25px;}
.copyRightDiv,.footerList{ text-align:center;}
.footerList{ margin-top:10px;}
}
@media screen and (max-width:767px) {
.siteFooter {text-align:center}
.logoDiv, .top-bar {
float: none;
text-align:center;
}
.header-menu, .topmenuList {
float: none;
text-align:center;
}
#navigation {
display:none;
left:0;
border-bottom:1px solid #ccc;
right:0;
background:#e8e8e6;
padding-bottom:15px;
margin-bottom:0;
position:absolute;
}
#navigation li a {
display:block;
text-align:left
}
#navigation li {
margin:0;
display:block;
}
.menu-Items {
min-height:50px;
position:relative;
background:#e8e8e6;
}
.toggleMenu {
top: 6px;
background: #e53a40;
display: block;
font-size: 24px;
color:#fff;
cursor:pointer;
height: 40px;
line-height: 40px;
position: absolute;
right: 15px;
width: 40px;
}
}
@media screen and (max-width:630px) {
.searchDiv h1{ font-size:45px;}
.hotelTab .nav-tabs > li a{ padding:8px 20px;}
.hotelListItems li{width:100%;}
.hText{ margin-bottom:0;}
.workList li{width:100%}
.himageWrap{padding-right:0;}
.himageWrap img {width: 100%;}
.footerList li{ padding:5px 10px;}
}
@media screen and (max-width:500px) {
	.searchDiv h1{ font-size:36px;}
	.placesSection .col-xs-6{width:100%;}
	#slidesCol .item { height: 400px;}
	.searchDiv{top:15%;}
	.searchinput input{padding: 0 15px 0 40px;}
	.searchinput button{ position:relative;border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -o-border-radius:4px; -ms-border-radius:4px; margin-top:10px;}
	h2{font-size:25px;}
	.textPara p{width:100%}
}