Drabkirn Logo

Drabkirn

Desityle

Desityle is a sleek and straightforward DIY CSS framework built from scratch with DIY(Do It Yourself) concept in mind.

Woah! You've just opened the bag of Desityle; these are the components that we've got for you right now. We'll be adding more as we grow.



Here's how this is going to work, you click on a button below, and we'll show you a demo component and the associated code snippet. We're looking forward to what you'll be creating with Desityle. All the very best!

Navbar Header Section Buttons Header Tags p Tags a Tags u Tags ol Tags ul Tags Pagination Blockquote Alignments Floating Positioning Code snipets Forms Jumbos Badgetags Table TOC Images Videos Modal Footer

Navbar needs to be at the top of the page, so we'll not be able to show you this demo here. But hey, we can show you here at our codepen. Don't forget to change the logo image!

Navbar requires you to have our Javascript file included. Read our docs on how to integrate our Javascript file.

Code for Navbar:

html<nav class="fixed-navbar">
  <div class="fixed-navbar-hamburger col-dsk-2">
    <a class="a-image" href="javascript:void(0);"><img src="https://unpkg.com/desityle@1.1.3/build/assets/hamburger-48x48.png" alt="Menu"></a>
    <ul class="fixed-navbar-hamburger-links">
      <li><a href="#">Home</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Header</a></li>
      <li><a href="#">Footer</a></li>
    </ul>
  </div>

  <div class="fixed-navbar-logo col-dsk-2">
    <a class="a-image" href="#"><img src="https://unpkg.com/desityle@1.1.3/build/assets/drabkirn-logo-180x180.png" width="60" height="60" alt="Logo"></a>
  </div>

  <div class="fixed-navbar-content col-dsk-10 align-right">
    <ul class="fixed-navbar-content-links">
      <li><a href="#">Home</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Header</a></li>
      <li><a href="#">Footer</a></li>
    </ul>
  </div>
</nav>

<div class="float-clearfix"></div>

<nav class="default-navbar align-center">
  <div class="default-navbar-hamburger">
    <a class="a-image" href="javascript:void(0);"><img src="https://unpkg.com/desityle@1.1.3/build/assets/hamburger-48x48.png" alt="Menu"></a>
    <ul class="default-navbar-hamburger-links">
      <li><a href="#">Home</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Header</a></li>
      <li><a href="#">Footer</a></li>
    </ul>
  </div>
  <ul class="default-navbar-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Header</a></li>
    <li><a href="#">Footer</a></li>
  </ul>
</nav>
Drabkirn Logo

Drabkirn

Your Product

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, sint quisquam! Ex odio deleniti, ducimus praesentium velit quam sed, aspernatur nihil cumque rem ratione! Voluptatum minima maiores veritatis vero delectus.

Code for Main Header/Intro

html<header>
  <div class="row align-center-flex-vh">
    <div class="col-dsk-4 col-mob-12 align-center mt-30">
      <a href="#" class="a-image"><img src="./abc.png" alt="Your Logo"></a>
    </div>

    <div class="col-dsk-8 col-mob-12 align-center-on-mob-only">
      <h1 class="fs-4">Drabkirn</h1>
      <h2>Your Product</h2>
      <p class="mt-20 fs-1-6">Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Ratione, sint quisquam! Ex odio deleniti, ducimus praesentium
        velit quam sed, aspernatur nihil cumque rem ratione!
        Voluptatum minima maiores veritatis vero delectus.
      </p>
    </div>
  </div>

  <hr>
</header>

Section Header

Explain about the purpose of this section here in 1-2 lines. This section is without using a .container class.

This is the section content. There is no .container class for this.

Section Header

Explain about the purpose of this section here in 1-2 lines. This section includes .container class.

This is the section content. There is a .container class for this.

Code for Section without container

