How to create Airbnb homepage template? - css

Question

<header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
<div id="header" class=" container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img title="DropInn" src="logo/logo.png" width="137" height="45">
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
<div class="search" style="">
<form id="search_form1" action="http://products.cogzidel.com/airbnb-clone/search" method="post" class="searchform_head">
<i class="fa fa-search heaericon"></i>
<input type="text" id="searchTextField" name="searchbox" class="searchbox" value="Where are you going?" onblur="if (this.value == ''){this.value = 'Where are you going?'; }" onfocus="if (this.value == 'Where are you going?') {this.value = ''; }" onKeyPress="return disableEnterKey(event)" placeholder="Where are you going?" />
<div id="map-canvas"></div>
<input type="hidden" id="lat" name="lat" value="">
<input type="hidden" id="lng" name="lng" value="">
<div class='advanced_search' id="advanced_search" style='display: none; position: absolute;
z-index: 2147483647; background:#FCFCFC; border: 1px solid #CCCCCC; padding: 10px; opacity: 1;width: 240px;top:37px;'>
<label class="checkin_search">
Check in
<div id="checkinWrapper" class="input-wrapper">
<input id="checkindate2" class="check_wrap checkin search-option ui-datepicker-target" type="text" placeholder="Check in" name="checkin" autocomplete="off" readonly>
</div>
</label>
<label class="checkout-detail_search">
Check out
<div id="checkoutWrapper" class="input-wrapper">
<input id="checkoutdate2" class="check_wrap checkout search-option ui-datepicker-target" type="text" placeholder="Check out" name="checkout" autocomplete="off" readonly>
</div>
</label>
<div class="clearfix"></div>
<p class="filter_header">Room type</p>
<!-- Search filter content is below this -->
<div class="clearfix"></div>
<ul class="search_filter_content">
<li class="clearfix checkbox">
<input class="checkbox_filter" type="checkbox" value="Entire home/apt" name="room_types1" id="room_type_0">
<label class="checkbox_list" for="room_type_0"> Entire home/apt</label>
</li>
<li class="clearfix checkbox">
<input class="checkbox_filter" type="checkbox" value="Private room" name="room_types2" id="room_type_1">
<label class="checkbox_list" for="room_type_1"> Private room</label>
</li>
<li class="clearfix checkbox">
<input class="checkbox_filter" type="checkbox" value="Shared room" name="room_types3" id="room_type_2">
<label class="checkbox_list" for="room_type_2">Shared room</label>
</li>
</ul>
<div class="clearfix"></div>
<!-- <button id="submit_location" class="btn_dash" style=" font-size: 12px;margin: 10px 0; padding: 5px 11px;" type="submit" value="Search" name="Submit" >-->
<!--<i class="fa fa-search submitloc"></i>-->
<!--<img src="http://products.cogzidel.com/airbnb-clone//css/templates/blue/images/search_icon1.png" />-->
<button id="submit_location" class="btn_dash" type="submit" value="Search" name="Submit">
<i class="fa fa-search submitloc"></i>
<!--<img src="http://products.cogzidel.com/airbnb-clone//css/templates/blue/images/search_icon1.png" />-->
Find A Place </button>
<label class="btn_dash" id="close_search">
Close </label>
</div>
</form>
</div>
</li>
</form>
</li>
<li id="subnavigation" class="dropdown browse-dropdown">
<a class="dropdown-toggle header_link" href="#" data-toggle="dropdown">Browse <span class="caret"></span></a>
<ul class="dropdown-menu sub-menu browse-submenu">
<li><!-- <i class="icon-popular"> </i>--> <i class="fa fa-heart"></i> Popular</li>
<li><a class="friends" href="home/friends/index.html"><i class="icon-friends"> </i> Friends</a></li>
<li><a class="map-neigh" href="home/neighborhoods/index.html"><!--<i class="icon-neighborhoods"> </i> --> <i class="fa fa-map-marker"></i>Neighborhoods</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="rightsign sign1">Sign Up</li>
<li class="rightsign sign1">Sign In</li>
<li id='view_help' style='float:left;'>
<li id='view_help' class="dropdown browse-dropdown help_book">
<a class="dropdown-toggle view_help1" data-toggle="dropdown" href="#">Help <span class="caret"></span></a>
<ul class="dropdown-menu sub-menu browse-submenu">
<li>How do i sign up?</li>
<li> Need help on this page?
</li>
</ul>
</li>
<li class="lisyourspace"> <a class="btn yellow" href="rooms/new.html"><span>List Your Space</span></a> </li>
<!--<li class="listyourspace_menu"> <a class="yellow btn" href="http://products.cogzidel.com/airbnb-clone/rooms/new"><span>List Your Space</span></a> </li>-->
</nav>
</div>
</header>
I need CSS code for this display exact like Airbnb home page. Somebody please help to get this. I tried so many times, but failed to design that properly. How to do the full width grid system and how to code the CSS files?

Answer 1

First, you should try to add your background elements. Then, use basic css to make it fit the whole page width with repeat or not (depending on your background image)
Then, about the "full width grid system", bootstrap has many classes that fit your requirements like 'col-lg-** col-md-** col-sm-** col-xs-**', you should have a look at this :
http://getbootstrap.com/css/#grid
Your code is just a bit too generic. But this "bootply" is a good starting point for you :
http://www.bootply.com/b1SPDA3GOn
Hope it helps!