20067 > feature > Short Codes

Carousel

/ /

CAROUSEL

Aenean mollis tortor placerat mauris ornare suscipit. Praesent vitae

PHOTOGRAPHY

Aenean mollis tortor placerat mauris ornare suscipit. Praesent vitae

COLOURING

Aenean mollis tortor placerat mauris ornare suscipit. Praesent vitae

PHOTOGRAPHY

Aenean mollis tortor placerat mauris ornare suscipit. Praesent vitae

STATISTICS

Aenean mollis tortor placerat mauris ornare suscipit. Praesent vitae

COLOURING

Aenean mollis tortor placerat mauris ornare suscipit. Praesent vitae

COLOURING

Aenean mollis tortor placerat mauris ornare suscipit. Praesent vitae

STATISTICS

Aenean mollis tortor placerat mauris ornare suscipit. Praesent vitae

SOURCE CODE

<div class="carousel carousel_2" data-pagination="false">
  <div class="item">
    <div class="photo_box"> <a href="/Portals/37/carousel_01.jpg" class="iLightBox_image_gallery1" title="Image Gallery">
      <div class="pic_box"> <img alt="" src="/portals/37/carousel_01.jpg" />
        <div class="ico"> <span class="fa fa-picture-o"></span> </div>
        <div class="shade"></div>
      </div>
      </a> </div>
    <h3>CAROUSEL</h3>
    <p>Content Text ... </p>
    <a href="#" class="btn a_bg_c">READ MORE</a> </div>
  <div class="item">
    <div class="photo_box"> <a href="/Portals/37/carousel_02.jpg" class="iLightBox_image_gallery1" title="Image Gallery">
      <div class="pic_box"> <img alt="" src="/portals/37/carousel_02.jpg" />
        <div class="ico"> <span class="fa fa-picture-o"></span> </div>
        <div class="shade"></div>
      </div>
      </a> </div>
    <h3>PHOTOGRAPHY</h3>
    <p>Content Text ... </p>
    <a href="#" class="btn a_bg_c">READ MORE</a> </div>
  <div class="item">
    <div class="photo_box"> <a href="/Portals/37/carousel_03.jpg" class="iLightBox_image_gallery1" title="Image Gallery">
      <div class="pic_box"> <img alt="" src="/portals/37/carousel_03.jpg" />
        <div class="ico"> <span class="fa fa-picture-o"></span> </div>
        <div class="shade"></div>
      </div>
      </a> </div>
    <h3>COLOURING</h3>
    <p>Content Text ... </p>
    <a href="#" class="btn a_bg_c">READ MORE</a> </div>
  <div class="item">
    <div class="photo_box"> <a href="/Portals/37/carousel_04.jpg" class="iLightBox_image_gallery1" title="Image Gallery">
      <div class="pic_box"> <img alt="" src="/portals/37/carousel_04.jpg" />
        <div class="ico"> <span class="fa fa-picture-o"></span> </div>
        <div class="shade"></div>
      </div>
      </a> </div>
    <h3>PHOTOGRAPHY</h3>
    <p>Content Text ... </p>
    <a href="#" class="btn a_bg_c">READ MORE</a> </div>
  <div class="item">
    <div class="photo_box"> <a href="/Portals/37/carousel_01.jpg" class="iLightBox_image_gallery1" title="Image Gallery">
      <div class="pic_box"> <img alt="" src="/portals/37/carousel_01.jpg" />
        <div class="ico"> <span class="fa fa-picture-o"></span> </div>
        <div class="shade"></div>
      </div>
      </a> </div>
    <h3>STATISTICS</h3>
    <p>Content Text ... </p>
    <a href="#" class="btn a_bg_c">READ MORE</a> </div>
  <div class="item">
    <div class="photo_box"> <a href="/Portals/37/carousel_02.jpg" class="iLightBox_image_gallery1" title="Image Gallery">
      <div class="pic_box"> <img alt="" src="/portals/37/carousel_02.jpg" />
        <div class="ico"> <span class="fa fa-picture-o"></span> </div>
        <div class="shade"></div>
      </div>
      </a> </div>
    <h3>COLOURING </h3>
    <p>Content Text ... </p>
    <a href="#" class="btn a_bg_c">READ MORE</a> </div>
  <div class="item">
    <div class="photo_box"> <a href="/Portals/37/carousel_03.jpg" class="iLightBox_image_gallery1" title="Image Gallery">
      <div class="pic_box"> <img alt="" src="/portals/37/carousel_03.jpg" />
        <div class="ico"> <span class="fa fa-picture-o"></span> </div>
        <div class="shade"></div>
      </div>
      </a> </div>
    <h3>COLOURING</h3>
    <p>Content Text ... </p>
    <a href="#" class="btn a_bg_c">READ MORE</a> </div>
  <div class="item">
    <div class="photo_box"> <a href="/Portals/37/carousel_04.jpg" class="iLightBox_image_gallery1" title="Image Gallery">
      <div class="pic_box"> <img alt="" src="/portals/37/carousel_04.jpg" />
        <div class="ico"> <span class="fa fa-picture-o"></span> </div>
        <div class="shade"></div>
      </div>
      </a> </div>
    <h3>STATISTICS</h3>
    <p>Content Text ... </p>
    <a href="#" class="btn a_bg_c">READ MORE</a> </div>
