<div class="container-indent">
<div class="container container-fluid-custom-mobile-padding">
<h1 class="tt-title-subpages">TYPOGRAPHY</h1>
<div class="demo-typography">
<h6 style="padding-bottom: 0;">HEADLINES</h6>
<h1>H1 HEADING</h1>
<div class="row">
<div class="col-xs-12 col-sm-6">Lorem ipsum dolor sit amet conse ctetur 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.</div>
<div class="col-xs-12 col-sm-6">Lorem ipsum dolor sit amet conse ctetur 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.</div>
</div>
<div class="tt-box-text">
<h2>H2 HEADING</h2>
<div class="row">
<div class="col-xs-12 col-sm-8">Lorem ipsum dolor sit amet conse ctetur 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. Lorem ipsum dolor sit amet conse ctetur adipisicing elit.</div>
<div class="col-xs-12 col-sm-4">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</div>
</div>
<div class="tt-box-text">
<h3>H3 HEADING</h3>
<div class="row">
<div class="col-xs-12 col-sm-4">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
<div class="col-xs-12 col-sm-4">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
<div class="col-xs-12 col-sm-4">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</div>
</div>
<div class="tt-box-text">
<h4>H4 HEADING</h4>
<div class="row">
<div class="col-xs-12 col-sm-4">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
<div class="col-xs-12 col-sm-8">Lorem ipsum dolor sit amet conse ctetur 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. Lorem ipsum dolor sit amet conse ctetur adipisicing elit.</div>
</div>
</div>
<div class="tt-box-text">
<h5>H5 HEADING</h5>
<div class="row">
<div class="col-xs-12 col-sm-3">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</div>
<div class="col-xs-12 col-sm-3">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</div>
<div class="col-xs-12 col-sm-3">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</div>
<div class="col-xs-12 col-sm-3">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</div>
</div>
</div>
<div class="tt-box-text">
<h6>H6 HEADING</h6>
<div class="row">
<div class="col-xs-12 col-sm-3">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</div>
<div class="col-xs-12 col-sm-6">Lorem ipsum dolor sit amet conse ctetur 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.</div>
<div class="col-xs-12 col-sm-3">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-sm-6 col-md-8 col-xs-12">
<h6>UNORDERED LIST</h6>
<div class="row">
<div class="col-xs-12 col-md-6">
<ul class="tt-list-dash">
<li>
Lorem ipsum dolor sit amet conse ctetur
<ul>
<li>Aadipisicing elit, sed do eiusmod tempor incididunt</li>
<li>Ut labore et dolore magna aliqua</li>
</ul>
</li>
<li>Ut enim ad minim veniam, quis nostrud</li>
<li>Eexercitation ullamco laboris nisi ut aliquip ex ea</li>
<li>Ccommodo consequat. Duis aute irure dolor</li>
</ul>
</div>
<div class="divider visible-xs visible-sm"></div>
<div class="col-xs-12 col-md-6">
<ul class="tt-list-dot">
<li>
Lorem ipsum dolor sit amet conse ctetur
<ul>
<li>Aadipisicing elit, sed do eiusmod tempor incididunt</li>
<li>Ut labore et dolore magna aliqua</li>
</ul>
</li>
<li>Ut enim ad minim veniam, quis nostrud</li>
<li>Eexercitation ullamco laboris nisi ut aliquip ex ea</li>
<li>Ccommodo consequat. Duis aute irure dolor</li>
</ul>
</div>
</div>
</div>
<div class="divider visible-xs"></div>
<div class="col-sm-6 col-md-4 col-xs-12">
<h6>ORDERED LIST</h6>
<ol class="tt-list-number">
<li>
Lorem ipsum dolor sit amet conse ctetur
<ol>
<li>Aadipisicing elit, sed do eiusmod tempor incididunt</li>
<li>Ut labore et dolore magna aliqua</li>
</ol>
</li>
<li>Ut enim ad minim veniam, quis nostrud</li>
<li>Eexercitation ullamco laboris nisi ut aliquip ex ea</li>
<li>Ccommodo consequat. Duis aute irure dolor</li>
</ol>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-6 col-xs-12">
<h6>SOME OTHER STYLES</h6>
<strong>Bold Text: Lorem ipsum dolor sit amet conse ctetur adipisicing</strong>
<p>
<s>Strike-through: Lorem ipsum dolor sit amet conse ctetur adipisicing</s>
</p>
<p>
<em>Italic: Lorem ipsum dolor sit amet conse ctetur adipisicing</em>
</p>
<p>
<ins class="tt-base-color">Link: Lorem ipsum dolor sit amet conse ctetur adipisicing</ins>
</p>
<p>
<mark>Inline Code: Lorem ipsum dolor sit amet conse ctetur adipisicing</mark>
</p>
</div>
<div class="divider visible-xs visible-sm"></div>
<div class="col-md-6 col-xs-12">
<h6>BLOCKQUOTES</h6>
Lorem ipsum dolor sit amet conse ctetur 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.
<blockquote class="tt-blockquote">
<i class="tt-icon icon-g-56"></i>
<span class="tt-title">War and Marketing Have Many Similarities</span>
<span class="tt-title-description">—
<span>DANIEL BROWN</span>
</span>
</blockquote>
Lorem ipsum dolor sit amet conse ctetur 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.
</div>
</div>
<hr />
<h6>TABLES</h6>
<div class="row">
<div class="col-md-6 col-xs-12">
<table class="tt-table-01">
<thead>
<tr>
<th>#</th>
<th>TITLE 1</th>
<th>TITLE 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>#1</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>#2</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>#3</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>#4</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
<div class="divider visible-xs visible-sm"></div>
<div class="col-md-6 col-xs-12">
<table class="tt-table-02">
<tbody>
<tr>
<td>TITLE 1</td>
<td>Table cell</td>
</tr>
<tr>
<td>TITLE 2</td>
<td>Table cell</td>
</tr>
<tr>
<td>TITLE 3</td>
<td>Table cell</td>
</tr>
<tr>
<td>TITLE 4</td>
<td>Table cell</td>
</tr>
<tr>
<td>TITLE 5</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr />
<div class="row">
<div class="col-sm-6">
<h6>FORM RADIO</h6>
<ul class="list-form-inline">
<li>
<label class="radio">
<input id="radio" type="radio" name="radio1" checked="checked" />
<span class="outer">
<span class="inner"></span>
</span>radio
</label>
</li>
<li>
<label class="radio">
<input id="radio2" type="radio" name="radio1" />
<span class="outer">
<span class="inner"></span>
</span>radio
</label>
</li>
<li>
<label class="radio">
<input id="radio3" type="radio" name="radio1" />
<span class="outer">
<span class="inner"></span>
</span>radio
</label>
</li>
<li>
<label class="radio">
<input id="radio4" type="radio" name="radio1" />
<span class="outer">
<span class="inner"></span>
</span>radio
</label>
</li>
</ul>
<ul class="list-form-column">
<li>
<label class="radio">
<input id="radio1" type="radio" name="radio2" />
<span class="outer">
<span class="inner"></span>
</span>radio
</label>
</li>
<li>
<label class="radio">
<input id="radio2" type="radio" name="radio2" checked="checked" />
<span class="outer">
<span class="inner"></span>
</span>radio
</label>
</li>
<li>
<label class="radio">
<input id="radio3" type="radio" name="radio2" />
<span class="outer">
<span class="inner"></span>
</span>radio
</label>
</li>
<li>
<label class="radio">
<input id="radio4" type="radio" name="radio2" />
<span class="outer">
<span class="inner"></span>
</span>radio
</label>
</li>
</ul>
</div>
<div class="divider visible-xs"></div>
<div class="col-sm-6">
<h6>FORM CHECKBOX</h6>
<ul class="list-form-inline">
<li>
<div class="checkbox-group">
<input type="checkbox" id="checkBox11" name="checkbox" checked="checked" />
<label for="checkBox11">
<span class="check"></span>
<span class="box"></span> checkbox
</label>
</div>
</li>
<li>
<div class="checkbox-group">
<input type="checkbox" id="checkBox12" name="checkbox" />
<label for="checkBox12">
<span class="check"></span>
<span class="box"></span> checkbox
</label>
</div>
</li>
<li>
<div class="checkbox-group">
<input type="checkbox" id="checkBox13" name="checkbox" />
<label for="checkBox13">
<span class="check"></span>
<span class="box"></span> checkbox
</label>
</div>
</li>
<li>
<div class="checkbox-group">
<input type="checkbox" id="checkBox14" name="checkbox" />
<label for="checkBox14">
<span class="check"></span>
<span class="box"></span> checkbox
</label>
</div>
</li>
</ul>
<ul class="list-form-column">
<li>
<div class="checkbox-group">
<input type="checkbox" id="checkBox21" name="checkbox" checked="checked" />
<label for="checkBox21">
<span class="check"></span>
<span class="box"></span> checkbox
</label>
</div>
</li>
<li>
<div class="checkbox-group">
<input type="checkbox" id="checkBox22" name="checkbox" />
<label for="checkBox22">
<span class="check"></span>
<span class="box"></span> checkbox
</label>
</div>
</li>
<li>
<div class="checkbox-group">
<input type="checkbox" id="checkBox23" name="checkbox" />
<label for="checkBox23">
<span class="check"></span>
<span class="box"></span> checkbox
</label>
</div>
</li>
<li>
<div class="checkbox-group">
<input type="checkbox" id="checkBox24" name="checkbox" />
<label for="checkBox24">
<span class="check"></span>
<span class="box"></span> checkbox
</label>
</div>
</li>
</ul>
</div>
</div>
<hr />
<div class="row">
<div class="col-sm-6">
<h6>INPUT FIELDS</h6>
<form class="form-default" method="post" novalidate="novalidate" action="#">
<div class="form-group">
<input type="text" name="name" class="form-control" id="inputName" placeholder="Your Name (required)" />
</div>
<div class="form-group">
<input type="text" name="email" class="form-control" id="inputEmail" placeholder="Your Email (required)" />
</div>
<div class="form-group">
<input type="text" name="subject" class="form-control" id="inputSubject" placeholder="Subject" />
</div>
<div class="form-group">
<input name="message" class="form-control" rows="7" placeholder="Your Message" id="textareaMessage" type="text" />
</div>
<button type="submit" class="btn">SEND MESSAGE</button>
</form>
</div>
</div>
</div>
</div>
</div>