Saved!

Booking template - 1r4SsBWX

Booking template

Booking template

  
<div class="col-100 header"> 
	<div class="first"> 
	<div class="col-30 site-logo"> 
		<img src="http://hrvatska365.net/cs-content/icon/logo3652017.png"/>
	</div>
    <div class="col-60 menu"> 
		<ul class="header-btn">
			<li><a href="/listing.php?kategorija=1">BLOG</a></li>
          <li><a href="/listing.php?kategorija=2"><i class="fa fa-file-o"></i> PREDAJ OGLAS</a></li>
          <li><a href="/listing.php?kategorija=3"><i class="fa fa-key"></i> PRIJAVA</a></li>
          <li><a href="/listing.php?kategorija=4"><i class="fa fa-user"></i> REGISTRACIJA</a></li>
		</ul>
	</div>
    <div class="col-10 lang"> 
		<button class="lng"><img src="http://hrvatska365.net/cs-content/flags/hr.png" alt="Hrvatski"></button> 
		<ul class="lang-list">
			<li><a href="http://hrvatska365.net"><img src="http://hrvatska365.net/cs-content/flags/hr.png" alt="Hrvatski"></a></li>
			<li><a href="http://booking-kroatien.de"><img src="http://hrvatska365.net/cs-content/flags/de.png" alt="Deutsch"></a></li>
			<li><a href="http://croatia365.net"><img src="http://hrvatska365.net/cs-content/flags/gb.png" alt="English"></a></li>
			<li><a href="http://croazia365.net"><img src="http://hrvatska365.net/cs-content/flags/it.png" alt="Italiano"></a></li>
			<li><a href="http://hrvatska365.net/?lang=si"><span class=""><img src="http://hrvatska365.net/cs-content/flags/si.png" alt="Slovenski"></span></a></li>
			<li><a href="http://hrvatska365.net/?lang=ru"><span class=""><img src="http://hrvatska365.net/cs-content/flags/ru.png" alt="ХОРВАТИЯ"></span></a></li>
			<li><a href="http://hrvatska365.net/?lang=nl"><span class=""><img src="http://hrvatska365.net/cs-content/flags/nl.png" alt="Dutch"></span></a></li>
			<li><a href="http://hrvatska365.net/?lang=be"><span class=""><img src="http://hrvatska365.net/cs-content/flags/be.png" alt="Belgish"></span></a></li>
			<li><a href="http://hrvatska365.net/?lang=fr"><span class=""><img src="http://hrvatska365.net/cs-content/flags/fr.png" alt="Fance"></span></a></li>
			<li><a href="http://hrvatska365.net/?lang=es"><span class=""><img src="http://hrvatska365.net/cs-content/flags/es.png" alt="Espaniol"></span></a></li>
			<li><a href="http://hrvatska365.net/?lang=pl"><span class=""><img src="http://hrvatska365.net/cs-content/flags/pl.png" alt="Polski"></span></a></li>
			<li><a href="http://hrvatska365.net/?lang=bg"><span class=""><img src="http://hrvatska365.net/cs-content/flags/bg.png" alt="Bulgarian"></span></a></li>
			<li><a href="http://hrvatska365.net/?lang=ro"><span class=""><img src="http://hrvatska365.net/cs-content/flags/ro.png" alt="Romanian"></span></a></li>
		</ul>
	</div>
	<div class="clear"></div> 
	</div>
</div>






    <div class="col-100 category"> 
		<ul class="header-category">
          <li><a href="/listing.php?kategorija=1">SOBE <span style="float:right;"></span></a></li>
          <li><a href="/listing.php?kategorija=2">APARTMANI <span style="float:right;"></span></a></li>
          <li><a href="/listing.php?kategorija=3">KUćE ZA ODMOR <span style="float:right;"></span></a></li>
          <li><a href="/listing.php?kategorija=4">KAMENE KUćE <span style="float:right;"></span></a></li>
          <li><a href="/listing.php?kategorija=5">VILE <span style="float:right;"></span></a></li>
		 <li><a href="/listing.php?kategorija=6">GORSKI TURIZAM <span style="float:right;"></span></a></li>
          <li><a href="/listing.php?kategorija=7">HOSTELI <span style="float:right;"></span></a></li>
          <li><a href="/listing.php?kategorija=8">HOTELI <span style="float:right;"></span></a></li>
          <li><a href="/listing.php?kategorija=9">KAMPOVI <span style="float:right;"></span></a></li>
          <li><a href="/listing.php?kategorija=10">SEOSKI TURIZAM <span style="float:right;"></span></a></li>
          <li><a href="/listing.php?kategorija=11">ROBINSONSKI TURIZAM <span style="float:right;"></span></a></li>		
		
		</ul>
	<div class="clear"></div> 
	</div>



