Archive

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-offset-2 col-md-2 col-md-offset-2">
      <div class="widget widget-archive">
        <p class="widget-title h5">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-4 col-sm-offset-0 col-md-2">
      <div class="widget widget-archive">
        <p class="widget-title h5">Old posts</p>
        <ul class="list-unstyled slab text-uppercase">
          <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-4 col-sm-offset-2 col-md-2 col-md-offset-0">
      <div class="widget widget-archive">
        <p class="widget-title h5">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-4 col-sm-offset-0 col-md-2">
      <div class="widget widget-archive">
        <p class="widget-title h5">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>

Carousel

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-3 col-md-offset-3">
      <div class="widget">
        <div class="widget-carousel-wrapper">
          <div class="widget-carousel">
            <div>
              <img src="/img/portfolio/small/1.jpg" alt="Portfolio Item 1">
            </div>
            <div>
              <img src="/img/portfolio/small/camera.jpg" alt="Portfolio Item 2">
            </div>
            <div>
              <img src="/img/portfolio/small/3.jpg" alt="Portfolio Item 3">
            </div>
            <div>
              <img src="/img/portfolio/small/4.jpg" alt="Portfolio Item 4">
            </div>
            <div>
              <img src="/img/portfolio/small/5.jpg" alt="Portfolio Item 5">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="widget">
        <div class="widget-carousel-wrapper">
          <div class="widget-carousel widget-carousel-alt">
            <div>
              <img src="/img/portfolio/small/1.jpg" alt="Portfolio Item 1">
            </div>
            <div>
              <img src="/img/portfolio/small/camera.jpg" alt="Portfolio Item 2">
            </div>
            <div>
              <img src="/img/portfolio/small/3.jpg" alt="Portfolio Item 3">
            </div>
            <div>
              <img src="/img/portfolio/small/4.jpg" alt="Portfolio Item 4">
            </div>
            <div>
              <img src="/img/portfolio/small/5.jpg" alt="Portfolio Item 5">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Contact form

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-2 col-md-offset-2">
      <div class="widget widget-contacts">
        <p class="widget-title h5">Contacts</p>
        <ul>
          <li class="tooltipster tooltipster-dflt" title="Click to see map">
            <i class='fa fa-location-arrow'></i> &nbsp;
            <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>&nbsp;
            <a class="phone-button" href="tel:+19175555555">+0 (917) 555-5555</a>
          </li>
          <li>
            <i class='fa fa-fax'></i>&nbsp;
            <a class="phone-button" href="tel:+17185555555">+0 (718) 555-5555</a>
          </li>
          <li>
            <i class='fa fa-envelope-o'></i> &nbsp;
            <a href="mailto:hello@7prism.com">hello@7prism.com</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="col-sm-6 col-md-2">
      <div class="widget widget-contacts">
        <p class="widget-title h5">Contact us</p>
        <ul>
          <li class="tooltipster tooltipster-dflt m-b" 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:hello@7prism.com">hello@7prism.com</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="col-sm-6 col-md-2">
      <div class="widget widget-contacts">
        <p class="widget-title h5">Our contacts</p>
        <ul>
          <li class="tooltipster tooltipster-dflt" title="Click to see map">
            <i class='fa fa-location-arrow'></i> &nbsp;
            <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>&nbsp;
            <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>&nbsp;
            <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> &nbsp;
            <a class="email-button" href="mailto:hello@7prism.com">hello@7prism.com</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="col-sm-6 col-md-2">
      <div class="widget widget-contacts">
        <p class="widget-title h5">&nbsp;</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:hello@7prism.com">hello@7prism.com</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Dribbble shots

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-md-offset-2">
      <div class="widget widget-dribbble">
        <p class="widget-title h5">Tiny dribbble shots</p>
        <div class="dribbble dribbble-shots-tiny"></div>
      </div>    </div>
    
    <div class="col-sm-6 col-md-5">
      <div class="widget widget-dribbble">
        <p class="widget-title h5">Dribbble shots</p>
        <div class="dribbble dribbble-shots-small"></div>
      </div>    </div>
  </div>
</div>

Tiny dribbble shots

Dribbble shots

Embed video

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-offset-0 col-md-3 col-md-offset-18">
      <div class="widget widget-embed-video">
        <p class="widget-title h5">Embed youtube</p>
        <iframe src='//www.youtube.com/embed/M9ITWjBPwDA' allowfullscreen></iframe>
      </div>    </div>
    <div class="col-sm-4 col-sm-offset-0 col-md-3">
      <div class="widget widget-embed-video">
        <p class="widget-title h5">Embed vimeo</p>
        <iframe src='//player.vimeo.com/video/183181421' allowfullscreen></iframe>
      </div>    </div>
    <div class="col-sm-4 col-sm-offset-0 col-md-3">
      <div class="widget widget-embed-video">
        <p class="widget-title h5">Embed dailymotion</p>
        <iframe src='//www.dailymotion.com/embed/video/x4to82q' allowfullscreen></iframe>
      </div>    </div>
  </div>
</div>

Embed youtube

Embed vimeo

Embed dailymotion

Flickr gallery

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-md-offset-2">
      <div class="widget widget-flickr">
        <p class="widget-title h5">Tiny flickr gallery</p>
        <div class="flickr-gallery gallery-tiny-icons flickr-no-border" data-tags="red cars"></div>
      </div>    </div>
    <div class="col-sm-6 col-md-4">
      <div class="widget widget-flickr">
        <p class="widget-title h5">Flickr gallery</p>
        <div class="flickr-gallery gallery-small-icons flickr-no-border" data-tags="red cars"></div>
      </div>    </div>
  </div>
</div>

Tiny flickr gallery

Flickr gallery

Form

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-offset-0 col-md-3 col-md-offset-18">
      <div class="widget">
        <form>
          <p class="widget-title h5">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>
    <div class="col-sm-4 col-sm-offset-0 col-md-3">
      <div class="widget">
        <form data-toggle="validator" class="form-validator">
          <p class="widget-title h5">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>
    <div class="col-sm-4 col-sm-offset-0 col-md-3">
      <div class="widget">
        <form>
          <p class="widget-title h5">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>
</div>

Send Email

Validator

Send File

We hate spam!

Instagram photos

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-offset-0 col-md-3 col-md-offset-18">
      <div class="widget instagram-block gallery-tiny-icons">
        <p class="widget-title h5">Instagram feed</p>
        <div id="instafeed-widgets3"></div>
      </div>
    </div>
    <div class="col-sm-4 col-sm-offset-0 col-md-3">
      <div class="widget instagram-block gallery-small-icons">
        <p class="widget-title h5">Instagram gallery</p>
        <div id="instafeed-widgets2"></div>
      </div>
    </div>
    <div class="col-sm-4 col-sm-offset-0 col-md-3">
      <div class="widget instagram-block gallery-medium-icons">
        <p class="widget-title h5">Instagram photos</p>
        <div id="instafeed-widgets1"></div>
      </div>
    </div>
  </div>
</div>

