Footer Blocks variations
Contacts
<footer class="footer padding-top-lmedium padding-bottom-lmedium">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-contacts">
<p class="footer-title h4">Contacts</p>
<ul>
<li class="tooltipster tooltipster-dflt" title="Click to see map">
<i class='fa fa-location-arrow'></i>
<a href="#" data-toggle="modal" data-target=".map-modal">Kate Corp. 1020 5th Ave, New York, NY 10028, USA</a>
</li>
<li>
<i class='fa fa-phone'></i>
<a class="phone-button" href="tel:+19175555555">+0 (917) 555-5555</a>
</li>
<li>
<i class='fa fa-fax'></i>
<a class="phone-button" href="tel:+17185555555">+0 (718) 555-5555</a>
</li>
<li>
<i class='fa fa-envelope-o'></i>
<a href="mailto:[email protected]">[email protected]</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-contacts">
<p class="footer-title h4">Contact us</p>
<ul>
<li class="tooltipster tooltipster-dflt" title="Click to see map">
<strong>Headquarters:</strong><br>
<a href="#" data-toggle="modal" data-target=".map-modal">Kate Corp. 1020 5th Ave, New York, NY 10028, USA</a>
</li>
<li>
<strong>Phone:</strong> <a href="tel:+19175555555">+0 (917) 555-5555</a>
</li>
<li>
<strong>Fax:</strong> <a href="tel:+17185555555">+0 (718) 555-5555</a>
</li>
<li>
<strong>Email:</strong> <a href="mailto:[email protected]">[email protected]</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-contacts">
<p class="footer-title h4">Our contacts</p>
<ul>
<li class="tooltipster tooltipster-dflt" title="Click to see map">
<i class='fa fa-location-arrow'></i>
<a href="#" data-toggle="modal" data-target=".map-modal">Kate Corp. 1020 5th Ave, New York, NY 10028, USA</a>
</li>
<li><hr class="narrow hidden-xs"></li>
<li>
<i class='fa fa-phone'></i>
<a class="phone-button" href="tel:+19175555555">+0 (917) 555-5555</a>
</li>
<li><hr class="narrow hidden-xs"></li>
<li>
<i class='fa fa-fax'></i>
<a class="phone-button" href="tel:+17185555555">+0 (718) 555-5555</a>
</li>
<li><hr class="narrow hidden-xs"></li>
<li>
<i class='fa fa-envelope-o'></i>
<a class="email-button" href="mailto:[email protected]">[email protected]</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-contacts">
<p class="footer-title h4"> </p>
<ul>
<li class="tooltipster tooltipster-dflt" title="Click to see map">
<a href="#" data-toggle="modal" data-target=".map-modal">Kate Corp. 1020 5th Ave, New York, NY 10028, USA</a>
</li>
<li>
<a href="tel:+19175555555">+0 (917) 555-5555</a>
</li>
<li>
<a href="tel:+17185555555">+0 (718) 555-5555</a>
</li>
<li>
<a href="mailto:[email protected]">[email protected]</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<footer class="footer padding-medium">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="footer-block instagram-block gallery-tiny-icons">
<p class="footer-title h4">Instagram feed</p>
<div id="instafeed-footer3"></div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="footer-block instagram-block gallery-small-icons">
<p class="footer-title h4">Instagram gallery</p>
<div id="instafeed-footer2"></div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="footer-block instagram-block gallery-medium-icons">
<p class="footer-title h4">Instagram photos</p>
<div id="instafeed-footer1"></div>
</div>
</div>
</div>
</div>
</footer>
Works
<footer class="footer padding-top-lmedium padding-bottom-lmedium">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="footer-block gallery-small-icons">
<p class="footer-title h4">Latest works</p>
<div class="footer-portfolio">
<a href="#">
<img src="/img/portfolio/small/1.jpg" alt="portfolio element 1">
</a>
<a href="#">
<img src="/img/portfolio/small/2.jpg" alt="portfolio element 2">
</a>
<a href="#">
<img src="/img/portfolio/small/3.jpg" alt="portfolio element 3">
</a>
<a href="#">
<img src="/img/portfolio/small/4.jpg" alt="portfolio element 4">
</a>
<a href="#">
<img src="/img/portfolio/small/5.jpg" alt="portfolio element 5">
</a>
<a href="#">
<img src="/img/portfolio/small/6.jpg" alt="portfolio element 6">
</a>
<a href="#">
<img src="/img/portfolio/small/7.jpg" alt="portfolio element 7">
</a>
<a href="#">
<img src="/img/portfolio/small/8.jpg" alt="portfolio element 8">
</a>
<a href="#">
<img src="/img/portfolio/small/9.jpg" alt="portfolio element 9">
</a>
<a href="#">
<img src="/img/portfolio/small/10.jpg" alt="portfolio element 10">
</a>
<a href="#">
<img src="/img/portfolio/small/11.jpg" alt="portfolio element 11">
</a>
<a href="#">
<img src="/img/portfolio/small/12.jpg" alt="portfolio element 12">
</a>
</div>
<div class="m-t-md">
<a class="inline-block h5" href="#">View more...</a>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="footer-block gallery-tiny-icons">
<p class="footer-title h4">Latest works</p>
<div class="footer-portfolio">
<a href="#">
<img src="/img/portfolio/small/1.jpg" alt="portfolio element 1">
</a>
<a href="#">
<img src="/img/portfolio/small/2.jpg" alt="portfolio element 2">
</a>
<a href="#">
<img src="/img/portfolio/small/3.jpg" alt="portfolio element 3">
</a>
<a href="#">
<img src="/img/portfolio/small/4.jpg" alt="portfolio element 4">
</a>
<a href="#">
<img src="/img/portfolio/small/5.jpg" alt="portfolio element 5">
</a>
<a href="#">
<img src="/img/portfolio/small/6.jpg" alt="portfolio element 6">
</a>
<a href="#">
<img src="/img/portfolio/small/7.jpg" alt="portfolio element 7">
</a>
<a href="#">
<img src="/img/portfolio/small/8.jpg" alt="portfolio element 8">
</a>
<a href="#">
<img src="/img/portfolio/small/9.jpg" alt="portfolio element 9">
</a>
<a href="#">
<img src="/img/portfolio/small/10.jpg" alt="portfolio element 10">
</a>
<a href="#">
<img src="/img/portfolio/small/11.jpg" alt="portfolio element 11">
</a>
<a href="#">
<img src="/img/portfolio/small/12.jpg" alt="portfolio element 12">
</a>
<a href="#">
<img src="/img/portfolio/small/13.jpg" alt="portfolio element 13">
</a>
<a href="#">
<img src="/img/portfolio/small/14.jpg" alt="portfolio element 14">
</a>
<a href="#">
<img src="/img/portfolio/small/15.jpg" alt="portfolio element 15">
</a>
<a href="#">
<img src="/img/portfolio/small/16.jpg" alt="portfolio element 16">
</a>
<a href="#">
<img src="/img/portfolio/small/17.jpg" alt="portfolio element 17">
</a>
<a href="#">
<img src="/img/portfolio/small/18.jpg" alt="portfolio element 18">
</a>
<a href="#">
<img src="/img/portfolio/small/19.jpg" alt="portfolio element 19">
</a>
<a href="#">
<img src="/img/portfolio/small/20.jpg" alt="portfolio element 20">
</a>
</div>
<div class="text-center m-t-md">
<a class="inline-block slab h5 text-uppercase" href="#">View more</a>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="footer-block gallery-medium-icons">
<p class="footer-title h4">Latest works</p>
<div class="footer-portfolio">
<a href="#">
<img src="/img/portfolio/small/1.jpg" alt="portfolio element 1">
</a>
<a href="#">
<img src="/img/portfolio/small/2.jpg" alt="portfolio element 2">
</a>
<a href="#">
<img src="/img/portfolio/small/3.jpg" alt="portfolio element 3">
</a>
<a href="#">
<img src="/img/portfolio/small/4.jpg" alt="portfolio element 4">
</a>
<a href="#">
<img src="/img/portfolio/small/5.jpg" alt="portfolio element 5">
</a>
<a href="#">
<img src="/img/portfolio/small/6.jpg" alt="portfolio element 6">
</a>
</div>
<div class="text-right m-t-md">
<a class="inline-block slab h5" href="#">View More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</footer>
Archive
<footer class="footer padding-top-lmedium padding-bottom-lmedium">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-archive">
<p class="footer-title h4">Archive</p>
<ul class="list-unstyled">
<li><a href="#">April 2016</a></li>
<li><a href="#">March 2016</a></li>
<li><a href="#">February 2016</a></li>
<li><a href="#">January 2016</a></li>
<li><a href="#">December 2015</a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-archive">
<p class="footer-title h4">Old posts</p>
<ul class="list-unstyled slab text-uppercase h6">
<li><a href="#">April 2016</a></li>
<li><a href="#">March 2016</a></li>
<li><a href="#">February 2016</a></li>
<li><a href="#">January 2016</a></li>
<li><a href="#">December 2015</a></li>
<li><a href="#">November 2015</a></li>
</ul>
</div>
</div>
<div class=" col-sm-6 col-md-3">
<div class="footer-block footer-archive">
<p class="footer-title h4">Records</p>
<ul class="list-unstyled archive-border h5">
<li><a href="#">April 2016</a></li>
<li><a href="#">March 2016</a></li>
<li><a href="#">February 2016</a></li>
<li><a href="#">January 2016</a></li>
<li><a href="#">December 2015</a></li>
<li><a href="#">November 2015</a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-archive">
<p class="footer-title h4">Time machine</p>
<ul class="list-unstyled h5">
<li><a href="#">April 2016</a></li>
<li><a href="#">March 2016</a></li>
<li><a href="#">February 2016</a></li>
<li><a href="#">January 2016</a></li>
<li><a href="#">December 2015</a></li>
<li><a href="#">November 2015</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
Form
<footer class="footer padding-top-lmedium padding-bottom-lmedium">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<form>
<p class="footer-title h4">Send Email</p>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-smile-o"></i></span>
<input type="text" class="form-control" placeholder="Your Name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
<input type="email" class="form-control" placeholder="Email Address">
</div>
</div>
<div class="form-group">
<textarea class="form-control" rows="3" placeholder="Message"></textarea>
</div>
<button type="submit" class="button button-primary button-rounded button-small text-uppercase">Send Message</button>
</form> </div>
<div class="col-sm-6 col-md-4">
<form data-toggle="validator" class="form-validator">
<p class="footer-title h4">Validator</p>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" class="form-control" placeholder="Your Name" required>
</div>
<div class="help-block with-errors"></div>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-twitter"></i></span>
<input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" placeholder="Twitter Account" required>
</div>
<div class="help-block with-errors"></div>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="email" aria-label="email" class="form-control" placeholder="Email Address" data-error="That email address is invalid" required>
</div>
<div class="help-block with-errors"></div>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group has-feedback">
<textarea class="form-control" rows="3" placeholder="Message" required></textarea>
<div class="help-block with-errors"></div>
</div>
<button type="submit" class="button button-primary button-rounded button-small">Send Email</button>
</form> </div>
<div class="col-sm-6 col-md-4">
<form>
<p class="footer-title h4">Send File</p>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address">
<small class="text-muted">We hate spam!</small>
</div>
<label class="file m-b-lg m-t">
<input type="file">
<span class="file-custom"></span>
</label>
<div class="form-group">
<textarea class="form-control" rows="3" placeholder="Comment to the file"></textarea>
</div>
<button type="submit" class="button button-primary button-rounded button-small text-uppercase">Send File For a Review</button>
</form> </div>
</div>
</div>
</footer>
Tags
<footer class="footer padding-top-lmedium padding-bottom-lmedium">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-tags">
<p class="footer-title-small h4">Tags</p>
<ul class="list-inline">
<li><a href="#">shop</a></li>
<li><a href="#">logo</a></li>
<li><a href="#">jquery</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">css</a></li>
<li><a href="#">html</a></li>
<li><a href="#">design</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">lifehack</a></li>
<li><a href="#">js</a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-tags">
<p class="footer-title-small h4">Tag cloud</p>
<ul class="list-inline">
<li><a class="circle-block" href="#">shop</a></li>
<li><a class="circle-block" href="#">logo</a></li>
<li><a class="circle-block" href="#">jquery</a></li>
<li><a class="circle-block" href="#">blog</a></li>
<li><a class="circle-block" href="#">css</a></li>
<li><a class="circle-block" href="#">html</a></li>
<li><a class="circle-block" href="#">design</a></li>
<li><a class="circle-block" href="#">portfolio</a></li>
<li><a class="circle-block" href="#">lifehack</a></li>
<li><a class="circle-block" href="#">js</a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-tags">
<p class="footer-title-small h4">Filter</p>
<ul class="list-inline">
<li><a class="rounded-block" href="#">shop</a></li>
<li><a class="rounded-block" href="#">logo</a></li>
<li><a class="rounded-block" href="#">jquery</a></li>
<li><a class="rounded-block" href="#">blog</a></li>
<li><a class="rounded-block" href="#">css</a></li>
<li><a class="rounded-block" href="#">html</a></li>
<li><a class="rounded-block" href="#">design</a></li>
<li><a class="rounded-block" href="#">portfolio</a></li>
<li><a class="rounded-block" href="#">lifehack</a></li>
<li><a class="rounded-block" href="#">js</a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block">
<p class="footer-title-small h4">Most popular</p>
<ul class="list-inline">
<li><a href="#">shop</a></li>
<li><a href="#">logo</a></li>
<li><a href="#">jquery</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">css</a></li>
<li><a href="#">html</a></li>
<li><a href="#">design</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">lifehack</a></li>
<li><a href="#">js</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
Testimonials
<footer class="footer padding-top-lmedium padding-bottom-lmedium">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="footer-block">
<div class="feedback text-center feedback-carousel feedback-carousel-footer">
<div class="footer-carousel">
<div>
<div class="feedback-text text-center">
<blockquote>Life is a series of experiences, each of which makes us bigger, even though it is hard to realize this. For the world was built to develop character, and we must learn that the setbacks and griefs which we endure help us in our marching onward</blockquote>
<div class="author">
<span class="author-name">Anna Hopkins</span>
<span class="author-info">Microsoft</span>
</div>
</div>
</div>
<div>
<div class="feedback-text text-center">
<blockquote>Is it so bad, then, to be misunderstood? Pythagoras was misunderstood, and Socrates, and Jesus, and Luther, and Copernicus, and Galileo, and Newton, and every pure and wise spirit that ever took flesh. To be great is to be misunderstood</blockquote>
<div class="author">
<span class="author-name">Felix Romero</span>
<span class="author-info">IBM</span>
</div>
</div>
</div>
<div>
<div class="feedback-text text-center">
<blockquote>Take up one idea. Make that one idea your life - think of it, dream of it, live on that idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success and the way great spiritual are produced</blockquote>
<div class="author">
<span class="author-name">Joyce Kuhn</span>
<span class="author-info">Apple</span>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div class="col-sm-6 col-md-4">
<div class="footer-block">
<div class="feedback text-center feedback-carousel feedback-carousel-footer">
<div class="footer-carousel">
<div>
<div class="feedback-text text-center">
<blockquote class="slab">Life is a series of experiences, each of which makes us bigger, even though it is hard to realize this. For the world was built to develop character, and we must learn that the setbacks and griefs which we endure help us in our marching onward</blockquote>
<div class="author h6 m-r">
<span class="author-name"><em>Anna Hopkins</em></span>
<span class="author-info"><em>Microsoft</em></span>
</div>
</div>
</div>
<div>
<div class="feedback-text text-center">
<blockquote class="slab">Is it so bad, then, to be misunderstood? Pythagoras was misunderstood, and Socrates, and Jesus, and Luther, and Copernicus, and Galileo, and Newton, and every pure and wise spirit that ever took flesh. To be great is to be misunderstood</blockquote>
<div class="author h6 m-r">
<span class="author-name"><em>Felix Romero</em></span>
<span class="author-info"><em>IBM</em></span>
</div>
</div>
</div>
<div>
<div class="feedback-text text-center">
<blockquote class="slab">Take up one idea. Make that one idea your life - think of it, dream of it, live on that idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success and the way great spiritual are produced</blockquote>
<div class="author h6 m-r">
<span class="author-name"><em>Joyce Kuhn</em></span>
<span class="author-info"><em>Apple</em></span>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div class="col-sm-6 col-md-4">
<div class="footer-block">
<div class="feedback text-center feedback-carousel feedback-carousel-footer">
<div class="footer-carousel">
<div>
<div class="circle-img">
<img class="circle-block" src="/img/feedback/48.jpg" alt="Anna Hopkins">
</div>
<div class="feedback-text text-center">
<blockquote>Life is a series of experiences, each of which makes us bigger, even though it is hard to realize this. For the world was built to develop character, and we must learn that the setbacks and griefs which we endure help us in our marching onward</blockquote>
<div class="author">
<span class="author-name">Anna Hopkins</span>
<span class="author-info">Microsoft</span>
</div>
</div>
</div>
<div>
<div class="circle-img">
<img class="circle-block" src="/img/feedback/88.jpg" alt="Felix Romero">
</div>
<div class="feedback-text text-center">
<blockquote>Is it so bad, then, to be misunderstood? Pythagoras was misunderstood, and Socrates, and Jesus, and Luther, and Copernicus, and Galileo, and Newton, and every pure and wise spirit that ever took flesh. To be great is to be misunderstood</blockquote>
<div class="author">
<span class="author-name">Felix Romero</span>
<span class="author-info">IBM</span>
</div>
</div>
</div>
<div>
<div class="circle-img">
<img class="circle-block" src="/img/feedback/71.jpg" alt="Joyce Kuhn">
</div>
<div class="feedback-text text-center">
<blockquote>Take up one idea. Make that one idea your life - think of it, dream of it, live on that idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success and the way great spiritual are produced</blockquote>
<div class="author">
<span class="author-name">Joyce Kuhn</span>
<span class="author-info">Apple</span>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div>
</div>
</footer>
Navigation
<footer class="footer padding-top-lmedium padding-bottom-lmedium">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="footer-block">
<p class="footer-title h4">Navigation</p>
<ul>
<li><a href="/"><i class='fa fa-home'></i> Home</a></li>
<li><a href="/features/"><i class='fa fa-cogs'></i> Features</a></li>
<li><a href="/pages/"><i class='fa fa-wrench'></i> Pages</a></li>
<li><a href="/elements/"><i class='fa fa-code'></i> Elements</a></li>
<li><a href="/ui/"><i class='fa fa-star'></i> UI</a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block">
<p class="footer-title h4">Menu</p>
<ul>
<li><a href="/"><i class="fa fa-angle-right"></i> Home</a></li>
<li><a href="/features/"><i class="fa fa-angle-right"></i> Features</a></li>
<li><a href="/pages/"><i class="fa fa-angle-right"></i> Pages</a></li>
<li><a href="/elements/"><i class="fa fa-angle-right"></i> Elements</a></li>
<li><a href="/ui/"><i class="fa fa-angle-right"></i> UI</a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block">
<p class="footer-title h4">Shortcuts</p>
<ul>
<li><a href="/"><i class="fa fa-angle-double-right"></i> Home</a></li>
<li><a href="/features/"><i class="fa fa-angle-double-right"></i> Features</a></li>
<li><a href="/pages/"><i class="fa fa-angle-double-right"></i> Pages</a></li>
<li><a href="/elements/"><i class="fa fa-angle-double-right"></i> Elements</a></li>
<li><a href="/ui/"><i class="fa fa-angle-double-right"></i> UI</a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block">
<p class="footer-title h4">Links</p>
<ul>
<li><a href="/"><i class="fa fa-caret-right"></i> Home</a></li>
<li><a href="/features/"><i class="fa fa-caret-right"></i> Features</a></li>
<li><a href="/pages/"><i class="fa fa-caret-right"></i> Pages</a></li>
<li><a href="/elements/"><i class="fa fa-caret-right"></i> Elements</a></li>
<li><a href="/ui/"><i class="fa fa-caret-right"></i> UI</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
News
<footer class="footer padding-top-lmedium padding-bottom-lmedium">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-news">
<p class="footer-title h4">Recent news</p>
<ul>
<li>
<a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</a>
<em class="block date color-555">yesterday</em>
</li>
<li>
<a href="#">Collaboratively administrate empowered markets via plug-and-play networks.</a>
<em class="block date color-555">3 days ago</em>
</li>
<li>
<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft</a>
<em class="block date color-555">7 days ago</em>
</li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-news">
<p class="footer-title h4">News</p>
<ul>
<li>
<a href="#"><i class="fa fa-angle-right"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</a>
<em class="block date color-555">10:50am</em>
</li>
<li>
<a href="#"><i class="fa fa-angle-right"></i> Collaboratively administrate empowered markets via plug-and-play networks.</a>
<em class="block date color-555">04:17pm</em>
</li>
<li>
<a href="#"><i class="fa fa-angle-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft</a>
<em class="block date color-555">yesterday, at 15:20am</em>
</li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-news">
<p class="footer-title h4">Latest news</p>
<ul>
<li>
<a href="#"><i class="fa fa-angle-double-right"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</a>
<em class="block date color-555">20.04.16</em>
</li>
<li>
<a href="#"><i class="fa fa-angle-double-right"></i> Collaboratively administrate empowered markets via plug-and-play networks.</a>
<em class="block date color-555">07.02.16</em>
</li>
<li>
<a href="#"><i class="fa fa-angle-double-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft</a>
<em class="block date color-555">31.12.15</em>
</li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-news">
<p class="footer-title h4">Recent posts</p>
<ul>
<li><a href="#"><i class="fa fa-caret-right"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</a></li>
<li><a href="#"><i class="fa fa-caret-right"></i> Collaboratively administrate empowered markets via plug-and-play networks.</a></li>
<li><a href="#"><i class="fa fa-caret-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft</a></li>
<li><a href="#"><i class="fa fa-caret-right"></i> Huchen elephantnose fish largemouth bass lake whitefish goosefish goblin shark scaly dragonfish lefteye flounder mahi-mahi snake eel</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
Blog
<footer class="footer padding-top-lmedium padding-bottom-lmedium">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="footer-block footer-block-news">
<p class="footer-title h4">Blog news</p>
<ul>
<li><a href="#">
<span class="news-img">
<img src="/img/portfolio/small/1.jpg" alt="blog post 1">
</span>
<span class="news-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
<em class="block date color-555">yesterday</em>
</span>
</a></li>
<li><a href="#">
<span class="news-img">
<img src="/img/portfolio/small/2.jpg" alt="blog post 2">
</span>
<span class="news-text">
Collaboratively administrate empowered markets via plug-and-play networks.
<em class="block date color-555">3 days ago</em>
</span>
</a></li>
<li><a href="#">
<span class="news-img">
<img src="/img/portfolio/small/3.jpg" alt="blog post 3">
</span>
<span class="news-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft
<em class="block date color-555">7 days ago</em>
</span>
</a></li>
<li><a href="#">
<span class="news-img">
<img src="/img/portfolio/small/4.jpg" alt="blog post 4">
</span>
<span class="news-text">
Huchen elephantnose fish largemouth bass lake whitefish goosefish goblin shark scaly dragonfish lefteye flounder mahi-mahi snake eel
<em class="block date color-555">month ago</em>
</span>
</a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="footer-block footer-block-news footer-block-news-center">
<p class="footer-title h4">Blog feed</p>
<ul>
<li><a href="#">
<span class="news-img">
<img src="/img/portfolio/small/1.jpg" alt="blog post 1">
</span>
<span class="news-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
<em class="block date color-555">yesterday</em>
</span>
</a></li>
<li><a href="#">
<span class="news-img">
<img src="/img/portfolio/small/2.jpg" alt="blog post 2">
</span>
<span class="news-text">
Collaboratively administrate empowered markets via plug-and-play networks.
<em class="block date color-555">3 days ago</em>
</span>
</a></li>
<li><a href="#">
<span class="news-img">
<img src="/img/portfolio/small/3.jpg" alt="blog post 3">
</span>
<span class="news-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft
<em class="block date color-555">7 days ago</em>
</span>
</a></li>
<li><a href="#">
<span class="news-img">
<img src="/img/portfolio/small/4.jpg" alt="blog post 4">
</span>
<span class="news-text">
Huchen elephantnose fish largemouth bass lake whitefish goosefish goblin shark scaly dragonfish lefteye flounder mahi-mahi snake eel
<em class="block date color-555">month ago</em>
</span>
</a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="footer-block footer-block-news footer-block-news-alt">
<p class="footer-title h4">Recent blog posts</p>
<ul>
<li><a href="#">
<span class="news-img">
<img src="/img/portfolio/small/1.jpg" alt="blog post 1">
</span>
<span class="news-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
<em class="block date color-555">yesterday</em>
</span>
</a></li>
<li><a href="#">
<span class="news-img">
<img src="/img/portfolio/small/2.jpg" alt="blog post 2">
</span>
<span class="news-text">
Collaboratively administrate empowered markets via plug-and-play networks.
<em class="block date color-555">3 days ago</em>
</span>
</a></li>
<li><a href="#">
<span class="news-img">
<img src="/img/portfolio/small/3.jpg" alt="blog post 3">
</span>
<span class="news-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft
<em class="block date color-555">7 days ago</em>
</span>
</a></li>
<li><a href="#">
<span class="news-img">
<img src="/img/portfolio/small/4.jpg" alt="blog post 4">
</span>
<span class="news-text">
Huchen elephantnose fish largemouth bass lake whitefish goosefish goblin shark scaly dragonfish lefteye flounder mahi-mahi snake eel
<em class="block date color-555">month ago</em>
</span>
</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
Counters
<footer class="footer padding-top-lmedium padding-bottom-lmedium">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-counter">
<p class="footer-counter-wrapper wow fadeIn"><span class="counter h3" id="footer-counter-1"></span> happy clients</p>
<p class="footer-counter-wrapper wow fadeIn"><span class="counter h3" id="footer-counter-2"></span> community members</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-counter">
<div class="row">
<div class="col-sm-7">
<p class="footer-counter-wrapper text-uppercase h4 wow fadeIn">
<span class="counter color-theme h3" id="footer-counter-6"></span>
<br>
community members
</p>
</div>
<div class="col-sm-5">
<p class="footer-counter-wrapper text-uppercase h4 wow fadeIn">
<span class="counter color-theme h3" id="footer-counter-5"></span>
<br>
happy clients
</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-counter footer-block-counter-newline text-center">
<p class="footer-counter-wrapper text-uppercase wow fadeIn">
<span class="counter h3 m-b-0" id="footer-counter-7"></span> happy clients
</p>
<p class="footer-counter-wrapper text-uppercase m-t wow fadeIn">
<span class="counter h3 m-b-0" id="footer-counter-8"></span> community members
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-counter footer-block-counter-uppercase">
<p class="footer-counter-wrapper text-uppercase h3 wow fadeIn">
<span class="counter color-theme" id="footer-counter-3"></span> happy clients
</p>
<p class="footer-counter-wrapper text-uppercase h4 wow fadeIn">
<span class="counter color-theme" id="footer-counter-4"></span> community members
</p>
</div>
</div>
</div>
</div>
</footer>
Devices
<footer class="footer padding-top-lmedium padding-bottom-lmedium">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-devices">
<div class="wow fadeInUp device-big-image">
<picture>
<source srcset="/img/devices-real/iPad.webp" type="image/webp">
<img src="/img/devices-real/iPad.png" alt="iPad">
</picture>
</div>
<div class="wow fadeInRight device-small-image">
<picture>
<source srcset="/img/devices-real/iPhone1.webp" type="image/webp">
<img src="/img/devices-real/iPhone1.png" alt="iPhone">
</picture>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-devices">
<div class="wow fadeInDown device-big-image" data-wow-delay="1s">
<picture>
<source srcset="/img/devices-real/iPad.webp" type="image/webp">
<img src="/img/devices-real/iPad.png" alt="iPad">
</picture>
</div>
<div class="wow fadeInRight device-small-image" data-wow-delay="1s">
<picture>
<source srcset="/img/devices-real/iPhone1.webp" type="image/webp">
<img src="/img/devices-real/iPhone1.png" alt="iPhone">
</picture>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-devices">
<div class="wow fadeInDown device-big-image" data-wow-delay="2s">
<picture>
<source srcset="/img/devices-real/iPad.webp" type="image/webp">
<img src="/img/devices-real/iPad.png" alt="iPad">
</picture>
</div>
<div class="wow fadeInUp device-small-image" data-wow-delay="2s">
<picture>
<source srcset="/img/devices-real/iPhone1.webp" type="image/webp">
<img src="/img/devices-real/iPhone1.png" alt="iPhone">
</picture>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-devices">
<div class="wow fadeInRight device-big-image" data-wow-delay="3s">
<picture>
<source srcset="/img/devices-real/iPad.webp" type="image/webp">
<img src="/img/devices-real/iPad.png" alt="iPad">
</picture>
</div>
<div class="wow fadeInLeft device-small-image" data-wow-delay="3s">
<picture>
<source srcset="/img/devices-real/iPhone1.webp" type="image/webp">
<img src="/img/devices-real/iPhone1.png" alt="iPhone">
</picture>
</div>
</div>
</div>
</div>
</div>
</footer>
Search
<footer class="footer padding-top-lmedium padding-bottom-lmedium">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-search">
<p class="footer-title-small h4">Global search</p>
<form>
<div class="form-group has-feedback">
<div class="input-group">
<input type="search" aria-label="Input and press enter" class="form-control" placeholder="Input and press enter" required>
<span class="input-group-btn">
<button aria-hidden="true" type="submit" class="button button-theme button-rounded button-small"><i class="fa fa-search"></i></button>
</span>
<div class="help-block with-errors"></div>
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-search">
<p class="footer-title-small h4">Search on website</p>
<form>
<div class="form-group has-feedback">
<div class="input-group">
<input type="search" aria-label="Input and press enter" class="form-control" placeholder="Input and press enter" required>
<span class="input-group-btn">
<button type="submit" class="button button-theme button-shrink button-rounded button-small text-uppercase">Search</button>
</span>
<div class="help-block with-errors"></div>
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-search">
<p class="footer-title-small h4">Search</p>
<form>
<div class="form-group has-feedback">
<div class="input-group">
<input type="search" aria-label="Input and press enter" class="form-control" placeholder="Input and press enter" required>
<span class="input-group-btn">
<button type="submit" class="button button-theme button-border button-shrink button-small"><i class="fa fa-search"></i></button>
</span>
<div class="help-block with-errors"></div>
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-search">
<p class="footer-title-small h4"> </p>
<form>
<div class="form-group has-feedback">
<div class="input-group">
<input type="search" class="form-control" placeholder="Website global search" required>
<span class="input-group-btn">
<button type="submit" class="button button-theme button-shrink button-rounded button-small">Search</button>
</span>
<div class="help-block with-errors"></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</footer>
Social
<footer class="footer padding-top-lmedium padding-bottom-lmedium">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-social social-icons social-smedium text-center">
<a href="#" class="btn btn-social-icon btn-google">
<i class="fa fa-google"></i>
<i class="fa fa-google"></i>
</a><a href="#" class="btn btn-social-icon btn-facebook">
<i class="fa fa-facebook"></i>
<i class="fa fa-facebook"></i>
</a><a href="#" class="btn btn-social-icon btn-twitter">
<i class="fa fa-twitter"></i>
<i class="fa fa-twitter"></i>
</a><a href="#" class="btn btn-social-icon btn-flickr">
<i class="fa fa-flickr"></i>
<i class="fa fa-flickr"></i>
</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-social social-icons social-smedium social-round">
<a href="#" class="btn btn-social-icon btn-google">
<i class="fa fa-google"></i>
<i class="fa fa-google"></i>
</a><a href="#" class="btn btn-social-icon btn-facebook">
<i class="fa fa-facebook"></i>
<i class="fa fa-facebook"></i>
</a><a href="#" class="btn btn-social-icon btn-twitter">
<i class="fa fa-twitter"></i>
<i class="fa fa-twitter"></i>
</a><a href="#" class="btn btn-social-icon btn-flickr">
<i class="fa fa-flickr"></i>
<i class="fa fa-flickr"></i>
</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-social social-icons social-smedium social-rounded">
<a href="#" class="btn btn-social-icon btn-google">
<i class="fa fa-google"></i>
</a><a href="#" class="btn btn-social-icon btn-facebook">
<i class="fa fa-facebook"></i>
</a><a href="#" class="btn btn-social-icon btn-twitter">
<i class="fa fa-twitter"></i>
</a><a href="#" class="btn btn-social-icon btn-flickr">
<i class="fa fa-flickr"></i>
</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-social footer-block-social-desc social-icons social-smedium social-rounded">
<div class="row">
<div class="col-xs-12 col-lg-6">
<a href="#" class="btn btn-social-icon btn-twitter">
<i class="fa fa-twitter"></i>
<i class="fa fa-twitter"></i>
</a>
<a class="h5 slab text" href="#">Follow us on twitter</a>
</div>
<div class="col-xs-12 col-lg-6">
<a href="#" class="btn btn-social-icon btn-facebook">
<i class="fa fa-facebook"></i>
<i class="fa fa-facebook"></i>
</a>
<a class="h5 slab text" href="#">Like us on facebook</a>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
Subscribe
<footer class="footer padding-top-lmedium padding-bottom-lmedium">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-subscribe form-validator">
<p class="footer-title-small h4">Be in touch</p>
<form class="footer-block-subscribe-form" data-toggle="validator">
<div class="form-group has-feedback">
<div class="input-group">
<input type="email" aria-label="email" class="form-control" placeholder="Enter your email" data-error="That email address is invalid" required>
<span class="input-group-btn">
<button type="submit" class="button button-small button-rounded button-theme button-shrink text-uppercase">Subscribe</button>
</span>
</div>
<div class="help-block with-errors"></div>
</div>
</form>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-subscribe form-validator">
<p class="footer-title-small h5">Subscribe to our newsletter</p>
<form class="footer-block-subscribe-form" data-toggle="validator">
<div class="form-group has-feedback">
<div class="input-group">
<input type="email" aria-label="email" class="form-control" placeholder="Enter your email" data-error="That email address is invalid" required>
<span class="input-group-btn">
<button class="button button-small button-rounded button-theme"><i class="fa fa-paper-plane-o"></i></button>
</span>
</div>
<div class="help-block with-errors"></div>
</div>
</form>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-subscribe form-validator">
<p class="footer-title-small h4">Get our latest news</p>
<form class="footer-block-subscribe-form" data-toggle="validator">
<div class="form-group has-feedback">
<div class="input-group">
<input type="email" aria-label="email" class="form-control" placeholder="Enter your email" data-error="That email address is invalid" required>
<span class="input-group-btn">
<button class="button button-small button-rounded button-theme button-shrink">Subscribe</button>
</span>
</div>
<div class="help-block with-errors"></div>
</div>
</form>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-subscribe form-validator">
<p class="footer-title-small h5">Subscribe to our news</p>
<form class="footer-block-subscribe-form" data-toggle="validator">
<div class="form-group has-feedback">
<div class="input-group">
<input type="email" aria-label="email" class="form-control" placeholder="Enter your email" data-error="That email address is invalid" required>
<span class="input-group-btn">
<button class="button button-small button-border button-theme button-shrink square-block">Be in touch</button>
</span>
</div>
<div class="help-block with-errors"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</footer>
<footer class="footer padding-medium">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="footer-block footer-block-twitter">
<p class="footer-title h4">Twitter feed</p>
<div class="footer-twitter twitter-3"></div>
<p class="h3 m-t m-b-0">
<a class="button button-rounded button-theme button-3d button-small button-block text-uppercase" href="#">Subscribe</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="footer-block footer-block-twitter">
<p class="footer-title h4">Latest tweets</p>
<div class="footer-twitter twitter-2"></div>
<p class="h4 m-t m-b-0">
<a class="btn button-small button-inverse text-uppercase" href="#">Follow us</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="footer-block footer-block-twitter">
<p class="footer-title h4">Our tweets</p>
<div class="footer-twitter twitter-4"></div>
<p class="h3 m-t m-b-0">
<a class="slab font-lato" href="#">click to subscribe</a>
</p>
</div>
</div>
</div>
</div>
</footer>
Title
<footer class="footer padding-top-lmedium padding-bottom-lmedium">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="pull-left p-r m-r title-logo-chunk">
<p class="footer-text-logo h1 slab text-uppercase"> <span class='logo-letter'>k</span>ate template</p>
</div>
<p class="m-b-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
</div>
<div class="col-sm-6 col-md-3">
<h4 class="footer-title h5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Collaboratively administrate empowered markets via plug-and-play networks.</h4>
<hr class="m-t-md m-b">
<div class="footer-subtitle-wrapper">
<span class="footer-subtitle h3"><a class="font-lato" href="tel:+09175555555">+0 (917) 555-5555</a></span>
</div>
</div>
<div class="col-sm-6 col-md-3">
<h4 class="footer-title h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</h4>
<hr>
<div class="footer-subtitle-wrapper">
<p class="footer-subtitle"><a class="font-lato" href="tel:+09175555555">+0 (917) 555-5555</a></p>
<span class="footer-subtitle"><a class="font-lato" href="tel:+07185555555">+0 (718) 555-5555</a></span>
</div>
</div>
<div class="col-sm-6 col-md-3">
<h4 class="footer-title">Collaboratively administrate empowered markets via plug-and-play networks.</h4>
<hr>
<div class="footer-subtitle-wrapper">
<p class="footer-subtitle h4"><a class="font-lato" href="tel:+09175555555">+0 (917) 555-5555</a></p>
<span class="footer-subtitle h4"><a class="font-lato" href="tel:+07185555555">+0 (718) 555-5555</a></span>
</div>
</div>
<div class="col-sm-6 col-md-3">
<h4 class="footer-title h3">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
<hr>
<div class="footer-subtitle-wrapper">
<span class="footer-subtitle h3"><a class="font-lato" href="tel:+09175555555">+0 (917) 555-5555</a></span>
</div>
</div>
</div>
</div>
</footer>
Logo
<footer class="footer padding-top-lmedium padding-bottom-lmedium">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="footer-block footer-block-logo-text">
<p class="footer-text-logo h1">[<span class='logo-letter'>k</span>ate template]</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<p class="footer-text-logo h1 slab text-uppercase"> <span class='logo-letter'>k</span>ate template</p>
</div>
<div class="col-sm-6 col-md-2">
<div class="footer-block footer-block-logo">
<img src="/img/kate-logo/kate-2-white.png" alt="logo">
</div>
</div>
<div class="col-sm-6 col-md-2">
<div class="footer-block footer-block-logo">
<img src="/img/kate-logo/kate-2-black.png" alt="logo">
</div>
</div>
<div class="col-sm-6 col-md-2">
<div class="footer-block footer-block-logo">
<img src="/img/kate-logo/kate-3.png" alt="logo">
</div>
</div>
</div>
</div>
</footer>
Copyright © 2019 Kate. All Rights Reserved. 7prism
⌃
