Fairway UI

by Fairway Technology
code

Menu ×

   <!-- Top navigation bar -->

<div class="ft-top-nav">
   <input class="top-menu-btn" type="checkbox" id="top-menu-btn" />
   <label class="top-menu-icon" for="top-menu-btn"><span class="topnavicon"></span></label>
   <div class="ft-top-menu">            
      <ul class="ft-topnav left">
         <li>
            <a href="tel:09123454321"><i class="fa fa-phone"></i>09 123 454 321</a>
         </li>
         <li>
            <a href="mailto:noreply@example.com"><i class="fa fa-envelope-o"></i>noreply@example.com</a>
         </li>
      </ul>
      <ul class="ft-topnav right">
         <li>
            <a href=""><i class="fa fa-unlock"></i>Login</a>
         </li>
         <li class="ft-text-separate">or</li>
         <li>
            <a href=""><i class="fa fa-lock"></i>Signup</a>
         </li>
      </ul>
   </div>
</div>

<!-- Main navigation menu -->

<div class="ft-main-nav">
   <div class="ft-logo-img">
      <a href=""><img src="https://fairway-tech.github.io/fairway-ui/img/Fairway-Dummy-Logo.png"></a>
   </div>
   <div class="ft-logo-title">
      <h2>Fairway UI</h2>
      <span>by <a href="" target="_blank">Fairway Technology</a></span>
   </div>
   <div class="ft-menu">
      <input class="menu-btn" type="checkbox" id="menu-btn" />
      <label class="menu-icon" for="menu-btn">
         <span class="navicon"></span>
      </label>
      <div class="menu">
         <ul>
            <li class="ft-menu-title">
               <label>Menu</label>
            </li>
            <li>
               <a href="" class="active">
               <span class="ft-menu-primary">ပထမနမူနာ</span><br>
               <span class="ft-menu-secondary">First Item</span>
               </a>
            </li>

            <li class="ft-dropdown">
               <a href="">
               <span class="ft-menu-primary">ဒုတိယနမူနာ</span><br>
               <span class="ft-menu-secondary">Second Item</span>
               <span class="ft-dropdown-icon">▼</span>
               </a>
               <ul class="ft-dropdown-menu">
                  <li>
                     <a href="">
                        <span class="ft-menu-primary">ဒုတိယနမူနာ</span><br>
                        <span class="ft-menu-secondary">Second Item</span>
                     </a>
                  </li>
                  <li>
                     <a href="">
                        <span class="ft-menu-primary">ဒုတိယနမူနာ</span><br>
                        <span class="ft-menu-secondary">Second Item</span>
                     </a>
                  </li>
                  <li>
                     <a href="">
                        <span class="ft-menu-primary">ဒုတိယနမူနာ</span><br>
                        <span class="ft-menu-secondary">Second Item</span>
                     </a>
                  </li>
               </ul>
            </li>

            <li>
               <a href="">
               <span class="ft-menu-primary">တတိယနမူနာ</span><br>
               <span class="ft-menu-secondary">Third Item</span>
               </a>
            </li>
         </ul>
      </div>
   </div>
</div>

Check Box

Check box ×

   <label class="control ft-control-checkbox">First Choice
    <input type="checkbox" value="designer" checked="">
    <div class="ft-check-indicator"></div>
</label>

<label class="control ft-control-checkbox">Second Choice
    <input type="checkbox" value="designer">
    <div class="ft-check-indicator"></div>
</label>

<label class="control ft-control-checkbox">Third Choice
    <input type="checkbox" value="designer" checked="">
    <div class="ft-check-indicator"></div>
</label>

<label class="control ft-control-checkbox">Fouth Choice
    <input type="checkbox" value="designer">
    <div class="ft-check-indicator"></div>
</label>

<label class="control ft-control-checkbox">Fifth Choice
    <input type="checkbox" value="designer">
    <div class="ft-check-indicator"></div>
</label>

Select Box

Select Box×

<div class="ft-select">
   <label class="ft-select-title">Project Start</label>
   <select id="ft-select-items" name="ft-select">
       <option value="0">Project Start</option>
       <option value="Immediately">Immediately</option>
       <option value="In the next month">In the next month</option>
       <option value="2 months">2 months</option>
       <option value="3 months">3 months</option>
       <option value="Click Me">ဒီမှာနှိပ်ပါ</option>
   </select>
</div>

Radio Button

Radio Button ×

<label class="ft-radio">
   <input type="radio" id="1" name="radiotype" checked="">
   <div class="check"></div>First
</label>
<label class="ft-radio">
   <input type="radio" id="2" name="radiotype">
   <div class="check"></div>Second
</label>

Toggle Switch

Toggle Switch×

<label>Off</label>
  <label class="ft-switch">
    <input type="checkbox" checked="">
    <span class="ft-slider round"></span>
  </label>
<label>On</label>

Button

Button×