Lists

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-offset-4 col-md-2 col-md-offset-2">
      <div class="widget widget-list">
        <p class="widget-title h5">Similar pages</p>
        <ul>
          <li><a href="/elements/attention-box/"><i class="fa fa-angle-right"></i> Attention Box</a></li>
          <li><a href="/ui/buttons/"><i class="fa fa-angle-right"></i> Buttons</a></li>
          <li><a href="/elements/countdown/"><i class="fa fa-angle-right"></i> Countdown</a></li>
          <li><a href="/elements/counter/"><i class="fa fa-angle-right"></i> Counter</a></li>
          <li><a href="/ui/select/"><i class="fa fa-angle-right"></i> Select (dropdown)</a></li>
          <li><a href="/elements/forms/"><i class="fa fa-angle-right"></i> Forms</a></li>
          <li><a href="/elements/heading/"><i class="fa fa-angle-right"></i> Headings</a></li>
          <li><a href="/elements/icon-box/"><i class="fa fa-angle-right"></i> Icon Boxes</a></li>
          <li><a href="/elements/map/"><i class="fa fa-angle-right"></i> Map</a></li>
          <li><a href="/elements/mosaic/"><i class="fa fa-angle-right"></i> Mosaic</a></li>
          <li><a href="/ui/parallax/"><i class="fa fa-angle-right"></i> Parallax</a></li>
          <li><a href="/elements/progress/"><i class="fa fa-angle-right"></i> Progress</a></li>
          <li><a href="/elements/steps/"><i class="fa fa-angle-right"></i> Process Steps</a></li>
          <li><a href="/elements/testimonials/"><i class="fa fa-angle-right"></i> Testimonials</a></li>
          <li><a href="/ui/typography/"><i class="fa fa-angle-right"></i> Typography</a></li>
        </ul>
      </div>
    </div>
    <div class="col-sm-4 col-sm-offset-0 col-md-2">
      <div class="widget widget-list">
        <p class="widget-title h5">Shortcuts</p>
        <ul>
          <li><a href="/elements/attention-box/"><i class="fa fa-angle-double-right"></i> Attention Box</a></li>
          <li><a href="/ui/buttons/"><i class="fa fa-angle-double-right"></i> Buttons</a></li>
          <li><a href="/elements/countdown/"><i class="fa fa-angle-double-right"></i> Countdown</a></li>
          <li><a href="/elements/counter/"><i class="fa fa-angle-double-right"></i> Counter</a></li>
          <li><a href="/ui/select/"><i class="fa fa-angle-double-right"></i> Select (dropdown)</a></li>
          <li><a href="/elements/forms/"><i class="fa fa-angle-double-right"></i> Forms</a></li>
          <li><a href="/elements/heading/"><i class="fa fa-angle-double-right"></i> Headings</a></li>
          <li><a href="/elements/icon-box/"><i class="fa fa-angle-double-right"></i> Icon Boxes</a></li>
          <li><a href="/elements/map/"><i class="fa fa-angle-double-right"></i> Map</a></li>
          <li><a href="/elements/mosaic/"><i class="fa fa-angle-double-right"></i> Mosaic</a></li>
          <li><a href="/ui/parallax/"><i class="fa fa-angle-double-right"></i> Parallax</a></li>
          <li><a href="/elements/progress/"><i class="fa fa-angle-double-right"></i> Progress</a></li>
          <li><a href="/elements/steps/"><i class="fa fa-angle-double-right"></i> Process Steps</a></li>
          <li><a href="/elements/testimonials/"><i class="fa fa-angle-double-right"></i> Testimonials</a></li>
          <li><a href="/ui/typography/"><i class="fa fa-angle-double-right"></i> Typography</a></li>
        </ul>
      </div>
    </div>
    <div class="col-sm-4 col-sm-offset-4 col-md-2 col-md-offset-0">
      <div class="widget widget-list">
        <p class="widget-title h5">Links</p>
        <ul>
          <li><a href="/elements/attention-box/"><i class="fa fa-caret-right"></i> Attention Box</a></li>
          <li><a href="/ui/buttons/"><i class="fa fa-caret-right"></i> Buttons</a></li>
          <li><a href="/elements/countdown/"><i class="fa fa-caret-right"></i> Countdown</a></li>
          <li><a href="/elements/counter/"><i class="fa fa-caret-right"></i> Counter</a></li>
          <li><a href="/ui/select/"><i class="fa fa-caret-right"></i> Select (dropdown)</a></li>
          <li><a href="/elements/forms/"><i class="fa fa-caret-right"></i> Forms</a></li>
          <li><a href="/elements/heading/"><i class="fa fa-caret-right"></i> Headings</a></li>
          <li><a href="/elements/icon-box/"><i class="fa fa-caret-right"></i> Icon Boxes</a></li>
          <li><a href="/elements/map/"><i class="fa fa-caret-right"></i> Map</a></li>
          <li><a href="/elements/mosaic/"><i class="fa fa-caret-right"></i> Mosaic</a></li>
          <li><a href="/ui/parallax/"><i class="fa fa-caret-right"></i> Parallax</a></li>
          <li><a href="/elements/progress/"><i class="fa fa-caret-right"></i> Progress</a></li>
          <li><a href="/elements/steps/"><i class="fa fa-caret-right"></i> Process Steps</a></li>
          <li><a href="/elements/testimonials/"><i class="fa fa-caret-right"></i> Testimonials</a></li>
          <li><a href="/ui/typography/"><i class="fa fa-caret-right"></i> Typography</a></li>
        </ul>
      </div>
    </div>
    <div class="col-sm-4 col-sm-offset-0 col-md-2">
      <div class="widget widget-list">
        <p class="widget-title h5">List with icons</p>
        <ul>
          <li><a href="/elements/attention-box/"><i class='fa fa-fw fa-exclamation-circle'></i> Attention Box</a></li>
          <li><a href="/ui/buttons/"><i class='fa fa-fw fa-toggle-off'></i> Buttons</a></li>
          <li><a href="/elements/countdown/"><i class='fa fa-fw fa-hourglass-start'></i> Countdown</a></li>
          <li><a href="/elements/counter/"><i class='fa fa-fw fa-lightbulb-o'></i> Counter</a></li>
          <li><a href="/ui/select/"><i class='fa fa-fw fa-level-down'></i> Select (dropdown)</a></li>
          <li><a href="/elements/forms/"><i class='fa fa-fw fa-at'></i> Forms</a></li>
          <li><a href="/elements/heading/"><i class='fa fa-fw fa-header'></i> Headings</a></li>
          <li><a href="/elements/icon-box/"><i class='fa fa-fw fa-cog'></i> Icon Boxes</a></li>
          <li><a href="/elements/map/"><i class='fa fa-fw fa-location-arrow'></i> Map</a></li>
          <li><a href="/elements/mosaic/"><i class='fa fa-fw fa-puzzle-piece'></i> Mosaic</a></li>
          <li><a href="/ui/parallax/"><i class='fa fa-fw fa-cube'></i> Parallax</a></li>
          <li><a href="/elements/progress/"><i class='fa fa-fw fa-tasks'></i> Progress</a></li>
          <li><a href="/elements/steps/"><i class='fa fa-fw fa-arrow-right'></i> Process Steps</a></li>
          <li><a href="/elements/testimonials/"><i class='fa fa-fw fa-quote-left'></i> Testimonials</a></li>
          <li><a href="/ui/typography/"><i class='fa fa-fw fa-font'></i> Typography</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Short Lists

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-offset-4 col-md-2 col-md-offset-2">
      <div class="widget widget-list">
        <p class="widget-title h5">Categories</p>
        <ul>
          <li><a href="#"><i class="fa fa-angle-right"></i> T-Shirts</a></li>
          <li><a href="#"><i class="fa fa-angle-right"></i> Hoodies</a></li>
          <li><a href="#"><i class="fa fa-angle-right"></i> Pants</a></li>
          <li><a href="#"><i class="fa fa-angle-right"></i> Shirts</a></li>
          <li><a href="#"><i class="fa fa-angle-right"></i> Shorts</a></li>
          <li><a href="#"><i class="fa fa-angle-right"></i> Sweatshirt</a></li>
          <li><a href="#"><i class="fa fa-angle-right"></i> Jackets</a></li>
        </ul>
      </div>
    </div>
    <div class="col-sm-4 col-sm-offset-0 col-md-2">
      <div class="widget widget-list">
        <p class="widget-title h5">Shop Categories</p>
        <ul>
          <li><a href="#"><i class="fa fa-angle-double-right"></i> T-Shirts</a></li>
          <li><a href="#"><i class="fa fa-angle-double-right"></i> Hoodies</a></li>
          <li><a href="#"><i class="fa fa-angle-double-right"></i> Pants</a></li>
          <li><a href="#"><i class="fa fa-angle-double-right"></i> Shirts</a></li>
          <li><a href="#"><i class="fa fa-angle-double-right"></i> Shorts</a></li>
          <li><a href="#"><i class="fa fa-angle-double-right"></i> Sweatshirt</a></li>
          <li><a href="#"><i class="fa fa-angle-double-right"></i> Jackets</a></li>
        </ul>
      </div>
    </div>
    <div class="col-sm-4 col-sm-offset-4 col-md-2 col-md-offset-0">
      <div class="widget widget-list">
        <p class="widget-title h5">Materials</p>
        <ul>
          <li><a href="#"><i class="fa fa-caret-right"></i> T-Shirts</a></li>
          <li><a href="#"><i class="fa fa-caret-right"></i> Hoodies</a></li>
          <li><a href="#"><i class="fa fa-caret-right"></i> Pants</a></li>
          <li><a href="#"><i class="fa fa-caret-right"></i> Shirts</a></li>
          <li><a href="#"><i class="fa fa-caret-right"></i> Shorts</a></li>
          <li><a href="#"><i class="fa fa-caret-right"></i> Sweatshirt</a></li>
          <li><a href="#"><i class="fa fa-caret-right"></i> Jackets</a></li>
        </ul>
      </div>
    </div>
    <div class="col-sm-4 col-sm-offset-0 col-md-2">
      <div class="widget widget-list">
        <p class="widget-title h5">Mini Catalogue</p>
        <ul>
          <li><a href="#"><i class='fa fa-fw fa-exclamation-circle'></i> T-Shirts</a></li>
          <li><a href="#"><i class='fa fa-fw fa-toggle-off'></i> Hoodies</a></li>
          <li><a href="#"><i class='fa fa-fw fa-hourglass-start'></i> Pants</a></li>
          <li><a href="#"><i class='fa fa-fw fa-lightbulb-o'></i> Shirts</a></li>
          <li><a href="#"><i class='fa fa-fw fa-level-down'></i> Shorts</a></li>
          <li><a href="#"><i class='fa fa-fw fa-at'></i> Sweatshirt</a></li>
          <li><a href="#"><i class='fa fa-fw fa-header'></i> Jackets</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Posts

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-offset-0 col-md-3 col-md-offset-18">
      <div class="widget widget-block-news">
        <p class="widget-title h5">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">
              <span>Donec elementum quis dolor consectetur adipiscing elit neque</span>
              <em class="block date">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">
              <span>Montes aliquam venenatis lacus. Fusce tellus eros, pretium nec risus nec</span>
              <em class="block date">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">
              <span>Nullam nec volutpat felis, ac convallis tortor</span>
              <em class="block date">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">
              <span>Mauris efficitur porttitor lorem ut luctus</span>
              <em class="block date">month ago</em>
            </span>
          </a></li>
        </ul>
      </div>    </div>
    <div class="col-sm-4 col-sm-offset-0 col-md-3">
      <div class="widget widget-block-news widget-block-news-center">
        <p class="widget-title h5">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">
              <span>Donec elementum quis dolor consectetur adipiscing elit neque</span>
              <em class="block date">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">
              <span>Montes aliquam venenatis lacus. Fusce tellus eros, pretium nec risus nec</span>
              <em class="block date">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">
              <span>Nullam nec volutpat felis, ac convallis tortor</span>
              <em class="block date">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">
              <span>Mauris efficitur porttitor lorem ut luctus</span>
              <em class="block date">month ago</em>
            </span>
          </a></li>
        </ul>
      </div>    </div>
    <div class="col-sm-4 col-sm-offset-0 col-md-3">
      <div class="widget widget-block-news widget-block-news-alt">
        <p class="widget-title h5">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">
              <span>Donec elementum quis dolor consectetur adipiscing elit neque</span>
              <em class="block date">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">
              <span>Montes aliquam venenatis lacus. Fusce tellus eros, pretium nec risus nec</span>
              <em class="block date">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">
              <span>Nullam nec volutpat felis, ac convallis tortor</span>
              <em class="block date">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">
              <span>Mauris efficitur porttitor lorem ut luctus</span>
              <em class="block date">month ago</em>
            </span>
          </a></li>
        </ul>
      </div>    </div>
  </div>