</div>

ABOUT OUR SKIN

Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id.

ABOUT OUR SKIN

SOURCE CODE

<div data-navigation="false" class="carousel carousel_3 ">
  <div class="item"> <img alt="" src="/portals/37/carousel_06.jpg" />
    <div class="carousel_content text_left">
      <h3>ABOUT OUR SKIN</h3>
      <p>Content Text ...</p>
    </div>
  </div>
  <div class="item"> <img alt="" src="/portals/37/carousel_07.jpg" />
    <div class="carousel_content text_right">
      <h3>ABOUT OUR SKIN</h3>
      <p>Content Text ...</p>
    </div>
  </div>
  <div class="item"> <img alt="" src="/portals/37/carousel_05.jpg" />
    <div class="carousel_content text_top">
      <h3>ABOUT OUR SKIN</h3>
      <p>Content Text ...</p>
    </div>
  </div>
  <div class="item"> <img alt="" src="/portals/37/carousel_06.jpg" />
    <div class="carousel_content text_bottom">
      <h3>ABOUT OUR SKIN</h3>
      <p>Content Text ...</p>
    </div>
  </div>
</div>

SOURCE CODE

<div class="sync_carousel  sync_carousel_1">
  <div class="carousel_main">
    <div class="item"> <img alt="" src="/portals/37/carousel_08.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/37/carousel_09.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/37/carousel_10.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/37/carousel_11.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/37/carousel_08.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/37/carousel_09.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/37/carousel_10.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/37/carousel_11.jpg" /> </div>
  </div>
  <div class="carousel_nav">
    <div class="item"> <img alt="" src="/portals/37/carousel_08_small.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/37/carousel_09_small.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/37/carousel_10_small.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/37/carousel_11_small.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/37/carousel_08_small.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/37/carousel_09_small.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/37/carousel_10_small.jpg" /> </div>
    <div class="item"> <img alt="" src="/portals/37/carousel_11_small.jpg" /> </div>
  </div>
</div>

Project Description

Lorem ipsum dolor sit amet,

Project Description

Lorem ipsum dolor sit amet,

Project Description

Lorem ipsum dolor sit amet,

Project Description

Lorem ipsum dolor sit amet,

Project Description

Lorem ipsum dolor sit amet,

SOURCE CODE

<div class="carousel Detail2_carousel_4 pt-30 pb-20" data-navigation="true" data-pagination="false" data-autoplay="true">
  <div class="item">
    <div class="photo_box ico_LeftAndRight_enter"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/37/detail02.jpg" />
        <div class="ico"> <span class="fa fa-search ico_left"></span><span class="fa fa-link ico_right"></span> </div>
        <div class="shade"></div>
      </div>
      </a>
      <div class="Detail2_carousel_text">
        <h2>Project Description</h2>
        <p>Lorem ipsum dolor sit amet, </p>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="photo_box ico_LeftAndRight_enter"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/37/detail03.jpg" />
        <div class="ico"> <span class="fa fa-search ico_left"></span><span class="fa fa-link ico_right"></span> </div>
        <div class="shade"></div>
      </div>
      </a>
      <div class="Detail2_carousel_text">
        <h2>Project Description</h2>
        <p>Lorem ipsum dolor sit amet, </p>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="photo_box ico_LeftAndRight_enter"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/37/detail04.jpg" />
        <div class="ico"> <span class="fa fa-search ico_left"></span><span class="fa fa-link ico_right"></span> </div>
        <div class="shade"></div>
      </div>
      </a>
      <div class="Detail2_carousel_text">
        <h2>Project Description</h2>
        <p>Lorem ipsum dolor sit amet, </p>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="photo_box ico_LeftAndRight_enter"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/37/detail05.jpg" />
        <div class="ico"> <span class="fa fa-search ico_left"></span><span class="fa fa-link ico_right"></span> </div>
        <div class="shade"></div>
      </div>
      </a>
      <div class="Detail2_carousel_text">
        <h2>Project Description</h2>
        <p>Lorem ipsum dolor sit amet, </p>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="photo_box ico_LeftAndRight_enter"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/37/detail04.jpg" />
        <div class="ico"> <span class="fa fa-search ico_left"></span><span class="fa fa-link ico_right"></span> </div>
        <div class="shade"></div>
      </div>
      </a>
      <div class="Detail2_carousel_text">
        <h2>Project Description</h2>
        <p>Lorem ipsum dolor sit amet, </p>
      </div>
    </div>
  </div>
