Amaezi Cuisine- Responsive Restaurant HTML Template

Idea by: ThemeSLR
Our demos will quickly show you a lot of reasons why Amaezi is probably the most compact, user friendly Restaurant HTML Temaplte of the moment. The template only comes with specific options and features, build by professionals for professionals and creatives. The most important part of the template is that it comes built-in with a lot of services which actually are “Ready to go”. Amaezi was created to simplify the process of having a well-done website, for any Restaurant, Pub or Food website!

Before we start, lets take a look on the folder structure of the theme. All theme files are placed in the HTML folder.

assets/images/image_1.jpg

Our item comes 404 Contact Form, 404 Mailchimp Subscribe Form and 404 Booking Mail Form which requires a server in order to run and send mails. Make sure the item is added on online server, or on a local server such as WAMP, MAMP or XAMP.

Load Navigation menu - This feature will not work IE and Microsoft EDGE, on a local machine(if is not on a server) - To have it usable in IE and Microsoft EDGE please use this template on an online or local server.

Load Footer - This feature will not work IE and Microsoft EDGE, on a local machine(if is not on a server) - To have it usable IE and Microsoft EDGE please use this template on an online or local server.

How to install WAMP (Windows local server), MAMP (MacOS local server), XAMP (MacOS, Windows, Linux local server),

This is an HTML theme and doesn't require instalation in the traditional meaning of the word. You only need to place the content (HTML files and the four folders) in your prefered web directory

Keep in mind that the folder structure and file/folder names are important for the correct theme work

Element name: Typography elements

Output

Code


<p>This is <b>bold text</b> and this is <strong>strong</strong>. This is <i>italic style</i> and this is <em>emphasized</em>.This is <sup>superscript</sup> text and this is <sub>subscript</sub> text. This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>

Element name: Headings

Output

Code


<h2>Level 2 heading <small>Secondary text</small></h2>
<h3>Level 3 heading <small>Secondary text</small></h3>
<h4>Level 4 heading <small>Secondary text</small></h4>
<h5>Level 5 heading <small>Secondary text</small></h5>
<h6>Level 6 heading <small>Secondary text</small></h6>

Element name: Preformatted code

Output

Code


