Site structure

Greek Hotel HTML template has 7 HTML pages:

  • index.html – represents the template homepage
  • cart.html –  view the rooms that were added to the cart
  • checkout.html – view the rooms added to the cart and personal information fields to checkout
  • room_sample.html – example of a room presentation
  • rooms.html – gallery with all the rooms
  • searchresult.html – list of the search result
  • searchrooms.html – search input to find the rooms needed

The template for the index.html, rooms.html, searchrooms.html uses the following code structure:

<html>
<head>[...]</head>
<body>
  <div id="page_wrapper">
    <header>[...]</header>
    ...
    sections
    ...
    <footer>[...]</footer>
  </div>
</body>
</html>

 

The pages cart.html, checkout.html, room_sample.html and searchresult.html have also sidebars and subheaders

Subheader

<!--breadcrumb section -->
 <div class="page-subheader psub--light">
   <div class="container">
    <ul class="breadcrumb">
     <li><a href="#">Home</a></li>
     <li>Search</li>
    </ul>
   </div>
</div>

Sidebar

<!--Right side-->
 <aside class="col-sm-4 col-md-3 ">
  <div class="sidebar">
     ...
  </div>
</aside>

Other mentionable html markups:

To Top button

Classic “go to top” button. Just make sure not to change the id as it holds the styling but also js click event.

<a href="#" id="totop"></a>

The html markup that is used for responsiveness is based on flexbox Layout and bootstrap 3 grid system

 

These examples don’t necessarily mean it has to be this exact pattern, however, it’s the most commonly used.

 

How to setup template for development

RELATED ARTICLES

RECENT INCIDENTS