Icon Boxes

Icon Boxes comes with 8 different colors

  • .default
  • .pink
  • .red
  • .purple
  • .orange
  • .blue
  • .dark
  • .grey
Box Style 1

.single_box .style1

Box Style 1

Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

Box Style 1

Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

<div class="col-sm-6 padd">
  <div class="single_box style1">
    <div class="icons_introimg image-icon blue">
      <i class="fa fa-briefcase"></i>
    </div>
    <h3>Box Style 1</h3>
    <p class="introtext">Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
  </div>
</div>

<div class="col-sm-6 padd">
  <div class="single_box style1">
    <div class="icons_introimg image-icon pink">
      <i class="fa fa-picture-o"></i>
    </div>
    <h3>Box Style 1</h3>
    <p class="introtext">Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
  </div>
</div>
Box Style 2

.single_box .style2

Box Style 2

Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

Box Style 2

Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

<div class="col-sm-6 padd">
  <div class="single_box style2">
    <div class="icons_introimg image-icon blue">
      <i class="fa fa-briefcase"></i>
    </div>
    <h3>Box Style 2</h3>
    <p class="introtext">Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
  </div>
</div>

<div class="col-sm-6 padd">
  <div class="single_box style2">
    <div class="icons_introimg image-icon pink">
      <i class="fa fa-picture-o"></i>
    </div>
    <h3>Box Style 2</h3>
    <p class="introtext">Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
  </div>
</div>
Box Style 3

Box colors

  • .box-light-blue
  • .box-pink
  • .box-red
  • .box-purple
  • .box-orange
  • .box-blue
  • .box-dark
  • .box-grey

.single_box .style3

Box Style 3

Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

Box Style 3

Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

<div class="col-sm-6 padd">
  <div class="single_box box-blue style3">
    <div class="icons_introimg image-icon">
      <i class="fa fa-briefcase"></i>
    </div>
    <h3>Box Style 3</h3>
    <p class="introtext">Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
  </div>
</div>

<div class="col-sm-6 padd">
  <div class="single_box box-blue style3">
    <div class="icons_introimg image-icon">
      <i class="fa fa-picture-o"></i>
    </div>
    <h3>Box Style 3</h3>
    <p class="introtext">Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
  </div>
</div>
Box Style 4

.left_icons

Photo

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

Video

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
<div class="col-sm-6 padd">
  <div class="left_icons">
    <div class="single_box_left blue">
      <i class="fa fa-photo"></i>
    </div>
    <div class="single_box_right">
      <h3>Photo</h3>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
    </div>
  </div>
</div>

<div class="col-sm-6 padd">
  <div class="left_icons">
    <div class="single_box_left pink">
      <i class="fa fa-video-camera"></i>
    </div>
    <div class="single_box_right">
      <h3>Video</h3>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
    </div>
  </div>
</div>
Box Style 4

.left_icons .style2

Photo

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

Video

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
<div class="col-sm-6 padd">
  <div class="left_icons style2">
    <div class="single_box_left blue">
      <i class="fa fa-photo"></i>
    </div>
    <div class="single_box_right">
      <h3>Photo</h3>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
    </div>
  </div>
</div>

<div class="col-sm-6 padd">
  <div class="left_icons style2">
    <div class="single_box_left pink">
      <i class="fa fa-video-camera"></i>
    </div>
    <div class="single_box_right">
      <h3>Video</h3>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
    </div>
  </div>
</div>
Box Style 6

.single_box .style6

Box Style 6

Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

Learn More

Box Style 6

Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

Learn More
<div class="col-sm-6 padd">
  <div class="single_box style6">
    <div class="icons_introimg image-icon box default">
      <i class="fa fa-briefcase"></i>
    </div>
    <h3>Box Style 6</h3>
    <p class="introtext">Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <a href="#">Learn More</a>
  </div>
</div>

<div class="col-sm-6 padd">
  <div class="single_box style6">
    <div class="icons_introimg image-icon box pink">
      <i class="fa fa-picture-o"></i>
    </div>
    <h3>Box Style 6</h3>
    <p class="introtext">Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <a href="#">Learn More</a>
  </div>
</div>
Box Style 7

.single_box .style7

Box Style 7

Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

Learn More

Box Style 7

Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

Learn More
<div class="col-sm-6 padd">
  <div class="single_box style7">
    <div class="icons_introimg image-icon box default">
      <i class="fa fa-briefcase"></i>
    </div>
    <h3>Box Style 7</h3>
    <p class="introtext">Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <a href="#">Learn More</a>
  </div>
</div>

<div class="col-sm-6 padd">
  <div class="single_box style7">
    <div class="icons_introimg image-icon box pink">
      <i class="fa fa-picture-o"></i>
    </div>
    <h3>Box Style 7</h3>
    <p class="introtext">Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <a href="#">Learn More</a>
  </div>
</div>
Box Style 8

.single_box .style8

Box Style 8

Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

Learn More

Box Style 8

Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

Learn More
<div class="col-sm-6 padd">
  <div class="single_box style8">
    <div class="icons_introimg image-icon box default">
      <i class="fa fa-briefcase"></i>
    </div>
    <h3>Box Style 8</h3>
    <p class="introtext">Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <a href="#">Learn More</a>
  </div>
</div>

<div class="col-sm-6 padd">
  <div class="single_box style8">
    <div class="icons_introimg image-icon box pink">
      <i class="fa fa-picture-o"></i>
    </div>
    <h3>Box Style 8</h3>
    <p class="introtext">Lorem ipsum dolor met consetetur sadipscing elitrsed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
    <a href="#">Learn More</a>
  </div>
</div>
Цветовая схема


Свой цвет
Выбрать цвет
Ширина сайта
Хлебные крошки
Для разработчиков