Biru Css framework
How do I make an biru css framework?
Preview for our first framework @nakome & @aryandhaniFull features here and sorry for my English.http://codepen.io/nakome/full/nHudJ. What is a biru css framework? How do you make a biru css framework? This script and codes were developed by Moncho Varela on 07 July 2022, Thursday.
Biru Css framework Previews
Biru Css framework - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Biru Css framework</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* = For this demo
________________________*/
@import url(http://fonts.googleapis.com/css?family=Lato:300,400);
html,body,.btn,.subhead-title{font-family: 'Lato', sans-serif;font-weight: 300;}
h1,h2,h3,h4,.header-title{font-family: 'Lato', sans-serif;font-weight: 400;}
.btn {margin: 0.5em;}
pre{font-family: monospace,serif;font-size: 0.8em;line-height: 1.2em;padding: 1em;}
.header-inner {min-height: 5em;padding-top: 1em;}
/*
*
* Biru 1.0v
*
* Copyright 2012 @nakome & @aryandhani
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Included in this file:
* -> Base.
* -> Grid.
* -> Utilities.
* -> Theme.
* -> Plugins.
*/
/*==============================================
* BASE Inspired by yuilibrary.com
================================================*/
/* = Menu
---------------------------------*/
.menu ul{ position:absolute; visibility:hidden;
}
.menu.menu-open{ visibility:visible; z-index:2; width:100%;
}
.menu ul{ left:-10000px; list-style:none; margin:0; padding:0; top:-10000px; z-index:1;
}
.menu>ul{ position:relative;
}
.menu-open>ul{ left:0; top:0; visibility:visible;
}
.menu li{ position:relative;
}
.menu a,.menu .menu-heading{ display:block; color:inherit; line-height:1.5em; padding:5px 20px; text-decoration:none; white-space:nowrap;
}
.menu.menu-horizontal>.menu-heading{ display:inline-block; margin:0; zoom:1; *display:inline; vertical-align:middle;
}
.menu.menu-horizontal>ul{ display:inline-block; zoom:1; *display:inline; vertical-align:middle;
}
.menu li a{ padding:5px 20px;
}
.menu-can-have-children>.menu-label:after{ content:'\25B8'; float:right; font-family:'Lucida Grande','Lucida Sans Unicode','DejaVu Sans',sans-serif; margin-right:-20px; margin-top:-1px;
}
.menu-can-have-children>.menu-label{ padding-right:30px;
}
.menu-separator{ background-color:#dfdfdf; display:block; height:1px; font-size:0; margin:7px 2px; overflow:hidden;
}
.menu-hidden{ display:none;
}
.menu-fixed{ position:fixed; top:0; left:0; width:100%;
}
.menu-horizontal li{ display:inline-block; zoom:1; *display:inline; vertical-align:middle;
}
.menu-horizontal li li{ display:block;
}
.menu-horizontal>.menu-children>.menu-can-have-children>.menu-label:after{ content:"\25BE";
}
.menu-horizontal>.menu-children>.menu-can-have-children>.menu-label{ padding-right:30px;
}
.menu.menu-open,.menu.menu-horizontal li .menu-children{ border: 1px solid #ECE9E9;
}
.menu.menu-horizontal, .menu.menu-horizontal .menu-heading{ border:0;
}
.menu a{ border:1px solid transparent; border-left:none; border-right:0;
}
.menu li a:hover{ background: #3498DB; color: #ECF0F1;
}
.menu li.menu-disabled a:hover{ background:#fff; color:#bfbfbf;
}
.menu .menu-disabled>a{ background-image:none; border-color:transparent; cursor:default;
}
.menu .menu-disabled>a,.menu .menu-can-have-children .menu-disabled>a:after{ color:#bfbfbf;
}
.menu .menu-heading{ text-transform:uppercase; font-size:90%; margin-top:.5em; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color: #ECF0F1;
}
.menu .menu-selected a{ font-weight:bold; color:#000;
}
.menu.menu-open .menu-fixed{ -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; border:0; border-bottom:1px solid #b7b7b7;
}
@media(max-width:480px){ .menu-horizontal{ width:100%; } .menu-children li{ display:block; border-bottom:1px solid block; }
}
.paginator{ list-style:none; margin:0; padding:0;
}
.paginator li{ display:inline-block; *display:inline; *zoom:1; margin:0 -0.35em 0 0;
}
.paginator .button{ -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; padding:.8em 1.4em; vertical-align:top; height:1.1em;
}
.paginator .button:focus{ outline-style:none;
}
.paginator .prev,.paginator .next{ color:#c0c1c3; text-shadow:0 -1px 0 rgba(0,0,0,0.45);
}
/* = Buttons
---------------------------------*/
.btn{ display:inline-block; *display:inline; zoom:1; line-height:normal; white-space:nowrap; vertical-align:baseline; text-align:center; cursor:pointer; -webkit-user-drag:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.btn::-moz-focus-inner{ padding:0; border:0;
}
.btn{ font-size:100%; *font-size:90%; *overflow:visible; padding:.5em 1.5em; *color:#444; border:0 rgba(0,0,0,0); text-decoration:none; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; -webkit-font-smoothing:antialiased; -webkit-transition:.1s linear -webkit-box-shadow; -moz-transition: .1s linear -moz-box-shadow; -o-transition: .1s linear -o-box-shadow; transition: .1s linear box-shadow;
}
.btn-hover,.btn:hover,.btn:focus{ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0); background-image:-webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(40%,rgba(0,0,0,.05)),to(rgba(0,0,0,.1))); background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1)); background-image:-moz-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1)); background-image:-ms-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1)); background-image:-o-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1)); background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
}
.btn:focus{outline:0;}
.btn-active,.btn:active{ -webkit-box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset; -moz-box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset; box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;
}
.btn[disabled],.btn-disabled,.btn-disabled:hover,
.btn-disabled:focus,.btn-disabled:active{ border:0; background-image:none; filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); filter:alpha(opacity=40); -khtml-opacity:.4; -moz-opacity:.4; opacity:.4; cursor:not-allowed; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none;
}
.btn-hidden{display:none;}
.btn-block{display: block;width: 100%;}
.btn::-moz-focus-inner{ padding:0; border:0;
}
/* = Form
---------------------------------*/
.form{margin:0;border:1px solid rgba(0,0,0,0.0)}
.form fieldset{ border:1px solid silver; margin:0 2px; padding:.35em .625em .75em;
}
.form legend{ border:0; padding:0; white-space:normal; *margin-left:-7px;
}
.form button,.form input,.form select,.form textarea{ font-size:100%; margin:0; vertical-align:baseline; *vertical-align:middle;
}
.form button,.form input{line-height:normal;}
.form button,.form input[type=button],.form input[type=reset],.form input[type=submit]{ -webkit-appearance:button; cursor:pointer; *overflow:visible;
}
.form button[disabled],.form input[disabled]{ cursor:default;
}
.form input[type=checkbox],.form input[type=radio]{ box-sizing:border-box; padding:0; *height:13px; *width:13px;
}
.form input[type=search]{ -webkit-appearance:textfield; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box;
}
.form input[type=search]::-webkit-search-cancel-button,.form input[type=search]::-webkit-search-decoration{ -webkit-appearance:none;
}
.form button::-moz-focus-inner,.form input::-moz-focus-inner{ border:0; padding:0;}
.form textarea{ overflow:auto; vertical-align:top;
}
.form input[type=text],.form input[type=password],.form input[type=email],
.form input[type=url],.form input[type=date],.form input[type=month],
.form input[type=time],.form input[type=datetime],.form input[type=datetime-local],
.form input[type=week],.form input[type=number],.form input[type=search],
.form input[type=tel],.form input[type=color],.form select,.form textarea{ padding: 0.9em .6em; display:inline-block; border: 1px solid rgba(0,0,0,0.0); font-size:.8em; -webkit-transition:.3s linear border; -moz-transition:.3s linear border; -o-transition:.3s linear border; transition:.3s linear border; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-font-smoothing:antialiased;
}
.form input[type=text]:focus,.form input[type=password]:focus,
.form input[type=email]:focus,.form input[type=url]:focus,
.form input[type=date]:focus,.form input[type=month]:focus,
.form input[type=time]:focus,.form input[type=datetime]:focus,
.form input[type=datetime-local]:focus,.form input[type=week]:focus,
.form input[type=number]:focus,.form input[type=search]:focus,
.form input[type=tel]:focus,.form input[type=color]:focus,
.form select:focus,.form textarea:focus{ outline:0; outline:thin dotted \9; border: 1px solid #129FEA;
}
.form input[type=file]:focus,
.form input[type=radio]:focus,
.form input[type=checkbox]:focus{ outline:none;
}
.form .checkbox,.form .radio{ margin:.5em 0; display:block;
}
.form input[type=text][disabled],.form input[type=password][disabled],
.form input[type=email][disabled],.form input[type=url][disabled],
.form input[type=date][disabled],.form input[type=month][disabled],
.form input[type=time][disabled],.form input[type=datetime][disabled],
.form input[type=datetime-local][disabled],.form input[type=week][disabled],
.form input[type=number][disabled],.form input[type=search][disabled],
.form input[type=tel][disabled],.form input[type=color][disabled],
.form select[disabled],.form textarea[disabled]{ cursor:not-allowed;
}
.form input[readonly],.form select[readonly],
.form textarea[readonly],.form input[readonly]:focus,
.form select[readonly]:focus,.form textarea[readonly]:focus{}
.form input:focus:invalid,.form textarea:focus:invalid,.form select:focus:invalid{ color:#b94a48; border:1px solid #ee5f5b;
}
.form input:focus:invalid:focus,.form textarea:focus:invalid:focus,.form select:focus:invalid:focus{ border-color:#e9322d;
}
.form input[type=file]:focus:invalid:focus,.form input[type=radio]:focus:invalid:focus,.form input[type=checkbox]:focus:invalid:focus{ outline-color:#e9322d;
}
.form select{}
.form select[multiple]{ height:auto;
}
.form label{ margin:.5em 0 .2em; font-size:90%;
}
.form fieldset{ margin:0; padding:.35em 0 .75em; border:0;
}
.form legend{ display:block; width:100%; padding:.3em 0; margin-bottom:.3em; font-size:125%;
}
.form-stacked input[type=text],.form-stacked input[type=password],
.form-stacked input[type=email],.form-stacked input[type=url],
.form-stacked input[type=date],.form-stacked input[type=month],
.form-stacked input[type=time],.form-stacked input[type=datetime],
.form-stacked input[type=datetime-local],.form-stacked input[type=week],
.form-stacked input[type=number],.form-stacked input[type=search],
.form-stacked input[type=tel],.form-stacked input[type=color],
.form-stacked select,.form-stacked label,.form-stacked textarea{ display:block; margin:.25em 0;
}
.form-aligned input,.form-aligned textarea,.form-aligned select,.form-aligned .help-inline,.form-message-inline{ display:inline-block; *display:inline; *zoom:1; vertical-align:middle;
}
.form-aligned .control-group{ margin-bottom:.5em;
}
.form-aligned .control-group label{ text-align:right; display:inline-block; vertical-align:middle; width:10em; margin:0 1em 0 0;
}
.form-aligned .controls{ margin:1.5em 0 0 10em;
}
.form input.input-rounded,.form .input-rounded{ -webkit-border-radius:2em; -moz-border-radius:2em; border-radius:2em; padding:.5em 1em;
}
.form .group fieldset{ margin-bottom:10px;
}
.form .group input{ display:block; padding:10px; margin:0; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; position:relative; top:-1px;
}
.form .group input:focus{ z-index:2;
}
.form .group input:first-child{ top:1px; -webkit-border-radius:4px 4px 0 0; -moz-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0;
}
.form .group input:last-child{ top:-2px; -webkit-border-radius:0 0 4px 4px; -moz-border-radius:0 0 4px 4px; border-radius:0 0 4px 4px;
}
.form .group button{ margin:.35em 0;
}
.form .input-1{ width:100%;
}
.form .input-2-3{ width:66%;
}
.form .input-1-2{ width:50%;
}
.form .input-1-3{ width:33%;
}
.form .input-1-4{ width:25%;
}
.form .help-inline,.form-message-inline{ display:inline-block; padding-left:.3em; vertical-align:middle; font-size:90%;
}
.form-message{ display:block; font-size:90%;
}
/* = Tables
---------------------------------*/
.table{ border-collapse:collapse; border-spacing:0; empty-cells:show; border: 1px solid #E7E7E7;
}
.table caption{ color:#000; font:italic 85%/1 arial,sans-serif; padding:1em 0; text-align:center;
}
.table td,.table th{ border-left:1px solid #cbcbcb; border-width:0 0 0 1px; font-size:inherit; margin:0; overflow:visible; padding:6px 12px;
}
.table td:first-child,.table th:first-child{border-left-width:0;}
.table thead{ text-align:left; vertical-align:bottom;
}
.table td{background-color:transparent;}
.table-odd td{background-color:#ECF0F1;}
.table-striped tr:nth-child(2n-1) td{background-color:#ECF0F1;}
.table-bordered td{border-bottom:1px solid #ECF0F1;}
.table-bordered tbody>tr:last-child td,.table-horizontal tbody>tr:last-child td{border-bottom-width:0;}
.table-horizontal td,.table-horizontal th{border-width:0 0 1px;border-bottom:1px solid #ECF0F1;}
.table-horizontal tbody>tr:last-child td{border-bottom-width:0;}
/* = Grids
---------------------------------*/
@media only screen and (max-width :480px){ .form button[type=submit]{ margin:.7em 0 0; } .form input[type=text],.form input[type=password], .form input[type=email],.form input[type=url], .form input[type=date],.form input[type=month], .form input[type=time],.form input[type=datetime], .form input[type=datetime-local],.form input[type=week], .form input[type=number],.form input[type=search], .form input[type=tel],.form input[type=color],.form label{ margin-bottom:.3em; display:block; } .group input[type=text],.group input[type=password], .group input[type=email],.group input[type=url], .group input[type=date],.group input[type=month], .group input[type=time],.group input[type=datetime], .group input[type=datetime-local],.group input[type=week], .group input[type=number],.group input[type=search], .group input[type=tel],.group input[type=color]{ margin-bottom:0; } .form-aligned .control-group label{ margin-bottom:.3em; text-align:left; display:block; width:100%; } .form-aligned .controls{ margin:1.5em 0 0; } .form .help-inline,.form-message-inline,.form-message{ display:block; font-size:80%; padding:.2em 0 .8em; }
}
/*==================================
* GRIDS
===================================*/
.row {letter-spacing: -0.31em; *letter-spacing: normal; *word-spacing: -0.43em;text-rendering: optimizespeed;}
.opera-only :-o-prefocus,.row { word-spacing: -0.43em;}
.box { display: inline-block; zoom: 1; *display: inline; letter-spacing: normal;word-spacing: normal; vertical-align: top; text-rendering: auto;}
.box-1,.box-1-2,.box-1-3,.box-2-3,.box-1-4,
.box-3-4,.box-1-5,.box-2-5,.box-3-5,.box-4-5,
.box-1-6,.box-5-6,.box-1-7,.box-2-7,.box-3-7,
.box-4-7,.box-5-7,.box-6-7,.box-1-8,.box-3-8,
.box-5-8,.box-7-8,.box-1-9,.box-2-9,.box-4-9,
.box-5-9,.box-6-9,.box-7-9,.box-8-9,.box-1-10,
.box-3-10,.box-7-10,.box-9-10,.box-1-11,
.box-2-11,.box-3-11,.box-4-11,.box-5-11,
.box-6-11,.box-7-11,.box-8-11,.box-9-11,
.box-10-11,.box-1-12,.box-5-12,.box-7-12,
.box-9-12,.box-11-12 { display: inline-block; zoom: 1; *display: inline; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto;
}
.box-1 {display:block;}
.box-1-2 { width: 50%;}
.offset-1-2 { margin-left: 50%;}
.box-1-3 { width: 33.33333%;}
.offset-1-3 { margin-left: 33.33333%;}
.box-2-3 { width: 66.66667%;}
.offset-2-3 { margin-left: 66.66667%;}
.box-1-4 {width: 25%;}
.offset-1-4 {margin-left: 25%;}
.box-3-4 { width: 75%;}
.offset-3-4 { margin-left: 75%;}
.box-1-5 { width: 20%;}
.offset-1-5 { margin-left: 20%;}
.box-2-5 { width: 40%;}
.offset-2-5 { margin-left: 40%;}
.box-3-5 { width: 60%;}
.offset-3-5 { margin-left: 60%;}
.box-4-5 { width: 80%;}
.offset-4-5 { margin-left: 80%;}
.box-1-6 { width: 16.66667%;}
.offset-1-6 { margin-left: 16.66667%;}
.box-5-6 { width: 83.33333%;}
.offset-5-6 { margin-left: 83.33333%;}
.box-1-7 { width: 14.28571%;}
.offset-1-7 { margin-left: 14.28571%;}
.box-2-7 { width: 28.57143%;}
.offset-2-7 { margin-left: 28.57143%;}
.box-3-7 {width: 42.85714%;}
.offset-3-7 {margin-left: 42.85714%;}
.box-4-7 { width: 57.14286%;}
.offset-4-7 {margin-left: 57.14286%;}
.box-5-7 {width: 71.42857%;}
.offset-5-7 {margin-left: 71.42857%;}
.box-6-7 {width: 85.71429%;}
.offset-6-7 {margin-left: 85.71429%;}
.box-1-8 {width: 12.5%;}
.offset-1-8 {margin-left: 12.5%;}
.box-3-8 {width: 37.5%;}
.offset-3-8 {margin-left: 37.5%;}
.box-5-8 {width: 62.5%;}
.offset-5-8 {margin-left: 62.5%;}
.box-7-8 {width: 87.5%;}
.offset-7-8 {margin-left: 87.5%;}
.box-1-9 {width: 11.11111%;}
.offset-1-9 {margin-left: 11.11111%;}
.box-2-9 {width: 22.22222%;}
.offset-2-9 {margin-left: 22.22222%;}
.box-4-9 {width: 44.44444%;}
.offset-4-9 {margin-left: 44.44444%;}
.box-5-9 {width: 55.55556%;}
.offset-5-9 {margin-left: 55.55556%;}
.box-6-9 { width: 66.66667%;}
.offset-6-9 { margin-left: 66.66667%;}
.box-7-9 { width: 77.77778%;}
.offset-7-9 {margin-left: 77.77778%;}
.box-8-9 {width: 88.88889%;}
.offset-8-9 { margin-left: 88.88889%;}
.box-1-10 { width: 10%;}
.offset-1-10 { margin-left: 10%;}
.box-3-10 { width: 30%;}
.offset-3-10 {margin-left: 30%;}
.box-7-10 { width: 70%;}
.offset-7-10 { margin-left: 70%;}
.box-9-10 { width: 90%;}
.offset-9-10 { margin-left: 90%;}
.box-1-11 {width: 9.09091%;}
.offset-1-11 {margin-left: 9.09091%;}
.box-2-11 { width: 18.18182%;}
.offset-2-11 {margin-left: 18.18182%;}
.box-3-11 { width: 27.27273%;}
.offset-3-11 { margin-left: 27.27273%;}
.box-4-11 {width: 36.36364%;}
.offset-4-11 {margin-left: 36.36364%;}
.box-5-11 {width: 45.45455%;}
.offset-5-11 {margin-left: 45.45455%;}
.box-6-11 {width: 54.54545%;}
.offset-6-11 {margin-left: 54.54545%;}
.box-7-11 {width: 63.63636%;}
.offset-7-11 {margin-left: 63.63636%;}
.box-8-11 {width: 72.72727%;}
.offset-8-11 {margin-left: 72.72727%;}
.box-9-11 {width: 81.81818%;}
.offset-9-11 {margin-left: 81.81818%;}
.box-10-11 {width: 90.90909%;}
.offset-10-11 {margin-left: 90.90909%;}
.box-1-12 {width: 8.33333%;}
.offset-1-12 {margin-left: 8.33333%;}
.box-5-12 {width: 41.66667%;}
.offset-5-12 { margin-left: 41.66667%;}
.box-7-12 { width: 58.33333%;}
.offset-7-12 {margin-left: 58.33333%;}
.box-9-12 {width: 75%;}
.offset-9-12 {margin-left: 75%;}
.box-11-12 {width: 91.66667%;}
.offset-11-12 { margin-left: 91.66667%;}
/* Responsive */
.row-r {letter-spacing: -0.31em; *letter-spacing: normal; word-spacing: -0.43em; }
.opera-only :-o-prefocus,.row-r {word-spacing: -0.43em;}
.row-r img {max-width: 100%;}
/* Desktop */
@media (min-width:980px) { .visible-phone { display: none; } .visible-tablet { display: none; } .hidden-desktop { display: none; }
}
/* Mobile */
@media (max-width:480px) { .row-r > [class ^= "box"] {width:100%;}
}
/* Tablet */
@media (max-width:767px) { .row-r > [class ^= "box"] { width:100%;} .hidden-phone { display: none; } .visible-desktop { display: none; }
}
@media (min-width:768px) and (max-width:979px) { .hidden-tablet { display: none; } .visible-desktop { display: none; }
}
/*==================================
* UTILITIES
===================================*/
/* = Backgrounds Inspired by http://flatuicolors.com/
-------------------------------------------*/
.b-turquoise{background:#1ABC9C;}
.b-green-sea{background:#16A085;}
.b-emerland{background:#2ECC71;}
.b-nephritis{background:#27AE60;}
.b-peter-river{background: #3498DB;}
.b-belize-hole{background:#2980B9;}
.b-amethyst{background:#9B59B6;}
.b-wisteria{background:#8E44AD;}
.b-wet-asphalt{background:#34495E;}
.b-midnight-blue{background:#2C3E50;}
.b-sun-flower{background:#F1C40F;}
.b-orange{background:#F39C12;}
.b-carrot{background:#E67E22;}
.b-pumpkin{background:#D35400;}
.b-alizarin{background:#E74C3C;}
.b-pomegranate{background:#C0392B;}
.b-clouds{background:#ECF0F1;}
.b-silver{background:#BDC3C7;}
.b-concrete{background:#95A5A6;}
.b-asbestos{background:#7F8C8D;}
/* = Colors Inspired by http://flatuicolors.com/
-------------------------------------------*/
.c-turquoise{color:#1ABC9C;}
.c-green-sea{color:#16A085;}
.c-emerland{color:#2ECC71;}
.c-nephritis{color:#27AE60;}
.c-peter-river{color:#3498DB;}
.c-belize-hole{color:#2980B9;}
.c-amethyst{color:#9B59B6;}
.c-wisteria{color:#8E44AD;}
.c-wet-asphalt{color:#34495E;}
.c-midnight-blue{color:#2C3E50;}
.c-sun-flower{color:#F1C40F;}
.c-orange{color:#F39C12;}
.c-carrot{color:#E67E22;}
.c-pumpkin{color:#D35400;}
.c-alizarin{color:#E74C3C;}
.c-pomegranate{color:#C0392B;}
.c-clouds{color:#ECF0F1;}
.c-silver{color:#BDC3C7;}
.c-concrete{color:#95A5A6;}
.c-asbestos{color:#7F8C8D;}
/* = Scrollbar chrome
-------------------------------------------*/
::-webkit-scrollbar { width: 12px;}
::-webkit-scrollbar-track {background: #F3F3F3;}
::-webkit-scrollbar-thumb {background: #3498DB;}
/* = Selection
-------------------------------------------*/
::selection {background: #3CA9E7;color:#ECF0F1;}
::-moz-selection {background: #e74c3c;color:#ECF0F1;}
/* = Tools
-----------------------------------*/
.pd{padding:1em;}
.cn{text-align: center;}
.op{ filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); filter:alpha(opacity=80); -khtml-opacity:0.8; -moz-opacity:0.8; opacity:0.8;
}
.sh { -webkit-box-shadow: 0 2px 3px #999; box-shadow: 0 2px 3px #999;
}
/*==================================
* THEME
===================================*/
*{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}
body{ margin:0 auto; line-height:1.7em; color:#666;
}
img{ width:100%; display:block; margin:0; padding:0; border:none; outline:none;
}
h1,h2,h3,h4{ color:#666;}
pre{ position:relative; border: 2px solid #3498DB; white-space:pre;white-space:pre-wrap;word-wrap:break-word;
}
pre:after { content: "Code"; background: #3498DB; color: #ECF0F1; position: absolute; right: 0; top: 0; padding: 0.1em 0.2em;
}
.text-inner .btn{ position:absolute; top:39%; left:50%; background:rgba(23, 138, 192, 0.59); color:#FFF; padding:7px 35px; display:inline-block; width:48%; font-family:monospace; line-height:2.2em; vertical-align:middle; margin:0; font-size:26px; text-decoration:none;
}
/* = Header
--------------------------------*/
#header{ position:relative; margin-top:0; margin-bottom:2em; margin-left:auto; margin-right:auto; text-align:center; overflow:hidden;
}
.header-inner{ min-height:25em; padding-top:6em;
}
.head-title{ font-size:3em; color:white; text-shadow:0 2px 3px #777;
}
.subhead-title{ font-size:2em; color:white; text-shadow:0 2px 3px #777; line-height: 1.3em;
}
/* = Main
--------------------------*/
/* = Prefooter
--------------------------*/
.prefooter{
}
.prefooter h3{ color:#F0F0F0;
}
/* = Footer
--------------------------*/
.footer{ text-align:center; color:#FFF; display:block; margin:0; padding:5px;
}
/*==================================
* PLUGINS
===================================*/
/* = To top function
-----------------------------------*/
.toTop{ position:fixed; z-index:10000; top:0; left:0; width: 55px; height: 55px; text-align:center; line-height:40px; display:none; font-size:18px;
}
.toTop a{ display:block; text-decoration:none; font-size: 35px; line-height: 65px; font-weight:bold; font-family:monospace;
}
/* = Menu
-----------------------------------*/
#menu{ background:#F8F8F8; border-bottom:2px solid #2980b9; width: 100%; height: 55px; overflow: hidden;
}
#menu .menu{ list-style: none outside none; margin: 0; overflow: hidden; padding-left: 1em; padding-right: 1em;
}
#menu .brand{ margin-top: 0.5em; margin-left: 2em; display: inline-block; text-align: center; width: 100%; text-decoration: none; font-family: sans-serif,sans; font-weight: bold; font-size: 1.5em;
}
#menu .menu_item{ display:inline-block; position:relative; overflow:hidden;
}
#menu .menu_link{ text-decoration:none; color:#B3B3B3; padding:0.9em 2em; line-height: 1.4em; margin-top:0.2em; display: inline-block; /*transition*/ -webkit-transition:background 0.8s ease-in; -moz-transition:background 0.8s ease-in; -o-transition:background 0.8s ease-in; transition:background 0.8s ease-in; overflow:hidden; outline: none;
}
#menu .menu_link:hover:before{ border-bottom: 5px solid #2980B7; border-left: 5px solid transparent; border-right: 5px solid transparent; content: ""; /*transition*/ -webkit-transition:border 0.5s ease; -moz-transition:border 0.5s ease; -o-transition:border 0.5s ease; transition:border 0.5s ease; position: absolute; top: 48px; left:45%;
}
#menu .menu_link:hover{ background:#ecf0f1; /*transition*/ -webkit-transition:background 0.8s ease-out; -moz-transition:background 0.8s ease-out; -o-transition:background 0.8s ease-out; transition:background 0.8s ease-out;
}
#menu .active{ background:#ecf0f1; color:#ECF0F1 !important; /*transition*/ -webkit-transition:background 1s ease-in-out; -moz-transition:background 1s ease-in-out; -o-transition:background 1s ease-in-out; transition:background 1s ease-in-out;
}
#menu .active:after{ content:attr(data-link); position:absolute; color: #3498DB; /*animation*/ -webkit-animation:move 5s infinite ease-in-out; -moz-animation:move 5s infinite ease-in-out; -ms-animation:move 5s infinite ease-in-out; -o-animation:move 5s infinite ease-in-out; animation:move 5s infinite ease-in-out; left:30%;
}
@keyframes move{from{left:100%} to{left:-50%}}
@-webkit-keyframes move{from{left:100%} to{left:-50%}}
@-moz-keyframes move{from{left:100%} to{left:-50%}}
@-ms-keyframes move{from{left:100%} to{left:-50%}}
@-o-keyframes move{from{left:100%} to{left:-50%}}
#menu .active:before{ border-bottom: 5px solid #2980B7; border-left: 5px solid transparent; border-right: 5px solid transparent; content: ""; /*transition*/ -webkit-transition:border 0.5s ease; -moz-transition:border 0.5s ease; -o-transition:border 0.5s ease; transition:border 0.5s ease; position: absolute; top: 48px; left:45%;
}
/* = Menu mobile icon inspired by http://codepen.io/loredonut
--------------------------------*/
#toggle_nav{ width:28px; height:30px; margin:10px; cursor:pointer;
}
#toggle_nav div{ width:100%; height:5px; margin:4px auto; /*transition*/ -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; transition:all 0.3s; /*backface-visibility*/ -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden;
}
#toggle_nav.on .one{ /*transform*/ -webkit-transform:rotate(45deg) translate(5px, 5px); -moz-transform:rotate(45deg) translate(5px, 5px); -ms-transform:rotate(45deg) translate(5px, 5px); -o-transform:rotate(45deg) translate(5px, 5px); transform:rotate(45deg) translate(5px, 5px);
}
#toggle_nav.on .two{ opacity:0;}
#toggle_nav.on .three{ /*transform*/ -webkit-transform:rotate(-45deg) translate(7px, -8px); -moz-transform:rotate(-45deg) translate(7px, -8px); -ms-transform:rotate(-45deg) translate(7px, -8px); -o-transform:rotate(-45deg) translate(7px, -8px); transform:rotate(-45deg) translate(7px, -8px);
}
#menu_mobile{display:none;}
#menu_mobile .menu { margin-left: 0; list-style: none; list-style-image: none; overflow: hidden; padding: 0;
}
#menu_mobile .menu_link { text-decoration: none; color: #9E9E9E; display: block; padding: 0.5em; background: #EEEEEE; border: 0.1em solid #FFFFFF;
}
#menu_mobile .menu_link:hover { color: blue;
}
#menu_mobile .menu_item { margin: 0; padding: 0; display: block;
}
#menu_mobile .menu_link:hover { background: #3498DB; color: #F1F1F1;
}
#menu_mobile .menu_link .active { color: blue; background: blue;
}
/* Modal
------------------------*/
.overlay{ margin: auto; position: fixed; top: 0; left: 0; bottom: 0; right: 0; display: none; z-index: 999999; overflow: hidden;
}
.modal { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: -200%; bottom: 0; right: 0; padding: 2% 1%; -webkit-box-shadow: 0 9px 6px -10px #000; box-shadow: 0 9px 6px -10px #000; min-width: 20%; max-width: 80%; min-height: 20%; max-height: 80%; resize: both;
}
.modal iframe,.modal figure img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%;
}
.modal figcaption { z-index: 99999; position: absolute; bottom: 0; left: 0; width: 100%; padding: 0.3em;
}
#close{ width:32px; height:32px; display:inline-block; text-align:center; line-height:28px; text-decoration:none; cursor:pointer; margin-top:0; margin-left:0; position:absolute; top:0; right:0; z-index: 99999; font-size: 2em; font-family: "lucida console",serif,monospace;
}
/* Accordion
------------------------*/
a[data-set="open"]:after { position: absolute; right: 0.5em; margin: 0; outline: none; content: "▼"; padding: 3px; width: 16px; height: 16px; border-radius: 100%; text-align: center; line-height: 1em; font-weight: bold; border: 2px solid #FFF; font-family: "arial black"; top: 0.5em;
}
a[data-set="close"]:after { position: absolute; right: 0.5em; top: 0.5em; margin: 0; outline: none; content: "▲"; padding: 3px; width: 16px; height: 16px; border-radius: 100%; text-align: center; line-height: 0.8em; font-weight: bold; border: 2px solid #FFF; font-family: "arial black";
}
.accordion-open{ display:block!important;
}
.box-accordion{ width:100%; display:block; position:relative; clear: both;
}
.box-accordion ul{ list-style:none; margin:0; padding:0;
}
.accordion{ display:none; padding:0.5em;
}
.box-accordion ul li a{ text-decoration:none; display:block; padding:10px; position: relative;
}
.box-accordion{ padding:4px;
}
/* Tabs
------------------------*/
.tabs{ width:100%; display:block;
}
.tabs .tab{ display:none; height:auto;
}
.tabs .tab-active{ display:inline-block;
}
.tabs .tab-open{ display:block; padding:10px;
}
.tabs ul{ list-style-type:none; margin:0; padding:0;
}
.tabs ul li{ display:inline-block; margin:0; padding:0;
}
.tabs ul li a{ text-decoration:none; padding:9px; display:block; border-radius: 4px 4px 0 0;
}
.tabs ul li.tab-active a{ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0); background-image:-webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(40%,rgba(0,0,0,.05)),to(rgba(0,0,0,.1))); background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1)); background-image:-moz-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1)); background-image:-ms-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1)); background-image:-o-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1)); background-image: linear-gradient(rgba(250, 250, 250, 0.21),rgba(211, 211, 211, 0.27) 40%,rgba(241, 241, 241, 0.28));
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="toTop b-peter-river"> <a href="#fakelink" class="top c-clouds" data-fn="top">^</a> </div> <nav id="menu" class="visible-desktop" data-fn="sticker"> <div class="row-r"> <div class="box-1-5"> <a href="#fl" class="brand c-peter-river">Biru</a> </div> <div class="box-2-3"> <ul class="menu"> <li class="menu_item "> <a href="index.html" class="menu_link" data-link="Home">Home</a> </li> <li class="menu_item"> <a href="grids.html" class="menu_link" data-link="Grids">Grids</a> </li> <li class="menu_item"> <a href="components.html" class="menu_link active" data-link="Components">Components</a> </li> <li class="menu_item"> <a href="javascript.html" class="menu_link" data-link="Javascript">Javascript</a> </li> </ul> </div> </div> </nav> <div id="toggle_nav" class="hidden-desktop"> <div class="one b-peter-river"></div> <div class="two b-peter-river"></div> <div class="three b-peter-river"></div> </div> <nav id="menu_mobile"></nav> <header id="header" class="b-peter-river c-clouds"> <div class="row-r"> <div class="box-1"> <div class="pd"> <div class="header-inner"> <h1 class="head-title">Biru Framework</h1> <h2 class="subhead-title">Preview for our first framework </h2> <a href="http://nakome.com/" class="btn b-midnight-blue c-clouds">Nakome</a> <a href="http://aryandhani.com/" class="btn b-alizarin c-clouds" >Aryandhani</a> </div> </div> </div> </div> </header> <section class="main"> <div class="row-r"> <div class="box-1"> <div class="pd"> <h2 class="c-peter-river b-clouds pd cn">Accordion</h2> </div> </div> </div> <div class="row-r"> <div class="box-1-3"> <div class="pd"> <div class="box-accordion"> <ul> <li> <a href="#fl" data-fn="accordion" data-open="accordion-one" class="b-peter-river c-clouds">Example one</a> <div id="accordion-one" class="accordion b-clouds accordion-open"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium. </div> </li> <li> <a href="#fl" data-fn="accordion" data-open="accordion-two" class="b-peter-river c-clouds">Example two</a> <div id="accordion-two" class="accordion b-clouds"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium. </div> </li> <li> <a href="#fl" data-fn="accordion" data-open="accordion-three" class="b-peter-river c-clouds">Example three</a> <div id="accordion-three" class="accordion b-clouds"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium. </div> </li> </ul> </div> <h3>Base accordion without colors</h3> <div class="box-accordion"> <ul> <li> <a href="#fl" data-fn="accordion" data-open="accordion-four">Example one</a> <div id="accordion-four" class="accordion accordion-open"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium. </div> </li> <li> <a href="#fl" data-fn="accordion" data-open="accordion-five">Example two</a> <div id="accordion-five" class="accordion"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium. </div> </li> <li> <a href="#fl" data-fn="accordion" data-open="accordion-six">Example three</a> <div id="accordion-six" class="accordion"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium. </div> </li> </ul> </div> </div> </div> <div class="box-2-3"> <div class="pd"> <pre class="c-midnight-blue b-clouds"><div class="box-accordion"> <ul> <li> <a href="#" data-fn="accordion" data-open="accordion-one" class="b-peter-river c-clouds"> Example one </a> <div id="accordion-one" class="accordion b-clouds accordion-open"> // content here </div> </li> <li> <a href="#" data-fn="accordion" data-open="accordion-two" class="b-peter-river c-clouds"> Example two </a> <div id="accordion-two" class="accordion b-clouds"> // content here </div> </li> <li> <a href="#" data-fn="accordion" data-open="accordion-three" class="b-peter-river c-clouds"> Example three </a> <div id="accordion-three" class="accordion b-clouds"> // content here </div> </li> </ul>
</div></pre> </div> </div> </div> <div class="row-r"> <div class="box-1"> <div class="pd"> <h2 class="c-peter-river b-clouds pd cn">Tabs</h2> </div> </div> </div> <div class="row-r"> <div class="box-1-3"> <div class="pd"> <div class="tabs"> <ul> <li class="tab-active"><a href="#fl" class="b-peter-river c-clouds" data-fn="tabs" data-open="tab-one">Open One</a></li> <li><a href="#fl" class="b-peter-river c-clouds" data-fn="tabs" data-open="tab-two">Open Two</a></li> <li><a href="#fl" class="b-peter-river c-clouds" data-fn="tabs" data-open="tab-three">Open Three</a></li> </ul> <div class="tab b-clouds tab-open" id="tab-one" > Samplre one dolor sit amet, consectetur adipisicing elit. In nihil voluptas expedita dolores quas? Nemo libero quidem nesciunt corrupti dolorem. Omnis itaque nam porro aliquam cupiditate iste necessitatibus dicta perferendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quia ab quo delectus possimus tempore debitis cumque excepturi a voluptatibus fugiat harum in consequuntur nihil recusandae laudantium perferendis nostrum voluptatem. </div> <div class="tab b-clouds" id="tab-two" > Samplre two ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus vero quisquam voluptatem non modi a quia ipsam nemo saepe neque dolorum eveniet alias ipsa maxime blanditiis molestiae placeat. Doloremque vel! </div> <div class="tab b-clouds" id="tab-three" > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi pariatur minus aperiam illo culpa possimus saepe corporis ex rerum natus cupiditate debitis incidunt ab vitae modi maiores at atque nisi. </div> </div> <h3>Base tabs without colors</h3> <div class="tabs"> <ul> <li class="tab-active"><a href="#fl" data-fn="tabs" data-open="tab-four">Open One</a></li> <li><a href="#fl" data-fn="tabs" data-open="tab-five">Open Two</a></li> <li><a href="#fl" data-fn="tabs" data-open="tab-six">Open Three</a></li> </ul> <div class="tab tab-open" id="tab-four" > Samplre one dolor sit amet, consectetur adipisicing elit. In nihil voluptas expedita dolores quas? Nemo libero quidem nesciunt corrupti dolorem. Omnis itaque nam porro aliquam cupiditate iste necessitatibus dicta perferendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quia ab quo delectus possimus tempore debitis cumque excepturi a voluptatibus fugiat harum in consequuntur nihil recusandae laudantium perferendis nostrum voluptatem. </div> <div class="tab" id="tab-five" > Samplre two ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus vero quisquam voluptatem non modi a quia ipsam nemo saepe neque dolorum eveniet alias ipsa maxime blanditiis molestiae placeat. Doloremque vel! </div> <div class="tab" id="tab-six" > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi pariatur minus aperiam illo culpa possimus saepe corporis ex rerum natus cupiditate debitis incidunt ab vitae modi maiores at atque nisi. </div> </div> </div> </div> <div class="box-2-3"> <div class="pd"> <pre class="c-midnight-blue b-clouds"><div class="tabs"> <ul> <li class="tab-active"> <a href="#" class="b-peter-river c-clouds" data-fn="tabs" data-open="tab-one"> Open One </a> </li> <li> <a href="#" class="b-peter-river c-clouds" data-fn="tabs" data-open="tab-two"> Open Two </a> </li> <li> <a href="#" class="b-peter-river c-clouds" data-fn="tabs" data-open="tab-three"> Open Three </a> </li> </ul> <div class="tab b-clouds tab-open" id="tab-one" > // content here </div> <div class="tab b-clouds" id="tab-two" > // content here </div> <div class="tab b-clouds" id="tab-three" > // content here </div>
</div></pre> </div> </div> </div> <div class="row-r"> <div class="box-1"> <div class="pd"> <h2 class="c-peter-river b-clouds pd cn">Modal</h2> </div> </div> </div> <div class="row-r"> <div class="box-1-3"> <div class="pd"> <h3>Modal</h3> <a class="btn b-peter-river c-clouds" href="#fl" title=" Example link" data-fn="text" data-get="<h2 class='c-clouds cn'>This is a simple modal in h2<h2>">Simple</a> <a class="btn b-peter-river c-clouds" href="#fl" title=" Example link" data-fn="text" data-get="<iframe width='560' height='315' src='http://www.youtube.com/embed/Pq8E0GpU6BA?list=UUusD6cPVuc9F9m3L50jCNiA' frameborder='0' allowfullscreen></iframe>">Youtube</a> <a class="btn b-peter-river c-clouds" href="#fl" title=" Example link" data-fn="text" data-get="<h2 class='c-clouds cn'>This is a another modal with paragrahp</h2><p class='c-clouds'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>">Header and text</a> <a class="btn b-peter-river c-clouds" href="#fl" title=" Example link" data-fn="text" data-get="<figure><img src='https://dl.dropboxusercontent.com/u/23834858/fotos/base.gif' alt='Sample img'/></figure>">This is a img</a> <a class="btn b-peter-river c-clouds" href="#fl" title=" Example link" data-fn="text" data-get="<figure><img src='https://dl.dropboxusercontent.com/u/23834858/fotos/base.gif' alt='Sample img'/></figure><figcaption class='b-alizarin c-clouds'>This is image caption</figure>">Img with caption</a> </div> </div> <div class="box-2-3"> <div class="pd"> <h3>Html code</h3> <pre class="c-midnight-blue b-clouds"> // link <a class="btn" href="#" title=" Example link" data-fn="text" data-get="Html text here with ' ' "h2> Download </a> // Modal with custom colors <div class="overlay b-midnight-blue"> <div class="modal b-wet-asphalt c-clouds"></div> </div></pre> </div> </div> <div class="row-r"> <div class="box-1"> <div class="pd"> <h2 class="c-peter-river b-clouds pd cn">Buttons</h2> </div> </div> </div> <div class="row-r"> <div class="box-1-3"> <div class="pd"> <h3>Colors</h3> <button class="btn c-clouds b-turquoise">turquoise</button> <button class="btn c-clouds b-green-sea">green-sea</button> <button class="btn c-clouds b-emerland">emerland</button> <button class="btn c-clouds b-nephritis">nephritis</button> <button class="btn c-clouds b-peter-river">peter-river</button> <button class="btn c-clouds b-belize-hole">belize-hole</button> <button class="btn c-clouds b-amethyst">amethyst</button> <button class="btn c-clouds b-wisteria">wisteria</button> <button class="btn c-clouds b-wet-asphalt">wet-asphalt</button> <button class="btn c-clouds b-midnight-blue">midnight-blue</button> <button class="btn c-clouds b-sun-flower">sun-flower</button> <button class="btn c-clouds b-orange">orange</button> <button class="btn c-clouds b-carrot">carrot</button> <button class="btn c-clouds b-pumpkin">pumpkin</button> <button class="btn c-clouds b-alizarin">alizarin</button> <button class="btn c-clouds b-pomegranate">pomegranate</button> <button class="btn c-midnight-blue b-clouds">clouds</button> <button class="btn c-clouds b-silver">silver</button> <button class="btn c-clouds b-concrete">concrete</button> <button class="btn c-clouds b-asbestos">asbestos</button> </div> </div> <div class="box-2-3"> <div class="pd"> <h3>Html code</h3> <pre class="c-midnight-blue b-clouds">
<button class="btn c-clouds b-turquoise">turquoise</button>
<button class="btn c-clouds b-green-sea">green-sea</button>
<button class="btn c-clouds b-emerland">emerland</button>
<button class="btn c-clouds b-nephritis">nephritis</button>
<button class="btn c-clouds b-peter-river">peter-river</button>
<button class="btn c-clouds b-belize-hole">belize-hole</button>
<button class="btn c-clouds b-amethyst">amethyst</button>
<button class="btn c-clouds b-wisteria">wisteria</button>
<button class="btn c-clouds b-wet-asphalt">wet-asphalt</button>
<button class="btn c-clouds b-midnight-blue">midnight-blue</button>
<button class="btn c-clouds b-sun-flower">sun-flower</button>
<button class="btn c-clouds b-orange">orange</button>
<button class="btn c-clouds b-carrot">carrot</button>
<button class="btn c-clouds b-pumpkin">pumpkin</button>
<button class="btn c-clouds b-alizarin">alizarin</button>
<button class="btn c-clouds b-pomegranate">pomegranate</button>
<button class="btn c-midnight-blue b-clouds">clouds</button>
<button class="btn c-clouds b-silver">silver</button></pre> </div> </div> </div> <div class="row-r"> <div class="box-1-3"> <div class="pd"> <h3>buttons</h3> <button class="btn">Simple button</button> <button class="btn btn-disabled">Disabled button</button> <button class="btn btn-active">Active button</button> <button class="btn b-peter-river c-clouds">Color button</button> <button class="btn btn-block">Block button</button> </div> </div> <div class="box-2-3"> <div class="pd"> <h3>Html code</h3> <pre class="c-midnight-blue b-clouds">
<button class="btn">Simple button</button>
<button class="btn btn-disabled">Disabled button</button>
<button class="btn btn-active">Active button</button>
<button class="btn b-peter-river c-clouds">Color button</button>
<button class="btn btn-block">Block button</button></pre> </div> </div> <div class="row-r"> <div class="box-1"> <div class="pd"> <h2 class="c-peter-river b-clouds pd cn">Forms</h2> </div> </div> </div> <div class="row-r"> <div class="box-1-2"> <div class="pd"> <h3>Inline forms</h3> <form class="form"> <fieldset> <legend>Login</legend> <input type="email" class="b-clouds c-peter-river" placeholder="Email"> <input type="password" class="b-clouds c-peter-river" placeholder="Password"> <label for="remember"> <input id="remember" type="checkbox"> Remember me </label> <button type="submit" class="btn b-peter-river c-clouds">Sign in</button> </fieldset> </form> </div> </div> <div class="box-1-2"> <div class="pd"> <h3>Html code</h3> <pre class="c-midnight-blue b-clouds">
<form class="form c-clouds b-peter-river"> <fieldset> <legend>A compact inline form</legend> <input type="email" class="b-clouds c-peter-river" placeholder="Email"> <input type="password" class="b-clouds c-peter-river" placeholder="Password"> <label for="remember"> <input id="remember" type="checkbox"> Remember me </label> <button type="submit" class="btn b-peter-river c-clouds">Sign in</button> </fieldset>
</form></pre> </div> </div> </div> <div class="row-r"> <div class="box-1-2"> <div class="pd"> <h3>Aligned Form</h3> <form class="form form-aligned"> <fieldset> <div class="control-group"> <label for="name">Username</label> <input id="name" type="text" class="c-peter-river b-clouds" placeholder="Username"> </div> <div class="control-group"> <label for="password">Password</label> <input id="password" type="password" class="c-peter-river b-clouds" placeholder="Password"> </div> <div class="control-group"> <label for="email">Email Address</label> <input id="email" type="email" class="c-peter-river b-clouds input-1-3" placeholder="Email Address"> </div> <div class="control-group"> <label for="foo">Menssage</label> <textarea id="foo" class="c-peter-river b-clouds input-1-2" placeholder="Enter something here..."></textarea> </div> <div class="controls"> <label for="cb" class="checkbox"> <input id="cb" type="checkbox"> I've read the terms and conditions </label> <button type="submit" class="btn b-peter-river c-clouds">Submit</button> </div> </fieldset> </form> </div> </div> <div class="box-1-2"> <div class="pd"> <h3>Html code</h3> <pre class="c-midnight-blue b-clouds">
<form class="form form-aligned"> <fieldset> <div class="control-group"> <label for="name">Username</label> <input id="name" type="text" class="c-peter-river b-clouds" placeholder="Username"> </div> <div class="control-group"> <label for="password">Password</label> <input id="password" type="password" class="c-peter-river b-clouds" placeholder="Password"> </div> <div class="control-group"> <label for="email">Email Address</label> <input id="email" type="email" class="c-peter-river b-clouds input-1-3" placeholder="Email Address"> </div> <div class="control-group"> <label for="foo">Textarea</label> <textarea id="foo" type="text" class="c-peter-river b-clouds input-1-2" placeholder="Enter something here..."></textarea> </div> <div class="controls"> <label for="cb" class="checkbox"> <input id="cb" type="checkbox"> I've read the terms and conditions </label> <button type="submit" class="btn b-peter-river c-clouds">Submit</button> </div> </fieldset>
</form></pre> </div> </div> </div> <div class="row-r"> <div class="box-1"> <div class="pd"> <h2 class="c-peter-river b-clouds pd cn">Menus</h2> </div> </div> </div> <div class="row-r"> <div class="box-1-2"> <div class="pd"> <h3>Vertical Menu</h3> <div class="menu menu-open b-midnight-blue c-clouds"> <ul> <li class="menu-heading">Biru world</li> <li class="menu-active"><a href="#">Home</a></li> <li><a href="#">Components</a></li> <li><a href="#">Grids</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> <div class="box-1-2"> <div class="pd"> <h3>Html code</h3> <pre class="c-midnight-blue b-clouds">
<div class="menu menu-open b-midnight-blue c-clouds"> <ul> <li class="menu-heading">Biru world</li> <li class="menu-active"><a href="#">Home</a></li> <li><a href="#">Components</a></li> <li><a href="#">Grids</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">Contact</a></li> </ul>
</div></pre> </div> </div> </div> <div class="row-r"> <div class="box-1-2"> <div class="pd"> <h3>Horizontal Menu</h3> <div class="menu menu-open menu-horizontal b-peter-river c-clouds"> <a href="#" class="menu-heading">Biru world</a> <ul> <li><a href="#">Home</a></li> <li class="menu-active"><a href="#">Components</a></li> <li><a href="#">Grids</a></li> <li class="menu-disabled"><a href="#">Disabled</a></li> </ul> </div> </div> </div> <div class="box-1-2"> <div class="pd"> <h3>Html code</h3> <pre class="c-midnight-blue b-clouds">
<div class="menu menu-open menu-horizontal"> <a href="#" class="menu-heading">Biru world</a> <ul> <li><a href="#">Home</a></li> <li class="menu-active"><a href="#">Components</a></li> <li><a href="#">Grids</a></li> <li class="menu-disabled"><a href="#">Disabled</a></li> </ul>
</div></pre> </div> </div> </div> <div class="row-r"> <div class="box-1"> <div class="pd"> <h2 class="c-peter-river b-clouds pd cn">Tables</h2> </div> </div> </div> <div class="row-r"> <div class="box-1-3"> <div class="pd"> <h3>Basic</h3> <table class="table"> <thead> <tr> <th>#</th> <th>Css</th> <th>Html</th> <th>Javascript</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Android</td> <td>IOS</td> <td>Chrome</td> </tr> <tr> <td>2</td> <td>Android</td> <td>IOS</td> <td>Chrome</td> </tr> <tr> <td>3</td> <td>Android</td> <td>IOS</td> <td>Chrome</td> </tr> </tbody> </table> </div> </div> <div class="box-2-3"> <div class="pd"> <h3>Html code</h3> <pre class="c-midnight-blue b-clouds">
<table class="table"> <thead> <tr> <th>#</th><th>Css</th><th>Html</th><th>Javascript</th> </tr> </thead> <tbody> <tr> <td>1</td><td>Android</td><td>IOS</td><td>Chrome</td> </tr> <tr> <td>1</td><td>Android</td><td>IOS</td><td>Chrome</td> </tr> <tr> <td>1</td><td>Android</td><td>IOS</td><td>Chrome</td> </tr> </tbody>
</table></pre> </div> </div> </div> <div class="row-r"> <div class="box-1-3"> <div class="pd"> <h3>Colors</h3> <table class="table c-peter-river b-clouds sh"> <thead class="b-peter-river c-clouds"> <tr> <th>#</th> <th>Css</th> <th>Html</th> <th>Javascript</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Android</td> <td>IOS</td> <td>Chrome</td> </tr> <tr> <td>2</td> <td>Android</td> <td>IOS</td> <td>Chrome</td> </tr> <tr> <td>3</td> <td>Android</td> <td>IOS</td> <td>Chrome</td> </tr> </tbody> </table> </div> </div> <div class="box-2-3"> <div class="pd"> <h3>Html code</h3> <pre class="c-midnight-blue b-clouds">
<table class="table c-peter-river b-clouds sh"> <thead class="b-peter-river c-clouds"> <tr> <th>#</th><th>Css</th><th>Html</th><th>Javascript</th> </tr> </thead> <tbody> <tr> <td>1</td><td>Android</td><td>IOS</td><td>Chrome</td> </tr> <tr> <td>1</td><td>Android</td><td>IOS</td><td>Chrome</td> </tr> <tr> <td>1</td><td>Android</td><td>IOS</td><td>Chrome</td> </tr> </tbody>
</table></pre> </div> </div> </div> </section><!-- /main --> <div class="footer b-wet-asphalt c-clouds "><p>Copyright © 2013 ::: Made with ♥</p></div> <div class="overlay b-pomegranate"><div class="modal b-alizarin c-clouds"></div></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Biru Css framework - Script Codes CSS Codes
/* = For this demo
________________________*/
@import url(http://fonts.googleapis.com/css?family=Lato:300,400);
html,body,.btn,.subhead-title{font-family: 'Lato', sans-serif;font-weight: 300;}
h1,h2,h3,h4,.header-title{font-family: 'Lato', sans-serif;font-weight: 400;}
.btn {margin: 0.5em;}
pre{font-family: monospace,serif;font-size: 0.8em;line-height: 1.2em;padding: 1em;}
.header-inner {min-height: 5em;padding-top: 1em;}
/*
*
* Biru 1.0v
*
* Copyright 2012 @nakome & @aryandhani
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Included in this file:
* -> Base.
* -> Grid.
* -> Utilities.
* -> Theme.
* -> Plugins.
*/
/*==============================================
* BASE Inspired by yuilibrary.com
================================================*/
/* = Menu
---------------------------------*/
.menu ul{ position:absolute; visibility:hidden;
}
.menu.menu-open{ visibility:visible; z-index:2; width:100%;
}
.menu ul{ left:-10000px; list-style:none; margin:0; padding:0; top:-10000px; z-index:1;
}
.menu>ul{ position:relative;
}
.menu-open>ul{ left:0; top:0; visibility:visible;
}
.menu li{ position:relative;
}
.menu a,.menu .menu-heading{ display:block; color:inherit; line-height:1.5em; padding:5px 20px; text-decoration:none; white-space:nowrap;
}
.menu.menu-horizontal>.menu-heading{ display:inline-block; margin:0; zoom:1; *display:inline; vertical-align:middle;
}
.menu.menu-horizontal>ul{ display:inline-block; zoom:1; *display:inline; vertical-align:middle;
}
.menu li a{ padding:5px 20px;
}
.menu-can-have-children>.menu-label:after{ content:'\25B8'; float:right; font-family:'Lucida Grande','Lucida Sans Unicode','DejaVu Sans',sans-serif; margin-right:-20px; margin-top:-1px;
}
.menu-can-have-children>.menu-label{ padding-right:30px;
}
.menu-separator{ background-color:#dfdfdf; display:block; height:1px; font-size:0; margin:7px 2px; overflow:hidden;
}
.menu-hidden{ display:none;
}
.menu-fixed{ position:fixed; top:0; left:0; width:100%;
}
.menu-horizontal li{ display:inline-block; zoom:1; *display:inline; vertical-align:middle;
}
.menu-horizontal li li{ display:block;
}
.menu-horizontal>.menu-children>.menu-can-have-children>.menu-label:after{ content:"\25BE";
}
.menu-horizontal>.menu-children>.menu-can-have-children>.menu-label{ padding-right:30px;
}
.menu.menu-open,.menu.menu-horizontal li .menu-children{ border: 1px solid #ECE9E9;
}
.menu.menu-horizontal, .menu.menu-horizontal .menu-heading{ border:0;
}
.menu a{ border:1px solid transparent; border-left:none; border-right:0;
}
.menu li a:hover{ background: #3498DB; color: #ECF0F1;
}
.menu li.menu-disabled a:hover{ background:#fff; color:#bfbfbf;
}
.menu .menu-disabled>a{ background-image:none; border-color:transparent; cursor:default;
}
.menu .menu-disabled>a,.menu .menu-can-have-children .menu-disabled>a:after{ color:#bfbfbf;
}
.menu .menu-heading{ text-transform:uppercase; font-size:90%; margin-top:.5em; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color: #ECF0F1;
}
.menu .menu-selected a{ font-weight:bold; color:#000;
}
.menu.menu-open .menu-fixed{ -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; border:0; border-bottom:1px solid #b7b7b7;
}
@media(max-width:480px){ .menu-horizontal{ width:100%; } .menu-children li{ display:block; border-bottom:1px solid block; }
}
.paginator{ list-style:none; margin:0; padding:0;
}
.paginator li{ display:inline-block; *display:inline; *zoom:1; margin:0 -0.35em 0 0;
}
.paginator .button{ -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; padding:.8em 1.4em; vertical-align:top; height:1.1em;
}
.paginator .button:focus{ outline-style:none;
}
.paginator .prev,.paginator .next{ color:#c0c1c3; text-shadow:0 -1px 0 rgba(0,0,0,0.45);
}
/* = Buttons
---------------------------------*/
.btn{ display:inline-block; *display:inline; zoom:1; line-height:normal; white-space:nowrap; vertical-align:baseline; text-align:center; cursor:pointer; -webkit-user-drag:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.btn::-moz-focus-inner{ padding:0; border:0;
}
.btn{ font-size:100%; *font-size:90%; *overflow:visible; padding:.5em 1.5em; *color:#444; border:0 rgba(0,0,0,0); text-decoration:none; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; -webkit-font-smoothing:antialiased; -webkit-transition:.1s linear -webkit-box-shadow; -moz-transition: .1s linear -moz-box-shadow; -o-transition: .1s linear -o-box-shadow; transition: .1s linear box-shadow;
}
.btn-hover,.btn:hover,.btn:focus{ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0); background-image:-webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(40%,rgba(0,0,0,.05)),to(rgba(0,0,0,.1))); background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1)); background-image:-moz-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1)); background-image:-ms-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1)); background-image:-o-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1)); background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
}
.btn:focus{outline:0;}
.btn-active,.btn:active{ -webkit-box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset; -moz-box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset; box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;
}
.btn[disabled],.btn-disabled,.btn-disabled:hover,
.btn-disabled:focus,.btn-disabled:active{ border:0; background-image:none; filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); filter:alpha(opacity=40); -khtml-opacity:.4; -moz-opacity:.4; opacity:.4; cursor:not-allowed; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none;
}
.btn-hidden{display:none;}
.btn-block{display: block;width: 100%;}
.btn::-moz-focus-inner{ padding:0; border:0;
}
/* = Form
---------------------------------*/
.form{margin:0;border:1px solid rgba(0,0,0,0.0)}
.form fieldset{ border:1px solid silver; margin:0 2px; padding:.35em .625em .75em;
}
.form legend{ border:0; padding:0; white-space:normal; *margin-left:-7px;
}
.form button,.form input,.form select,.form textarea{ font-size:100%; margin:0; vertical-align:baseline; *vertical-align:middle;
}
.form button,.form input{line-height:normal;}
.form button,.form input[type=button],.form input[type=reset],.form input[type=submit]{ -webkit-appearance:button; cursor:pointer; *overflow:visible;
}
.form button[disabled],.form input[disabled]{ cursor:default;
}
.form input[type=checkbox],.form input[type=radio]{ box-sizing:border-box; padding:0; *height:13px; *width:13px;
}
.form input[type=search]{ -webkit-appearance:textfield; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box;
}
.form input[type=search]::-webkit-search-cancel-button,.form input[type=search]::-webkit-search-decoration{ -webkit-appearance:none;
}
.form button::-moz-focus-inner,.form input::-moz-focus-inner{ border:0; padding:0;}
.form textarea{ overflow:auto; vertical-align:top;
}
.form input[type=text],.form input[type=password],.form input[type=email],
.form input[type=url],.form input[type=date],.form input[type=month],
.form input[type=time],.form input[type=datetime],.form input[type=datetime-local],
.form input[type=week],.form input[type=number],.form input[type=search],
.form input[type=tel],.form input[type=color],.form select,.form textarea{ padding: 0.9em .6em; display:inline-block; border: 1px solid rgba(0,0,0,0.0); font-size:.8em; -webkit-transition:.3s linear border; -moz-transition:.3s linear border; -o-transition:.3s linear border; transition:.3s linear border; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-font-smoothing:antialiased;
}
.form input[type=text]:focus,.form input[type=password]:focus,
.form input[type=email]:focus,.form input[type=url]:focus,
.form input[type=date]:focus,.form input[type=month]:focus,
.form input[type=time]:focus,.form input[type=datetime]:focus,
.form input[type=datetime-local]:focus,.form input[type=week]:focus,
.form input[type=number]:focus,.form input[type=search]:focus,
.form input[type=tel]:focus,.form input[type=color]:focus,
.form select:focus,.form textarea:focus{ outline:0; outline:thin dotted \9; border: 1px solid #129FEA;
}
.form input[type=file]:focus,
.form input[type=radio]:focus,
.form input[type=checkbox]:focus{ outline:none;
}
.form .checkbox,.form .radio{ margin:.5em 0; display:block;
}
.form input[type=text][disabled],.form input[type=password][disabled],
.form input[type=email][disabled],.form input[type=url][disabled],
.form input[type=date][disabled],.form input[type=month][disabled],
.form input[type=time][disabled],.form input[type=datetime][disabled],
.form input[type=datetime-local][disabled],.form input[type=week][disabled],
.form input[type=number][disabled],.form input[type=search][disabled],
.form input[type=tel][disabled],.form input[type=color][disabled],
.form select[disabled],.form textarea[disabled]{ cursor:not-allowed;
}
.form input[readonly],.form select[readonly],
.form textarea[readonly],.form input[readonly]:focus,
.form select[readonly]:focus,.form textarea[readonly]:focus{}
.form input:focus:invalid,.form textarea:focus:invalid,.form select:focus:invalid{ color:#b94a48; border:1px solid #ee5f5b;
}
.form input:focus:invalid:focus,.form textarea:focus:invalid:focus,.form select:focus:invalid:focus{ border-color:#e9322d;
}
.form input[type=file]:focus:invalid:focus,.form input[type=radio]:focus:invalid:focus,.form input[type=checkbox]:focus:invalid:focus{ outline-color:#e9322d;
}
.form select{}
.form select[multiple]{ height:auto;
}
.form label{ margin:.5em 0 .2em; font-size:90%;
}
.form fieldset{ margin:0; padding:.35em 0 .75em; border:0;
}
.form legend{ display:block; width:100%; padding:.3em 0; margin-bottom:.3em; font-size:125%;
}
.form-stacked input[type=text],.form-stacked input[type=password],
.form-stacked input[type=email],.form-stacked input[type=url],
.form-stacked input[type=date],.form-stacked input[type=month],
.form-stacked input[type=time],.form-stacked input[type=datetime],
.form-stacked input[type=datetime-local],.form-stacked input[type=week],
.form-stacked input[type=number],.form-stacked input[type=search],
.form-stacked input[type=tel],.form-stacked input[type=color],
.form-stacked select,.form-stacked label,.form-stacked textarea{ display:block; margin:.25em 0;
}
.form-aligned input,.form-aligned textarea,.form-aligned select,.form-aligned .help-inline,.form-message-inline{ display:inline-block; *display:inline; *zoom:1; vertical-align:middle;
}
.form-aligned .control-group{ margin-bottom:.5em;
}
.form-aligned .control-group label{ text-align:right; display:inline-block; vertical-align:middle; width:10em; margin:0 1em 0 0;
}
.form-aligned .controls{ margin:1.5em 0 0 10em;
}
.form input.input-rounded,.form .input-rounded{ -webkit-border-radius:2em; -moz-border-radius:2em; border-radius:2em; padding:.5em 1em;
}
.form .group fieldset{ margin-bottom:10px;
}
.form .group input{ display:block; padding:10px; margin:0; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; position:relative; top:-1px;
}
.form .group input:focus{ z-index:2;
}
.form .group input:first-child{ top:1px; -webkit-border-radius:4px 4px 0 0; -moz-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0;
}
.form .group input:last-child{ top:-2px; -webkit-border-radius:0 0 4px 4px; -moz-border-radius:0 0 4px 4px; border-radius:0 0 4px 4px;
}
.form .group button{ margin:.35em 0;
}
.form .input-1{ width:100%;
}
.form .input-2-3{ width:66%;
}
.form .input-1-2{ width:50%;
}
.form .input-1-3{ width:33%;
}
.form .input-1-4{ width:25%;
}
.form .help-inline,.form-message-inline{ display:inline-block; padding-left:.3em; vertical-align:middle; font-size:90%;
}
.form-message{ display:block; font-size:90%;
}
/* = Tables
---------------------------------*/
.table{ border-collapse:collapse; border-spacing:0; empty-cells:show; border: 1px solid #E7E7E7;
}
.table caption{ color:#000; font:italic 85%/1 arial,sans-serif; padding:1em 0; text-align:center;
}
.table td,.table th{ border-left:1px solid #cbcbcb; border-width:0 0 0 1px; font-size:inherit; margin:0; overflow:visible; padding:6px 12px;
}
.table td:first-child,.table th:first-child{border-left-width:0;}
.table thead{ text-align:left; vertical-align:bottom;
}
.table td{background-color:transparent;}
.table-odd td{background-color:#ECF0F1;}
.table-striped tr:nth-child(2n-1) td{background-color:#ECF0F1;}
.table-bordered td{border-bottom:1px solid #ECF0F1;}
.table-bordered tbody>tr:last-child td,.table-horizontal tbody>tr:last-child td{border-bottom-width:0;}
.table-horizontal td,.table-horizontal th{border-width:0 0 1px;border-bottom:1px solid #ECF0F1;}
.table-horizontal tbody>tr:last-child td{border-bottom-width:0;}
/* = Grids
---------------------------------*/
@media only screen and (max-width :480px){ .form button[type=submit]{ margin:.7em 0 0; } .form input[type=text],.form input[type=password], .form input[type=email],.form input[type=url], .form input[type=date],.form input[type=month], .form input[type=time],.form input[type=datetime], .form input[type=datetime-local],.form input[type=week], .form input[type=number],.form input[type=search], .form input[type=tel],.form input[type=color],.form label{ margin-bottom:.3em; display:block; } .group input[type=text],.group input[type=password], .group input[type=email],.group input[type=url], .group input[type=date],.group input[type=month], .group input[type=time],.group input[type=datetime], .group input[type=datetime-local],.group input[type=week], .group input[type=number],.group input[type=search], .group input[type=tel],.group input[type=color]{ margin-bottom:0; } .form-aligned .control-group label{ margin-bottom:.3em; text-align:left; display:block; width:100%; } .form-aligned .controls{ margin:1.5em 0 0; } .form .help-inline,.form-message-inline,.form-message{ display:block; font-size:80%; padding:.2em 0 .8em; }
}
/*==================================
* GRIDS
===================================*/
.row {letter-spacing: -0.31em; *letter-spacing: normal; *word-spacing: -0.43em;text-rendering: optimizespeed;}
.opera-only :-o-prefocus,.row { word-spacing: -0.43em;}
.box { display: inline-block; zoom: 1; *display: inline; letter-spacing: normal;word-spacing: normal; vertical-align: top; text-rendering: auto;}
.box-1,.box-1-2,.box-1-3,.box-2-3,.box-1-4,
.box-3-4,.box-1-5,.box-2-5,.box-3-5,.box-4-5,
.box-1-6,.box-5-6,.box-1-7,.box-2-7,.box-3-7,
.box-4-7,.box-5-7,.box-6-7,.box-1-8,.box-3-8,
.box-5-8,.box-7-8,.box-1-9,.box-2-9,.box-4-9,
.box-5-9,.box-6-9,.box-7-9,.box-8-9,.box-1-10,
.box-3-10,.box-7-10,.box-9-10,.box-1-11,
.box-2-11,.box-3-11,.box-4-11,.box-5-11,
.box-6-11,.box-7-11,.box-8-11,.box-9-11,
.box-10-11,.box-1-12,.box-5-12,.box-7-12,
.box-9-12,.box-11-12 { display: inline-block; zoom: 1; *display: inline; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto;
}
.box-1 {display:block;}
.box-1-2 { width: 50%;}
.offset-1-2 { margin-left: 50%;}
.box-1-3 { width: 33.33333%;}
.offset-1-3 { margin-left: 33.33333%;}
.box-2-3 { width: 66.66667%;}
.offset-2-3 { margin-left: 66.66667%;}
.box-1-4 {width: 25%;}
.offset-1-4 {margin-left: 25%;}
.box-3-4 { width: 75%;}
.offset-3-4 { margin-left: 75%;}
.box-1-5 { width: 20%;}
.offset-1-5 { margin-left: 20%;}
.box-2-5 { width: 40%;}
.offset-2-5 { margin-left: 40%;}
.box-3-5 { width: 60%;}
.offset-3-5 { margin-left: 60%;}
.box-4-5 { width: 80%;}
.offset-4-5 { margin-left: 80%;}
.box-1-6 { width: 16.66667%;}
.offset-1-6 { margin-left: 16.66667%;}
.box-5-6 { width: 83.33333%;}
.offset-5-6 { margin-left: 83.33333%;}
.box-1-7 { width: 14.28571%;}
.offset-1-7 { margin-left: 14.28571%;}
.box-2-7 { width: 28.57143%;}
.offset-2-7 { margin-left: 28.57143%;}
.box-3-7 {width: 42.85714%;}
.offset-3-7 {margin-left: 42.85714%;}
.box-4-7 { width: 57.14286%;}
.offset-4-7 {margin-left: 57.14286%;}
.box-5-7 {width: 71.42857%;}
.offset-5-7 {margin-left: 71.42857%;}
.box-6-7 {width: 85.71429%;}
.offset-6-7 {margin-left: 85.71429%;}
.box-1-8 {width: 12.5%;}
.offset-1-8 {margin-left: 12.5%;}
.box-3-8 {width: 37.5%;}
.offset-3-8 {margin-left: 37.5%;}
.box-5-8 {width: 62.5%;}
.offset-5-8 {margin-left: 62.5%;}
.box-7-8 {width: 87.5%;}
.offset-7-8 {margin-left: 87.5%;}
.box-1-9 {width: 11.11111%;}
.offset-1-9 {margin-left: 11.11111%;}
.box-2-9 {width: 22.22222%;}
.offset-2-9 {margin-left: 22.22222%;}
.box-4-9 {width: 44.44444%;}
.offset-4-9 {margin-left: 44.44444%;}
.box-5-9 {width: 55.55556%;}
.offset-5-9 {margin-left: 55.55556%;}
.box-6-9 { width: 66.66667%;}
.offset-6-9 { margin-left: 66.66667%;}
.box-7-9 { width: 77.77778%;}
.offset-7-9 {margin-left: 77.77778%;}
.box-8-9 {width: 88.88889%;}
.offset-8-9 { margin-left: 88.88889%;}
.box-1-10 { width: 10%;}
.offset-1-10 { margin-left: 10%;}
.box-3-10 { width: 30%;}
.offset-3-10 {margin-left: 30%;}
.box-7-10 { width: 70%;}
.offset-7-10 { margin-left: 70%;}
.box-9-10 { width: 90%;}
.offset-9-10 { margin-left: 90%;}
.box-1-11 {width: 9.09091%;}
.offset-1-11 {margin-left: 9.09091%;}
.box-2-11 { width: 18.18182%;}
.offset-2-11 {margin-left: 18.18182%;}
.box-3-11 { width: 27.27273%;}
.offset-3-11 { margin-left: 27.27273%;}
.box-4-11 {width: 36.36364%;}
.offset-4-11 {margin-left: 36.36364%;}
.box-5-11 {width: 45.45455%;}
.offset-5-11 {margin-left: 45.45455%;}
.box-6-11 {width: 54.54545%;}
.offset-6-11 {margin-left: 54.54545%;}
.box-7-11 {width: 63.63636%;}
.offset-7-11 {margin-left: 63.63636%;}
.box-8-11 {width: 72.72727%;}
.offset-8-11 {margin-left: 72.72727%;}
.box-9-11 {width: 81.81818%;}
.offset-9-11 {margin-left: 81.81818%;}
.box-10-11 {width: 90.90909%;}
.offset-10-11 {margin-left: 90.90909%;}
.box-1-12 {width: 8.33333%;}
.offset-1-12 {margin-left: 8.33333%;}
.box-5-12 {width: 41.66667%;}
.offset-5-12 { margin-left: 41.66667%;}
.box-7-12 { width: 58.33333%;}
.offset-7-12 {margin-left: 58.33333%;}
.box-9-12 {width: 75%;}
.offset-9-12 {margin-left: 75%;}
.box-11-12 {width: 91.66667%;}
.offset-11-12 { margin-left: 91.66667%;}
/* Responsive */
.row-r {letter-spacing: -0.31em; *letter-spacing: normal; word-spacing: -0.43em; }
.opera-only :-o-prefocus,.row-r {word-spacing: -0.43em;}
.row-r img {max-width: 100%;}
/* Desktop */
@media (min-width:980px) { .visible-phone { display: none; } .visible-tablet { display: none; } .hidden-desktop { display: none; }
}
/* Mobile */
@media (max-width:480px) { .row-r > [class ^= "box"] {width:100%;}
}
/* Tablet */
@media (max-width:767px) { .row-r > [class ^= "box"] { width:100%;} .hidden-phone { display: none; } .visible-desktop { display: none; }
}
@media (min-width:768px) and (max-width:979px) { .hidden-tablet { display: none; } .visible-desktop { display: none; }
}
/*==================================
* UTILITIES
===================================*/
/* = Backgrounds Inspired by http://flatuicolors.com/
-------------------------------------------*/
.b-turquoise{background:#1ABC9C;}
.b-green-sea{background:#16A085;}
.b-emerland{background:#2ECC71;}
.b-nephritis{background:#27AE60;}
.b-peter-river{background: #3498DB;}
.b-belize-hole{background:#2980B9;}
.b-amethyst{background:#9B59B6;}
.b-wisteria{background:#8E44AD;}
.b-wet-asphalt{background:#34495E;}
.b-midnight-blue{background:#2C3E50;}
.b-sun-flower{background:#F1C40F;}
.b-orange{background:#F39C12;}
.b-carrot{background:#E67E22;}
.b-pumpkin{background:#D35400;}
.b-alizarin{background:#E74C3C;}
.b-pomegranate{background:#C0392B;}
.b-clouds{background:#ECF0F1;}
.b-silver{background:#BDC3C7;}
.b-concrete{background:#95A5A6;}
.b-asbestos{background:#7F8C8D;}
/* = Colors Inspired by http://flatuicolors.com/
-------------------------------------------*/
.c-turquoise{color:#1ABC9C;}
.c-green-sea{color:#16A085;}
.c-emerland{color:#2ECC71;}
.c-nephritis{color:#27AE60;}
.c-peter-river{color:#3498DB;}
.c-belize-hole{color:#2980B9;}
.c-amethyst{color:#9B59B6;}
.c-wisteria{color:#8E44AD;}
.c-wet-asphalt{color:#34495E;}
.c-midnight-blue{color:#2C3E50;}
.c-sun-flower{color:#F1C40F;}
.c-orange{color:#F39C12;}
.c-carrot{color:#E67E22;}
.c-pumpkin{color:#D35400;}
.c-alizarin{color:#E74C3C;}
.c-pomegranate{color:#C0392B;}
.c-clouds{color:#ECF0F1;}
.c-silver{color:#BDC3C7;}
.c-concrete{color:#95A5A6;}
.c-asbestos{color:#7F8C8D;}
/* = Scrollbar chrome
-------------------------------------------*/
::-webkit-scrollbar { width: 12px;}
::-webkit-scrollbar-track {background: #F3F3F3;}
::-webkit-scrollbar-thumb {background: #3498DB;}
/* = Selection
-------------------------------------------*/
::selection {background: #3CA9E7;color:#ECF0F1;}
::-moz-selection {background: #e74c3c;color:#ECF0F1;}
/* = Tools
-----------------------------------*/
.pd{padding:1em;}
.cn{text-align: center;}
.op{ filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); filter:alpha(opacity=80); -khtml-opacity:0.8; -moz-opacity:0.8; opacity:0.8;
}
.sh { -webkit-box-shadow: 0 2px 3px #999; box-shadow: 0 2px 3px #999;
}
/*==================================
* THEME
===================================*/
*{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}
body{ margin:0 auto; line-height:1.7em; color:#666;
}
img{ width:100%; display:block; margin:0; padding:0; border:none; outline:none;
}
h1,h2,h3,h4{ color:#666;}
pre{ position:relative; border: 2px solid #3498DB; white-space:pre;white-space:pre-wrap;word-wrap:break-word;
}
pre:after { content: "Code"; background: #3498DB; color: #ECF0F1; position: absolute; right: 0; top: 0; padding: 0.1em 0.2em;
}
.text-inner .btn{ position:absolute; top:39%; left:50%; background:rgba(23, 138, 192, 0.59); color:#FFF; padding:7px 35px; display:inline-block; width:48%; font-family:monospace; line-height:2.2em; vertical-align:middle; margin:0; font-size:26px; text-decoration:none;
}
/* = Header
--------------------------------*/
#header{ position:relative; margin-top:0; margin-bottom:2em; margin-left:auto; margin-right:auto; text-align:center; overflow:hidden;
}
.header-inner{ min-height:25em; padding-top:6em;
}
.head-title{ font-size:3em; color:white; text-shadow:0 2px 3px #777;
}
.subhead-title{ font-size:2em; color:white; text-shadow:0 2px 3px #777; line-height: 1.3em;
}
/* = Main
--------------------------*/
/* = Prefooter
--------------------------*/
.prefooter{
}
.prefooter h3{ color:#F0F0F0;
}
/* = Footer
--------------------------*/
.footer{ text-align:center; color:#FFF; display:block; margin:0; padding:5px;
}
/*==================================
* PLUGINS
===================================*/
/* = To top function
-----------------------------------*/
.toTop{ position:fixed; z-index:10000; top:0; left:0; width: 55px; height: 55px; text-align:center; line-height:40px; display:none; font-size:18px;
}
.toTop a{ display:block; text-decoration:none; font-size: 35px; line-height: 65px; font-weight:bold; font-family:monospace;
}
/* = Menu
-----------------------------------*/
#menu{ background:#F8F8F8; border-bottom:2px solid #2980b9; width: 100%; height: 55px; overflow: hidden;
}
#menu .menu{ list-style: none outside none; margin: 0; overflow: hidden; padding-left: 1em; padding-right: 1em;
}
#menu .brand{ margin-top: 0.5em; margin-left: 2em; display: inline-block; text-align: center; width: 100%; text-decoration: none; font-family: sans-serif,sans; font-weight: bold; font-size: 1.5em;
}
#menu .menu_item{ display:inline-block; position:relative; overflow:hidden;
}
#menu .menu_link{ text-decoration:none; color:#B3B3B3; padding:0.9em 2em; line-height: 1.4em; margin-top:0.2em; display: inline-block; /*transition*/ -webkit-transition:background 0.8s ease-in; -moz-transition:background 0.8s ease-in; -o-transition:background 0.8s ease-in; transition:background 0.8s ease-in; overflow:hidden; outline: none;
}
#menu .menu_link:hover:before{ border-bottom: 5px solid #2980B7; border-left: 5px solid transparent; border-right: 5px solid transparent; content: ""; /*transition*/ -webkit-transition:border 0.5s ease; -moz-transition:border 0.5s ease; -o-transition:border 0.5s ease; transition:border 0.5s ease; position: absolute; top: 48px; left:45%;
}
#menu .menu_link:hover{ background:#ecf0f1; /*transition*/ -webkit-transition:background 0.8s ease-out; -moz-transition:background 0.8s ease-out; -o-transition:background 0.8s ease-out; transition:background 0.8s ease-out;
}
#menu .active{ background:#ecf0f1; color:#ECF0F1 !important; /*transition*/ -webkit-transition:background 1s ease-in-out; -moz-transition:background 1s ease-in-out; -o-transition:background 1s ease-in-out; transition:background 1s ease-in-out;
}
#menu .active:after{ content:attr(data-link); position:absolute; color: #3498DB; /*animation*/ -webkit-animation:move 5s infinite ease-in-out; -moz-animation:move 5s infinite ease-in-out; -ms-animation:move 5s infinite ease-in-out; -o-animation:move 5s infinite ease-in-out; animation:move 5s infinite ease-in-out; left:30%;
}
@keyframes move{from{left:100%} to{left:-50%}}
@-webkit-keyframes move{from{left:100%} to{left:-50%}}
@-moz-keyframes move{from{left:100%} to{left:-50%}}
@-ms-keyframes move{from{left:100%} to{left:-50%}}
@-o-keyframes move{from{left:100%} to{left:-50%}}
#menu .active:before{ border-bottom: 5px solid #2980B7; border-left: 5px solid transparent; border-right: 5px solid transparent; content: ""; /*transition*/ -webkit-transition:border 0.5s ease; -moz-transition:border 0.5s ease; -o-transition:border 0.5s ease; transition:border 0.5s ease; position: absolute; top: 48px; left:45%;
}
/* = Menu mobile icon inspired by http://codepen.io/loredonut
--------------------------------*/
#toggle_nav{ width:28px; height:30px; margin:10px; cursor:pointer;
}
#toggle_nav div{ width:100%; height:5px; margin:4px auto; /*transition*/ -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; transition:all 0.3s; /*backface-visibility*/ -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden;
}
#toggle_nav.on .one{ /*transform*/ -webkit-transform:rotate(45deg) translate(5px, 5px); -moz-transform:rotate(45deg) translate(5px, 5px); -ms-transform:rotate(45deg) translate(5px, 5px); -o-transform:rotate(45deg) translate(5px, 5px); transform:rotate(45deg) translate(5px, 5px);
}
#toggle_nav.on .two{ opacity:0;}
#toggle_nav.on .three{ /*transform*/ -webkit-transform:rotate(-45deg) translate(7px, -8px); -moz-transform:rotate(-45deg) translate(7px, -8px); -ms-transform:rotate(-45deg) translate(7px, -8px); -o-transform:rotate(-45deg) translate(7px, -8px); transform:rotate(-45deg) translate(7px, -8px);
}
#menu_mobile{display:none;}
#menu_mobile .menu { margin-left: 0; list-style: none; list-style-image: none; overflow: hidden; padding: 0;
}
#menu_mobile .menu_link { text-decoration: none; color: #9E9E9E; display: block; padding: 0.5em; background: #EEEEEE; border: 0.1em solid #FFFFFF;
}
#menu_mobile .menu_link:hover { color: blue;
}
#menu_mobile .menu_item { margin: 0; padding: 0; display: block;
}
#menu_mobile .menu_link:hover { background: #3498DB; color: #F1F1F1;
}
#menu_mobile .menu_link .active { color: blue; background: blue;
}
/* Modal
------------------------*/
.overlay{ margin: auto; position: fixed; top: 0; left: 0; bottom: 0; right: 0; display: none; z-index: 999999; overflow: hidden;
}
.modal { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: -200%; bottom: 0; right: 0; padding: 2% 1%; -webkit-box-shadow: 0 9px 6px -10px #000; box-shadow: 0 9px 6px -10px #000; min-width: 20%; max-width: 80%; min-height: 20%; max-height: 80%; resize: both;
}
.modal iframe,.modal figure img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%;
}
.modal figcaption { z-index: 99999; position: absolute; bottom: 0; left: 0; width: 100%; padding: 0.3em;
}
#close{ width:32px; height:32px; display:inline-block; text-align:center; line-height:28px; text-decoration:none; cursor:pointer; margin-top:0; margin-left:0; position:absolute; top:0; right:0; z-index: 99999; font-size: 2em; font-family: "lucida console",serif,monospace;
}
/* Accordion
------------------------*/
a[data-set="open"]:after { position: absolute; right: 0.5em; margin: 0; outline: none; content: "▼"; padding: 3px; width: 16px; height: 16px; border-radius: 100%; text-align: center; line-height: 1em; font-weight: bold; border: 2px solid #FFF; font-family: "arial black"; top: 0.5em;
}
a[data-set="close"]:after { position: absolute; right: 0.5em; top: 0.5em; margin: 0; outline: none; content: "▲"; padding: 3px; width: 16px; height: 16px; border-radius: 100%; text-align: center; line-height: 0.8em; font-weight: bold; border: 2px solid #FFF; font-family: "arial black";
}
.accordion-open{ display:block!important;
}
.box-accordion{ width:100%; display:block; position:relative; clear: both;
}
.box-accordion ul{ list-style:none; margin:0; padding:0;
}
.accordion{ display:none; padding:0.5em;
}
.box-accordion ul li a{ text-decoration:none; display:block; padding:10px; position: relative;
}
.box-accordion{ padding:4px;
}
/* Tabs
------------------------*/
.tabs{ width:100%; display:block;
}
.tabs .tab{ display:none; height:auto;
}
.tabs .tab-active{ display:inline-block;
}
.tabs .tab-open{ display:block; padding:10px;
}
.tabs ul{ list-style-type:none; margin:0; padding:0;
}
.tabs ul li{ display:inline-block; margin:0; padding:0;
}
.tabs ul li a{ text-decoration:none; padding:9px; display:block; border-radius: 4px 4px 0 0;
}
.tabs ul li.tab-active a{ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0); background-image:-webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(40%,rgba(0,0,0,.05)),to(rgba(0,0,0,.1))); background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1)); background-image:-moz-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1)); background-image:-ms-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1)); background-image:-o-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1)); background-image: linear-gradient(rgba(250, 250, 250, 0.21),rgba(211, 211, 211, 0.27) 40%,rgba(241, 241, 241, 0.28));
}
Biru Css framework - Script Codes JS Codes
;(function($){ 'use strict'; // define app var app; if (typeof app === 'undefined') app = {}; app.plug = { // ini app init: function() { this.getTopFn(); this.getActions(); }, mobilecheck: function () { var check = false; (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true;})(navigator.userAgent||navigator.vendor||window.opera); return check; }, // make active links getActive_links: function(){ $('.menu_link').on(this.mobilecheck() ? 'touchstart' : 'click',function(){ $('.active').removeClass('active'); $(this).addClass('active'); }); }, // scroll to top getTopFn: function(){ $(window).scroll(function(){ var scrl = $(window).scrollTop(); if (scrl > 350){$('.toTop').slideDown();} else{$('.toTop').slideUp();} }); $('[data-fn="top"]').on(this.mobilecheck() ? 'touchstart' : 'click',function(){ $("html, body").animate({ scrollTop: 0 },500); return false; }); }, getActions: function(){ // Stiker fn $(window).scroll(function(){ var thisTop = $(window).scrollTop(); if(thisTop <= 0){ $('[data-fn="sticker"]').css({opacity:0}).animate({ top:0 },100,function(){ $(this).css({ position:'relative', opacity:1 }); }); }else{ $('[data-fn="sticker"]').css({position:'absolute'}).animate({ top:thisTop, width:'100%', zIndex: 1000 },100); } }); // menu mobile // clone nav into mobile var nav = $('.menu').html(); $('#menu_mobile').html(nav); // get active links app.plug.getActive_links(); $('#toggle_nav').on(this.mobilecheck() ? 'touchstart' : 'click',function() { $(this).toggleClass('on'); $('#menu_mobile').slideToggle(); }); // tabs $('[data-fn="tabs"]') .on(this.mobilecheck() ? 'touchstart' : 'click',function(e){ e.preventDefault(); $(this).parent() .addClass('tab-active') .siblings() .removeClass('tab-active'); $('#'+ $(this).data('open')) .addClass('tab-open') .siblings() .removeClass('tab-open'); }); // accordion // init $('[data-fn="accordion"]').attr('data-set','open'); $('[data-fn="accordion"]') .on(this.mobilecheck() ? 'touchstart' : 'click',function(e){ e.preventDefault(); var open = $(this).data('open'); if($('#'+open).hasClass('accordion-open')){ $('#'+open).removeClass('accordion-open'); $(this).attr('data-set','open'); }else{ $('#'+open) .addClass('accordion-open') .parent() .removeClass('accordion-open'); $(this).attr('data-set','close'); } }); // modal $('[data-fn="text"]').on(this.mobilecheck() ? 'touchstart' : 'click',function(e){ e.preventDefault(); $('.overlay').css('display','block'); $('body').css('overflow','hidden'); $('.modal').animate({ left:0 },1000); $('.modal').html( app.plug.getTextTemplate($(this).data('get')) ); }); $('[data-fn="img"]').on(this.mobilecheck() ? 'touchstart' : 'click',function(e){ e.preventDefault(); $('.overlay').css('display','block'); $('body').css('overflow','hidden'); $('.modal').animate({ left:0 },1000); $('.modal').html( app.plug.getImgTemplate($(this).data('get'),$(this).attr('title')) ); }); $('.overlay,#close') .on(this.mobilecheck() ? 'touchstart' : 'click',function(e){ e.preventDefault(); $('.modal').animate({ left:'-200%' },1000,function(){ $('.overlay').css('display','none'); $('body').css('overflow','auto'); }); }); }, // templates modal getImgTemplate: function(img,title){ var html = '<buttom id="close">x</buttom>' + '<img class="tumb" src="' + img + '" alr="'+ title + '"/>'; return html; }, getTextTemplate: function(text){ var html = '<buttom id="close" class="b-alizarin c-clouds">x</buttom>' + '<p>' + text + '</p>'; return html; } }; $(document).ready(function(){ app.plug.init(); });
})(jQuery);
| Developer | Moncho Varela |
| Username | nakome |
| Uploaded | July 07, 2022 |
| Rating | 4.5 |
| Size | 22,756 Kb |
| Views | 52,624 |
Do you need developer help for Biru Css framework?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Moncho Varela (nakome) Script Codes
| Name | Size |
| Captcha Colors experiment | 4,057 Kb |
| Get color on click | 29,575 Kb |
| Simply Redirect to | 1,989 Kb |
| How to make spanish tortilla | 3,133 Kb |
| Data uri converter | 4,979 Kb |
| Another webSQL | 6,565 Kb |
| Responsive table with json data. | 4,802 Kb |
| A Pen by Moncho Varela | 7,581 Kb |
| Welcome | 6,076 Kb |
| Filter divs only Javascript | 2,733 Kb |
Create amazing blog posts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Simple DevTools | Deegill | 2,511 Kb |
| Week7 replicate | Hwcasis | 1,620 Kb |
| Shopping List | Markmurray | 6,015 Kb |
| Mini Profile | Frytyler | 3,828 Kb |
| Addthis_button | Esambino | 1,691 Kb |
| Tail rose iris lined | Kbrtrm | 1,846 Kb |
| Ball Physics | Getsetbro | 3,149 Kb |
| Background-blend-mode Test | 0x04 | 4,744 Kb |
| Vanilla modal window | Jasonhowmans | 3,554 Kb |
| P1 | Vivi_Lai | 1,533 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!