<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 ---------->
<!-- All the files that are required -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link href='http://www.cssscript.com/demo/pure-css-switches-for-checkbox-and-radio-inputs/dist/rb-switcher.min.css' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- Where all the magic happens -->
<!-- LOGIN FORM -->
<div class="text-center wrapper" style="padding:50px 0">
<p></p>
<!-- Main Form -->
<div class="login-form-1">
<form id="login-form" class="text-left">
<div class="login-form-main-message"></div>
<div class="main-login-form">
<div class="login-group">
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Username</label>
</div>
<div class="group">
<input type="password" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Password</label>
</div>
<button type="submit" class="login-button"><span id="spinning" class="glyphicon hidden glyphicon-refresh glyphicon-refresh-animate"></span> <i id="arrow" class="fa fa-chevron-right"></i></button>
<div class="form-group login-group-checkbox text-right">
<p>forgot your password? <a href="#">click here</a></p>
<small class="text-left">Remember me </small>
<label class="rb-switcher">
<input type="checkbox" name="" id="" value="">
<i></i>
</label>
</div>
</div>
</div>
<div class="etc-login-form">
<div class="pull-right"><img src="http://www.anmocars.com/Content/images/carboss/footertext.png"/></div>
</div>
</form>
</div>
<!-- end:Main Form -->
</div>
/*------------------------------------------------------------------
[Master Stylesheet]
Project : Aether
Version : 1.0
Last change : 2015/03/27
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]
1. General Structure
2. Anchor Link
3. Text Outside the Box
4. Main Form
5. Login Button
6. Form Invalid
7. Form - Main Message
8. Custom Checkbox & Radio
9. Misc
-------------------------------------------------------------------*/
/*=== 1. General Structure ===*/
html,
body {
background: #efefef;
padding: 10px;
font-family: 'Varela Round';
overflow:hidden;
}
.wrapper{
background-image: url("https://source.unsplash.com/category/nature");
background-position: top;
background-repeat:no-repeat;
background-size:cover;
position: absolute;
height:100%;
left: 0;
width: 100%;
}
/*=== 2. Anchor Link ===*/
a {
color: #aaaaaa;
transition: all ease-in-out 200ms;
}
a:hover {
color: #333333;
text-decoration: none;
}
/*=== 3. Text Outside the Box ===*/
.etc-login-form {
color: #919191;
padding: 10px 20px;
}
.etc-login-form p {
margin-bottom: 5px;
}
/*=== 4. Main Form ===*/
.login-form-1 {
padding: 30px;
max-width: 500px;
border-radius: 0px 0px 5px 5px;
display: inline-block;
right: 20px;
position: absolute;
top: 0;
}
.main-login-form {
position: relative;
}
.login-form-1 .form-control {
border: 0;
box-shadow: 0 0 0;
border-radius: 0;
color: #555555;
padding: 7px 0;
font-weight: bold;
height:auto;
}
.login-form-1 .form-control::-webkit-input-placeholder {
color: #999999;
}
.login-form-1 .form-control:-moz-placeholder,
.login-form-1 .form-control::-moz-placeholder,
.login-form-1 .form-control:-ms-input-placeholder {
color: #999999;
}
.login-form-1 .form-group {
margin-bottom: 0;
border-bottom: 2px solid #efefef;
padding-right: 20px;
position: relative;
}
.login-form-1 .form-group:last-child {
border-bottom: 0;
}
.login-group {
background: rgba(128, 128, 128, 0.62);
box-shadow: 1px 1px 50px rgba(128, 128, 128, 0.36);
color: #999999;
border-radius: 8px;
padding: 10px 20px;
overflow: hidden;
}
.login-group-checkbox {
padding: 5px 0;
}
.login-group-checkbox p {
padding: 5px 0;
color: black;
}
.login-group-checkbox a {
padding: 5px 0;
color: white;
}
.login-group-checkbox i{
margin-top:10px;
}
.login-group-checkbox small{
position: relative;
top: -7px;
color:#000;
}
/*=== 5. Login Button ===*/
.login-form-1 .login-button {
position: absolute;
right: -25px;
top: 85px;
background: #ffffff;
color: #999999;
padding: 11px 0;
width: 50px;
height: 50px;
margin-top: -25px;
border: 5px solid #efefef;
border-radius: 50%;
transition: all ease-in-out 500ms;
}
.login-form-1 .login-button:hover {
color: #555555;
transform: rotate(450deg);
}
.login-form-1 .login-button.clicked {
color: #555555;
}
.login-form-1 .login-button.clicked:hover {
transform: none;
}
.login-form-1 .login-button.clicked.success {
color: #2ecc71;
}
.login-form-1 .login-button.clicked.error {
color: #e74c3c;
}
/*=== 6. Form Invalid ===*/
label.form-invalid {
position: absolute;
top: 0;
right: 0;
z-index: 5;
display: block;
margin-top: -25px;
padding: 7px 9px;
background: #777777;
color: #ffffff;
border-radius: 5px;
font-weight: bold;
font-size: 11px;
}
label.form-invalid:after {
top: 100%;
right: 10px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-top-color: #777777;
border-width: 6px;
}
/*=== 7. Form - Main Message ===*/
.login-form-main-message {
background: #ffffff;
color: #999999;
border-left: 3px solid transparent;
border-radius: 3px;
margin-bottom: 8px;
font-weight: bold;
height: 0;
padding: 0 20px 0 17px;
opacity: 0;
transition: all ease-in-out 200ms;
}
.login-form-main-message.show {
height: auto;
opacity: 1;
padding: 10px 20px 10px 17px;
}
.login-form-main-message.success {
border-left-color: #2ecc71;
}
.login-form-main-message.error {
border-left-color: #e74c3c;
}
/*=== 8. Custom Checkbox & Radio ===*/
/* Base for label styling */
/* hover style just for information */
/*=== 9. Misc ===*/
.logo {
padding: 15px 0;
font-size: 25px;
color: #FFFFFF;
font-weight: bold;
max-width: 400px;
margin: 0 auto;
background-color:#F3424C;
}
/*New Login*/
/* form starting stylings ------------------------------- */
.group {
position:relative;
margin: 20px 0;
}
.group input {
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
width:300px;
border:none;
border-bottom:1px solid #757575;
background-color: rgba(243, 243, 243, 0.48);
}
.group input:focus { outline:none; }
/* LABEL ======================================= */
.group label {
color:#000;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
.group input:focus ~ label, input:valid ~ label {
top:-20px;
font-size:14px;
color:#000;
}
/* BOTTOM BARS ================================= */
.group .bar { position:relative; display:block; width:300px; }
.group .bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:#66962A;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.group .bar:before {
left:50%;
}
.group .bar:after {
right:50%;
}
/* active state */
.group input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
}
/* HIGHLIGHTER ================================== */
.group .highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
.group input:focus ~ .highlight {
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
@keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
/*Submit Button*/
.glyphicon-refresh-animate {
-animation: spin .7s infinite linear;
-webkit-animation: spin2 .7s infinite linear;
}
@-webkit-keyframes spin2 {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}
@keyframes spin {
from { transform: scale(1) rotate(0deg);}
to { transform: scale(1) rotate(360deg);}
}
.rb-switcher i{
box-shadow: inset 0 0 1px rgb(0, 0, 0);
}
.rb-switcher :checked+i {
box-shadow: inset 0 0 1px rgba(0,0,0,0.5),inset 0 0 40px #6cbd2f !important;
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.5),inset 0 0 40px #6cbd2f !important;
}
$(function(){
$(' button').click(function() {
$("#spinning").toggleClass('hidden');
$("#arrow").toggleClass('hidden');
//$(this).toggleClass('glyphicon');
});
});
var quotes=new Array()
//change the quotes if desired. Add/ delete additional quotes as desired.
quotes[0]='There are some people who live in a dream world, and there are some who face reality; and then there are those who turn one into the other. <i>-By Douglas Everett</i>'
quotes[1]='Whether you think you can or whether you think you can\'t, you\'re right! <i>-Henry Ford</i>'
quotes[2]='I know of no more encouraging fact than the unquestionable ability of man to elevate his life by conscious endeavor. <i>-Henry David Thoreau</i>'
quotes[3]='Do not let what you cannot do interfere with what you can do. <i>-John Wooden</i>'
quotes[4]='Accept everything about yourself - I mean everything, You are you and that is the beginning and the end - no apologies, no regrets. <i>-Clark Moustakas</i>'
quotes[5]='We must accept life for what it actually is - a challenge to our quality without which we should never know of what stuff we are made, or grow to our full stature. <i>-Ida R. Wylie</i>'
quotes[6]='High achievement always takes place in the framework of high expectation. <i>-Jack Kinder</i>'
quotes[7]='The measure of a man is the way he bears up under misfortune. <i>-Plutarch</i>'
quotes[8]='Don\'t wait for your ship to come in, swim out to it. <i>-Anon</i>'
quotes[9]='As I grow older, I pay less attention to what men say. I just watch what they do. <i>-Andrew Carnegie</i>'
quotes[10]='No steam or gas ever drives anything until it is confined. No Niagara is ever turned into light and power until it is tunneled. No life ever grows until it is focused, dedicated, disciplined. <i>-Harry Emerson Fosdick</i>'
quotes[11]='The words printed here are concepts. You must go through the experiences. <i>-Carl Frederick</i>'
quotes[12]='Man cannot discover new oceans unless he has the courage to lose sight of the shore. <i>-Andre Gide</i>'
quotes[13]='The wise man does at once what the fool does finally. <i>-Baltasar Gracian</i>'
quotes[14]='The world has the habit of making room for the man whose actions show that he knows where he is going. <i>-Napoleon Hill</i>'
quotes[15]='Success seems to be connected with action. Successful men keep moving. They make mistakes, but they don\'t quit. <i>-Conrad Hilton</i>'
quotes[16]='Do the things you know, and you shall learn the truth you need to know. <i>-George Macdonald</i>'
quotes[17]='I have never heard anything about the resolutions of the apostles, but a good deal about their acts. <i>-Horace Mann</i>'
quotes[18]='Let us not be content to wait and see what will happen, but give us the determination to make the right things happen. <i>-Peter Marshall</i>'
quotes[19]='I hear and I forget, I see and I remember. I do and I understand. <i>-Chinese Proverb</i>'
quotes[20]='One may walk over the highest mountain one step at a time. <i>-John Wanamaker</i>'
quotes[21]='Every action is either strong or weak, and when every action is strong we are successful. <i>-Wallace D. Wattles</i>'
quotes[22]='If we do what is necessary, all the odds are in our favor. <i>-Henry Kissinger</i>'
quotes[23]='Little minds are tamed and subdued by misfortune; but great minds rise above them. <i>-Washington Irving</i>'
quotes[24]='When an affliction happens to you, you either let it defeat you, or you defeat it... <i>-Rosalind Russell</i>'
quotes[25]='There\'s a basic human weakness inherent in all people which tempts them to want what they can\'t have and not want what is readily available to them. <i>-Robert J. Ringer</i>'
quotes[26]='If there is something to gain and nothing to lose by asking, by all means ask! <i>-W. Clement Stone</i>'
quotes[27]='It\'s not the situation ... It\'s your reaction to the situation <i>-Robert Conklin</i>'
quotes[28]='Life at any time can become difficult: life at any time can become easy. It all depends upon how one adjusts oneself to life. <i>-Morarji Desai</i>'
quotes[29]='What happens is not as important as how you react to what happens. <i>-Thaddeus Golas</i>'
quotes[30]='To hell with circumstances; I create opportunities. <i>-Bruce Lee</i>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
