Extras

This style Templates was made as ui kit to help you build your own theme without suffer, it's full of cards, profile ui, log-in items, Checkboxes and even more and soon you gonna get more updates with new items.

Card item 1 | Des holder

...
Link
Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis.
<!-- card-item-1 start --> <div class="col-md-4"> <div class="card-item-1"> <div class="image"> <img src="..." alt="..."> </div> <div class="title"> <a href="#">Link</a> </div> <div class="justify description"> ......... </div> </div> </div> <!-- card-item-1 end -->

Card item 2 | Full mask

...
Link
Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis.
<!-- card-item-2 start --> <div class="col-md-5"> <div class="card-item-2"> <div class="image"> <img src="..." alt="..."> </div> <div class="title"> <a href="#">Link</a> </div> <div class="justify description"> ....... </div> </div> </div> <!-- card-item-2 end -->

Card-item-3 | Call To Action

...
<!-- card-item-3 card --> <div class="col-md-5"> <div class="card-item-3"> <div class="image"> <img src="..." alt="..."> </div> <div class="title"> <button class="btn secoundry">Call To Action</button> </div> </div> </div> <!-- card-item-3 card end -->

Card-item-4 | Social media icons

...
<div class="col-md-5"> <div class="card-item-4"> <div class="image"> <img src="images/img-holder.png" alt="..."> </div> <div class="title"> <ul> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-instagram"></i></a></li> </ul> </div> </div> </div>

Full User Card

User Name

UI/UX Developer

<!-- profile card start --> <div class="col-md-4 ui card"> <div class="ui image"> <img src="images/img-holder.png" alt=""> </div> <div class="ui name"> <h1>User Name</h1> </div> <div class="ui prof"> <p>UI/UX Developer</p> </div> <div class="row"> <div class="col-md-6"> <button class="btn facebook-bk"><i class="fa fa-facebook"></i> visit</button> </div> <div class="col-md-6"> <button class="btn twitter-bk"><i class="fa fa-twitter"></i> Follow</button> </div> </div> </div><!-- profile card end -->

Wide User Card

User Name

UI/UX Developer

<!-- profile card start --> <div class="col-md-8 ui card2"> <div class="ui image col-md-4"> <img src="images/img-holder.png" alt=""> </div> <div class="col-md-8"> <div class="ui name"> <h1>User Name</h1> </div> <div class="ui prof"> <p>UI/UX Developer</p> </div> </div> </div><!-- profile card end -->

Address User Card

User Name

UI/UX Developer

<!-- user ui start--> <div class="col-md-8 ui card2"> <div class="ui image col-md-4"> <img src="..." alt=""> </div> <div class="col-md-8"> <div class="ui name"> <h1>...</h1> </div> <div class="ui prof"> <p>...</p> </div> <div class="social"> <p><i class="fa fa-map-marker"></i> Egypt, Alexandria <br> <i class="fa fa-twitter"></i> <a href="...">...</a> <br> <i class="fa fa-envelope"></i> <a href="...">...</a></p> </div> </div> </div><!-- user ui start end -->

Full Width Sign In

<div class="col-md-5 sign-in"> <h3>Sign In</h3> <form class="" action="" role="form"> <div class="col-md-12 log-in"> <input type="email" placeholder="Email Address"> <input type="password" placeholder="password"> </div> <div class="row"> <div class="col-md-7"> <div class="checkbox"> <label> <input type="checkbox">Remember me</label> </div> </div> <div class="col-md-5"> <button class="btn btn-primary">sign in</button> </div> </div> </form> <div class="row"> <button class="forget-password">Forgot your password?</button> </div> </div>

Sign In With Icons

<div class="col-md-5 sign-in"> <h3>Sign In</h3> <form class="" action="" role="form"> <div class="form-group"> <div class="input-group input-icon"> <span class="input-group-addon"> <em class="fa fa-envelope fa-fw"></em> </span> <input type="email" name="email" class="form-control" placeholder="Email"> </div> </div> <div class="form-group"> <div class="input-group input-icon"> <span class="input-group-addon"> <em class="fa fa-key fa-fw"></em> </span> <input type="password" name="password" class="form-control" placeholder="Password"> </div> </div> <input type="submit" value="Sign in" class="btn btn-primary pull-right"> <div class="checkbox pui-init checked"> <label> <input type="checkbox" name="" checked="">Remember me </label> </div> </form> <div class="row"> <button class="forget-password">Forgot your password?</button> </div> </div>

Styled Checkboxes

