Tripline CSS

A CSS Framework for creating a better website.You can use TriplineCSS easily in easy steps.First of all Download TriplineCSS.
Download
In your HTML file put stylesheet link as:

and follow following code instructions for displaying respective widgets.

Hero Image

Hero Image Demo.

<div class="tln-hero-image">
<div class="tln-hero-text">
<h1 style="font-size:60px">Hero Image</h1>
<p>Photo by Yuiizaa September on Unsplash</p>
</div>
</div>

Hero Image

Photo by Yuiizaa September on Unsplash

Buttons

Button can be added by using following code:

<button class="tln-button">BUTTON #1 </button>

<button class="tln-button tln-red">BUTTON #2 </button>

<button class="tln-button tln-blue">BUTTON #3 </button>

<button class="tln-button tln-green">BUTTON #4 </button>

<button class="tln-button tln-yellow">BUTTON #5 </button>

<button class="tln-button tln-yellow"><a>Link Button<a></button>

Cards

Cards can be added by using following code:

<div class="tln-card tln-red">
<div class="tln-container">
<h4><b>Card #1</b></h4>
<p>I am a model of cards with tripline css.</p>
</div>
</div>

Card #1

I am a model of cards with tripline css.

<div class="tln-card tln-green">
<div class="tln-container">
<h4><b>Card #2</b></h4>
<p>I am a model of cards with tripline css.</p>
</div>
</div>

Card #2

I am a model of cards with tripline css.

<div class="tln-card tln-green">
<div class="tln-container">
<h4><b>Card #3</b></h4>
<p>I am a model of cards with tripline css.</p>
</div>
</div>

Card #3

I am a model of cards with tripline css.

<div class="tln-card tln-green">
<div class="tln-container">
<h4><b>Card #4</b></h4>
<p>I am a model of cards with tripline css.</p>
</div>
</div>

Card #4

I am a model of cards with tripline css.

Forms

Forms can be styled by adding .tln-form class to the form element.:

<form>
<div class="tln-form">
<label for="form1">Username</label>
<input class="tln-input"/>
</div>
<div class="tln-form">
<label for="pass">Password</label>
<input class="tln-input" type="password"/>
</div>
<div class="tln-form">
<input class="tln-checkbox" type="checkbox"/>Remember Me
</div>
<div class="tln-form">
<input class="tln-blue" type="submit"/>
</div>
</form>

Other Forms Elements

Some other forms elements supported by Tripline CSS are "Select" and "textarea".

Textarea

Select

<div class="tln-form">
<select>
<option value="0">Select car:</option>
<option value="1">Maruti</option>
<option value="2">Honda</option>
<option value="3">BMW</option>
<option value="4">Kia</option>
</select>
</div>

Tooltips

Tooltips Demo.

<div class="tln-tooltip">Hover Here
<span class="tln-text tln-red">This is tooltip hai guys</span>
</div>