html<section>
  <div class="align-center section-header">
    <h2>Section Header</h2>
    <u class="u-gold fs-1-2 italic">Explain about the purpose of this section here in 1-2 lines. This section is without using a <code class="code-inline">.container</code> class.</u>
  </div>

  <div class="section-content mt-40">
    <p>This is the section content. There is no <code class="code-inline">.container</code> class for this.</p>
  </div>
</section>

Code for Section with a container

html<section class="container">
  <div class="align-center section-header">
    <h2>Section Header</h2>
    <u class="u-gold fs-1-2 italic">Explain about the purpose of this section here in 1-2 lines. This section includes <code class="code-inline">.container</code> class.</u>
  </div>

  <div class="section-content mt-40">
    <p>This is the section content. There is a <code class="code-inline">.container</code> class for this.</p>
  </div>
</section>


Code for Buttons

html<button class="btn">Default Btn</button>

<button class="btn btn-rev">Rev Btn</button>

<button class="btn btn-wide">Button wide</button>

<button class="btn btn-wide btn-rev">Wide Rev Btn</button>

This is H1 Header

This is H2 Header

This is H3 Header

This is H4 Header

This is H5 Header
This is H6 Header

Code for Header tags

html<h1>This is H1 Header</h1>
<h2>This is H2 Header</h2>
<h3>This is H3 Header</h3>
<h4>This is H4 Header</h4>
<h5>This is H5 Header</h5>
<h6>This is H6 Header</h6>

This is a standard P tag: Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi obcaecati nihil accusamus et possimus! Quisquam, consectetur architecto. Vel unde temporibus officia culpa maxime dignissimos inventore neque iure corporis, facere eveniet!


This is a italic P tag: Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi obcaecati nihil accusamus et possimus! Quisquam, consectetur architecto. Vel unde temporibus officia culpa maxime dignissimos inventore neque iure corporis, facere eveniet!


This is a bold P tag: Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi obcaecati nihil accusamus et possimus! Quisquam, consectetur architecto. Vel unde temporibus officia culpa maxime dignissimos inventore neque iure corporis, facere eveniet!

Code for P tag

html<p>This is a standard P tag: Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Excepturi obcaecati nihil accusamus et possimus! Quisquam, consectetur architecto.
  Vel unde temporibus officia culpa maxime dignissimos inventore neque iure corporis, facere eveniet!</p>

<p><em>This is a italic P tag: Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Excepturi obcaecati nihil accusamus et possimus! Quisquam, consectetur architecto.
  Vel unde temporibus officia culpa maxime dignissimos inventore neque iure corporis, facere eveniet!</em></p>

<p><b>This is a bold P tag: Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Excepturi obcaecati nihil accusamus et possimus! Quisquam, consectetur architecto.
  Vel unde temporibus officia culpa maxime dignissimos inventore neque iure corporis, facere eveniet!</b></p>
Aqua Dotted Link - Default

Gold Dotted Link

Orange Dotted Link

Code for A tag

html<a href="#">Aqua Dotted Link - Default</a>

<a href="#" class="a-gold">Gold Dotted Link</a>

<a href="#" class="a-orange">Orange Dotted Link</a>

<a href="#" class="a-image"><img src="./abc.png"></a>
This is U tag with underlined aqua - Default
This is U tag with underlined gold
This is U tag with underlined orange

Code for Underlines

html<u>This is U tag with underlined aqua - Default </u>

<u class="u-gold">This is U tag with underlined gold</u>

<u class="u-orange">This is U tag with underlined orange</u>
  1. This is OL type of decimal - default
  2. adipisicing elit. Culpa quo repellendus delectus
  3. laboriosam mollitia minima
  4. saepe magni recusandae optio fuga autem est facilis quidem nesciunt, voluptates
  1. This is OL type of decimal - default
    1. This is OL type of upper latin
      1. This is OL type of lower latin
      2. Lorem ipsum dolor sit amet consectetur
    3. Lorem ipsum dolor sit amet consectetur
  3. adipisicing elit. Culpa quo repellendus delectus
  1. This is OL type of decimal - default
    1. This is OL type of upper roman
      1. This is OL type of lower roman
      2. Lorem ipsum dolor sit amet consectetur
    3. Lorem ipsum dolor sit amet consectetur
  3. adipisicing elit. Culpa quo repellendus delectus