<button class="ft-btn ft-green">
   <span class="ft-btn-text-primary">ဒီမှာနှိပ်ပါ</span>
   <span class="ft-btn-text-secondary">Button</span>
</button>

<button class="ft-btn ft-blue">
   <span class="ft-btn-text-primary">ဒီမှာနှိပ်ပါ</span>
   <span class="ft-btn-text-secondary">Button</span>
</button>

<button class="ft-btn ft-yellow">
   <span class="ft-btn-text-primary">ဒီမှာနှိပ်ပါ</span>
   <span class="ft-btn-text-secondary">Button</span>
</button>

<button class="ft-btn ft-red">
   <span class="ft-btn-text-primary">ဒီမှာနှိပ်ပါ</span>
   <span class="ft-btn-text-secondary">Button</span>
</button>

Icon Button

Button With Icon×

<button class="ft-btn ft-green">
   <span class="ft-btn-icon"><i class="fa fa-search"></i></span>
   <span class="ft-btn-text">
      <span class="ft-btn-text-primary">ဒီမှာနှိပ်ပါ</span>
      <span class="ft-btn-text-secondary">Button</span>    
   </span>                             
</button>

<button class="ft-btn ft-blue">
   <span class="ft-btn-icon"><i class="fa fa-search"></i></span>
   <span class="ft-btn-text">
      <span class="ft-btn-text-primary">ဒီမှာနှိပ်ပါ</span>
      <span class="ft-btn-text-secondary">Button</span>    
   </span> 
</button>

<button class="ft-btn ft-yellow">
   <span class="ft-btn-icon"><i class="fa fa-search"></i></span>
   <span class="ft-btn-text">
      <span class="ft-btn-text-primary">ဒီမှာနှိပ်ပါ</span>
      <span class="ft-btn-text-secondary">Button</span>    
   </span> 
</button>

<button class="ft-btn ft-red">
   <span class="ft-btn-icon"><i class="fa fa-search"></i></span>
   <span class="ft-btn-text">
      <span class="ft-btn-text-primary">ဒီမှာနှိပ်ပါ</span>
      <span class="ft-btn-text-secondary">Button</span>    
   </span>
</button>

Header Titles

Title Left

Title Center

Title Right

Header Titles×

<h2 class="ft-title-left">
   <span>Title Left</span>
</h2>
<h2 class="ft-title-center"> <span>Title Left</span> </h2>
<h2 class="ft-title-right"> <span>Title Left</span> </h2>

Form Design

Form Design×

<form>
  <div class="ft-form-item">
     <label for="name">အမည်ဖြည့်ရန်<span>Name</span></label>
     <input type="text" id="name" name="name" minlength="2" data-err-minlength="အနည်းဆုံး နှစ်လုံးဖြည့်ရန်လိုအပ်သည်">
     <label id="name-error" class="error" for="name">အမည်ဖြည့်ရန် လိုအပ်သည်</label>
  </div>
  <div class="ft-form-item">
     <label for="email">အီးမေးလ်ဖြည့်ရန်<span>Email</span></label>
     <input type="text" id="email" name="email">
  </div>
  <div class="ft-form-item">
     <label for="comment">မှတ်ချက်ပေးရန်<span>Comment</span></label>
     <textarea type="text" id="comment" name="comment"></textarea>
  </div>
  <div>
     <button type="submit" class="ft-btn ft-green">
        <div class="ft-btn-icon">
           <i class="fa fa-search"></i>
        </div>
        <div class="ft-btn-text">
           <span class="ft-btn-text-primary">လော့ဂ်အင်ဝင်မည်</span>
           <span class="ft-btn-text-secondary">Button</span>   
        </div>
     </button>
  </div>
</form>

Search Box

Search Box×

  <!-- Search Icon button -->
<div class="ft-search-btnicon">
  <form>
    <input type="text" class="ft-search-box" placeholder="Search">
    <button type="submit" class="ft-search-btn"><i class="fa fa-search"></i></button>
  </form>
</div>
<!-- Search Icon --> <div class="ft-search-icon"> <form> <input type="text" class="ft-search-box" placeholder="Search"> <button type="submit" class="ft-search-btn"><i class="fa fa-search"></i></button> </form> </div>
<!-- Search Outline --> <div class="ft-search-outline"> <form> <input type="text" class="ft-ft-search-box" placeholder="Search"> <button type="submit" class="ft-search-btn"><i class="fa fa-search"></i></button> </form> </div>
<!-- Slide search box --> <div class="ft-search-slide"> <form> <div class="ft-search-btn" onclick="$(this).next().toggle().focus()"><i class="fa fa-search"></i></div> <input type="text" class="ft-search-box" placeholder="Search"> </form> </div>

CSS CDN

https://fairway-tech.github.io/fairway-ui/css/fairway-ui.min.css

JavaScript CDN

https://fairway-tech.github.io/fairway-ui/js/fairway-ui.min.js