</div>

IMAGE TITLE

Photos,Design

IMAGE TITLE

Photos,Design

IMAGE TITLE

Photos,Design

IMAGE TITLE

Photos,Design

IMAGE TITLE

Photos,Design

IMAGE TITLE

Photos,Design

IMAGE TITLE

Photos,Design

IMAGE TITLE

Photos,Design

SOURCE CODE

<div class="carousel carousel_4" data-pagination="false">
  <div class="item">
    <div class="photo_box img_zoom ico_zoom"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/37/carousel_12.jpg" />
        <div class="content">
          <div class="vertical_center_1">
            <div class="vertical_center_2">
              <div class="ico"><span class="fa fa-link"></span></div>
              <h3>IMAGE TITLE</h3>
              <p>Photos,Design</p>
            </div>
          </div>
        </div>
        <div class="shade"></div>
      </div>
      </a> </div>
  </div>
  <div class="item">
    <div class="photo_box img_zoom ico_zoom"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/37/carousel_13.jpg" />
        <div class="content">
          <div class="vertical_center_1">
            <div class="vertical_center_2">
              <div class="ico"><span class="fa fa-link"></span></div>
              <h3>IMAGE TITLE</h3>
              <p>Photos,Design</p>
            </div>
          </div>
        </div>
        <div class="shade"></div>
      </div>
      </a> </div>
  </div>
  <div class="item">
    <div class="photo_box img_zoom ico_zoom"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/37/carousel_14.jpg" />
        <div class="content">
          <div class="vertical_center_1">
            <div class="vertical_center_2">
              <div class="ico"><span class="fa fa-link"></span></div>
              <h3>IMAGE TITLE</h3>
              <p>Photos,Design</p>
            </div>
          </div>
        </div>
        <div class="shade"></div>
      </div>
      </a> </div>
  </div>
  <div class="item">
    <div class="photo_box img_zoom ico_zoom"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/37/carousel_15.jpg" />
        <div class="content">
          <div class="vertical_center_1">
            <div class="vertical_center_2">
              <div class="ico"><span class="fa fa-link"></span></div>
              <h3>IMAGE TITLE</h3>
              <p>Photos,Design</p>
            </div>
          </div>
        </div>
        <div class="shade"></div>
      </div>
      </a> </div>
  </div>
  <div class="item">
    <div class="photo_box img_zoom ico_zoom"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/37/carousel_12.jpg" />
        <div class="content">
          <div class="vertical_center_1">
            <div class="vertical_center_2">
              <div class="ico"><span class="fa fa-link"></span></div>
              <h3>IMAGE TITLE</h3>
              <p>Photos,Design</p>
            </div>
          </div>
        </div>
        <div class="shade"></div>
      </div>
      </a> </div>
  </div>
  <div class="item">
    <div class="photo_box img_zoom ico_zoom"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/37/carousel_13.jpg" />
        <div class="content">
          <div class="vertical_center_1">
            <div class="vertical_center_2">
              <div class="ico"><span class="fa fa-link"></span></div>
              <h3>IMAGE TITLE</h3>
              <p>Photos,Design</p>
            </div>
          </div>
        </div>
        <div class="shade"></div>
      </div>
      </a> </div>
  </div>
  <div class="item">
    <div class="photo_box img_zoom ico_zoom"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/37/carousel_14.jpg" />
        <div class="content">
          <div class="vertical_center_1">
            <div class="vertical_center_2">
              <div class="ico"><span class="fa fa-link"></span></div>
              <h3>IMAGE TITLE</h3>
              <p>Photos,Design</p>
            </div>
          </div>
        </div>
        <div class="shade"></div>
      </div>
      </a> </div>
  </div>
  <div class="item">
    <div class="photo_box img_zoom ico_zoom"> <a href="#">
      <div class="pic_box"> <img alt="" src="/portals/37/carousel_15.jpg" />
        <div class="content">
          <div class="vertical_center_1">
            <div class="vertical_center_2">
              <div class="ico"><span class="fa fa-link"></span></div>
              <h3>IMAGE TITLE</h3>
              <p>Photos,Design</p>
            </div>
          </div>
        </div>
        <div class="shade"></div>
      </div>
      </a> </div>
  </div>
</div>

SKIN LAYOUT

GOOGLE MAP

Carousel

CAROUSEL

PHOTOGRAPHY

COLOURING

PHOTOGRAPHY

STATISTICS

COLOURING

COLOURING

STATISTICS

ABOUT OUR SKIN

ABOUT OUR SKIN

ABOUT OUR SKIN

ABOUT OUR SKIN

Project Description

Project Description

Project Description

Project Description

Project Description

IMAGE TITLE

IMAGE TITLE

IMAGE TITLE

IMAGE TITLE

IMAGE TITLE

IMAGE TITLE

IMAGE TITLE

IMAGE TITLE