<pre><code>
*, 
*:after, 
*:before { 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}
.clearfix:after { 
    clear: both; 
}
html{
    width: 100%;
    height: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
</code></pre>

Element name: Blockquotes

Output

Code


<blockquote>Seamlessly evisculate future-proof leadership and out-of-the-box expertise. Completely mesh ethical platforms via best-of-breed materials. Conveniently conceptualize end-to-end results vis-a-vis user friendly models. Globally build maintainable e-business via interactive imperatives. Interactively drive progressive methods of empowerment without low-risk high-yield technologies.</blockquote>

Element name: Lists - Unordered

Output

Code


<ul>
    <li>Duis sollicitudin lobortis sem</li>
    <li>Et dignissim ligula sem</li>
    <li>Rhoncus imperdiet justo</li>
    <li>Vivamus placerat est a facilisis</li>
    <li>Pellentesque interdum efficitur</li>
</ul>

Element name: Lists - Ordered

Output

Code


<ol>
    <li>Duis sollicitudin lobortis sem</li>
    <li>Et dignissim ligula sem</li>
    <li>Rhoncus imperdiet justo</li>
    <li>Vivamus placerat est a facilisis</li>
    <li>Pellentesque interdum efficitur</li>
</ol>

Element name: Retina ready icons

Output

Code


<div class="share-via">
    <div class="social">
        <a href="">
            <i class="fa fa-facebook"></i>
        </a>
    </div>
    <div class="social">
        <a href="">
            <i class="fa fa-twitter"></i>
        </a>
    </div>
    <div class="social">
        <a href="">
            <i class="fa fa-google-plus"></i>
        </a>
    </div>
    <div class="social">
        <a href="">
            <i class="fa fa-linkedin"></i>
        </a>
    </div>
    <div class="social">
        <a href="">
            <i class="fa fa-reddit"></i>
        </a>
    </div>
    <div class="social">
        <a href="">
            <i class="fa fa-tumblr"></i>
        </a>
    </div>
</div>

<!-- Bordered icons -->
<div class="share-via bordered-icons">
    <div class="social">
        <a href="">
            <i class="fa fa-facebook"></i>
        </a>
    </div>
    <div class="social">
        <a href="">
            <i class="fa fa-twitter"></i>
        </a>
    </div>
    <div class="social">
        <a href="">
            <i class="fa fa-google-plus"></i>
        </a>
    </div>
    <div class="social">
        <a href="">
            <i class="fa fa-linkedin"></i>
        </a>
    </div>
    <div class="social">
        <a href="">
            <i class="fa fa-reddit"></i>
        </a>
    </div>
    <div class="social">
        <a href="">
            <i class="fa fa-tumblr"></i>
        </a>
    </div>
</div>

Element name: Buttons Style v1 - Colored

Element name: Buttons - Big/Colored

Output

Code


<button type="button" class="btn btn-danger btn-lg">I'm a big button</button>
<button type="button" class="btn btn-success btn-lg">I'm a big button</button>
<button type="button" class="btn btn-info btn-lg">I'm a big button</button>
<button type="button" class="btn btn-warning btn-lg">I'm a big button</button>

Element name: Buttons - Normal/Colored

Output

Code


<button type="button" class="btn btn-danger">I'm a normal button</button>
<button type="button" class="btn btn-success">I'm a normal button</button>
<button type="button" class="btn btn-info">I'm a normal button</button>
<button type="button" class="btn btn-warning">I'm a normal button</button>

Element name: Buttons - Small/Colored

Output

Code


<button type="button" class="btn btn-danger btn-sm">I'm a small button</button>
<button type="button" class="btn btn-success btn-sm">I'm a small button</button>
<button type="button" class="btn btn-info btn-sm">I'm a small button</button>
<button type="button" class="btn btn-warning btn-sm">I'm a small button</button>

Element name: Buttons - Extra Small/Colored

Output

Code


<button type="button" class="btn btn-danger btn-xm">I'm a x-small button</button>
<button type="button" class="btn btn-success btn-xm">I'm a x-small button</button>
<button type="button" class="btn btn-info btn-xm">I'm a x-small button</button>
<button type="button" class="btn btn-warning btn-xm">I'm a x-small button</button>

Element name: Buttons Style v2 - Bordered

Element name: Buttons - Big/Bordered

Output

Code


<button type="button" class="btn bordered btn-danger btn-lg">I'm a big button</button>
<button type="button" class="btn bordered btn-success btn-lg">I'm a big button</button>
<button type="button" class="btn bordered btn-info btn-lg">I'm a big button</button>
<button type="button" class="btn bordered btn-warning btn-lg">I'm a big button</button>

Element name: Buttons - Normal/Bordered

Output

Code


<button type="button" class="btn bordered btn-danger">I'm a normal button</button>
<button type="button" class="btn bordered btn-success">I'm a normal button</button>
<button type="button" class="btn bordered btn-info">I'm a normal button</button>
<button type="button" class="btn bordered btn-warning">I'm a normal button</button>

Element name: Buttons - Small/Bordered

Output

Code


<button type="button" class="btn bordered btn-danger btn-sm">I'm a small button</button>
<button type="button" class="btn bordered btn-success btn-sm">I'm a small button</button>
<button type="button" class="btn bordered btn-info btn-sm">I'm a small button</button>
<button type="button" class="btn bordered btn-warning btn-sm">I'm a small button</button>

Element name: Buttons - Extra Small/Bordered

Output

Code


<button type="button" class="btn bordered btn-danger btn-xm">I'm a x-small button</button>
<button type="button" class="btn bordered btn-success btn-xm">I'm a x-small button</button>
<button type="button" class="btn bordered btn-info btn-xm">I'm a x-small button</button>
<button type="button" class="btn bordered btn-warning btn-xm">I'm a x-small button</button>

Element name: Label badges

Output

Code


<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Element name: Badges

Output

Code


<button class="btn btn-default" type="button">
  Badge message <span class="badge">6</span>
</button>
<button class="btn btn-primary" type="button">
  Badge message <span class="badge">33</span>
</button>
<button class="btn btn-success" type="button">
  Badge message <span class="badge">3</span>
</button>
<button class="btn btn-info" type="button">
  Badge message <span class="badge">4</span>
</button>
<button class="btn btn-warning" type="button">
  Badge message <span class="badge">14</span>
</button>
<button class="btn btn-danger" type="button">
  Badge message <span class="badge">44</span>
</button>

Element name: Alerts

Output

Code


<h3>Simple alerts</h3>
<div class="row">
    <div class="col-md-3">
        <div role="alert" class="alert alert-success">
            <strong>Well done!</strong> You successfully read this important alert message.
        </div>
    </div>
    <div class="col-md-3">
        <div role="alert" class="alert alert-info">
            <strong>Well done!</strong> You successfully read this important alert message.
        </div>
    </div>
    <div class="col-md-3">
        <div role="alert" class="alert alert-warning">
            <strong>Well done!</strong> You successfully read this important alert message.
        </div>
    </div>
    <div class="col-md-3">
        <div role="alert" class="alert alert-danger">
            <strong>Well done!</strong> You successfully read this important alert message.
        </div>
    </div>
</div>

<h3>Dismissible alerts</h3>
<div class="row">
    <div class="col-md-3">
        <div role="alert" class="alert alert-success">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>Nice!</strong> You successfully read <a class="alert-link" href="#">this important alert message</a>.  
        </div>
    </div>
    <div class="col-md-3">
        <div role="alert" class="alert alert-info">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>Nice!</strong> You successfully read <a class="alert-link" href="#">this important alert message</a>.  
        </div>
    </div>
    <div class="col-md-3">
        <div role="alert" class="alert alert-warning">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>Nice!</strong> You successfully read <a class="alert-link" href="#">this important alert message</a>.                                    
        </div>
    </div>
    <div class="col-md-3">
        <div role="alert" class="alert alert-danger">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>Nice!</strong> You successfully read <a class="alert-link" href="#">this important alert message</a>.
        </div>
    </div>
</div>

Element name: Progress bars

Element name: Progress bars - Without label

Output

Code


<div class="progress">
    <div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>

Element name: Progress bars - With label

Output

Code


<div class="progress">
    <div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
        20% Complete
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
        30% Complete
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
        50% Complete
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
        70% Complete
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
        80% Complete
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
        90% Complete
    </div>
</div>

Element name: Progress bars - Striped - without label

Output

Code


<div class="progress">
    <div class="progress-bar progress-bar-default progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>

Element name: Progress bars - Striped - with label

Output

Code


<div class="progress">
    <div class="progress-bar progress-bar-default progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
        20% Complete
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
        30% Complete
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
        50% Complete
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
        70% Complete
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
        80% Complete
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
        90% Complete
    </div>
</div>

Element name: Grid image blocks

Output

Code


<div class="row">
    <div class="col-md-3"><img class="grid-img img-rounded" src="img/blog-posts/600x440/25.jpg" alt=""></div>
    <div class="col-md-3"><img class="grid-img img-rounded" src="img/blog-posts/600x440/25.jpg" alt=""></div>
    <div class="col-md-3"><img class="grid-img img-rounded" src="img/blog-posts/600x440/25.jpg" alt=""></div>
    <div class="col-md-3"><img class="grid-img img-rounded" src="img/blog-posts/600x440/25.jpg" alt=""></div>
    <div class="col-md-3"><img class="grid-img img-rounded" src="img/blog-posts/600x440/25.jpg" alt=""></div>
    <div class="col-md-3"><img class="grid-img img-rounded" src="img/blog-posts/600x440/25.jpg" alt=""></div>
    <div class="col-md-3"><img class="grid-img img-rounded" src="img/blog-posts/600x440/25.jpg" alt=""></div>
    <div class="col-md-3"><img class="grid-img img-rounded" src="img/blog-posts/600x440/25.jpg" alt=""></div>
</div>

Element name: Text alignment

Output

Code


<div class="row">
    <div class="col-md-3">
        <h3>Text left</h3>
        <p class="text-left">Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.</p>
    </div>
    <div class="col-md-3">
        <h3>Text center</h3>
        <p class="text-center">Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.</p>
    </div>
    <div class="col-md-3">
        <h3>Text right</h3>
        <p class="text-right">Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.</p>
    </div>
    <div class="col-md-3">
        <h3>Text justify</h3>
        <p class="text-justify">Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.</p>
    </div>
</div>

Element name: Table - simple

Output

Code


<h3>Simple table</h3>
<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            </tr>
        <tr>
            <th scope="row">3</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
    </tbody>
</table>

Element name: Table - simple

Output

Code


<h3>Bordered table</h3>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            </tr>
        <tr>
            <th scope="row">3</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
    </tbody>
</table>

Element name: Responsive Videos

Output

Code


<div class="embed-responsive embed-responsive-16by9">
    <iframe allowfullscreen="" src="//www.youtube.com/embed/JGXi_9A__Vc" class="embed-responsive-item"></iframe>
</div>

Element name: Sidebar: Tags

Output

Code


<!-- Widget: Tag Cloud -->
<aside class="widget widget_tag_cloud">
    <h3 class="widget-title">Tag cloud</h3>
    <div class="tagcloud">
        <a title="1 topic" href="#">blog</a>
        <a title="1 topic" href="#">post</a>
        <a title="1 topic" href="#">multi purpose</a>
        <a title="1 topic" href="#">web design</a>
        <a title="1 topic" href="#">creative</a>
        <a title="1 topic" href="#">isotope</a>
        <a title="1 topic" href="#">masonry</a>
        <a title="1 topic" href="#">infinite</a>
        <a title="1 topic" href="#">scroll</a>
        <a title="1 topic" href="#">retina</a>
        <a title="1 topic" href="#">themeforest</a>
    </div>
</aside>

Element name: Sidebar: Categories

Output

Code


<!-- Widget: Categories -->
<aside class="widget widget_categories">
    <h3 class="widget-title">Categories</h3>
    <ul class="">
        <li class="cat-item">
            <a href="category.html">Sky diving</a>
        </li>
        <li class="cat-item">
            <a href="category.html">Category2</a>
        </li>
        <li class="cat-item">
            <a href="category.html">Category3</a>
        </li>
    </ul>
</aside>

Element name: Sidebar: Social icons

Output

Code


<!-- Widget: Social Media Widget -->
<aside class="widget widget_social_links">
    <h3 class="widget-title">Follow me on:</h3>
    <div class="social_links">
        <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Facebook">
            <i class="fa fa-facebook"></i>
        </a>
        <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Dribbble">
            <i class="fa fa-dribbble"></i>
        </a>
        <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Stumbleupon">
            <i class="fa fa-stumbleupon"></i>
        </a>
        <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="LinkedIn">
            <i class="fa fa-linkedin"></i>
        </a>
        <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Instagram">
            <i class="fa fa-instagram"></i>
        </a>
        <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Google+">
            <i class="fa fa-google-plus"></i>
        </a>
        <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Twitter">
            <i class="fa fa-twitter"></i>
        </a>
        <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="RSS">
            <i class="fa fa-rss"></i>
        </a>
        <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Tumblr">
            <i class="fa fa-tumblr"></i>
        </a>
        <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Lastfm">
            <i class="fa fa-lastfm"></i>
        </a>
    </div>
</aside>

Element name: Sidebar: Flickr feed

Output

Code


<!-- Widget: Flickr feed -->
<aside class="widget widget_flickr">
    <h3 class="widget-title">Flickr feed</h3>
    <div class="flickr_badge_image">
        <a href="#">
            <img width="70" height="70" src="img/flickr/flickr_1.png" alt="A photo on Flickr" title="">
        </a>
    </div>
    <div class="flickr_badge_image">
        <a href="#">
            <img width="70" height="70" src="img/flickr/flickr_2.png" alt="A photo on Flickr" title="">
        </a>
    </div>
    <div class="flickr_badge_image">
        <a href="#">
            <img width="70" height="70" src="img/flickr/flickr_3.png" alt="A photo on Flickr" title="">
        </a>
    </div>
    <div class="flickr_badge_image">
        <a href="">
            <img width="70" height="70" src="img/flickr/flickr_4.png" alt="A photo on Flickr" title="">
        </a>
    </div>
    <div class="flickr_badge_image">
        <a href="#">
            <img width="70" height="70" src="img/flickr/flickr_5.png" alt="A photo on Flickr" title="">
        </a>
    </div>
    <div class="flickr_badge_image">
        <a href="#">
            <img width="70" height="70" src="img/flickr/flickr_6.png" alt="A photo on Flickr" title="">
        </a>
    </div>
</aside>

Element name: Sidebar: Search for posts widget

Output

Code


<!-- Widget: Search for posts -->
<aside class="widget widget_search">
    <h3 class="widget-title">Search for posts</h3>
    <form role="search" method="get" class="search-form">
        <label>
            <input type="search" class="search-field form-control" placeholder="Search …" value="" name="s" title="Search for:">
        </label>
    </form>
</aside>

Element name: Sidebar: text widget

Output

Code


<!-- Widget: Text widget -->
<aside class="widget widget_text">
    <h3 class="widget-title">Text widget</h3>
    <div class="textwidget">Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time.</div>
</aside>

Element name: Dropcaps

Output

Code


<p><span class="dropcap rose">S</span>Expedite maximize quality e-services after cutting-edge e-markets. Dramatically expedite viral systems without ethical platforms. Competently innovate goal-oriented action items for standardized internal or "organic" sources. Distinctively empower cross functional partnerships and open-source meta-services. Globally expedite unique experiences without magnetic paradigms.</p>

Element name: Text highlight

Output

Code


<p>Continually mesh scalable ideas rather than innovative niche markets. Efficiently matrix worldwide initiatives via proactive results. Authoritatively parallel task cooperative infomediaries vis-a-vis prospective convergence. Completely <span class="highlighting-text rose">this text is highlighted</span> and multifunctional e-business. Intrinsicly parallel task intermandated internal or "organic" sources rather than front-end infomediaries.</p>

Element name: Paragraphs with right aligned image

Output

Code


<h4>Paragraphs with right aligned image</h4>
<img class="pull-right" src="img/blog-posts/post-400px.jpg" alt=""><p>Synergistically customize economically sound human capital via inexpensive infrastructures. Professionally grow long-term high-impact synergy vis-a-vis cross-unit niche markets. Professionally simplify fully researched networks after fully tested process improvements. Progressively pursue plug-and-play alignments after fully tested paradigms. Assertively leverage existing standards compliant solutions rather than maintainable core competencies.</p>

Element name: Paragraphs with left aligned image

Output

Code


<h4>Paragraphs with left aligned image</h4>
<img class="pull-left" src="img/blog-posts/post-400px.jpg" alt=""><p>Synergistically customize economically sound human capital via inexpensive infrastructures. Professionally grow long-term high-impact synergy vis-a-vis cross-unit niche markets. Professionally simplify fully researched networks after fully tested process improvements. Progressively pursue plug-and-play alignments after fully tested paradigms. Assertively leverage existing standards compliant solutions rather than maintainable core competencies.</p>

The theme comes with several CSS (stylesheet) files grouped in the stylesheet folder:

styles.css - Main CSS file;
bootstrap.min.css - Boostrap Minified CSS;
responsive.css - Responsive stylesheet layout CSS;
portfolio.css - Portfolio Masonry CSS;
owl.carousel.css - OWL Carousel main CSS;
owl.transitions.css - OWL Transitions;
jquery.custom-scrollbar.css - jquery custom-scrollbar;
font-awesome.min.css - Font-awesome CSS;
fakeLoader.css - fancy page loader;

AMAEZI comes with Google Maps integrated in contact page.

As of June 2016, Google has issued a new update to the Google Maps APIs Standard Plan. In the new update, Google no longer supports keyless access (any request that doesn’t include an API Key) and has made all future product updates only available for requests made with an API Key. Also included in this update are functionality and performance enhancements. To read Google’s official statement, please read this article.

To use this feature generate a Google Maps API KEY and set it on contact.html:

Read Google’s Get a Key/Authentication Article to learn how to generate an api key
How to add the API KEY on contact.html - Usually an API KEY have the following structure: xxxxxxxx-xxxxxxxxxxxxx-xxx-xxxxxxxxxxx. After generating your own api key open the contact.html and scroll down to this line:

Replace the string with your own api key.

AMAEZI comes with Mailchimp subscription form integrated.

To use this feature you must follow few small steps:

1. Find your MailChimp API Key:
The first thing you need to do before proceeding with the integration is to generate/find your MailChimp API Key.
->Login to your MailChimp panel, click Profile ⇢ Account Settings ⇢ Extras ⇢ API Keys and then copy your existing API Key or click the Create a Key button.
->More detailed instruction (video) also available on MailChimp help page.
->Your MailChimp API Key should be something like this:
1644b44d50bcc02f6f789aaf324f82ec-us4
2. Find your MailChimp List ID
->Login to your MailChimp panel, click Lists ⇢ Settings ⇢ List name & defaults. Now you see your ListID:
3. Find your Data server location
->From your api key the Data server location is for e.g. “us1″, “us2″, “uk1″, etc.
4. Now open php/subscribe.php and replace dummy API Key/ListID and data server location with your own details:

To change the receiver email address of the site follow these steps:

Go to your theme files php/contact_mail.php and replace loremipsum@mail.com with your own email address.

This template is heavili loaded with both custom JS functions and free jQuery plugins. All JS files are placed in a separate folder called "js". The list of files is as follows:

bootstrap.min.js - Bootstrap JS
bootstrap-transition.js - Bootstrap transition JS
classie.js - Classie JS
custom.js - AMAEZI's custom scripts
fakeLoader.min.js - Fake page loader
gmaps-v3.js - Google Maps V3
jquery.custom-scrollbar.min.js - Custom scroll bar JS
jquery.form.js - jQuery FORM
jquery.ketchup.all.min.js - jQuery form validation
jquery.infinitescroll.js - jQuery infinite scroll
jquery.validate.min.js - jQuery form validation
jquery.min.js - jQuery
jquery.sticky.js - jQuery Sticky
jquery.validate.min.js - jQuery Validate
masonry.pkgd.min.js - Masonry JS
modernizr.custom.js - Modernizr custom JS
owl.carousel.min.js - OWL carousel
scrollIt.min.js - scrollIt
search-form.js - Search form JS

All JS functions related to the theme content management are placed in custom.js or inline in the HTML files if required. The custom.js file is responsible for every custom script running on the template.

We've used the following images, icons or other files as listed.

classie by desandro
modernizr by Modernizr
OwlCarousel by OwlFonk
jQuery Validation Plugin by jzaefferer
Font Awesome icons by Font Awesome
Lato Font by Google Fonts
Open Sans Font by Google Fonts

All credits for our fonts goes to

Google Fonts

All credits for our images goes to

SplitShire - Images with CC license
Unsplash - Images with CC license

Amaezi Cuisine- Responsive Restaurant HTML Template

Overview

Installation

HTML Elements

Element name: Typography elements

Output

Code

Element name: Headings

Output

Code

Element name: Preformatted code

Output

Code

Element name: Blockquotes

Output

Code

Element name: Lists - Unordered

Output

Code

Element name: Lists - Ordered

Output

Code

Element name: Retina ready icons

Output

Code

Element name: Buttons Style v1 - Colored

Element name: Buttons - Big/Colored

Output

Code

Element name: Buttons - Normal/Colored

Output

Code

Element name: Buttons - Small/Colored

Output

Code

Element name: Buttons - Extra Small/Colored

Output

Code

Element name: Buttons Style v2 - Bordered

Element name: Buttons - Big/Bordered

Output

Code

Element name: Buttons - Normal/Bordered

Output

Code

Element name: Buttons - Small/Bordered

Output

Code

Element name: Buttons - Extra Small/Bordered

Output

Code

Element name: Label badges

Output

Code

Element name: Badges

Output

Code

Element name: Alerts

Output

Code

Element name: Progress bars

Element name: Progress bars - Without label

Output

Code

Element name: Progress bars - With label

Output

Code

Element name: Progress bars - Striped - without label

Output

Code

Element name: Progress bars - Striped - with label

Output

Code

Element name: Grid image blocks

Output

Code

Element name: Text alignment

Output

Code

Element name: Table - simple