Code for OL tag

html<ol>
  <li>This is OL type of decimal - default</li>
  <li>adipisicing elit. Culpa quo repellendus delectus</li>
  <li>laboriosam mollitia minima</li>
  <li>saepe magni recusandae optio fuga autem est facilis quidem nesciunt, voluptates</li>
</ol>

<ol>
  <li>This is OL type of decimal - default</li>
  <li>
    <ol class="ol-upper-latin">
      <li>This is OL type of upper latin</li>  
      <li>
        <ol class="ol-lower-latin">
          <li>This is OL type of lower latin</li>  
          <li>Lorem ipsum dolor sit amet consectetur</li>
        </ol>
      </li>
      <li>Lorem ipsum dolor sit amet consectetur</li>
    </ol>
  </li>
  <li>adipisicing elit. Culpa quo repellendus delectus</li>
</ol>

<ol>
  <li>This is OL type of decimal - default</li>
  <li>
    <ol class="ol-upper-roman">
      <li>This is OL type of upper roman</li>  
      <li>
        <ol class="ol-lower-roman">
          <li>This is OL type of lower roman</li>  
          <li>Lorem ipsum dolor sit amet consectetur</li>
        </ol>
      </li>
      <li>Lorem ipsum dolor sit amet consectetur</li>
    </ol>
  </li>
  <li>adipisicing elit. Culpa quo repellendus delectus</li>
</ol>
  • This is UL type of disc - default
  • adipisicing elit. Culpa quo repellendus delectus
  • laboriosam mollitia minima
  • saepe magni recusandae optio fuga autem est facilis quidem nesciunt, voluptates
  • This is UL type of circle without a border
    • This is UL type of square
    • adipisicing elit. Culpa quo repellendus delectus
    • laboriosam mollitia minima
    • saepe magni recusandae optio fuga autem est facilis quidem nesciunt, voluptates
  • laboriosam mollitia minima
    • This is UL type of circle - but with border
    • adipisicing elit. Culpa quo repellendus delectus
    • laboriosam mollitia minima
    • saepe magni recusandae optio fuga autem est facilis quidem nesciunt, voluptates

Code for UL:

<ul>
  <li>This is UL type of disc - default</li>
  <li>adipisicing elit. Culpa quo repellendus delectus</li>
  <li>laboriosam mollitia minima</li>
  <li>saepe magni recusandae optio fuga autem est facilis quidem nesciunt, voluptates</li>
</ul>

<ul class="ul-circle ul-no-border-left">
  <li>This is UL type of circle without a border</li>
  <li>
    <ul class="ul-square">
      <li>This is UL type of square</li>
      <li>adipisicing elit. Culpa quo repellendus delectus</li>
      <li>laboriosam mollitia minima</li>
      <li>saepe magni recusandae optio fuga autem est facilis quidem nesciunt, voluptates</li>
    </ul>
  </li>
  <li>laboriosam mollitia minima</li>
  <li>
    <ul class="ul-circle ul-border">
      <li>This is UL type of circle - but with border</li>
      <li>adipisicing elit. Culpa quo repellendus delectus</li>
      <li>laboriosam mollitia minima</li>
      <li>saepe magni recusandae optio fuga autem est facilis quidem nesciunt, voluptates</li>
    </ul>
  </li>
</ul>

Pagination requires you to have our Javascript file included. Read our docs on how to integrate our Javascript file.

Code for Pagination:

<div class="container">
  <ul class="pagination fs-1-6 align-center mb-50 mt-50">
    <li><a href="#" class="pagination-active">1</a></li
      ><li><a href="#">2</a></li
      ><li><a href="#">3</a></li
      ><li><a href="#">4</a></li>
  </ul>
