DNNGo demo dnn skin unlimited color pack 038 > Features > Short Codes

> >

tabs-top

Responsive 1
Responsive 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Quisque commodo mi purus, eget accumsan sapien tristique id. Integer nisl odio, vehicula gravida felis in, eleifend posuere odio. Donec blandit eleifend consectetur. Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu ornare rhoncus sit amet quis libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.

SOURCE CODE

<div class="horizontalTab_Top">
  <ul class="resp-tabs-list">
   <li><span>Responsive 1</span></li>
   <li><span>Responsive 2</span></li>
  </ul>
 <div class="resp-tabs-container">
  <div class="resp_container">
   <div class="resp_margin">
    <p>Content text 1 ...</p>
   </div>
  </div>
  <div class="resp_container">
   <div class="resp_margin">
    <p>Content text 2 ...</p>
   </div>
  </div>
 </div>
</div>

tabs-left

Responsive Tab 1
Responsive Tab 2
Responsive Tab 3
Long name Responsive Tab 4

This tab has icon in it.

Suspendisse blandit velit Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravid urna gravid eget erat suscipit in malesuada odio venenatis.

d ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.Suspendisse blandit velit eget erat suscipit in malesuada odio venenatis.

SOURCE CODE

<div class="verticalTab_Left">
  <ul class="resp-tabs-list">
   <li><span>Responsive Tab 1</span></li>
   <li><span>Responsive Tab 2</span></li>
   <li><span>Responsive Tab 3</span></li>
   <li><span>Long name Responsive Tab 4</span></li>
  </ul>
 <div class="resp-tabs-container">
  <div class="resp_container">
   <div class="resp_margin">
    <p>Content text 1 ...</p>
   </div>
  </div>
  <div class="resp_container">
   <div class="resp_margin">
    <p>Content text 2 ...</p>
   </div>
  </div>
  <div class="resp_container">
   <div class="resp_margin">
    <p>Content text 3 ...</p>
   </div>
  </div>
  <div class="resp_container">
   <div class="resp_margin">
    <p>Content text 4 ...</p>
   </div>
  </div>
 </div>
</div>

tabs-right

Responsive Tab 1
Responsive Tab 2
Responsive Tab 3
Long name Responsive Tab 4

This tab has icon in it.

SOURCE CODE

<div class="verticalTab_Right">
  <ul class="resp-tabs-list">
   <li><span>Responsive Tab 1</span></li>
   <li><span>Responsive Tab 2</span></li>
   <li><span>Responsive Tab 3</span></li>
   <li><span>Long name Responsive Tab 4</span></li>
  </ul>
 <div class="resp-tabs-container">
  <div class="resp_container">
   <div class="resp_margin">
    <p>Content text 1 ...</p>
   </div>
  </div>
  <div class="resp_container">
   <div class="resp_margin">
    <p>Content text 2 ...</p>
   </div>
  </div>
  <div class="resp_container">
   <div class="resp_margin">
    <p>Content text 3 ...</p>
   </div>
  </div>
  <div class="resp_container">
   <div class="resp_margin">
    <p>Content text 4 ...</p>
   </div>
  </div>
 </div>
</div>

Top Color:

Main Color:

Bottom Color: