Biru framework ready

Developer
Julien Lepoivre
Size
18,739 Kb
Views
14,168
  1. Biru framework ready Previews
  2. Biru framework ready HTML Codes
  3. Biru framework ready CSS Codes
  4. Biru framework ready JS Codes

How do I make an biru framework ready?

What is a biru framework ready? How do you make a biru framework ready? This script and codes were developed by Julien Lepoivre on 02 October 2022, Sunday.

Biru framework ready Previews
IQ Test

Biru framework ready - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>biru framework ready</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(https://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 https://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> <h1 style="text-align:center; margin-top:10%;">BIRU FRAMEWORK<br>READY TO USE</h1>
<h2 style="text-align:center; margin-top:10%;">you can use this framework simply</h2> <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 framework ready - Script Codes CSS Codes

/* = For this demo
________________________*/
@import url(https://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 https://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 framework ready - 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);
Biru framework ready - Script Codes
Biru framework ready - Script Codes
Home Page Home
Developer Julien Lepoivre
Username BigPepper
Uploaded October 02, 2022
Rating 3
Size 18,739 Kb
Views 14,168
Do you need developer help for Biru framework ready?

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!

Julien Lepoivre (BigPepper) Script Codes
Name
Pure CSS Facebook IOS ICON
BIGPEPPER THEME WIP
CSS3 Working Clock
Hello Pepper Plane
Bach.js
Red.
RESPONSIVE SCREENS
Realtime Delaunay Triangulation
Made For Codepen
POST-IT website
Create amazing love letters 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!