</div>
This is a Blockquote w/o container: Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis cum, ullam, amet odio facilis exercitationem. adipisci nostrum odit facere maiores repudiandae ea dicta ad veritatis quae at repellendus soluta.
This is a Blockquote inside container: Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis cum, ullam, amet odio facilis exercitationem.
This is a Blockquote inside container: Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis cum, ullam, amet odio facilis exercitationem.
This is a Blockquote inside container: Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis cum, ullam, amet odio facilis exercitationem.

Code for Blockquote:

<blockquote>This is a Blockquote w/o container: Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Blanditiis cum, ullam, amet odio facilis exercitationem.
  adipisci nostrum odit facere maiores repudiandae ea dicta ad
  veritatis quae at repellendus soluta.</blockquote>

<div class="container">
  <blockquote>This is a Blockquote w/o container: Lorem ipsum dolor.
    Blanditiis cum, ullam, amet odio facilis exercitationem.
    adipisci nostrum odit facere maiores repudiandae ea dicta ad
    veritatis quae at repellendus soluta.</blockquote>
  
  <blockquote class="blockquote-green">This is a Blockquote w/o container: Lorem ipsum dolor.
    Blanditiis cum, ullam, amet odio facilis exercitationem.
    adipisci nostrum odit facere maiores repudiandae ea dicta ad
    veritatis quae at repellendus soluta.</blockquote>
  
  <blockquote class="blockquote-dark-red">This is a Blockquote w/o container: Lorem ipsum dolor sit.
    Blanditiis cum, ullam, amet odio facilis exercitationem.
    adipisci nostrum odit facere maiores repudiandae ea dicta ad
    veritatis quae at repellendus soluta.</blockquote>
</div>

This is standard P tag on left align


This is standard P tag on center align


This is standard P tag on right align


Code for alignments:

<p class="align-left">This is standard P tag on left align</p>

<p class="align-center">This is standard P tag on center align</p>

<p class="align-right">This is standard P tag on right align</p>

<div class="align-right">
  <button class="btn wide-btn">Wide Right Btn</button>
</div>

This is standard P tag - float left    

This is standard P tag - float right

This is standard P tag with float clearfix applied just above it.

Code for Floatings:

<p class="float-left" style="border: 1px solid grey; margin: 5px;">
This is standard P tag - float left &nbsp;&nbsp;&nbsp;</p>

<p class="float-right" style="border: 1px solid grey; margin: 5px;">
  This is standard P tag - float right</p>

<div class="float-clearfix"></div>

<p style="border: 1px solid grey; margin: 5px;">
This is standard P tag with float clearfix applied just above it.</p>

You can use positioning helpers as classes like this:

.mt-10 ---> margin-top: 10px;
.mr-10 ---> margin-right: 10px;
.mb-10 ---> margin-bottom: 10px;
.ml-10 ---> margin-left: 10px;
.mx-10 ---> margin: 10px 0;
.my-10 ---> margin: 0 10px;

.pt-10 ---> padding-top: 10px;
.pr-10 ---> padding-right: 10px;
.pb-10 ---> padding-bottom: 10px;
.pl-10 ---> padding-left: 10px;
.px-10 ---> padding: 10px 0;
.py-10 ---> padding: 0 10px;

Examples:

<div class="mt-30">This has margin top with 30px</div>
<div class="mr-55">This has margin right with 55px</div>
<div class="mb-95">This has margin bottom with 95px</div>
<div class="ml-5">This has margin left with 5px</div>

Desityle supports the above format for all positioning from 5px to 150px in span of 5.

This is code snippet. Syntax highlighting as per language is in draft specification. Currently, all the code is in light pink color:

let firstVariable = "I am first Variable";
console.log(firstVariable);

This is code snippet with language of the code specified:

rubya = [1, 2, 3, 4]
b = [5, 6, 7, 8]
a + b
# => [1, 2, 3, 4, 5, 6]