<div class="col-100 second"> 

<div class="searchcontainertop">
    <form id="search" method="get" action="/listing.php">

      <input type="text" name="grad" id="trazi" class="traz" placeholder="traži mjesto ili županiju" required>

      <label for="wifi"><input type="checkbox" class="check" name="wifi" id="wifi" value="1" onclick="searchwifi()"/> WiFI</label>

      <label for="ljub"><input type="checkbox" class="check" name="ljub" id="ljub" value="1" onclick="searchljub()"/> Kućni ljubimci</label>
		
        <select name="beach" id="beach" onchange="searchbeach(this.value);">
          <option value="">max. udaljenost plaže</option>
          <option value=""></option>
          <option value="100">100m</option>
          <option value="200">200m</option>
          <option value="300">300m</option>
          <option value="400">400m</option>
          <option value="500">500m</option>
          <option value="600">600m</option>
          <option value="700">700m</option>
          <option value="800">800m</option>
          <option value="900">900m</option>
          <option value="1000">1000m</option>
          <option value=""></option>
        </select>
		
      <select name="kategorija" id="kategorija" class="kategorija" onchange="searchkateg(this.value);">
          <option value="">--- Kategorija ---</option>
          <option value=""></option>
          <option value="1">Sobe</option>
          <option value="2">Apartmani</option>
          <option value="3">Kuće za odmor</option>
          <option value="4">Kamene kuće</option>
          <option value="5">Vila</option>
          <option value="6">Gorski turizam</option>
          <option value="7">Hostel</option>
          <option value="8">Hotel</option>
          <option value="9">Kamp</option>
          <option value="10">Seoski turizam</option>
          <option value="11">Robinsonski turizam</option>
          <option value=""></option>
        </select>
		      
		<button class="trazi"><i class="fa fa-search"></i></button>

    </form>
</div>



</div>