</div>

Search

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-offset-4 col-md-2 col-md-offset-2">
      <div class="widget widget-search">
        <p class="widget-title h5">Search</p>
        <form>
          <div class="form-group has-feedback">
            <div class="input-group">
              <input type="search" class="form-control" placeholder="Input & Enter" required>
              <span class="input-group-btn">
                <button 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-4 col-sm-offset-0 col-md-2">
      <div class="widget widget-search">
        <p class="widget-title h5">Global search</p>
        <form>
          <div class="form-group has-feedback">
            <div class="input-group">
              <input type="search" class="form-control" placeholder="Input & Enter" required>
              <span class="input-group-btn">
                <button type="submit" class="button button-theme button-border button-shrink 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-4 col-sm-offset-4 col-md-2 col-md-offset-0">
      <div class="widget widget-search">
        <p class="widget-title h5">Find</p>
        <form>
          <div class="form-group has-feedback">
            <div class="input-group">
              <input type="search" class="form-control" placeholder="Input & 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-4 col-sm-offset-0 col-md-2">
      <div class="widget widget-search">
        <p class="widget-title h5">&nbsp;</p>
        <form>
          <div class="form-group has-feedback">
            <div class="input-group">
              <input type="search" class="form-control" placeholder="Global search" required>
              <span class="input-group-btn">
                <button type="submit" class="button button-theme button-small"><i class="fa fa-search"></i></button>
              </span>
              <div class="help-block with-errors"></div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Shop Items

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-md-offset-2 col-lg-3 col-lg-offset-3">
      <div class="widget">
        <p class="widget-title h5">Most Popular items</p>
        <div>
            <div class="widget-popular">
              <a class="widget-popular-image" href="/features/shop/single.html">
                <img src="/img/shop/small/pants/21.png" alt="shop item 9">
              </a>
              <div class="widget-popular-description">
                <div class="inner">
                  <a class="title" href="/features/shop/single.html">Everyday Pants</a>
                  <br>
                  
                  <div class="price">$50.00</div>
                  <div class='rateit' data-rateit-value='4.5' data-rateit-ispreset='true' data-rateit-readonly='true'></div>
                </div>
              </div>
            </div>
            <div class="widget-popular">
              <a class="widget-popular-image" href="/features/shop/single.html">
                <img src="/img/shop/small/pants/31.png" alt="shop item 10">
              </a>
              <div class="widget-popular-description">
                <div class="inner">
                  <a class="title" href="/features/shop/single.html">Hazard Pants</a>
                  <br>
                  
                  <div class="price">$29.99</div>
                  <div class='rateit' data-rateit-value='5' data-rateit-ispreset='true' data-rateit-readonly='true'></div>
                </div>
              </div>
            </div>
            <div class="widget-popular">
              <a class="widget-popular-image" href="/features/shop/single.html">
                <img src="/img/shop/small/sweatshirts/11.png" alt="shop item 11">
              </a>
              <div class="widget-popular-description">
                <div class="inner">
                  <a class="title" href="/features/shop/single.html">Home Sweatshirt</a>
                  <br>
                  
                  <div class="price">$22.50</div>
                  <div class='rateit' data-rateit-value='5' data-rateit-ispreset='true' data-rateit-readonly='true'></div>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
      <div class="widget widget-popular-alt">
        <p class="widget-title h5">Recently Viewed Items</p>
        <div>
            <div class="widget-popular">
              <a class="widget-popular-image" href="/features/shop/single.html">
                <img src="/img/shop/small/pants/21.png" alt="shop item 9">
              </a>
              <div class="widget-popular-description">
                <div class="inner">
                  <a class="title" href="/features/shop/single.html">Everyday Pants</a>
                  <br>
                  
                  <div class="price">$50.00</div>
                  <div class='rateit' data-rateit-value='4.5' data-rateit-ispreset='true' data-rateit-readonly='true'></div>
                </div>
              </div>
            </div>
            <div class="widget-popular">
              <a class="widget-popular-image" href="/features/shop/single.html">
                <img src="/img/shop/small/pants/31.png" alt="shop item 10">
              </a>
              <div class="widget-popular-description">
                <div class="inner">
                  <a class="title" href="/features/shop/single.html">Hazard Pants</a>
                  <br>
                  
                  <div class="price">$29.99</div>
                  <div class='rateit' data-rateit-value='5' data-rateit-ispreset='true' data-rateit-readonly='true'></div>
                </div>
              </div>
            </div>
            <div class="widget-popular">
              <a class="widget-popular-image" href="/features/shop/single.html">
                <img src="/img/shop/small/sweatshirts/11.png" alt="shop item 11">
              </a>
              <div class="widget-popular-description">
                <div class="inner">
                  <a class="title" href="/features/shop/single.html">Home Sweatshirt</a>
                  <br>
                  
                  <div class="price">$22.50</div>
                  <div class='rateit' data-rateit-value='5' data-rateit-ispreset='true' data-rateit-readonly='true'></div>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>

