Thank you for purchasing our template. If you have any questions regarding our product, Please Email me : mardianto718@gmail.com

Clemira Real Estate template is a perfect choice for your real estate website. because of its clean, modern and awesome design especially made for real estate agents, companies, directory sites, brokerages, apartment managers, residential & commercial developers, vacation rentals, condominium, corporate, agency owners, personal or standalone Real estate agents and much more.

Follow the steps below to get started with your Site Template:

Open the Package/HTML Folder to find all the Templates Files
You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
Make sure you upload the required files/folders listed below:
- HTML/assets/css - Stylesheets Folder
- HTML/assets/images - Images Folder
- HTML/assets/js - Javacripts Folder
- HTML/index.html - Index File/Homepage
The other files can be used according to your preferences.
You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

HTML Structure

Clemira follows a simple coding structure. here is the sample:


<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs --> 
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Clemira</title>
<!-- CSS -->
	...
</head>
<body>


<!-- Section Top Header -->
<div class="top-header">
  ...
</div>

<!-- Section Start Slides Area -->
<section id="home_slides" class="home_slides">
  ...
</section>

<!-- Site Content Section  -->
<div class="wrap-catagory">
  <div class="container">
    <!-- Sections inner content goes here -->
    ........
  </div>
</section>

<!-- Footer== -->
<footer id="footer">
  <div class="container">
  <!-- Footer Inner -->
  .....
  </div>
 

</footer>

</body>
</html>

Logo Settings

The Logo Container can be found in the header tag, within navigation

 <a class="navbar-brand" href="index.html"><img src="assets/images/clemira-logo.png" alt=""></a>

Note The Logo Image's maximum width can be 200px and maximum height can be 60px.

Color Schemes

You can change your Website's Color Scheme in an instant. You simply need to change the Color Code in the assets/css/default.css file & you are good to go. Follow these quick steps to get going:

Make sure you add the assets/css/themes/default.css stylesheet in your head after the app.css stylesheet.

<head>

	...

	<link rel="stylesheet" href="assets/css/app.css" type="text/css" />


	<!-- Here goes your colors.css
	============================================= -->
	<link rel="stylesheet" href="assets/css/themes/default.css" type="text/css" />

	...

</head>

Now simply change the Codes according to your requirements.

Changing Fonts

Change your Fonts on the Fly as we have included fonts in CSS. Bydefault Clemira uses Open sans from the Google Fonts Library.You can also include in HTML in the head tag orimport in CSS as wel

<link https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">

In order to change the Fonts, you will need to Edit the Above Links with your Custom Font if you plan to use a Google Font or Remove it complete if you plan to use a Self Hosted font. Here is an Example for using Self Hosted Fonts.

Navbar Sticky

You can start using the Navbar sticky have using the Following code:

<nav class="navbar navbar-default navbar-sticky white bootsnav">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
        <i class="fa fa-bars"></i></button>
          <a class="navbar-brand" href="#brand"><img src="LOGO_ADDRESS" class="logo" alt=""></a></div>
            <div class="collapse navbar-collapse" id="navbar-menu">
              <ul class="nav navbar-nav navbar-left" data-in="fadeInDown" data-out="fadeOutUp">
                <li><a href="#">Home</a></li>
                  <li class="dropdown">
                    < href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                    <ul class="dropdown-menu">
                    <li><a href="#">text</a></li>
                    <li><a href="#">text</a></li>
                    ...
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </li>
  </ul>
</nav>

Navbar Transparant & with scrollspy

You can start using the Navigation menu with scrollspy have using the Following code:

<nav class="navbar navbar-inverse navbar-fixed navbar-scrollspy no-background white bootsnav">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
        <i class="fa fa-bars"></i></button>
          <a class="navbar-brand" href="#brand"><img src="LOGO_ADDRESS" class="logo" alt=""></a></div>
            <div class="collapse navbar-collapse" id="navbar-menu">
              <ul class="nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeOutUp">
                <li class="active scroll"><a href="#home">Home</a></li>
                <li class="scroll"><a href="#features">Features</a></li>
                <li class="scroll"><a href="#blog">Blog</a></li>
                 ....
              </ul>
            </div>
          </div>
        </div>
      </li>
  </ul>
</nav>

Mega Menu

You can start using the Mega Menu have using the Following code:

  <nav class="navbar navbar-default navbar-sticky white bootsnav">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
          <i class="fa fa-bars"></i></button>
            <a class="navbar-brand" href="#brand"><img src="LOGO_ADDRESS" class="logo" alt=""></a></div>
              <div class="collapse navbar-collapse" id="navbar-menu">
                <ul class="nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeOutUp">
                  <li><a href="#">Home</a></li>
                    <li class="dropdown megamenu-fw">
                      < href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                      <ul class="dropdown-menu megamenu-content" role="menu">
                        <li>
                        <div class="row">
                          <div class="col-menu col-md-3">
                           <h6 class="title">Title Menu One</h6">
                            <div class="content">
                               <ul class="menu-col">
                                <li><a href="#">text</a></li>
                                -- More Menu --
                              </ul>
                        </div>
                      </div>
                      ...
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </li>
      </ul>
  </nav>

Footer

You can start using the Footer have using the Following code:

<footer id="footer">
  <div class="container">
  	<div class="footer-one">
  		<div class="row">
	  		<div class="col-sm-12 col-md-5">
		  		<div class="footer-logo">
		  			<img src ="LOGO" alt="">
		  		</div>
	  		</div>
  		</div>
  	</div>
  	<div class="footer-two">
  		<div class="row">
	  		<div class="col-sm-12 col-md-12">
		  		<div class="text-center">
		  			......
		  		</div>
	  		</div>
  		</div>
  	</div>
  </div>
</footer>