You can also do inline code snippet: index.html

Code for Above code snippets:

We'll not be able to show you this demo here. But hey, we can show you here at our codepen.

Form Header

Explain about the purpose of this form here. Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Explain about this form field here. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit harum aspernatur maxime sunt voluptatum!

Explain about this form field here. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit harum aspernatur maxime sunt voluptatum!

Explain about this form field here. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit harum aspernatur maxime sunt voluptatum!

Explain about this form field here. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit harum aspernatur maxime sunt voluptatum!

Explain about this form field here. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit harum aspernatur maxime sunt voluptatum!

Explain about this form field here. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit harum aspernatur maxime sunt voluptatum!

Code for Forms:

<section class="container">
  <div class="align-center section-header">
    <h2>Form Header</h2>
    <u class="u-gold fs-1-2 italic">Explain about the purpose of this form here. Lorem ipsum, dolor sit amet consectetur adipisicing elit.</u>
  </div>

  <div>
    <form action="#" class="form-tag">
      <div class="form-field">
        <label for="email" class="form-field-label">Email: </label>
        <p class="form-field-explanation">Explain about this form field here. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit harum aspernatur maxime sunt voluptatum!</p>
        <input type="email" class="form-field-input" id="email" required />
      </div>

      <div class="form-field">
        <label for="password" class="form-field-label">Password: </label>
        <p class="form-field-explanation">Explain about this form field here. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit harum aspernatur maxime sunt voluptatum!</p>
        <input type="password" class="form-field-input" id="password" minlength="6" maxlength="15" required />
      </div>

      <div class="form-field">
        <label for="body" class="form-field-label">Body: </label>
        <p class="form-field-explanation">Explain about this form field here. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit harum aspernatur maxime sunt voluptatum!</p>
        <textarea class="form-field-input form-field-textarea" id="body" rows="5" minlength="6" required placeholder="Hello World, this is a text area..."></textarea>
      </div>

      <div class="form-field form-field-checkboxes">
        <label class="form-field-label">Checkboxes: </label>
        <p class="form-field-explanation">Explain about this form field here. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit harum aspernatur maxime sunt voluptatum!</p>
        <label class="form-field-label-checkbox">
          Checkbox One
          <input class="form-field-checkbox" type="checkbox" checked="checked" value="one" name="checkbox1">
          <span class="form-field-checkmark"></span>
        </label>

        <label class="form-field-label-checkbox">
          Checkbox Two
          <input class="form-field-checkbox" type="checkbox" value="two" name="checkbox1">
          <span class="form-field-checkmark"></span>
        </label>

        <label class="form-field-label-checkbox">
          Checkbox Three
          <input class="form-field-checkbox" type="checkbox" value="three" name="checkbox1">
          <span class="form-field-checkmark"></span>
        </label>
      </div>

      <div class="form-field form-field-radios">
        <label class="form-field-label">Radio: </label>
        <p class="form-field-explanation">Explain about this form field here. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit harum aspernatur maxime sunt voluptatum!</p>
        <label class="form-field-label-radio">
          Radio One
          <input class="form-field-radio" type="radio" checked="checked" value="one" name="radio1">
          <span class="form-field-radiomark"></span>
        </label>

        <label class="form-field-label-radio">
          Radio Two
          <input class="form-field-radio" type="radio" value="two" name="radio1">
          <span class="form-field-radiomark"></span>
        </label>

        <label class="form-field-label-radio">
          Radio Three
          <input class="form-field-radio" type="radio" value="three" name="radio1">
          <span class="form-field-radiomark"></span>
        </label>
      </div>

      <div class="form-field">
        <label for="select" class="form-field-label">Select: </label>
        <p class="form-field-explanation">Explain about this form field here. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit harum aspernatur maxime sunt voluptatum!</p>
        <select id="select" class="form-field-select">
          <option value="0">Select your option:</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
          <option value="4">Option 4</option>
          <option value="5">Option 5</option>
        </select>
        <span class="form-field-select-checkmark"></span>
      </div>

      <div class="form-footer align-center mt-40">
        <button class="btn wide-btn submit-btn">Submit</button>
      </div>
    </form>
  </div>