Most Popular items

Social Icons

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-offset-4 col-md-2 col-md-offset-2">
      <div class="widget widget-block-social social-icons social-small">
        <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>
        <a href="#" class="btn btn-social-icon btn-dropbox">
          <i class="fa fa-dropbox"></i>
        </a>
        <a href="#" class="btn btn-social-icon btn-yahoo">
          <i class="fa fa-yahoo"></i>
        </a>
        <a href="#" class="btn btn-social-icon btn-tumblr">
          <i class="fa fa-tumblr"></i>
        </a>
        <a href="#" class="btn btn-social-icon btn-pinterest">
          <i class="fa fa-pinterest"></i>
        </a>
      </div>
    </div>
    <div class="col-sm-4 col-sm-offset-0 col-md-2">
      <div class="widget widget-block-social social-icons social-small social-round">
        <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>
        <a href="#" class="btn btn-social-icon btn-dropbox">
          <i class="fa fa-dropbox"></i>
        </a>
        <a href="#" class="btn btn-social-icon btn-yahoo">
          <i class="fa fa-yahoo"></i>
        </a>
        <a href="#" class="btn btn-social-icon btn-tumblr">
          <i class="fa fa-tumblr"></i>
        </a>
        <a href="#" class="btn btn-social-icon btn-pinterest">
          <i class="fa fa-pinterest"></i>
        </a>
      </div>
    </div>
    <div class="col-sm-4 col-sm-offset-4 col-md-2 col-md-offset-0">
      <div class="widget widget-block-social social-icons social-small 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>
        <a href="#" class="btn btn-social-icon btn-dropbox">
          <i class="fa fa-dropbox"></i>
        </a>
        <a href="#" class="btn btn-social-icon btn-yahoo">
          <i class="fa fa-yahoo"></i>
        </a>
        <a href="#" class="btn btn-social-icon btn-tumblr">
          <i class="fa fa-tumblr"></i>
        </a>
        <a href="#" class="btn btn-social-icon btn-pinterest">
          <i class="fa fa-pinterest"></i>
        </a>
      </div>
    </div>
    <div class="col-sm-4 col-sm-offset-0 col-md-2">
      <div class="widget widget-block-social widget-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>

Subscribe

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-offset-4 col-md-2 col-md-offset-2">
      <div class="widget widget-subscribe form-validator">
        <p class="widget-title h5">Be in touch</p>
        <form data-toggle="validator">
          <div class="form-group has-feedback">
            <div class="input-group">
              <input type="email" class="form-control" placeholder="Enter email" data-error="Invalid email" 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-4 col-sm-offset-0 col-md-2">
      <div class="widget widget-subscribe form-validator">
        <p class="widget-title h5">Subscribe</p>
        <form data-toggle="validator">
          <div class="form-group has-feedback">
            <div class="input-group">
              <input type="email" class="form-control" placeholder="Enter email" data-error="Invalid email" required>
              <span class="input-group-btn">
                <button class="button button-small 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-4 col-sm-offset-4 col-md-2 col-md-offset-0">
      <div class="widget widget-subscribe form-validator">
        <p class="widget-title h5">Get news</p>
        <form data-toggle="validator">
          <div class="form-group has-feedback">
            <div class="input-group">
              <input type="email" class="form-control" placeholder="Enter email" data-error="Invalid email" required>
              <span class="input-group-btn">
                <button class="button button-small button-rounded button-border button-theme button-shrink"><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-4 col-sm-offset-0 col-md-2">
      <div class="widget widget-subscribe form-validator">
        <p class="widget-title h5">&nbsp;</p>
        <form data-toggle="validator">
          <div class="form-group has-feedback">
            <div class="input-group">
              <input type="email" class="form-control" placeholder="Enter email" data-error="Invalid email" required>
              <span class="input-group-btn">
                <button class="button button-small button-border button-theme button-shrink"><i class="fa fa-paper-plane-o"></i></button>
              </span>
            </div>
            <div class="help-block with-errors"></div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Be in touch

