Typography
.left-align { text-align: left; } .right-align { text-align: right; } .center-align { text-align: center; } .justify-align { text-align: justify; } .break-word{ word-wrap: break-word; } .nowrap{ white-space: nowrap; } .ellipsis{ text-overflow: ellipsis; } .text-overflow{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bidi-override{ direction:rtl; unicode-bidi:bidi-override; } .lowercase { text-transform: lowercase; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } .paragraph{ text-indent:2em; } .subheader{ font-size:18px; font-weight:500; } .quote{ font-style: italic; } .list{ padding:0; margin: 0; list-style-type:none; } .list li{ padding:3px 0; list-style-type: none; }
.size-1{ font-size: 1px; } .size-2{ font-size: 2px; } .size-3{ font-size: 3px; } .size-4{ font-size: 4px; } .size-5{ font-size: 5px; } .size-6{ font-size: 6px; } .size-7{ font-size: 7px; } .size-8{ font-size: 8px; } .size-9{ font-size: 9px; } .size-10{ font-size: 10px; } .size-11{ font-size: 11px; } .size-12{ font-size: 12px; } .size-13{ font-size: 13px; } .size-14{ font-size: 14px; } .size-15{ font-size: 15px; } .size-16{ font-size: 16px; }
.size-17{ font-size: 17px; } .size-18{ font-size: 18px; } .size-19{ font-size: 19px; } .size-20{ font-size: 20px; } .size-21{ font-size: 21px; } .size-22{ font-size: 22px; } .size-23{ font-size: 23px; } .size-24{ font-size: 24px; } .size-25{ font-size: 25px; } .size-26{ font-size: 26px; } .size-27{ font-size: 27px; } .size-28{ font-size: 28px; } .size-29{ font-size: 29px; } .size-30{ font-size: 30px; } .size-31{ font-size: 31px; } .size-32{ font-size: 32px; }
.size-33{ font-size: 33px; } .size-34{ font-size: 34px; } .size-35{ font-size: 35px; } .size-36{ font-size: 36px; } .size-37{ font-size: 37px; } .size-38{ font-size: 38px; } .size-39{ font-size: 39px; } .size-40{ font-size: 40px; } .size-41{ font-size: 41px; } .size-42{ font-size: 42px; } .size-43{ font-size: 43px; } .size-44{ font-size: 44px; } .size-45{ font-size: 45px; } .size-46{ font-size: 46px; } .size-47{ font-size: 47px; } .size-48{ font-size: 48px; }
.size-49{ font-size: 49px; } .size-50{ font-size: 50px; } .size-51{ font-size: 51px; } .size-52{ font-size: 52px; } .size-53{ font-size: 53px; } .size-54{ font-size: 54px; } .size-55{ font-size: 55px; } .size-56{ font-size: 56px; } .size-57{ font-size: 57px; } .size-58{ font-size: 58px; } .size-59{ font-size: 59px; } .size-60{ font-size: 60px; } .size-61{ font-size: 61px; } .size-62{ font-size: 62px; } .size-63{ font-size: 63px; } .size-64{ font-size: 64px; }
Tables
header 1 header 2 header 3
col 1 col 2 col 3
col 1 col 2 col 3
<div class="scroll-table"> <table class="table"> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> </table> </div>
Display
.inline{ display:inline!important; } .block{ display:block!important; } @media (max-width:600px){ .hs{display:none!important} } @media (max-width:992px) and (min-width:601px){ .hm{display:none!important} } @media (min-width:993px){ .hl{display:none!important} } .hide{ display:none!important } .show{ display:block!important }
Position
.relative{ position: relative; } .absolute{ position: absolute } .static{ position:static; } .fixed{ position:fixed; left:0; right:0; } .fixed-top{ position:fixed; left:0; right:0; top:0; } .fixed-bottom{ position:fixed; left:0; right:0; bottom:0; } .position-container{ position: relative }
topleft
topright
bottomleft
bottomright
middle
topmiddle
bottommiddle
leftmiddle
rightmiddle
<div class="relative height-s border-solid"> <div class="position-topleft"> topleft </div> <div class="position-topright"> topright </div> <div class="position-bottomleft"> bottomleft </div> <div class="position-bottomright"> bottomright </div> <div class="position-middle"> middle </div> <div class="position-topmiddle"> topmiddle </div> <div class="position-bottommiddle"> bottommiddle </div> <div class="position-leftmiddle"> leftmiddle </div> <div class="position-rightmiddle"> rightmiddle </div> </div>
Border
.border-none{ border: none!important; } .border-dashed-bottom{ border-bottom: 1px dashed #ddd; } .border-dashed{ border: 1px dashed #ddd; } .border-solid-bottom{ border-bottom: 1px solid #ddd; } .border-solid{ border: 1px solid #ddd; }
Layout
.layout{ max-width: 1024px; margin: auto; } .layout-t{ max-width: 640px; margin: auto; } .layout-s{ max-width: 800px; margin: auto; } .layout-m{ max-width: 1280px; margin: auto; } .layout-l{ max-width: 1440px; margin: auto; } .layout-g{ max-width: 1600px; margin: auto; }
Media Query
smartphone
Tablet
Laptop
desktop
<div class="mq-smartphone"> smartphone </div> <div class="mq-tablet"> Tablet </div> <div class="mq-laptop"> Laptop </div> <div class="mq-computer"> desktop </div>
Iframe
.iframe{ margin: 0; padding: 0; border: 1px solid #ddd; display: block; position: relative; width: 100%; height: 400px; } .iframe-t{ border: 1px solid #ddd; display: block; position: relative; width: 100%; height: 200px; } .iframe-s{ border: 1px solid #ddd; display: block; position: relative; width: 100%; height: 300px; } .iframe-m{ border: 1px solid #ddd; display: block; position: relative; width: 100%; height: 600px; } .iframe-l{ border: 1px solid #ddd; display: block; position: relative; width: 100%; height: 800px; } .iframe-g{ border: 1px solid #ddd; display: block; position: relative; width: 100%; height: 1024px; }
Height
.height{ height: 800px; } .height-t{ height: 200px; } .height-s{ height: 400px; } .height-m{ height: 1000px; } .height-l{ height: 2000px; } .height-g{ height: 3000px; }
Filter CSS3
filterCSS3
blur
filterCSS3
brightness-min
filterCSS3
brightness-max
filterCSS3
contrast-min
filterCSS3
contrast-max
filterCSS3
drop-shadow
filterCSS3
grayscale
filterCSS3
hue-rotate-100deg
filterCSS3
hue-rotate-200deg
filterCSS3
hue-rotate-300deg
filterCSS3
hue-rotate-400deg
filterCSS3
hue-rotate-500deg
filterCSS3
hue-rotate-600deg
filterCSS3
hue-rotate-700deg
filterCSS3
hue-rotate-800deg
filterCSS3
hue-rotate-900deg
filterCSS3
hue-rotate-1000deg
filterCSS3
invert
filterCSS3
opacity-max
filterCSS3
opacity-min
filterCSS3
saturate-min
filterCSS3
saturate-max
filterCSS3
sepia
filterCSS3
<div class="row grid-eq"> <div class="column grid-eq l3 m6 s12"> <div class="section">blur</div> <img class="blur" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">brightness-min</div> <img class="brightness-min" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">brightness-max</div> <img class="brightness-max" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">contrast-min</div> <img class="contrast-min" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">contrast-max</div> <img class="contrast-max" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">drop-shadow</div> <img class="drop-shadow" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">grayscale</div> <img class="grayscale" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">hue-rotate-100deg</div> <img class="hue-rotate-100deg" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">hue-rotate-200deg</div> <img class="hue-rotate-200deg" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">hue-rotate-300deg</div> <img class="hue-rotate-300deg" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">hue-rotate-400deg</div> <img class="hue-rotate-400deg" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">hue-rotate-500deg</div> <img class="hue-rotate-500deg" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">hue-rotate-600deg</div> <img class="hue-rotate-600deg" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">hue-rotate-700deg</div> <img class="hue-rotate-700deg" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">hue-rotate-800deg</div> <img class="hue-rotate-800deg" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">hue-rotate-900deg</div> <img class="hue-rotate-900deg" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">hue-rotate-1000deg</div> <img class="hue-rotate-1000deg" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">invert</div> <img class="invert" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">opacity-max</div> <img class="opacity-max" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">opacity-min</div> <img class="opacity-min" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">saturate-min</div> <img class="saturate-min" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">saturate-max</div> <img class="saturate-max" src="img/slider3.jpg" alt="filterCSS3"> </div> <div class="column grid-eq l3 m6 s12"> <div class="section">sepia</div> <img class="sepia" src="img/slider3.jpg" alt="filterCSS3"> </div> </div>
Shadow
Box Shadow
Box Shadow
<div class="box-shadow"> Box Shadow </div> <span class="text-shadow"> Box Shadow </spn>
Overflow
.overflow-auto{ overflow: auto; } .overflow-hidden{ overflow: hidden; } .overflow-y{ overflow-y: auto; overflow-x: hidden; } .overflow-x{ overflow-x: auto; overflow-y: hidden; }
Color
bg-pink
bg-lightpink
bg-hotpink
bg-deeppink
bg-palevioletred
bg-mediumvioletred
bg-lightsalmon
salmon
bg-darksalmon
bg-lightcoral
bg-indianred
bg-crimson
bg-red
bg-firebrick
bg-darkred
bg-orange
bg-darkorange
bg-coral
bg-tomato
bg-orangered
bg-cornsilk
bg-blanchedalmond
bg-bisque
bg-navajowhite
bg-wheat
bg-burlywood
bg-tan
bg-rosybrown
bg-sandybrown
bg-goldenrod
bg-darkgoldenrod
bg-peru
bg-chocolate
bg-olive
bg-saddlebrown
bg-sienna
bg-brown
bg-maroon
bg-lavender
bg-thistle
bg-violet
bg-plum
bg-orchid
bg-violet
bg-magenta
bg-mediumorchid
bg-darkorchid
bg-darkviolet
bg-blueviolet
bg-darkmagenta
bg-purple
bg-mediumpurple
bg-mediumslateblue
bg-slateblue
bg-darkslateblue
bg-rebeccapurple
bg-indigo
bg-cadetblue
bg-steelblue
bg-lightsteelblue
bg-lightblue
bg-powderblue
bg-lightskyblue
bg-skyblue
bg-cornflowerblue
bg-deepskyblue
bg-dodgerblue
bg-royalblue
bg-blue
bg-mediumblue
bg-darkblue
bg-navy
bg-midnightblue
bg-greenyellow
bg-chartreuse
bg-lawngreen
bg-lime
bg-limegreen
bg-palegreen
bg-lightgreen
bg-mediumspringgreen
bg-springgreen
bg-mediumseagreen
bg-seagreen
bg-forestgreen
bg-green
bg-darkgreen
bg-yellowgreen
bg-olivedrab
bg-darkolivegreen
bg-mediumaquamarine
bg-darkseagreen
bg-lightseagreen
bg-darkcyan
bg-teal
bg-aqua
bg-cyan
bg-lightcyan
bg-paleturquoise
bg-aquamarine
bg-turquoise
bg-mediumturquoise
bg-darkturquoise
bg-gold
bg-yellow
bg-lightyellow
bg-lemonchiffon
bg-lightgoldenrodyellow
bg-papayawhip
bg-moccasin
bg-peachpuff
bg-palegoldenrod
bg-khaki
bg-darkkhaki
bg-white
bg-snow
bg-honeydew
bg-mintcream
bg-azure
bg-aliceblue
bg-ghostwhite
bg-whitesmoke
bg-seashell
bg-beige
bg-oldlace
bg-floralwhite
bg-ivory
bg-antiquewhite
bg-linen
bg-lavenderblush
bg-mistyrose
bg-gainsboro
bg-lightgray
bg-silver
bg-darkgray
bg-dimgray
bg-gray
bg-lightslategray
bg-slategray
bg-darkslategray
bg-black
Aside
Section
.section{ margin:16px 0px } .section-t{ margin:4px 0px; } .section-s{ margin:8px 0px } .section-m{ margin:24px 0px } .section-l{ margin:32px 0px } .section-g{ margin:64px 0px } .secpad{ padding:16px 0px } .secpad-t{ padding:4px 0px; } .secpad-s{ padding:8px 0px } .secpad-m{ padding:24px 0px } .secpad-l{ padding:32px 0px } .secpad-g{ padding:64px 0px } .inside{ margin:0 16px; } .inside-t{ margin:0 4px; } .inside-s{ margin:0 8px; } .inside-m{ margin:0 24px; } .inside-l{ margin:0 32px; } .inside-g{ margin:0 64px; } .deep{ margin:16px; } .deep-t{ margin:4px; } .deep-s{ margin:8px; } .deep-m{ margin:24px; } .deep-l{ margin:32px; } .deep-g{ margin:64px; } .interior{ padding:0 16px; } .interior-t{ padding:0 4px; } .interior-s{ padding:0 8px; } .interior-m{ padding:0 24px; } .interior-l{ padding:0 32px; } .interior-g{ padding:0 64px; } .equal{ padding:16px; } .equal-t{ padding:4px; } .equal-s{ padding:8px; } .equal-m{ padding:24px; } .equal-l{ padding:32px; } .equal-g{ padding:64px; } .container { margin:0 24px; } .container-equal{ margin:24px; } .container-full { margin:0; } @media only screen and (max-width: 600px) { .container{ margin: 0; } } @media only screen and (max-width: 600px) { .container-equal{ margin: 0; } }
Content
Position Middle

6th April 2017

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit deserunt omnis culpa sapiente id dolore sed suscipit

Position Middle

6th April 2017

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit deserunt omnis culpa sapiente id dolore sed suscipit

Position Middle

6th April 2017

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit deserunt omnis culpa sapiente id dolore sed suscipit

<div class="section"> <div class="layout-m"> <div class="content-grid"> <!-- content group --> <div class="content-group"> <div class="row grid-eq"> <div class="column grid-eq l4 m4 s12"> <div class="content-items"> <div class="content-grid-bg content-grid-bg1"> <div class="content-grid-bg-light"> <div class="position-middle"> Position Middle </div> </div> </div> <div class="center-align"> <div class="secpad"> <div class="secpad-s"> <p class="size-13">6<sup>th</sup> April 2017</p> <p class="size-18 secpad-t">Lorem ipsum dolor sit amet</p> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit deserunt omnis culpa sapiente id dolore sed suscipit</p> </div> <div class="secpad"> <button> Read More </button> </div> </div> </div> </div> <div class="column grid-eq l4 m4 s12"> <div class="content-items"> <div class="content-grid-bg content-grid-bg2"> <div class="content-grid-bg-light"> <div class="position-middle"> Position Middle </div> </div> </div> <div class="center-align"> <div class="secpad"> <div class="secpad-s"> <p class="size-13">6<sup>th</sup> April 2017</p> <p class="size-18 secpad-t">Lorem ipsum dolor sit amet</p> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit deserunt omnis culpa sapiente id dolore sed suscipit</p> </div> <div class="secpad"> <button> Read More </button> </div> </div> </div> </div> <div class="column grid-eq l4 m4 s12"> <div class="content-items"> <div class="content-grid-bg content-grid-bg3"> <div class="content-grid-bg-light"> <div class="position-middle"> Position Middle </div> </div> </div> <div class="center-align"> <div class="secpad"> <div class="secpad-s"> <p class="size-13">6<sup>th</sup> April 2017</p> <p class="size-18 secpad-t">Lorem ipsum dolor sit amet</p> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit deserunt omnis culpa sapiente id dolore sed suscipit</p> </div> <div class="secpad"> <button> Read More </button> </div> </div> </div> </div> </div> </div> <!-- end content group --> </div> <!-- end content grid --> </div> </div>
JS
$(window).scroll(function(){ var scroll = $(this).scrollTop(); // content grid parallax landing page if(scroll > $(".content-group").offset().top - 400){ $(".content-group .content-items").each(function(i){ setTimeout(function(){ $(".content-group .content-items").eq(i).addClass("content-items-active"); }, 250 * i); }); }else{ $(".content-group .content-items").each(function(i){ setTimeout(function(){ $(".content-group .content-items").eq(i).removeClass("content-items-active"); }, 250 * i); }); } });
Parallax
Parallax
<div class="parallax parallax-bg"> <div class="parallax-light"> <div class="position-middle"> Parallax </div> </div> </div>
Device
Landing Element
Element Top
Element Right
Element Left
Element Bottom
<div class="relative height-t border-solid overflow-hidden"> <!-- landing element top --> <div id="landingElementTop"> <div class="element-top"> <div class="deep center-align"> Element Top </div> </div> </div> <!-- end landing element top --> <!-- landing element right --> <div id="landingElementRight"> <div class="element-right"> <div class="deep left-align"> Element Right </div> </div> </div> <!-- end landing element right --> <!-- landing element left --> <div id="landingElementLeft"> <div class="element-left"> <div class="deep right-align"> Element Left </div> </div> </div> <!-- end landing element left --> <!-- landing element bottom --> <div id="landingElementBottom"> <div class="element-bottom"> <div class="deep center-align"> Element Bottom </div> </div> </div> <!-- end landing element bottom --> </div>
Load Animation
To Top
<html id="toTop"> <div id="toTopActive"></div> <div class="totop"> <a href="#toTop" id="toTopToggle"> <i class="fa fa-angle-up"></i> </a> </div>
Load Page
Ticket
January
Sold Out
April
Sold Out
Agust
9
<div class="ticket"> <!-- ticket items --> <div class="ticket-items"> <div class="ticket-list"> <div class="ticket-calendar"> January </div> <div class="ticket-status"> <div class="ticket-badge-sold"> Sold Out </div> </div> </div> <div class="ticket-list"> <div class="ticket-calendar"> April </div> <div class="ticket-status"> <div class="ticket-badge-sold"> Sold Out </div> </div> </div> <div class="ticket-list"> <div class="ticket-calendar"> Agust </div> <div class="ticket-status"> <div class="ticket-badge"> 9 </div> </div> </div> <!-- end ticket items --> </div> </div>

Ticket Card

Jakarta

Fri 3 Nov 2017

Praesent tincidunt sed tellus ut rutrum sed vitae justo.

Tokyo

Sun 22 Apr 2017

Praesent tincidunt sed tellus ut rutrum sed vitae justo.

London

Thu 21 Agust 2017

Praesent tincidunt sed tellus ut rutrum sed vitae justo.

<!-- ticket card --> <div class="ticket-card"> <div class="row grid-eq"> <div class="column grid-eq l4 m12 s12"> <div class="ticket-card-bg ticket-bg1"> <div class="ticket-card-light"> </div> </div> <div class="ticket-card-desc"> <p class="subheader section-s">Jakarta</p> <p class="gray">Fri 3 Nov 2017</p> <p class="section"> Praesent tincidunt sed tellus ut rutrum sed vitae justo. </p> <button> Buy Ticket </button> </div> </div> <div class="column grid-eq l4 m12 s12"> <div class="ticket-card-bg ticket-bg2"> <div class="ticket-card-light"> </div> </div> <div class="ticket-card-desc"> <p class="subheader section-s">Tokyo</p> <p class="gray">Sun 22 Apr 2017</p> <p class="section"> Praesent tincidunt sed tellus ut rutrum sed vitae justo. </p> <button> Buy Ticket </button> </div> </div> <div class="column grid-eq l4 m12 s12"> <div class="ticket-card-bg ticket-bg3"> <div class="ticket-card-light"> </div> </div> <div class="ticket-card-desc"> <p class="subheader section-s">London</p> <p class="gray">Thu 21 Agust 2017</p> <p class="section"> Praesent tincidunt sed tellus ut rutrum sed vitae justo. </p> <button> Buy Ticket </button> </div> </div> </div> </div> <!-- end ticket card -->
Contact
  • Perbaungan, ID
  • Phone: +00 151515
  • Email: mail@mail.com
<div class="contact contact-bg"> <div class="contact-light"></div> <div class="contact-layout"> <div class="contact-group"> <div class="row grid-eq"> <div class="column grid-eq l6 m6 s12"> <ul class="contact-list"> <li>Perbaungan, ID</li> <li>Phone: +00 151515</li> <li>Email: mail@mail.com</li> </ul> </div> <div class="column grid-eq l6 m6 s12"> <form action="#" class="contact-form"> <div class="row grid-eq"> <div class="column grid-eq l6 m6 s12"> <input type="text" placeholder="Name"> </div> <div class="column grid-eq l6 m6 s12"> <input type="text" placeholder="Email"> </div> <div class="column grid-eq s12"> <input type="text" placeholder="Message"> </div> </div> <div class="row grid-eq"> <div class="column grid-eq"> <div class="right-align"> <button>Send</button> </div> </div> </div> </form> </div> </div> </div> </div> </div>
Coming Soon
<div class="coming-soon"> <video class="coming-soon-setting" autoplay="" loop="" poster="video/poster.jpg"> <source src="video/video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <div class="coming-soon-light"></div> <div class="coming-soon-header"> Coming Soon </div> <div class="coming-soon-logo"> <a href="#"> <img src="img/icon-core.png" alt="core"> </a> </div> <div class="coming-soon-icon"> <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> <li><a href="#"><i class="fa fa-youtube"></i></a></li> </ul> </div> </div>
Badge
9
<div class="deep"> <div class="badge"> 9 </div> </div>
Populer Post
placeholder

Lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, veniam laborum repellat sequi

placeholder

Lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, veniam laborum repellat sequi

placeholder

Lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, veniam laborum repellat sequi

<!-- post --> <div class="post"> <div class="post-title"> Populer Post </div> <div class="post-group"> <div class="post-image"> <a href="#"> <img src="img/placeholder.png" alt="placeholder"> </a> </div> <div class="post-desc"> <p class="post-desc-title"> <a href="#">Lorem</a> </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, veniam laborum repellat sequi</p> </div> </div> <div class="post-group"> <div class="post-image"> <a href="#"> <img src="img/placeholder.png" alt="placeholder"> </a> </div> <div class="post-desc"> <p class="post-desc-title"> <a href="#">Lorem</a> </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, veniam laborum repellat sequi</p> </div> </div> <div class="post-group"> <div class="post-image"> <a href="#"> <img src="img/placeholder.png" alt="placeholder"> </a> </div> <div class="post-desc"> <p class="post-desc-title"> <a href="#">Lorem</a> </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, veniam laborum repellat sequi</p> </div> </div> </div> <!-- end post -->
Tag
Tag
  • Navoon
  • Pop Green
  • Magnum
  • Neo
  • Browser
  • jQuery
  • Gulp.js
  • Core.css
  • Core.js
  • Font Awesome
  • Modernizr
<div class="tag"> <div class="tag-title"> Tag </div> <ul class="tag-items"> <li><span class="tag-items-active">Navoon</span></li> <li><span>Pop Green</span></li> <li><span>Magnum</span></li> <li><span>Neo</span></li> <li><span>Browser</span></li> <li><span>jQuery</span></li> <li><span>Gulp.js</span></li> <li><span>Core.css</span></li> <li><span>Core.js</span></li> <li><span>Font Awesome</span></li> <li><span>Modernizr</span></li> </ul> </div>
Name Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere modi eius, tempora in Andika Chamberlin

Andika Chamberlin

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quae dolorum error, earum quas delectus neque dolor mollitia quos dignissimos sint animi voluptas natus blanditiis excepturi repellendus sapiente totam consequatur!

<!-- name card --> <div class="name-card"> <div class="name-card-header name-card-bg"> <div class="name-card-light"> <div class="position-middle"> <p class="quote"> <i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere modi eius, tempora in <span class="right-align section quote">Andika Chamberlin</span> </p> </div> </div> </div> <div class="name-card-desc"> <p class="section-s size-18">Andika Chamberlin</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quae dolorum error, earum quas delectus neque dolor mollitia quos dignissimos sint animi voluptas natus blanditiis excepturi repellendus sapiente totam consequatur! </p> </div> </div> <!-- end name card -->
Subscribe
<div class="subscribe"> <div class="subscribe-title"> Subscribe </div> <form action="#" class="subscribe-form"> <label> Enter your e-mail below and get notified on the latest blog posts. </label> <input type="text" placeholder="enter e-mail"> <button>Subscribe</button> </form> </div>
Skills
Skills
  • HTML
  • 80%
  • CSS
  • 90%
  • Javascript
  • 50%
  • SQL
  • 40%
  • PHP
  • 40%
<div class="skills"> <div class="skills-title">Skills</div> <ul class="skills-list"> <li>HTML</li> <li class="skills-bar"> <span class="skills-80">80%</span> </li> <li>CSS</li> <li class="skills-bar"> <span class="skills-90">90%</span> </li> <li>Javascript</li> <li class="skills-bar"> <span class="skills-50">50%</span> </li> <li>SQL</li> <li class="skills-bar"> <span class="skills-40">40%</span> </li> <li>PHP</li> <li class="skills-bar"> <span class="skills-40">40%</span> </li> </ul> </div>
Filter jQuery
  • All
  • Navoon
  • Popgreen
  • Magnum
  • Neo
  • Impact
Navoon
Popgreen
Magnum
Neo
Impact
Navoon
Popgreen
Magnum
Neo
Impact
<div class="filter"> <ul class="filter-list"> <li class="filter-btn filter-active" data-filter="all">All</li> <li class="filter-btn" data-filter="fil1">Navoon</li> <li class="filter-btn" data-filter="fil2">Popgreen</li> <li class="filter-btn" data-filter="fil3">Magnum</li> <li class="filter-btn" data-filter="fil4">Neo</li> <li class="filter-btn" data-filter="fil5">Impact</li> </ul> <div class="filter-box-container"> <div class="filter-box filter-items fil1 bg-teal">Navoon</div> <div class="filter-box filter-items fil2 bg-seagreen">Popgreen</div> <div class="filter-box filter-items fil3 bg-gold">Magnum</div> <div class="filter-box filter-items fil4 bg-darkslategray">Neo</div> <div class="filter-box filter-items fil5 bg-crimson">Impact</div> <div class="filter-box filter-items fil1 bg-teal">Navoon</div> <div class="filter-box filter-items fil2 bg-seagreen">Popgreen</div> <div class="filter-box filter-items fil3 bg-gold">Magnum</div> <div class="filter-box filter-items fil4 bg-darkslategray">Neo</div> <div class="filter-box filter-items fil5 bg-crimson">Impact</div> </div> </div>
Skills Card
  • Basic
  • Back End
  • Front End
  • Mail Support
  • $10 Per Mount
  • Pro
  • Back End
  • Front End
  • Mail Support
  • $25 Per Mount
  • Premium
  • Back End
  • Front End
  • Mail Support
  • $50 Per Mount
<div class="skills-card"> <div class="row grid-eq"> <div class="column grid-eq l4 m4 s12"> <ul class="skills-card-items"> <li class="skills-card-title">Basic</li> <li>Back End</li> <li>Front End</li> <li>Mail Support</li> <li class="skills-card-price"> <span>$10</span> <span>Per Mount</span> </li> <li class="skills-card-btn"> <button>Sign Up</button> </li> </ul> </div> <div class="column grid-eq l4 m4 s12"> <ul class="skills-card-items"> <li class="skills-card-title">Pro</li> <li>Back End</li> <li>Front End</li> <li>Mail Support</li> <li class="skills-card-price"> <span>$25</span> <span>Per Mount</span> </li> <li class="skills-card-btn"> <button>Sign Up</button> </li> </ul> </div> <div class="column grid-eq l4 m4 s12"> <ul class="skills-card-items"> <li class="skills-card-title">Premium</li> <li>Back End</li> <li>Front End</li> <li>Mail Support</li> <li class="skills-card-price"> <span>$50</span> <span>Per Mount</span> </li> <li class="skills-card-btn"> <button>Sign Up</button> </li> </ul> </div> </div> </div>
Alert
Success

info

warning

danger
<div class="alert-success"> Success </div> <br> <div class="alert-info"> info </div> <br> <div class="alert-warning"> warning </div> <br> <div class="alert-danger"> danger </div>
Tooltip
Top Tooltip text Bottom Tooltip text Left Tooltip text Right Tooltip text <span class="tooltip">Top <span class="tooltip-top">Tooltip text</span> </span> <span class="tooltip">Bottom <span class="tooltip-bottom">Tooltip text</span> </span> <span class="tooltip">Left <span class="tooltip-left">Tooltip text</span> </span> <span class="tooltip">Right <span class="tooltip-right">Tooltip text</span> </span>
Button
Button <span class="btn">Button</span>
Testimonial
testimonial
Andika Chamberlin Front End Developer Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="testimonial"> <div class="testimonial-image"> <a href="#"> <img src="img/placeholder.png" alt="testimonial"> </a> </div> <div class="testimonial-desc"> <span class="testimonial-title"> <a href="#">Andika Chamberlin</a> </span> <span class="testimonial-work"> Front End Developer </span> <span class="testimonial-comment"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span> </div> </div>
Accordion
<div class="acc"> <ul class="acc-list"> <li class="acc-toggle"> <a>acc 1<i class="fa fa-angle-down acc-arrow"></i></a> <ul class="acc-dropdown acc-sub"> <li><a href="#!">link</a></li> <li class="acc-toggle"> <a>acc sub 2 <i class="fa fa-angle-down acc-arrow"></i> </a> <ul class="acc-dropdown acc-sub"> <li><a href="#!">link</a></li> <li class="acc-toggle"> <a>acc sub 2.2 <i class="fa fa-angle-down acc-arrow"></i> </a> <ul class="acc-dropdown acc-sub"> <li><a href="#!">link</a></li> <li class="acc-toggle"> <a>acc sub 2.2.2 <i class="fa fa-angle-down acc-arrow"></i> </a> <ul class="acc-dropdown acc-sub"> <li><a href="#!">link</a></li> <li><a href="#!">link</a></li> <li><a href="#!">link</a></li> </ul> </li> <li><a href="#!">link</a></li> <li><a href="#!">link</a></li> </ul> </li> <li><a href="#!">link</a></li> </ul> </li> <li><a href="#!">link</a></li> </ul> </li> <li class="acc-toggle"> <a>acc 2<i class="fa fa-angle-down acc-arrow"></i></a> <ul class="acc-dropdown acc-sub"> <li><a href="#!">link</a></li> <li><a href="#!">link</a></li> <li><a href="#!">link</a></li> </ul> </li> <li class="acc-toggle"> <a>acc 3<i class="fa fa-angle-down acc-arrow"></i></a> <ul class="acc-dropdown acc-sub"> <li><a href="#!">link</a></li> <li><a href="#!">link</a></li> <li><a href="#!">link</a></li> </ul> </li> </ul> </div>
Filter Tab
  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
  • Tab 5
Tab Content 1
Tab Content 2
Tab Content 3
Tab Content 4
Tab Content 5
<div class="tab"> <ul class="tab-list"> <li class="tab-btn tab-active" data-tab="tab1">Tab 1</li> <li class="tab-btn" data-tab="tab2">Tab 2</li> <li class="tab-btn" data-tab="tab3">Tab 3</li> <li class="tab-btn" data-tab="tab4">Tab 4</li> <li class="tab-btn" data-tab="tab5">Tab 5</li> </ul> <div class="tab-box-container"> <div class="tab-box tab-items tab1"> Tab Content 1 </div> <div class="tab-box tab-items tab2"> Tab Content 2 </div> <div class="tab-box tab-items tab3"> Tab Content 3 </div> <div class="tab-box tab-items tab4"> Tab Content 4 </div> <div class="tab-box tab-items tab5"> Tab Content 5 </div> </div> </div>

Filter Tab Vertical

  • tabv 1
  • tabv 2
  • tabv 3
  • tabv 4
  • tabv 5
tabv Content 1
tabv Content 2
tabv Content 3
tabv Content 4
tabv Content 5
<div class="tabv"> <ul class="tabv-list"> <li class="tabv-btn tabv-active" data-tabv="tabv1">tabv 1</li> <li class="tabv-btn" data-tabv="tabv2">tabv 2</li> <li class="tabv-btn" data-tabv="tabv3">tabv 3</li> <li class="tabv-btn" data-tabv="tabv4">tabv 4</li> <li class="tabv-btn" data-tabv="tabv5">tabv 5</li> </ul> <div class="tabv-box-container"> <div class="tabv-box tabv-items tabv1"> tabv Content 1 </div> <div class="tabv-box tabv-items tabv2"> tabv Content 2 </div> <div class="tabv-box tabv-items tabv3"> tabv Content 3 </div> <div class="tabv-box tabv-items tabv4"> tabv Content 4 </div> <div class="tabv-box tabv-items tabv5"> tabv Content 5 </div> </div> </div>