<form action="#" class="ui flat"> <p><input type="checkbox" disabled /><label for="test1"><span class="ui"></span>Disabled </label></p> <p><input type="checkbox" checked /><label for="test2"><span class="ui"></span>Checked</label></p> <p><input type="checkbox" /><label for="test3"><span class="ui"></span>Normal</label></p> </form>

Blog Post

How to [Blog Post]

by @user

ui ux Bootstrap
17200
2000
<div class="col-md-5"> <div class="panel panel-default"> <img class="img-responsive" src="images/img-holder.png" alt=""> <div class="panel-body"> <h4> <strong>How to [Blog Post] </strong> </h4> <p> by <a href="http://twitter.com/ahmadelsa3ed">@user</a> </p> <a href="#" class="label label-info">ui</a> <a href="#" class="label label-info">ux</a> <a href="#" class="label label-info">Bootstrap</a> </div> <div class="panel-body"> <div class="valign"> <div class="col-md-6"> <em class="fa fa-eye fa-large fa-fw"></em> <strong>17200</strong> </div> <div class="col-md-6"> <em class="fa fa-thumbs-up fa-large"></em> <strong>2000</strong> </div> </div> </div> </div> </div>

Store items

Store items +102



<!-- Store items block --> <div class="panel panel-primary"> <div class="panel-heading clearfix"> <p class="lead"> <strong>Store items</strong> <span class="label label-warning pull-right">+102</span> </p> </div> <!-- Pic row 1 --> <div class="panel-body"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <a href="#"> <img src="images/img-holder.png" alt="" class="img-rounded img-responsive"></a> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <a href="#"> <img src="images/img-holder.png" alt="" class="img-rounded img-responsive"></a> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <a href="#"> <img src="images/img-holder.png" alt="" class="img-rounded img-responsive"></a> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <a href="#"> <img src="images/img-holder.png" alt="" class="img-rounded img-responsive"></a> </div> </div> <br> <!-- Pic row 2 --> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <a href="#"> <img src="images/img-holder.png" alt="" class="img-rounded img-responsive"></a> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <a href="#"> <img src="images/img-holder.png" alt="" class="img-rounded img-responsive"></a> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <a href="#"> <img src="images/img-holder.png" alt="" class="img-rounded img-responsive"></a> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <a href="#"> <img src="images/img-holder.png" alt="" class="img-rounded img-responsive"></a> </div> </div> <div class="text-center"> <br> <button class="btn btn-primary">Load More</button> </div> </div> </div><!-- Store items block end -->

Store item

Store item

This phone is so expensive and everybody get it, You can get it here with discount and be an i-phone user.

Order
<div class="col-md-5"> <div class="panel panel-primary"> <div class="panel-heading"> <p class="lead"> <strong>Store item</strong> </p> </div> <div class="panel-body"> <div class="valign"> <div class="cell-1-3"> <img class="img-responsive" src="images/i-phone.png" alt=""></div> <div> <p> This phone is so expensive and everybody get it, You can get it here with discount and be an i-phone user. </p> </div> </div> </div> <div class="panel-body"> <a href="#" class="btn btn-success">Order</a> <div class="btn-group pull-right"> <button class="btn btn-primary"> <em class="fa fa-fw fa-chevron-left"></em> </button> <button class="btn btn-primary"> <em class="fa fa-fw fa-chevron-right"></em> </button> </div> </div> </div> </div>

Fast Contact form

Contact me


<!-- contact form start --> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-body"> <h4> <strong>Contact me</strong> </h4> <br> <form action="#"> <div class="form-group"> <input type="email" name="email" class="form-control" placeholder="Email"></div> <div class="form-group"> <input type="text" name="subject" class="form-control" placeholder="Subject"></div> <div class="form-group"> <textarea name="" id="" cols="30" rows="10" class="form-control" placeholder="Your Message ..."></textarea> </div> <div class="clearfix"> <input type="submit" value="Send" class="btn btn-primary pull-right"> <div class="checkbox pui-init"> </div> </div> </form> </div> </div> </div><!-- contact form end -->

Twitter Profile

somebody

Some thing should be placed in here to be more prof

<!-- twitter profile start --> <div class="col-md-5"> <div class="panel panel-default"> <img class="img-responsive" src="images/img-holder.png" alt=""> <div class="panel-body"> <div class="col-md-12 twitter-look"> <img src="images/img-holder.png" class="img-circle img-thumbnail img-responsive" alt=""> </div> <div class="col-md-12 tac"> <p class="lead">somebody</p> <p>Some thing should be placed in here to be more prof </p> </div> </div> </div> </div><!-- twitter profile end -->