+ 320 (66) 236-97-28 Letter Sign up

Typography

You are here / Features  /  Typography

Buttons

Add desired class to the <a> tag (<a href="" > Button Text </a>)

small <a class="btn small" href="#"> Small </a> medium <a class="btn medium" href="#"> Medium </a> large button <a class="btn large" href="#"> Large Button </a> << 1 2 3 4 ... >> <a class="btn" href="#">&lt;&lt; </a> <a class="btn" href="#">1 </a> <a class="btn" href="#">2 </a> <a class="btn" href="#">3</a> <a class="btn" href="#">4 </a> <a class="btn" href="#">... </a&tt;<a class="btn" href="#">&gt;&gt;</a>
Default <a class="btn" href="#"> Default </a> Default Color <a class="btn dcolor" href="#"> Default </a> Success <a class="btn success" href="#"> Success </a> Warning <a class="btn warning" href="#"> Warning </a> Danger <a class="btn danger" href="#"> Danger </a> Info <a class="btn info" href="#"> Info </a> Icon Button <a class="btn lock" href="#"> <span></span>Icon Button </a> Icon Button <a class="btn refesh" href="#"> <span></span>Icon Button </a> Icon Button <a class="btn camera" href="#"> <span></span>Icon Button </a> Icon Button <a class="btn tel" href="#"> <span></span>Icon Button </a>

Add desired class to the <a> tag with <span> tag inside (<a href="" ><span></span> Button Text </a>)

<a class="btn sign-in" href="#"> <span></span>Sign in </a> Sign out <a class="btn sign-out" href="#"> <span></span>Sign out </a> Sitemap <a class="btn site-map" href="#"> <span></span>Sitemap </a> Comment <a class="btn comment" href="#"> <span></span>Comment </a> Print <a class="btn print" href="#"> <span></span>Print </a> Icon Button <a class="btn add" href="#"> <span></span>Icon Button </a> Icon Button <a class="btn correct" href="#"> <span></span>Icon Button </a> Icon Button <a class="btn search" href="#"> <span></span>Icon Button </a>
E-Mail <a class="btn info mail" href="#"> <span></span>E-Mail </a> Download <a class="btn success download" href="#"> <span></span>Download </a> Phone <a class="btn warning phone" href="#"> <span></span>Phone </a> Star <a class="btn danger star" href="#"> <span></span>Star </a> Calendar <a class="btn success calendar" href="#"> <span></span>Calendar </a> Icon Button <a class="btn paypal" href="#"> <span></span>Icon Button </a> Icon Button <a class="btn setting" href="#"> <span></span>Icon Button </a> Icon Button <a class="btn idea" href="#"> <span></span>Icon Button </a>

Headings and other elements styles

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Other elements styling

  • This is abbreviation <abbr> </abbr>
  • This is strong <strong> </strong>
  • This is emphasis <em> </em>
  • This is bold text <b> </b>
  • This is italic text <i> </i>
  • This is cite <cite> </cite>
  • This is small text <small> </small>
  • This is deleted text <del> </del>
  • This is inserted text <ins> </ins>
  • This is defining instance <dfn> </dfn>
  • This is user input <kbd> </kbd>
  • This is sample output <samp> </samp>
  • This is “inline quotation” <q> </q>
  • This is superscript <sup> </sup>
  • This is subscript <sub> </sub>
  • This is a variable <var> </var>

Lists Style

Lists Style

Social Icons

<div class="Social-Links">  <a target="_blank" href="#" class="icoFacebook"></a>  <a target="_blank" href="#" class="icoTwitter"></a>  <a target="_blank" href="#" class="icoMySpace"></a>  <a target="_blank" href="#" class="icoStumbleUpon"></a>  <a target="_blank" href="#" class="icoDigg"></a>  <a target="_blank" href="#" class="icoFlickr"></a>  <a target="_blank" href="#" class="icoIN"></a>  <a target="_blank" href="#" class="icoLinkedIn"></a>  <a target="_blank" href="#" class="icoYouTube"></a>  <a target="_blank" href="#" class="icoDelicious"></a>  <a target="_blank" href="#" class="icoBlogger"></a>  <a target="_blank" href="#" class="icoRSS"></a>  <a target="_blank" href="#" class="icoEmail"></a>  <a target="_blank" href="#" class="icoTumblr"></a>  <a target="_blank" href="#" class="icoFourSquare"></a>  <a target="_blank" href="#" class="icoReddit"></a>  <a target="_blank" href="#" class="icoVimeo"></a>  <a target="_blank" href="#" class="icoWordPress"></a>  <a target="_blank" href="#" class="icoBebo"></a>  <a target="_blank" href="#" class="icoTwitter2"></a>  <a target="_blank" href="#" class="icodnnskin"></a>  </div>

Blockquotes

"Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat."

Mark Johnson
President and CEO, R&D Services

Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat.

Mark Johnson
President and CEO, R&D Services

Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat.

Mark Johnson
President and CEO, R&D Services

Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat.

Mark Johnson
President and CEO, R&D Services

Table

Column 01 Column 02 Column 03 Column 04
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development

Column 01 Column 02 Column 03 Column 04
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development

Column 01 Column 02 Column 03 Column 04
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development

Column 01 Column 02 Column 03 Column 04
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development

<table width="100%" cellspacing="0" cellpadding="0" class="black_table radius4">
<thead>
<tr>
<th style="width: 25%;">Column 01</th>
<th style="width: 25%;">Column 02</th>
<th style="width: 25%;">Column 03</th>
<th style="width: 25%;">Column 04</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor</td>
<td>commodo consequat</td>
<td>nulla pariatur</td>
<td>development</td>
</tr>
</tbody>
</table>

Module Content Layout

Two Columns Layout

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<div class="layoutcontainer">
<div class="fleft span6">Lorem ipsum dolor...</div>
<div class="fleft span6">Lorem ipsum dolor...</div>
<div class="clr"></div></div>

Three Columns Layout

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<div class="layoutcontainer">
<div class="fleft span4">Lorem ipsum dolor...</div>
<div class="fleft span4">Lorem ipsum dolor...</div>
<div class="fleft span4">Lorem ipsum dolor...</div>
<div class="clr"></div>
</div>

Four Columns Layout

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<div class="layoutcontainer">
<div class="fleft span3">Lorem ipsum dolor...</div>
<div class="fleft span3">Lorem ipsum dolor...</div>
<div class="fleft span3">Lorem ipsum dolor...</div>
<div class="fleft span3">Lorem ipsum dolor...</div>
<div class="clr"></div>
</div>

Flick Photos

Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes.

dnnskin dnnskin dnnskin dnnskin dnnskin dnnskin dnnskin

Accordion

Accordion Item #1

Accordion Item #2

Accordion Item #3

Accordion Item #4

Accordion Item #5

Contact Us

Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes.

Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat.

Mark Johnson
President and CEO, R&D Services

Copyright 2017 by DNNSkin.Net

Theme colors

 

Skin Layout

  • Opened
  • Border
  • Boxed

Texture