</section>

This is a success jumbo for success messages w/o container. Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere eaque fugit ratione nulla sint earum libero est accusamus enim dicta aliquid.

This is a error jumbo for error messages w/o container. Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere eaque fugit ratione nulla sint earum libero est accusamus enim dicta aliquid.

This is a warn jumbo for warn messages w/o container. Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere eaque fugit ratione nulla sint earum libero est accusamus enim dicta aliquid.

This is a info jumbo for info messages w/o container. Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere eaque fugit ratione nulla sint earum libero est accusamus enim dicta aliquid.

This is a success jumbo for success messages inside container. Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere eaque fugit ratione nulla sint earum libero est accusamus enim dicta aliquid.

This is a error jumbo for error messages inside container. Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere eaque fugit ratione nulla sint earum libero est accusamus enim dicta aliquid.

Code for Jumbos:

<div class="jumbo jumbo-success">
  <p>This is a success jumbo for success messages w/o container.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    Facere eaque fugit ratione nulla sint earum libero est accusamus enim dicta aliquid.</p>
</div>

<div class="jumbo jumbo-error">
  <p>This is a error jumbo for error messages w/o container. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    Facere eaque fugit ratione nulla sint earum libero est accusamus enim dicta aliquid.</p>
</div>

<div class="jumbo jumbo-warn">
  <p>This is a warn jumbo for warn messages w/o container. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    Facere eaque fugit ratione nulla sint earum libero est accusamus enim dicta aliquid.</p>
</div>

<div class="jumbo jumbo-info">
  <p>This is a info jumbo for info messages w/o container. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    Facere eaque fugit ratione nulla sint earum libero est accusamus enim dicta aliquid.</p>
</div>



<div class="container mt-30">
  <div class="jumbo jumbo-success">
    <p>This is a success jumbo for success messages inside container. Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere eaque fugit ratione nulla sint earum libero est accusamus enim dicta aliquid.</p>
  </div>

  <div class="jumbo jumbo-error">
    <p>This is a error jumbo for error messages inside container. Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere eaque fugit ratione nulla sint earum libero est accusamus enim dicta aliquid.</p>
  </div>
</div>

Default

Gold

Orange

Info - Yellow

Error - Red

Success - Green

Code for Badgetags:

<div class="container mt-30">
  <p class="badgetag">Default</p>
  <p class="badgetag badgetag-gold">Gold</p>
  <p class="badgetag badgetag-orange">Orange</p>
  <p class="badgetag badgetag-dark-yellow">Info - Yellow</p>
  <p class="badgetag badgetag-dark-red">Error - Red</p>
  <p class="badgetag badgetag-green">Success - Green</p>
</div>
MonthSavingsNon Savings
January$100$50
February$80$40
March$100$50
April$100$50
May$100$50
MonthSavingsNon Savings
January$100$50
February$80$40
March$100$50
April$100$50
May$100$50

Code for Table:

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
      <th>Non Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
      <td>$50</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
      <td>$40</td>
    </tr>
    <tr>
      <td>March</td>
      <td>$100</td>
      <td>$50</td>
    </tr>
    <tr>
      <td>April</td>
      <td>$100</td>
      <td>$50</td>
    </tr>
    <tr>
      <td>May</td>
      <td>$100</td>
      <td>$50</td>
    </tr>
  </tbody>
</table>

<!-- Table inside container -->
<div class="container mt-50">
  <table class="table-inside-container">
    <thead>
      <tr>
        <th>Month</th>
        <th>Savings</th>
        <th>Non Savings</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>$100</td>
        <td>$50</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
        <td>$40</td>
      </tr>
      <tr>
        <td>March</td>
        <td>$100</td>
        <td>$50</td>
      </tr>
      <tr>
        <td>April</td>
        <td>$100</td>
        <td>$50</td>
      </tr>
      <tr>
        <td>May</td>
        <td>$100</td>
        <td>$50</td>
      </tr>
    </tbody>
  </table>