Subscribe

Get news

 

Tabs

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-md-offset-2">
      <!-- Nav tabs -->
      <ul class="tabs-filled nav nav-tabs" role="tablist">
        <li class="nav-item active">
          <a class="nav-link" data-toggle="tab" href="#widget-tab-1" role="tab">Posts</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#widget-tab-2" role="tab">Archive</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#widget-tab-3" role="tab">Form</a>
        </li>
      </ul>
      
      <!-- Tab panes -->
      <div class="tab-content">
        <div class="tab-pane fade in active" id="widget-tab-1" role="tabpanel">
          
          <br>
          <div class="widget widget-block-news">
            <ul>
              <li><a href="#">
                <span class="news-img">
                  <img src="/img/portfolio/small/1.jpg" alt="blog post 1">
                </span>
                <span class="news-text">
                  <span class="h5">Donec elementum quis dolor</span>
                  <em class="block date">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">
                  <span class="h5">Mauris efficitur porttitor</span>
                  <em class="block date">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">
                  <span class="h5">Nullam nec volutpat felis</span>
                  <em class="block date">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">
                  <span class="h5">Montes aliquam venenatis</span>
                  <em class="block date">month ago</em>
                </span>
              </a></li>
            </ul>
          </div>
      
        </div>
        <div class="tab-pane" id="widget-tab-2" role="tabpanel">
          
          <br>
          <div class="widget widget-archive">
            <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="tab-pane fade" id="widget-tab-3" role="tabpanel">
          
          <br>
          <div class="widget">
            <form>
              <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>
      </div>    </div>
    <div class="col-sm-6 col-md-4">
      <!-- Nav tabs -->
      <ul class="nav nav-tabs nav-border-bottom" role="tablist">
        <li class="nav-item active">
          <a class="nav-link" data-toggle="tab" href="#widget-tab-4" role="tab"><i class="fa fa-twitter"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#widget-tab-5" role="tab"><i class="fa fa-instagram"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#widget-tab-6" role="tab"><i class="fa fa-dribbble"></i></a>
        </li>
      </ul>
      
      <!-- Tab panes -->
      <div class="tab-content">
        <div class="tab-pane fade in active" id="widget-tab-4" role="tabpanel">
      
          <div class="widget">
            <p class="widget-title h5">Latest tweets</p>
            <div class="widget-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="tab-pane" id="widget-tab-5" role="tabpanel">
          
          <div class="widget instagram-block gallery-small-icons">
            <p class="widget-title h5">Instagram gallery</p>
            <div id="instafeed-widgets4"></div>
          </div>
      
        </div>
        <div class="tab-pane fade" id="widget-tab-6" role="tabpanel">
          
          <div class="widget widget-dribbble">
            <p class="widget-title h5">Tiny dribbble shots</p>
            <div class="dribbble dribbble-shots-tiny"></div>
          </div>
         
      
        </div>
      </div>    </div>
  </div>
