Widgets
Customize your theme with awesome widgets.
Feedback Model Form
<!-- Feedback Modal Trigger -->
<a class="waves-effect waves-light btn default" href="#feedback-modal"><i class="material-icons left">feedback</i>Feedback</a>
<!-- Feedback Modal Structure -->
<div id="feedback-modal" class="modal small info-model-form">
<div class="modal-content">
<div class="info-form-title">
<h4>Drop us a Line</h4>
<i class="material-icons right me-close modal-close waves-effect waves-red">clear</i>
</div>
<div class="info-form-body">
<form>
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input id="name" type="text">
<label for="name">Name</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">mail</i>
<input id="email" type="email">
<label for="email">Email</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">message</i>
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1">Message</label>
</div>
<div class="input-field col s12 center">
<button type="submit" class="btn default contact-us-button">Contact US</button>
</div>
</form>
</div>
</div>
</div>
Right Sidebar
<!--right sidebar toggle-->
<div class="toggle-right-sidebar toggle-fixed z-depth-1"><i class="material-icons toggle-icon">menu</i></div>
<!--Right Sidebar content-->
<aside id="right-sidebar-nav">
<div class="right-sidebar-content">
<ul class="content-list">
<li>
<a href="#">
<span class="list-title white-text red">ORDER</span>
<span class="list-date">9 hours ago</span>
<h4 class="list-content-title">facilisis</h4>
<p class="list-content">
Etiam auctor porta augue sit amet facilisis. Sed libero nisi, scelerisque.
</p>
</a>
</li>
<li>
<a href="#">
<span class="list-title white-text blue">COMMENT</span>
<span class="list-date">10 hours ago</span>
<h4 class="list-content-title">porta augue</h4>
<p class="list-content">
Etiam auctor porta augue sit amet facilisis. Sed libero nisi, scelerisque.
</p>
</a>
</li>
<li>
<a href="#">
<span class="list-title white-text green">MEETING</span>
<span class="list-date">11 hours ago</span>
<h4 class="list-content-title">Sed libero</h4>
<p class="list-content">
Etiam auctor porta augue sit amet facilisis. Sed libero nisi, scelerisque.
</p>
</a>
</li>
<li>
<a href="#">
<span class="list-title white-text teal">EVENT</span>
<span class="list-date">12 hours ago</span>
<h4 class="list-content-title">sit amet</h4>
<p class="list-content">
Etiam auctor porta augue sit amet facilisis. Sed libero nisi, scelerisque.
</p>
</a>
</li>
<li>
<a href="#">
<span class="list-title white-text red">ORDER</span>
<span class="list-date">13 hours ago</span>
<h4 class="list-content-title">augue</h4>
<p class="list-content">
Etiam auctor porta augue sit amet facilisis. Sed libero nisi, scelerisque.
</p>
</a>
</li>
</ul>
</div>
</aside>
Update Plan Model
<!-- update plan button -->
<a class="waves-effect waves-light btn default" href="#update-plan-modal"><i class="material-icons left">system_update_alt</i>Update Plan</a>
<!-- update plan Modal Structure -->
<div id="update-plan-modal" class="modal update-plan-model">
<div class="modal-content">
<div class="update-plan-title">
<h4 class="center">Upgrade your Account</h4>
<i class="material-icons right me-close modal-close waves-effect waves-red">clear</i>
</div>
<div class="update-plan-body">
<div class="row no-margin">
<div class="col s12 no-padding">
<ul class="tabs tabs-fixed-width">
<li class="tab"><a class="active" href="#pro">PRO</a></li>
<li class="tab"><a href="#business">BUSINESS</a></li>
<li class="tab"><a href="#enterprise">ENTERPRISE</a></li>
</ul>
</div>
<div id="pro" class="row">
<div class="col s6 l6 m6 update-plan-list">
<p class="update-plan-list-title">What's Included</p>
<ul>
<li>Material Design Icons</li>
<li>Modals</li>
<li>Responsive Menu</li>
<li>Custom Tables</li>
<li>Form Validations</li>
<span>... and much more!</span>
</ul>
</div>
<div class="col s6 l6 m6">
<div class="update-plan-price center">
<p class="update-plan-value"><span class="doller">$</span>29</p>
<span class="update-plan-format">PER MONTH</span>
<a class="btn default update-plan-button" href="#">Buy Now</a>
</div>
</div>
</div>
<div id="business" class="row">
<div class="col s6 l6 m6 update-plan-list">
<p class="update-plan-list-title">What's Included</p>
<ul>
<li>Material Design Icons</li>
<li>Modals</li>
<li>Responsive Menu</li>
<li>Custom Tables</li>
<li>Form Validations</li>
<span>... and much more!</span>
</ul>
</div>
<div class="col s6 l6 m6">
<div class="update-plan-price center">
<p class="update-plan-value"><span class="doller">$</span>99</p>
<span class="update-plan-format">PER MONTH</span>
<a class="btn default update-plan-button" href="#">Buy Now</a>
</div>
</div>
</div>
<div id="enterprise" class="row">
<div class="col s6 l6 m6 update-plan-list">
<p class="update-plan-list-title">What's Included</p>
<ul>
<li>Material Design Icons</li>
<li>Modals</li>
<li>Responsive Menu</li>
<li>Custom Tables</li>
<li>Form Validations</li>
<span>... and much more!</span>
</ul>
</div>
<div class="col s6 l6 m6">
<form class="update-plan-contact-form">
<div class="input-field col s12">
<input id="update-name" type="text">
<label for="update-name">Name</label>
</div>
<div class="input-field col s12">
<input id="update-email" type="email">
<label for="update-email">Email</label>
</div>
<div class="input-field col s12">
<textarea id="update-textarea1" class="materialize-textarea"></textarea>
<label for="update-textarea1">Message</label>
</div>
<div class="input-field col s12 center">
<button type="submit" class="btn default update-plan-button">EMAIL US</button>
</div>
</form>
</div>
</div>
</div>
</div>