</div>
  1. Introduction
    1. About Us
    2. Know more about us
  3. Desityle
    1. Development Installation
    2. Production Installation

Table of contents requires you to have our Javascript file included. Read our docs on how to integrate our Javascript file. When you click on "About Us" section above, the user will be jumped to "#about-us" taken from "data-href" attribute.

Code for Table of contents:

<div class="container">
  <ol class="ol-toc">
    <li class="ol-toc-item">Introduction</li>
    <li class="ol-toc-item">
      <ol class="ol-toc-nested">
        <li data-href="#about-us">About Us</li>
        <li data-href="#know-more-about-us">Know more about us</li>
      </ol>
    </li>
    <li class="ol-toc-item">Desityle</li>
    <li class="ol-toc-item">
      <ol class="ol-toc-nested">
        <li data-href="#di">Development Installation</li>
        <li data-href="#pi">Production Installation</li>
      </ol>
    </li>
  </ol>
</div>

Below is a responsive image, try re-sizing the window!


og_image

Below are also a responsive images, but will enlarge to their original size when clicked! Find out which image has a caption.

drabkirn-logo
nav-illustration

Code for Images:

<img src="./abc.png" alt="my abc image" class="image-responsive" />

<img src="./abc.png" alt="my abc image" class="image-responsive image-click-fullscreen" />

<img src="./abc.png" alt="my abc image" class="image-responsive image-click-fullscreen"
    data-caption="This is the caption, with green background below the image fullscreen." />

We want to keep our website clean and heavy-free, so we'll show you this demo here at our codepen.

Code for Videos:

<video src="./abc.mp4" class="video-responsive" controls></video>

Modal requires you to have our Javascript file included. Read our docs on how to integrate our Javascript file.



Click on the button below to open the modal. You can add .content-click-modal to any content, then you must have a corresponding Modal for it. You can close the modal by clicking on background area or close button in the modal-footer.

Code for Modal:

<button class="btn btn-wide content-click-modal">Open Modal</button>

<div class="modal" id="modal">
  <div class="modal-dialog" id="modal-dialog">
    <div class="modal-dialog-header align-center mt-5 mb-20">
      <h2>Polish Blue</h2>
    </div>
    <div class="modal-dialog-content">
      <div class="align-center mb-20">
        <img src="./assets/og_image.png" alt="og_image" class="image-responsive">
      </div>
      <div>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex et nisi, sint ullam enim soluta cum.
          Quas, voluptatum corrupti doloribus enim illum voluptatibus ipsam hic consequuntur eligendi quidem
          voluptates labore.Mollitia officiis commodi provident in consequuntur nesciunt quisquam perspiciatis
          temporibus fugiat veritatis quaerat odio cum rerum aperiam cumque, quia eos voluptates ipsa voluptatem
          earum ratione, quos sit possimus. Necessitatibus, repellat!
        </p>
      </div>
    </div>
    <hr />
    <div class="modal-dialog-footer align-right">
      <button class="btn" id="modal-close">Close</button>
    </div>
  </div>
</div>

Code for Footer:

<footer>
  <div class="row">
    <div class="col-dsk-6 col-mob-12 align-center-on-mob-only mt-5 pl-20">
      <p>Copyrights &copy;, 2020 - YOURCOMPANY</p>
    </div>
    <div class="col-dsk-6 col-mob-12 align-right align-center-on-mob-only mt-5 pr-20">
      <a href="#" class="mr-10">ABC</a>
      <a href="#" class="mr-10">DEF</a>
    </div>
  </div>
  <div>
    <p class="align-center italic mt-5">@Baaaaaa</p>
  </div>
</footer>