Phone:

+(976) 12 34 9999

Email:

flatheme@gmail.com

© Copyright 2024 Gray | All Rights Reserved.

Avatar:

Avatar Large (110x110 px)

Avatar Medium (90x90 px)

Avatar Small (70x70 px)


<img class="img-mask-avatar-lg" src="img-src.jpg" alt="">
<img class="img-mask-avatar-md" src="img-src.jpg" alt="">
<img class="img-mask-avatar-sm" src="img-src.jpg" alt="">

Buttons:


<a class="button button-lg" href="#">Button LG</a>
<a class="button" href="#">Button MD</a>
<a class="button button-sm" href="#">Button SM</a>



<a class="button button-lg button-outline" href="#">Button LG</a>
<a class="button button-outline" href="#">Button MD</a>
<a class="button button-sm button-outline" href="#">Button SM</a>



<a class="button-circle button-circle-lg" href="#">
  <i class="bi bi-play"></i>
</a>
<a class="button-circle" href="#">
  <i class="bi bi-play"></i>
</a>
<a class="button-circle button-circle-sm" href="#">
  <i class="bi bi-play"></i>
</a>
<a class="button-circle button-circle-lg button-circle-outline" href="#">
  <i class="bi bi-play"></i>
</a>
<a class="button-circle button-circle-outline" href="#">
  <i class="bi bi-play"></i>
</a>
<a class="button-circle button-circle-sm button-circle-outline" href="#">
  <i class="bi bi-play"></i>
</a>

Counter:

100+


<h1 class="font-family-mono fw-light"><span class="counter">100</span>+</h1>

Lists:

Unordered List

  • List item
  • List item
    • Sub List item
    • Sub List item
    • Sub List item
  • List item
  • List item

<ul>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Sub List item</li>
      <li>Sub List item</li>
      <li>Sub List item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
</ul>

Ordered List

  1. List item
  2. List item
  3. List item
  4. List item

<ol>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

Unstyled List

  • List item
  • List item
    • Sub List item
    • Sub List item
    • Sub List item
  • List item
  • List item

<ul class="list-unstyled">
  <li>List item</li>
  <li>List item
    <ul>
      <li>Sub List item</li>
      <li>Sub List item</li>
      <li>Sub List item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
</ul>

Custom Circle List

  • List item
  • List item
  • List item
  • List item

<ul class="list-circle">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Dash List

  • List item
  • List item
  • List item
  • List item

<ul class="list-dash">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Inline List

  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item

<ul class="list-inline-lg">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
<ul class="list-inline">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
<ul class="list-inline-sm">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Inline List - Dash

  • List item
  • List item
  • List item
  • List item

<ul class="list-inline-dash">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Inline List - Pills

  • List item
  • List item
  • List item
  • List item

<ul class="list-inline-pills">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Typer:


<h2 class="font-family-mono fw-normal">
  <span class="typer" id="typer1" data-words="Hi There!, I'm Christina" data-delay="50" data-deleteDelay="1500"></span><span class="cursor" data-owner="typer1"></span>
</h2>