<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Navigation -->
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
<a id="to-top" class="btn btn-lg btn-dark" href="#top">
<span class="sr-only">Toggle to Top Navigation</span>
<i class="fa fa-chevron-up"></i>
</a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-danger pull-right hidden-md hidden-lg toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand">
<a href="#top">Bootstrap <strong>Hover SidNav</strong></a>
</li>
<li>
<a href="#top" title="Go to Top">Home</a>
</li>
<li>
<a href="#" title="Go to About Us section">About</a>
</li>
<li>
<a href="#" title="Navigate to Jonathan Adcox IT Resume">Resume</a>
</li>
<li>
<a href="#" title="Navigate to 'Our Services' section">Skills</a>
</li>
<!-- Future Development
<li>
<a href="#portfolio">Portfolio</a>
</li> -->
<li>
<a href="#" title="Our Blog">Blog</a>
</li>
<li>
<a data-href="#" data-href="#collapseTwo" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo" style="cursor:pointer;">Contact</a>
</li>
<li>
<a data-toggle="modal" data-href="#loginModal" data-target="#loginModal" style="cursor:pointer;"> Hosting</a>
</li>
</ul>
</nav>
<div class="container">
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
<div class="modal-dialog modal-default">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Login to Hosting Portal - Control Panel</h3>
</div>
<div class="modal-body">
<article class="container-form center-block">
<!-- Form Content HERE! -->
<form method="post" accept-charset="utf-8" autocomplete="off" role="form" class="form-horizontal" action="https://secure.yourwebhosting.com/secureLogin" enctype="application/x-www-form-urlencoded">
<fieldset>
<input type='hidden' name='__token_timestamp__' value='1426572610'>
<input type='hidden' name='__token_val__' value='4d96cad055fac46518825357fcb49390'>
<input type="hidden" name="destination" value="http://www.yourwebhosting.com/controlpanel/index.bml">
<!-- Name input-->
<div class="form-group">
<label class="sr-only" for="credential_0">Username: </label>
<div class="col-xs-12">
<input id="credential_0" name="credential_0" type="text" placeholder="Your Username" class="form-control">
</div>
</div>
<!-- Email input-->
<div class="form-group">
<label class="sr-only" for="credential_1">Password: </label>
<div class="col-xs-12">
<input id="email" type="password" name="credential_1" value="" placeholder="Your Password" class="form-control">
</div>
</div>
<!-- Form actions -->
<div class="form-group pull-right">
<div class="col-md-12 text-right">
<button type="submit" name="submit" value="Sign In" class="btn btn-lg">Submit</button>
</div>
</div>
</fieldset>
</form>
</article>
</div>
<div class="modal-footer">
Login Problems?
<button type="submit" class="btn btn-dark" data-dismiss="modal" data-href="#collapseTwo" data-toggle="collapse" data-target="#collapseTwo" style="cursor:pointer;">Contact Me</button>
</div>
</div>
</div>
</div>
</div>
<aside id="accordion" class="social text-vertical-center">
<div class="accordion-social">
<a class="btn btn-dark btn-lg accordion-toggle" title="Follow Us" role="tab" id="social-collapse" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"></a>
<ul class="panel-collapse collapse in nav nav-stacked" role="tabpanel" aria-labelledby="social-collapse" id="collapseOne">
<li><a href="https://www.facebook.com/soldierupdesigns" target="_blank"><i class="fa fa-lg fa-facebook"></i></a></li>
<li><a href="https://twitter.com/soldierupdesign" target="_blank"><i class="fa fa-lg fa-twitter"></i></a></li>
<li><a href="https://www.plus.google.com/+soldierupdesigns" target="_blank"><i class="fa fa-lg fa-google-plus"></i></a></li>
<li><a href="https://github.com/blayderunner123" target="_blank"><i class="fa fa-lg fa-github"></i></a></li>
<li><a href="https://linkedin.com/in/blayderunner123" target="_blank"><i class="fa fa-lg fa-linkedin"></i></a></li>
<li><a href="skype:live:soldierupdesigns?call"><i class="fa fa-lg fa-skype" target="_blank"></i></a></li>
<li><a href="http://stackexchange.com/users/4992378/blayderunner123" target="_blank"><i class="fa fa-lg fa-stack-exchange"></i></a></li>
</ul>
</div>
</aside>
<div class="container">
<header class="page-header">
<h1 class="page-title" title="Bootstrap Hover Sivenav">Bootstrap Hover Sivenav</h1>
<small> <i class="fa fa-clock-o"></i> Last Updated on: <time>Sunday, August 23, 2015</time></small>
</header>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-offset-1 col-md-10 col-lg-offset-2 col-lg-8">
<div class="panel panel-default">
<div class="bs-callout bs-callout-danger">
<h4>First we need to create the Sidebar, To-top and Social buttons framework</h4>
<p>
First we need to define the buttons we are later going to code for the sidebar navigation this will be the foundation that we reference to so remember what you name them.
</p>
<p>
<b>1. </b> To get a basic buttons we just add class <span class="nocode">.btn</span> to the <code><a></code> element.<br>
<b>1.a. </b> we also need to add the <span class="nocode">.toggle</span> class to the sidebar to fire later during a hover event.
<blockquote>
<b>Note: </b> I have added custom buttons CSS called <span class="nocode">.btn-dark</span> which gives you that <span class="nocode">.btn-inverse</span> look.
</blockquote>
<pre class="prettyprint linenums:1">
<a href="#" class="btn btn-dark btn-lg toggle">
<span class="sr-only">Toggle Sidebar Navigation</span>
<i class="fa fa-bars"></i>
</a>
<a class="btn btn-lg btn-dark" href="#top">
<span class="sr-only">Toggle to Top Navigation</span>
<i class="fa fa-chevron-up"></i>
</a></pre>
</p>
<p> </p>
</div>
</div>
<div class="panel panel-default">
<div class="bs-callout bs-callout-danger">
<p>
<b>2. </b> next we need to add the id elements to reference in the jQuery they are: <span class="nocode">menu-toggle</span>, and <span class="nocode">to-top</span>.<br>
<blockquote>
<b>Note: </b> I have added custom buttons CSS called <span class="nocode">.btn-dark</span> which gives you that <span class="nocode">.btn-inverse</span> look.
</blockquote>
<pre class="prettyprint linenums:1">
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
<a id="to-top" class="btn btn-lg btn-dark" href="#top">
<span class="sr-only">Toggle to Top Navigation</span>
<i class="fa fa-chevron-up"></i>
</a></pre>
</p>
<p>
In this example we are going to add the <span class="nocode">.panel-default</span> for Bootstrap default panel styling.
</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
@charset "utf-8";
*, *: before, *:after {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
body {
width: 100%;
height: 100%;
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
overflow-x: hidden;
}
html {
width: 100%;
height: 100%;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
right: 0;
width: 250px;
height: 100%;
margin-right: -250px;
overflow-y: auto;
background: #222;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
position: relative;
line-height: 20px;
display: inline-block;
width: 100%;
font-size: 110%;
font-weight: 800;
text-transform: uppercase;
outline: none;
}
.sidebar-nav li:before {
content: '';
position: absolute;
top: 0;
right: 0;
z-index: -1;
height: 100%;
width: 3px;
background-color: #1c1c1c;
-webkit-transition: width .4s ease-in-out;
-moz-transition: width .4s ease-in-out;
-ms-transition: width .4s ease-in-out;
transition: width .4s ease-in-out;
}
.sidebar-nav li:first-child a {
color: #fff;
background-color: #1a1a1a;
}
.sidebar-nav li:nth-child(2):before {
color: #fff;
background-color: #1a1a1a;
}
.sidebar-nav li:nth-child(3):before {
background-color: #ec1b5a;
}
.sidebar-nav li:nth-child(4):before {
background-color: #79aefe;
}
.sidebar-nav li:nth-child(5):before {
background-color: #314190;
}
.sidebar-nav li:nth-child(6):before {
background-color: #279636;
}
.sidebar-nav li:nth-child(7):before {
background-color: #7d5d81;
}
.sidebar-nav li:nth-child(8):before {
background-color: #ead24c;
}
.sidebar-nav li:nth-child(9):before {
background-color: #2d2366;
}
.sidebar-nav li:nth-child(10):before {
background-color: #35acdf;
}
.sidebar-nav li:hover:before, .sidebar-nav li.open:hover:before {
width: 100%;
-webkit-transition: width .4s ease-in-out;
-moz-transition: width .4s ease-in-out;
-ms-transition: width .4s ease-in-out;
transition: width .4s ease-in-out;
}
.sidebar-nav li a {
display: block;
color: #ddd;
text-decoration: none;
padding: 10px 15px 10px 30px;
}
.sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus {
color: #fff;
text-decoration: none;
background-color: transparent;
}
.sidebar-nav > .sidebar-brand {
height: 44px;
font-size: 18px;
line-height: 1.43;
}
.sidebar-nav .dropdown-menu {
position: relative;
width: 100%;
padding: 0;
margin: 0;
border-radius: 0;
border: none;
background-color: #222;
box-shadow: none;
}
#menu-toggle {
z-index: 801;
position: fixed;
top: 0;
right: 15px;
}
#sidebar-wrapper.active {
right: 250px;
width: 250px;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.toggle {
margin: 5px 5px 0 0;
}
#to-top {
position: fixed;
right: 1.5%;
bottom: .5%;
z-index: 799;
}
.btn-dark {
border-radius: 0;
color: #fff;
background-color: rgba(0, 0, 0, 0.4);
}
.btn-dark:hover, .btn-dark:focus, .btn-dark:active {
color: #fff;
background-color: rgba(0, 0, 0, 0.7);
}
.btn-light {
border-radius: 0;
color: #333;
background-color: rgb(255, 255, 255);
}
.btn-light:hover, .btn-light:focus, .btn-light:active {
color: #333;
background-color: rgba(255, 255, 255, 0.8);
}
.btn {
border-radius: 0px;
box-shadow: inset 0 0 0 2px #fff;
-moz-box-shadow: inset 0 0 0 2px #fff;
-webkit-box-shadow: inset 0 0 0 2px #fff;
overflow: hidden;
}
.btn-success:hover, .btn-success:focus, .btn-success.focus, .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success {
color: #fff;
background-color: #449d44;
border-color: #398439;
box-shadow: inset 0 0 0 2px #398439;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger.focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
box-shadow: inset 0 0 0 2px #ac2925;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
color: #fff;
background-color: #286090;
border-color: #204d74;
box-shadow: inset 0 0 0 2px #204d74;
}
.btn-default {
color: #333;
background-color: #efefef;
border-color: #ccc;
}
.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
box-shadow: inset 0 0 0 5px #adadad;
}
.btn-inverse {
background-color: #222;
border-color: #080808;
color: #9d9d9d;
}
.btn-inverse:hover, .btn-inverse:focus, .btn-inverse.focus, .btn-inverse:active, .btn-inverse.active, .open > .dropdown-toggle.btn-inverse {
color: #fff;
background-color: #080808;
border-color: #333;
box-shadow: inset 0 0 0 2px #333;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger.focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
box-shadow: inset 0 0 0 2px #ac2925;
}
.btn-danger.active, .btn-danger.focus, .btn-danger:active, .btn-danger:focus, .btn-danger:hover, .open>.dropdown-toggle.btn-danger {
color: #c9302c;
background-color: #fff;
box-shadow: inset 0 0 0 2px #c9302c;
border-color: #ac2925;
}
.panel {
border-radius: 0;
margin-top: 0;
}
/*!
* Soldier-up Designs - Soldier-up Designs Custom Bootstrap Accordion Form (https://soldierupdesigns.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
@charset "UTF-8";
.accordion{
width:50%;
position:fixed;
bottom:0;
margin-bottom:0;
padding-bottom:0;
}
.contact-panel{
border-radius:0;
background-color: #d9534f;
border-color: #d43f3a;
margin-bottom:0;
position:fixed;
bottom:0;
width:100%;
}
.accordion label{
color:#fff;
}
.accordion input{
border-radius:0;
}
.panel-heading,
.panel-heading:hover,
.panel-heading:focus,
.panel-heading.focus,
.panel-heading:active,
.panel-heading.active{
cursor:pointer;
background-color: #c9302c;
border-color: #ac2925;
outline:none;
}
.accordion-toggle{
text-align:center;
}
.accordion-toggle span:after{
/* symbol for "opening" panels */
font-family: 'FontAwesome';
/* essential for enabling glyphicon */
content:"\f078";
position:absolute;
top:0;
bottom:0;
right:5%;
color: white;
text-align:right;
float:right;
vertical-align:middle;
margin-top:0;
font-weight:700;
font-size:120%;
}
.collapsed span:after{
/* symbol for "collapsed" panels */
content:"\f077";
}
.contact-panel{
border-radius:0;
background-color: #d9534f;
border-color: #d43f3a;
margin-bottom:0;
position:fixed;
bottom:0;
width:100%;
vertical-align:middle;
}
.btn-dark{
border-radius: 0;
color: #fff;
background-color: rgba(0,0,0,0.4);
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active{
color: #fff;
background-color: rgba(0,0,0,0.7);
}
@media(min-width: 768px){
.contact-panel{
width:50%;
}
}
.social {
z-index: 801;
position: fixed;
top: .5%;
left: 0;
padding: 0;
margin: 0;
font-size: 100%}
.social ul {
background: #222;
}
.social ul li {
list-style: none outside none;
display: block;
background: #222;
padding: 0;
margin: 0;
}
.nav>li>a {
position: relative;
display: block;
padding: 0%;
margin: 0;
}
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color: #222;
}
.social i {
width: 40px;
height: 40px;
color: #FFF;
background-color: #222;
font-size: 22px;
text-align: center;
padding-top: 12px;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.social .fa-facebook:hover {
background: #4060A5;
border: 1px solid #4060A5;
}
.social .fa-twitter:hover {
background: #00ABE3;
border: 1px solid #00ABE3;
}
.social .fa-google-plus:hover {
background: #e64522;
border: 1px solid #e64522;
}
.social .fa-github:hover {
background: #343434;
border: 1px solid #343434;
}
.social .fa-linkedin:hover {
background: #0094BC;
border: 1px solid #0094BC;
}
.social .fa-stack-overflow:hover {
background: #FEA501;
border: 1px solid #FEA501;
}
.social .fa-skype:hover {
background: #00C6FF;
border: 1px solid #00C6FF;
}
.social .fa-stack-exchange:hover {
background: #4D86C9;
border: 1px solid #4D86C9;
}
.social .fa-rss:hover {
background: #e88845;
border: 1px solid #e88845;
}
#social-collapse:after {
font-family: 'FontAwesome';
content: "\f068";
float: none;
position: relative;
color: white;
}
#social-collapse.collapsed:after {
content: "\f067";
}
ol.linenums{
counter-reset:linenumber;
}
ol.linenums li{
list-style-type:none;
counter-increment:linenumber;
}
ol.linenums li:before{
content: counter(linenumber);
float:left;
margin-left:-4em;
text-align:right;
width:3em;
}
.mt {
margin-top: 2%;
}
.text-vertical-center {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text-vertical-center h1 {
margin: 0;
padding: 0;
font-size: 4.5em;
font-weight: 700;
}
section {
padding-bottom: 5%;
}
.bg-inverse {
color: #FFF;
background-color: #333;
}
.centered {
text-align: center;
}
.mt {
margin-top: 2%;
}
.text-vertical-center {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text-vertical-center h1 {
margin: 0;
padding: 0;
font-size: 4.5em;
font-weight: 700;
}
hr.small {
max-width: 100px;
}
.page-header{
text-align: center;
}
/*page styling*/
.bs-callout {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #eee;
border-image: none;
border-radius: 3px;
border-style: solid;
border-width: 1px 1px 1px 5px;
margin-bottom: 5px;
padding: 20px;
}
.bs-callout:last-child {
margin-bottom: 0px;
}
.bs-callout h4,
.bs-callout h5 {
margin-bottom: 10px;
margin-top: 0;
font-weight: 600;
}
.bs-callout-danger {
border-left-color: #d9534f;
}
.bs-callout-danger h4,
.bs-callout-danger h5{
color: #d9534f;
}
.header-title {
color: #fff;
}
.title-thin {
font-weight: 300;
}
.service-item {
margin-bottom: 30px;
}
/*
========================
Social Accordion Styling
========================
*/
.nav > li > a {
position: relative;
display: block;
padding: 0;
margin: 0;
}
.nav > li > a:focus, .nav > li > a:hover {
text-decoration: none;
background-color: #222;
}
/*
===============================
Custom Bootstrap Form Styling
===============================
*/
.nav-tabs.nav-justified {
border-bottom: 0 none;
width: 100%}
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
float: none;
}
.container-form .nav-tabs.nav-justified > li > a, .container-form .nav-tabs.nav-justified > li > a:hover, .container-form .nav-tabs.nav-justified > li > a:focus {
background: #333333;
border: 0 none;
color: #ffffff;
margin-bottom: 0;
margin-right: 0;
border-radius: 0;
padding: 6% 3%;
line-height: 1.5;
font-weight: 600;
font-size: 100%;
outline: 0 none;
}
.container-form .nav-tabs.nav-justified > .active > a, .container-form .nav-tabs.nav-justified > .active > a:hover, .container-form .nav-tabs.nav-justified > .active > a:focus {
background: #ffffff;
color: #333333;
}
.container-form .nav-tabs.nav-justified > li > a:hover, .container-form .nav-tabs.nav-justified > li > a:focus {
background: #de2f18;
}
.tabs-login {
background: #ffffff;
border: medium none;
margin-top: -1px;
padding: 10px 30px;
}
.container-form h2 {
color: #222222;
}
.container-form {
margin: 0 auto;
padding: 2%}
.container-form h1 {
border: 2px solid #222;
background: #222;
color: #fff;
text-transform: uppercase;
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 800;
letter-spacing: 1px;
-webkit-box-shadow: inset 0 0 0 2px #fff;
-moz-box-shadow: inset 0 0 0 2px #fff;
box-shadow: inset 0 0 0 2px #fff;
}
form {
background: #d9534f;
margin-top: -2%;
width: 100%}
label {
color: #fff;
}
.form-control {
background-color: #c9302c !important;
background-image: none;
border: none;
border-radius: 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
display: block;
font-size: 14px;
height: 34px;
line-height: 1.42857;
padding: 6px 12px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;
color: #inherit !important;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-ms-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
outline: none;
}
.form-control:hover {
border-color: rgba(255, 00, 00, 0.75);
background-color: #990000 !important;
background-image: none;
color: #inherit !important;
color: #fff;
-webkit-box-shadow: 0 0 10px rgba(255, 00, 00, 0.8);
-moz-box-shadow: 0 0 10px rgba(255, 00, 00, 0.8);
box-shadow: 0 0 10px rgba(255, 00, 00, 0.8);
}
.form-control:focus {
border-color: rgba(22, 22, 22, .75);
outline: 0;
outline: thin dotted 9;
background: #fff !important;
color: #333 !important;
-webkit-box-shadow: 0 0 8px rgba(22, 22, 22, .6);
-moz-box-shadow: 0 0 8px rgba(22, 22, 22, .6);
box-shadow: 0 0 8px rgba(22, 22, 22, .6);
}
::-webkit-input-placeholder {
color: #fff !important;
font-weight: 800;
text-transform: uppercase;
}
.form-control:-moz-placeholder {
color: #fff !important;
opacity: 1;
font-weight: 800;
text-transform: uppercase;
}
::-moz-placeholder {
color: #fff !important;
opacity: 1;
font-weight: 800;
text-transform: uppercase;
}
:-ms-input-placeholder {
color: #fff !important;
font-weight: 800;
text-transform: uppercase;
}
:focus::-webkit-input-placeholder {
color: #333 !important;
font-weight: 800;
text-transform: uppercase;
}
.form-control:focus:-moz-placeholder {
color: #333 !important;
opacity: 1;
font-weight: 800;
text-transform: uppercase;
}
:focus::-moz-placeholder {
color: #333 !important;
opacity: 1;
font-weight: 800;
text-transform: uppercase;
}
:focus:-ms-input-placeholder {
color: #333 !important;
font-weight: 800;
text-transform: uppercase;
}
[type="text"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
color: #333;
}
.container-form .checkbox {
margin-top: -15px;
}
.container-form .btn {
background-color: #222222;
border-color: #222222;
color: #ffffff;
border-radius: 0;
font-size: 18px;
line-height: 1.33;
padding: 10px 16px;
width: 100%;
box-shadow: inset 0 0 0 2px #fff;
}
.container-form .btn:hover, .container-form .btn:focus {
background: #ffffff;
border-color: #ededed;
box-shadow: inset 0 0 0 2px #222;
color: #222;
-webkit-transition: background .8s ease-in-out;
-moz-transition: background .8s ease-in-out;
-ms-transition: background .8s ease-in-out;
transition: background .8s ease-in-out;
}
.nocode{
font-weight:700;
color:#444444;
}
blockquote
{
font-size: 80% !important;
page-break-inside: avoid;
border: 3px solid #fff;
width: 80%;
-webkit-box-shadow: inset 5px 0px 0px 0px #f60, 8px 8px 8px 2px #888;
-mox-box-shadow: inset 5px 0px 0px 0px #f60, 8px 8px 8px 2px #888;
-ms-box-shadow: inset 5px 0px 0px 0px #f60, 8px 8px 8px 2px #888;
box-shadow: inset 5px 0px 0px 0px #f60, 8px 8px 8px 2px #888;
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: none;
}
/*!
* Sidebar.js - Bootstrap Sidebar Hover Event toggle attribute
* onHover
* Version: v3.1.4
* LGPL v3 LICENSE INFO
* This file is part of a Sidebar Bootstrap Element. Copyright
* 2015 Soldier-up Designs - Website Development Company.
* sidebar.js is a free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
* sidebar.js is distributed as a free tool that can help you
* add a few extra dynamics to your Web Design code. However,
* this code and any associated code "IS" "WITHOUT ANY WARRANTY";
* without even the implied warranty of "MERCHANTABILITY" or
* "FITNESS FOR A PARTICULAR PURPOSE". See the GNU Lesser
* General Public License for more details.
*/
/*!
======================= Notes ===============================
* Used to close Sidebar on jQuery Element "Mouseleave" Event
* This was a pain in the Ass to create
* and to not break the rest of the jQuery
* and Bootstrap API Script ()Did that once or twice in
- Development)
========== END Crude Vocabulary (...and notes) ==============
*/
/*!
================= ^ Ranting Stops Here ^ ====================
==================== Code Starts Below ======================
*/
$(document).ready(function()
{
// Closes the sidebar menu on menu-close button click event
$("#menu-close").click(function(e) //declare the element event ...'(e)' = event (shorthand)
{
// - will not work otherwise")
$("#sidebar-wrapper").toggleClass("active"); //instead on click event toggle active CSS element
e.preventDefault(); //prevent the default action ("Do not remove as the code
/*!
======================= Notes ===============================
* see: .sidebar-wrapper.active in: style.css
==================== END Notes ==============================
*/
}); //Close 'function()'
// Open the Sidebar-wrapper on Hover
$("#menu-toggle").hover(function(e) //declare the element event ...'(e)' = event (shorthand)
{
$("#sidebar-wrapper").toggleClass("active",true); //instead on click event toggle active CSS element
e.preventDefault(); //prevent the default action ("Do not remove as the code
});
$("#menu-toggle").bind('click',function(e) //declare the element event ...'(e)' = event (shorthand)
{
$("#sidebar-wrapper").toggleClass("active",true); //instead on click event toggle active CSS element
e.preventDefault(); //prevent the default action ("Do not remove as the code
}); //Close 'function()'
$('#sidebar-wrapper').mouseleave(function(e) //declare the jQuery: mouseleave() event
// - see: ('//api.jquery.com/mouseleave/' for details)
{
/*! .toggleClass( className, state ) */
$('#sidebar-wrapper').toggleClass('active',false); /* toggleClass: Add or remove one or more classes from each element
in the set of matched elements, depending on either the class's
presence or the value of the state argument */
e.stopPropagation(); //Prevents the event from bubbling up the DOM tree
// - see: ('//api.jquery.com/event.stopPropagation/' for details)
e.preventDefault(); // Prevent the default action of the event will not be triggered
// - see: ('//api.jquery.com/event.preventDefault/' for details)
});
});
/*!
Simply:
a[href*=#]
* get all anchors (a) that contains # in href but with:
:not([href=#])
* exclude anchors with href exaclty equals to #
example:
<a href="#step1">yes</a>
<a href="page.php#step2">yes</a>
<a href="#">no</a>
* the selectors get first two anchor but it exclude the last
source: http://stackoverflow.com/questions/20947529/what-does-ahref-nothref-code-mean
*/
$(document).ready(function()
{
/* smooth scrolling for scroll to top */
$('#to-top').bind('click', function()
{
$('body,html').animate({
scrollTop: 0},
2500);
});
//Easing Scroll replace Anchor name in URL and Offset Position
$(function(){
$('a[href*=#]:not([href=#])').click(function()
{
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top -420
}, 3500, 'easeOutBounce');
return false;
}
}
});
});
});