</div>

Tags

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-2 col-md-offset-2">
      <div class="widget widget-tags">
        <p class="widget-title h5">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-2">
      <div class="widget widget-tags">
        <p class="widget-title h5">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-2">
      <div class="widget widget-tags">
        <p class="widget-title h5">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-2">
      <div class="widget">
        <p class="widget-title h5">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>

Testimonials

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-offset-0 col-md-3 col-md-offset-18">
      <div class="widget">
        <div class="feedback text-center feedback-carousel feedback-carousel-widget-wrapper">
          <div class="feedback-carousel-widget">
            <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-4 col-sm-offset-0 col-md-3">
      <div class="widget">
        <div class="feedback text-center feedback-carousel feedback-carousel-widget-wrapper">
          <div class="feedback-carousel-widget">
            <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-4 col-sm-offset-0 col-md-3">
      <div class="widget">
        <div class="feedback text-center feedback-carousel feedback-carousel-widget-wrapper">
          <div class="feedback-carousel-widget">
            <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>

Facebook plugin

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-sm-offset-1">
      <div class="widget facebook-widget">
        <p class="widget-title h5">Facebook Page Plugin</p>
      
        <div class="fb-page"
             data-href="//www.facebook.com/envato/"
             data-small-header="false"
             data-adapt-container-width="true"
             data-hide-cover="false"
             data-show-facepile="false">
          <blockquote cite="//www.facebook.com/envato/" class="fb-xfbml-parse-ignore">
            <a href="//www.facebook.com/envato/">Envato</a>
          </blockquote>
        </div>
      </div>
    </div>
    <div class="col-sm-5">
      <div class="widget facebook-widget">
        <p class="widget-title h5">Facebook Like Button</p>
      
        <div class="fb-like"
             data-href="//www.facebook.com/envato/"
             data-layout="standard"
             data-action="like"
             data-size="small"
             data-show-faces="true"
             data-share="true">
        </div>
      </div>
    </div>
  </div>
</div>

<div id="fb-root"></div>

Twitter feed

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-offset-0 col-md-3 col-md-offset-18">
      <div class="widget">
        <p class="widget-title h5">Twitter feed</p>
        <div class="widget-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-4 col-sm-offset-0 col-md-3">
      <div class="widget">
        <p class="widget-title h5">Latest tweets</p>
        <div class="widget-twitter twitter-2"></div>
        <p class="h4 m-t m-b-0">
          <button type="submit" class="button button-primary button-rounded button-small text-uppercase">Follow us</button>
        </p>
      </div>
    </div>
    <div class="col-sm-4 col-sm-offset-0 col-md-3">
      <div class="widget">
        <p class="widget-title h5">Our tweets</p>
        <div class="widget-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>

Twitter feed

Subscribe

Latest tweets

Paragraph

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-offset-4 col-md-2 col-md-offset-2">
      <div class="widget">
        <p class="content">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>
    <div class="col-sm-4 col-sm-offset-0 col-md-2">
      <div class="widget">
        <p class="h5 content">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. Nam quis mauris metus</p>
      </div>    </div>
    <div class="col-sm-4 col-sm-offset-4 col-md-2 col-md-offset-0">
      <div class="widget">
        <p class="slab">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. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis</p>
      </div>    </div>
    <div class="col-sm-4 col-sm-offset-0 col-md-2">
      <div class="widget">
        <p class="h6 text-uppercase content">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. Nam quis mauris metus</p>
      </div>    </div>
  </div>
</div>

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

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. Nam quis mauris metus

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. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis

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. Nam quis mauris metus