Bootstrap login flipper

Developer
Maksim Surguy
Size
5,319 Kb
Views
44,528
  1. Bootstrap login flipper Previews
  2. Bootstrap login flipper HTML Codes
  3. Bootstrap login flipper CSS Codes
  4. Bootstrap login flipper JS Codes

How do I make an bootstrap login flipper?

Login form flipper. What is a bootstrap login flipper? How do you make a bootstrap login flipper? This script and codes were developed by Maksim Surguy on 12 September 2022, Monday.

Bootstrap login flipper Previews
IQ Test

Bootstrap login flipper - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bootstrap login flipper</title> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script> <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! */ body {
background-image: url(http://maplist.pagodabox.com/img/cream_pixels.png);
}
.alert { padding: 8px 35px 8px 14px; margin-bottom: 20px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #fcf8e3; border: 1px solid #fbeed5; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
.alert,
.alert h4 { color: #c09853; }
.alert h4 { margin: 0; }
.alert .close { position: relative; top: -2px; right: -21px; line-height: 20px; }
.alert-success { background-color: #89d582; border-color: #87cf6f; color: #2b5e2b; }
.alert-success h4 { color: #2b5e2b; }
.alert-danger,
.alert-error { background-color: #ff9696; border-color: #ff879b; color: #aa3735; }
.alert-danger h4,
.alert-error h4 { color: #aa3735; }
.alert-info { background-color: #d9edf7; border-color: #bce8f1; color: #3a87ad; }
.alert-info h4 { color: #3a87ad; }
.btn { border-radius: 0;
}
.btn { background-image: linear-gradient(tobottom,#000,#e6e6e6);
}
.well { min-height: 20px; padding: 19px; margin-bottom: 20px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Fallback for web browsers that don't support RGBa */ background: white transparent; /* RGBa with 0.6 opacity */ background: rgba(255, 255, 255, 0.8); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FFFFFF, endColorstr=#99FFFFFF)"; }
.flippant {	transform: perspective(500px) rotateY(0deg);	-webkit-transform: perspective(500px) rotateY(0deg);	-moz-transform: perspective(500px) rotateY(0deg);	/*z-index: 200;*/
}
.flippant-back {	transform: perspective(500px) rotateY(-180deg);	-moz-transform: perspective(500px) rotateY(-180deg);	-webkit-transform: perspective(500px) rotateY(-180deg);	height: 0;	/*z-index: 200;*/
}
.flippant, .flippant-back {	transform-style: preserve-3d;	-webkit-transform-style: preserve-3d;	-moz-transform-style: preserve-3d;	backface-visibility: hidden;	-webkit-backface-visibility: hidden;	-moz-backface-visibility: hidden;
}
.flippant, .flipper {	-o-transition: all .2s ease-in-out;	-ms-transition: all .2s ease-in-out;	-moz-transition: all .2s ease-in-out;	-webkit-transition: all .2s ease-in-out;	transition: all .2s ease-in-out;
}
.flippant.flipped {	transform: perspective(500px) rotateY(180deg);	-moz-transform: perspective(500px) rotateY(180deg);	-webkit-transform: perspective(500px) rotateY(180deg);
}
.flippant-back.flipped {	transform: perspective(500px) rotateY(0deg);	-moz-transform: perspective(500px) rotateY(0deg);	-webkit-transform: perspective(500px) rotateY(0deg);
}
.flippant-modal-dark, .flippant-modal-light {	position: fixed;	margin: 0;	top: 2.5%;	left: 2.5%;	width: 95%;	height: 95%;	padding: 1em;	box-sizing: border-box;	background: rgba(0,0,0,0.7);	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.flippant-modal-dark, .flippant-modal-dark p { color: white;}
.flippant-modal-light {	background: rgba(255,255,255,0.7);	box-shadow: 3px 3px 6px rgba(0,0,0,0.1);	border-radius: 5px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <div class="row" style="margin-top:70px;"> <div class="span4 offset4"> <div class="well"> <form accept-charset="utf-8" style="margin:0;" method="POST"> <fieldset> <legend>Please sign in</legend> <div class="alert alert-block alert-danger fade in"> <button type="button" class="close" data-dismiss="alert">×</button> <p>This email is taken</p> </div> <input placeholder="E-mail" class="input-block-level" id="email" type="text" name="email"> <input placeholder="Password" class="input-block-level" id="password" type="password" name="password"> <a class="pull-right" href="#">Forgot password?</a> <label class="checkbox"> <input name="remember" type="checkbox" value="Remember Me"> Remember Me </label> <input class="btn btn-large btn-info btn-block" type="submit" value="Login"> <br> <p class="text-center"><a href="#" class="btnflip card">Need to register?</a></p> </fieldset> </form> </div> </div> </div>
</div>
<script id="register-form">
<form accept-charset="utf-8" style="margin:0;" method="POST"> <fieldset> <legend>Please Register</legend> <input placeholder="Name" class="input-block-level" id="email" type="text" name="name"> <input placeholder="E-mail" class="input-block-level" id="email" type="text" name="email"> <input placeholder="Password" class="input-block-level" id="password" type="password" name="password"> <input placeholder="Confirm Password" class="input-block-level" id="password" type="password" name="password_confirm"> <p class="clearfix"><a class="pull-right flipme" href="#">Already have an account?</a></p> <input class="btn btn-large btn-info btn-block" type="submit" value="Register"> </fieldset>
</form>
</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Bootstrap login flipper - Script Codes CSS Codes

body {
background-image: url(http://maplist.pagodabox.com/img/cream_pixels.png);
}
.alert { padding: 8px 35px 8px 14px; margin-bottom: 20px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #fcf8e3; border: 1px solid #fbeed5; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
.alert,
.alert h4 { color: #c09853; }
.alert h4 { margin: 0; }
.alert .close { position: relative; top: -2px; right: -21px; line-height: 20px; }
.alert-success { background-color: #89d582; border-color: #87cf6f; color: #2b5e2b; }
.alert-success h4 { color: #2b5e2b; }
.alert-danger,
.alert-error { background-color: #ff9696; border-color: #ff879b; color: #aa3735; }
.alert-danger h4,
.alert-error h4 { color: #aa3735; }
.alert-info { background-color: #d9edf7; border-color: #bce8f1; color: #3a87ad; }
.alert-info h4 { color: #3a87ad; }
.btn { border-radius: 0;
}
.btn { background-image: linear-gradient(tobottom,#000,#e6e6e6);
}
.well { min-height: 20px; padding: 19px; margin-bottom: 20px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Fallback for web browsers that don't support RGBa */ background: white transparent; /* RGBa with 0.6 opacity */ background: rgba(255, 255, 255, 0.8); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FFFFFF, endColorstr=#99FFFFFF)"; }
.flippant {	transform: perspective(500px) rotateY(0deg);	-webkit-transform: perspective(500px) rotateY(0deg);	-moz-transform: perspective(500px) rotateY(0deg);	/*z-index: 200;*/
}
.flippant-back {	transform: perspective(500px) rotateY(-180deg);	-moz-transform: perspective(500px) rotateY(-180deg);	-webkit-transform: perspective(500px) rotateY(-180deg);	height: 0;	/*z-index: 200;*/
}
.flippant, .flippant-back {	transform-style: preserve-3d;	-webkit-transform-style: preserve-3d;	-moz-transform-style: preserve-3d;	backface-visibility: hidden;	-webkit-backface-visibility: hidden;	-moz-backface-visibility: hidden;
}
.flippant, .flipper {	-o-transition: all .2s ease-in-out;	-ms-transition: all .2s ease-in-out;	-moz-transition: all .2s ease-in-out;	-webkit-transition: all .2s ease-in-out;	transition: all .2s ease-in-out;
}
.flippant.flipped {	transform: perspective(500px) rotateY(180deg);	-moz-transform: perspective(500px) rotateY(180deg);	-webkit-transform: perspective(500px) rotateY(180deg);
}
.flippant-back.flipped {	transform: perspective(500px) rotateY(0deg);	-moz-transform: perspective(500px) rotateY(0deg);	-webkit-transform: perspective(500px) rotateY(0deg);
}
.flippant-modal-dark, .flippant-modal-light {	position: fixed;	margin: 0;	top: 2.5%;	left: 2.5%;	width: 95%;	height: 95%;	padding: 1em;	box-sizing: border-box;	background: rgba(0,0,0,0.7);	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.flippant-modal-dark, .flippant-modal-dark p { color: white;}
.flippant-modal-light {	background: rgba(255,255,255,0.7);	box-shadow: 3px 3px 6px rgba(0,0,0,0.1);	border-radius: 5px;
}

Bootstrap login flipper - Script Codes JS Codes

// Flipant. js
!function(e){if("function"==typeof bootstrap)bootstrap("flippant",e);else if("object"==typeof exports)module.exports=e();else if("function"==typeof define&&define.amd)define(e);else if("undefined"!=typeof ses){if(!ses.ok())return;ses.makeFlippant=e}else"undefined"!=typeof window?window.flippant=e():global.flippant=e()}(function(){var define,ses,bootstrap,module,exports;return function(e,t,n){function i(n,s){if(!t[n]){if(!e[n]){var o=typeof require=="function"&&require;if(!s&&o)return o(n,!0);if(r)return r(n,!0);throw new Error("Cannot find module '"+n+"'")}var u=t[n]={exports:{}};e[n][0].call(u.exports,function(t){var r=e[n][1][t];return i(r?r:t)},u,u.exports)}return t[n].exports}var r=typeof require=="function"&&require;for(var s=0;s<n.length;s++)i(n[s]);return i}({1:[function(require,module,exports){exports.flip=flip;function flip(flipper,content,type,class_name,timeout){var position,back,style_func;timeout=timeout||400;type=type||"card";if(type==="modal"){class_name=class_name||"flippant-modal-dark";position="fixed";style_func=null_styles}if(type==="card"){class_name=class_name||"flippant-modal-light";position="absolute";style_func=card_styles}back=document.createElement("div");document.body.appendChild(back);set_styles(back,flipper,position);back.innerHTML=content;flipper.classList.add("flippant");back.classList.add("flippant-back");back.classList.add(class_name);if(position=="absolute"){style_func(back)}else{window.setTimeout(function(){style_func(back)},0)}window.setTimeout(function(){back.classList.add("flipper");back.classList.add("flipped");flipper.classList.add("flipped")},0);back.addEventListener("close",close);back.close=close;function close(){set_styles(back,flipper,position);back.classList.remove("flipped");back.classList.remove("flipped");flipper.classList.remove("flipped");window.setTimeout(function(){back.classList.remove(class_name);document.body.removeChild(back)},timeout)}return back}function set_styles(back,front,position){back.style.position=position;back.style.top=front.offsetTop+"px";back.style.left=front.offsetLeft+"px";back.style["min-height"]=front.offsetHeight+"px";back.style.width=front.offsetWidth+"px";back.style["z-index"]=9999}function null_styles(back){back.style.top=null;back.style.left=null;back.style.height=null;back.style.width=null}function card_styles(back){back.style.height="auto"}},{}]},{},[1])(1)});
var flip = flippant.flip;
var register = $('#register-form').html();
document.addEventListener('click', function(e) { if (e.target.classList.contains('btnflip')) { e.preventDefault() var flipper = e.target.parentNode.parentNode.parentNode.parentNode var back var input = '' back = flip(flipper, register) back.addEventListener('click', function(e) { if (e.target.classList.contains('flipme')) { var close_event = new CustomEvent('close') back.dispatchEvent(close_event) } }) }
})
Bootstrap login flipper - Script Codes
Bootstrap login flipper - Script Codes
Home Page Home
Developer Maksim Surguy
Username msurguy
Uploaded September 12, 2022
Rating 4
Size 5,319 Kb
Views 44,528
Do you need developer help for Bootstrap login flipper?

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!

Maksim Surguy (msurguy) Script Codes
Name
Triangle pattern generator
Polygon background generator
Avatar Blur
Lightning In JS
Magnetic particles - iOS version
Dynamic SVG poster
Sortable Grid UI JS
Mesmerizing Delaunay
Bootstrap - shop item
Ladda Bootstrap 3
Create amazing art & images 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!