<div class="col-100 wrapper"> 
	<div class="col-100-300">
		<div class="gallery">
			<ul class="gal">
				<li><a href="#gallery"><img class="first" onclick="gallery('http://hrvatska365.net/cs-content/img/Qa76SbMWSfL-RHyrM6nf2Fe.jpg')" id="gallery1" src="http://hrvatska365.net/cs-content/img/Qa76SbMWSfL-RHyrM6nf2Fe.jpg" /></a></li>
				<li><a href="#gallery"><img onclick="gallery('http://hrvatska365.net/cs-content/img/Qa76SbMWSfL-1FSXA2pssk1.jpg')" id="gallery3" src="http://hrvatska365.net/cs-content/img/thumb/Qa76SbMWSfL-1FSXA2pssk1.jpg" /></a></li>
				<li><a href="#gallery"><img onclick="gallery('http://hrvatska365.net/cs-content/img/Qa76SbMWSfL-JnCAk3MNPRY.jpg')" id="gallery4" src="http://hrvatska365.net/cs-content/img/thumb/Qa76SbMWSfL-JnCAk3MNPRY.jpg" /></a></li>
				<li><a href="#gallery"><img onclick="gallery('http://hrvatska365.net/cs-content/img/Qa76SbMWSfL-5RaUqwcwhTv.jpg')" id="gallery5" src="http://hrvatska365.net/cs-content/img/thumb/Qa76SbMWSfL-5RaUqwcwhTv.jpg" /></a></li>
				<li><a href="#gallery"><img onclick="gallery('http://hrvatska365.net/cs-content/img/Qa76SbMWSfL-IkjAH7vOoje.jpg')" id="gallery2" src="http://hrvatska365.net/cs-content/img/thumb/Qa76SbMWSfL-IkjAH7vOoje.jpg" /></a></li>
				<li><a href="#gallery"><img onclick="gallery('http://hrvatska365.net/cs-content/img/Qa76SbMWSfL-JnCAk3MNPRY.jpg')" id="gallery4" src="http://hrvatska365.net/cs-content/img/thumb/Qa76SbMWSfL-JnCAk3MNPRY.jpg" /></a></li>
				<li><a href="#gallery"><img onclick="gallery('http://hrvatska365.net/cs-content/img/Qa76SbMWSfL-1FSXA2pssk1.jpg')" id="gallery3" src="http://hrvatska365.net/cs-content/img/thumb/Qa76SbMWSfL-1FSXA2pssk1.jpg" /></a></li>
				<li><a href="#gallery"><img onclick="gallery('http://hrvatska365.net/cs-content/img/Qa76SbMWSfL-wpjw5KISgIp.jpg')" id="gallery6" src="http://hrvatska365.net/cs-content/img/thumb/Qa76SbMWSfL-wpjw5KISgIp.jpg" /></a></li>
				<li><a href="#gallery"><img onclick="gallery('http://hrvatska365.net/cs-content/img/Qa76SbMWSfL-sTRNw5waZsC.jpg')" id="gallery7" src="http://hrvatska365.net/cs-content/img/thumb/Qa76SbMWSfL-sTRNw5waZsC.jpg" /></a></li>
				<li><a href="#gallery"><img onclick="gallery('http://hrvatska365.net/cs-content/img/Qa76SbMWSfL-t6RG4VuHwho.jpg')" id="gallery8" src="http://hrvatska365.net/cs-content/img/thumb/Qa76SbMWSfL-t6RG4VuHwho.jpg" /></a></li>
				<li><a href="#gallery"><img onclick="gallery('http://hrvatska365.net/cs-content/img/Qa76SbMWSfL-MeCu9LCGlSh.jpg')" id="gallery9" src="http://hrvatska365.net/cs-content/img/thumb/Qa76SbMWSfL-MeCu9LCGlSh.jpg" /></a></li>
				<li><a href="#gallery"><img onclick="gallery('http://hrvatska365.net/cs-content/img/Qa76SbMWSfL-5RaUqwcwhTv.jpg')" id="gallery5" src="http://hrvatska365.net/cs-content/img/thumb/Qa76SbMWSfL-5RaUqwcwhTv.jpg" /></a></li>
				<li><a href="#gallery"><img onclick="gallery('http://hrvatska365.net/cs-content/img/Qa76SbMWSfL-wpjw5KISgIp.jpg')" id="gallery6" src="http://hrvatska365.net/cs-content/img/thumb/Qa76SbMWSfL-wpjw5KISgIp.jpg" /></a></li>
			</ul>
			<div class="clear"></div> 
		</div>
	</div>
	<div class="col-300">
		<div class="contact">
            <h2 class="lined-heading"><span>Contact</span></h2>
			<form> 
				<label>Email</label><input type="text" placeholder="your Email address"/>
				<label>Name</label><input type="text" placeholder="your Name"/>
				<label>Date from</label><input type="text" placeholder="your arivel"/>
				<label>Date to</label><input type="text" placeholder="your checkout"/>
				<label>Message</label><textarea name="msg" id="msg"></textarea>
				<img src="http://hrvatska365.net/captchaimg.php?captcha=xxx"/>
				<label>Security Code</label><input type="text" placeholder="Captcha"/>
				<input type="submit" class="contact-btn"/>
			</form> 
		</div> 
	</div> 
	<div class="col-50">
		<div class="details">
            <h2 class="lined-heading"><span>Description</span></h2>
				Holiday house with a 2,500 m2 surrounding land, directly by the river, with arranged entrance into the water. The possibility of using rafting boats, canoes and mountain bikes. Within 1 km there are restaurants, tennis courts and shops.
			</div> 
		
		<div class="details">
            <h2 class="lined-heading"><span>Room Details</span></h2>
            <table class="table">
				<thead>
                <tr>
                  <th colspan="3">
					Kuća Kvadratura: 55m2 - 
					  <i>A5 (Apartman za pet osoba) </i>
					</th>
                </tr>
			 </thead>
              <tbody>
                <tr>
                  <td>Datum od</td>
                  <td>Datum do</td>
                  <td>Cijena u €</td>
                </tr>
                <tr>
                  <td>15.04</td>
                  <td>15.06</td>
                  <td>55,-</td>
                </tr>
                <tr>
                  <td>15.06</td>
                  <td>15.09</td>
                  <td>65,-</td>
                </tr>
                <tr>
                  <td>15.09</td>
                  <td>15.04</td>
                  <td>55,-</td>
                </tr>
              </tbody>
            </table>
		</div> 
		<div class="details">
            <h2 class="lined-heading"><span>Room Details</span></h2>
            <table class="table">
				<thead>
                <tr>
                  <th colspan="3">
					Kuća Kvadratura: 55m2 - 
					  <i>A5 (Apartman za pet osoba) </i>
					</th>
                </tr>
			 </thead>
              <tbody>
                <tr>
                  <td>Datum od</td>
                  <td>Datum do</td>
                  <td>Cijena u €</td>
                </tr>
                <tr>
                  <td>15.04</td>
                  <td>15.06</td>
                  <td>55,-</td>
                </tr>
                <tr>
                  <td>15.06</td>
                  <td>15.09</td>
                  <td>65,-</td>
                </tr>
                <tr>
                  <td>15.09</td>
                  <td>15.04</td>
                  <td>55,-</td>
                </tr>
              </tbody>
            </table>
		</div> 
		
		
	</div> 
	
	<div class="col-50">
		<div class="details">
            <h2 class="lined-heading"><span>Room Details</span></h2>
            <h3 class="">Table overview</h3>
            <table class="table">
              <tbody>
                <tr>
                  <td><i class="fa fa-check-circle"></i> Double Bed</td>
                  <td><i class="fa fa-check-circle"></i> Free Internet</td>
                </tr>
                <tr>
                  <td><i class="fa fa-check-circle"></i> 60 square meter</td>
                  <td><i class="fa fa-check-circle"></i> Beach view</td>
                </tr>
                <tr>
                  <td><i class="fa fa-check-circle"></i> Double Bed</td>
                  <td><i class="fa fa-check-circle"></i> Free Internet</td>
                </tr>
                <tr>
                  <td><i class="fa fa-check-circle"></i> Private Balcony</td>
                  <td><i class="fa fa-check-circle"></i> Flat Screen TV</td>
                </tr>
                  <tr>
                  <td><i class="fa fa-check-circle"></i> Free Newspaper</td>
                  <td><i class="fa fa-check-circle"></i> 2 persons</td>
                </tr>
                  <tr>
                  <td><i class="fa fa-check-circle"></i> Breakfast included</td>
                  <td><i class="fa fa-check-circle"></i> Jacuzzi</td>
                </tr>
              </tbody>
            </table>
		</div> 
	
		<div class="overview">
			<h2 class="lined-heading"><span>Overview</span></h2>
			<div class="col-50" id="o1">Opis:</div>
			<div class="col-50" id="o2">Detalji</div>
			<p id="d1">Ručno pletena deka od 100% Merino vune koja je topla, mekana i ugodna. <br><br>
				Uputstvo za održavanje:<br>
				Ne prati u perilici rublja.<br>
				Ne izbjeljujte.<br>
				Preporučuje se kemijsko čišćenje.</p>
			<p id="d2">Održavanje -Uputstvo za održavanje:<br>
				Ne prati u perilici rublja.<br>
				Ne izbjeljujte.<br>
				Preporučuje se kemijsko čišćenje.</p>
			</div> 
	</div> 
	<div class="clear"></div> 
</div>  
  
Meta
http://codesheet.org/placehold-img/?width=300&height=250&color=33aaff&text=&textcolor=

Quick add:

× Clear

Add Stylesheets

normalize.css
reset.css
nice.css
/> CodeSheet UI
Font Awesome
Bootstrap
Foundation
Animate

Add External JavaScript

jQuery 3.1.0
jQuery UI
Bootstrap
Angular

Add Google Fonts

Dosis
Exo+2
Lato
Lobster
Open+Sans
Open+Sans+Condensed
Oswald
Playfair+Display
Quicksand
Raleway
Rochester
Roboto
Roboto+Condensed
Roboto+Mono
Shadows+Into+Light
Ubuntu
Arvo
Indie Flower
Merriweather
Pacifico
Sedgwick Ave
Sedgwick Ave Display
html
css
js