<div class="container mt-25vh">
	<div class="row">
		<div class="col-sm-6 col-sm-offset-3">
			<div class="jumbotron">
				<p class="lead">Bootstrap assist based on <a href="https://dribbble.com/shots/3215607--32-Sign-up-Form-sketch" target="_blank">Luka Dadiani's rebound</a> of <a href="https://dribbble.com/shots/2290678-Daily-UI-Day-1-Sign-Up" target="_blank">Matt Rossi's dribbble</a>.</p>
<hr>
			<a data-toggle="modal" data-target="#sign-modal" class="btn btn-block btn-success">Sign Up</a>
		</div>
		</div>
	</div>
</div>

<div class="modal fade" id="sign-modal">
	<div class="modal-dialog modal-perspective modal-sm">
		<div class="modal-content modal-style">
			<div class="modal-header text-white border-0">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="text-white" aria-hidden="true">&times;</span></button>
				<h6 class="text-white">Create Your Account</h6>
			</div>
			<div class="modal-body pt-0 pb-0">
				<form class="form-style">
					<div class="form-group has-success">
						<label class="text-uppercase control-label">Full Name</label>
							<input class="form-control" placeholder="Enter your full name here">
					</div>
					<div class="form-group has-success">
						<label class="text-uppercase control-label">Email</label>
							<input type="email" class="form-control" placeholder="Your personal email here">
					</div>
					<div class="form-group has-success">
						<label class="text-uppercase control-label">Password</label>
							<input type="password" class="form-control" placeholder="Your 8-character mixed-case password">
					</div>
					<div class="form-group has-success">
						<label class="text-uppercase control-label">Repeat Password</label>
							<input type="password" class="form-control" placeholder="Confirm what you typed above">
					</div>
					<div class="checkbox">
						<label class="font-11px text-muted">
							<input type="checkbox">Agree to the terms and conditions</label>
					</div>
				</form>
			</div>
			<div class="modal-footer border-0">
				<a data-dismiss="modal" data-target="#sign-modal" class="text-white btn btn-link">Cancel</a>
				<a class="btn btn-success">Sign Up</a>
			</div>
		</div>
	</div>
</div>

.html-style body {
	background-image:url("https://unsplash.it/3000/2000?image=1050");
	background-position:center top;
	background-size:cover;
	background-repeat:no-repeat;
	
	min-height:100vh;
	
	background-color: lightgreen;
	background-blend-mode: multiply;

	font-family:"Fira Sans";
	font-weight:400;
}

.border-0 {
	border:none;
}

.modal-style {
	background-image: url("https://unsplash.it/3000/2000?image=1050");
	background-position: center top;
	background-size: cover;
	
	background-color: lightgreen;
  background-blend-mode: multiply;
	
	border-radius:6px;
}

.margin-0 {
	margin:0;
}

.modal-perspective {
	perspective:1000px;
}

.form-style {
	margin-left:40px;
	margin-right:-60px;

	background:white;
	padding:20px;
	border-radius:6px;
	padding-right:45px;
}

.form-style input {
	font-weight:300;
	font-size:11px !important;
}

.form-style .form-group label {
	font-weight:700;
}

.pt-0 {
	padding-top:0;
}

.pb-0 {
	padding-bottom:0;
}

.modal-style h6 {
	margin-top:5px;
}

.text-white {
	color:white;
	opacity:1;
}

.mt-25vh {
	margin-top:25vh;
}

.font-11px {
	font-size:11px;
}

$ ('#sign-modal').on ('hidden.bs.modal', function () {
    $ (".jumbotron").fadeIn ();
});

$ ('#sign-modal').on ('shown.bs.modal', function () {
	$ (".jumbotron").fadeOut ();
});

$ ("#sign-modal").modal ("show");

/* Y Axis Perspective */

var modal = $ (".modal-content");
var modalCenter = [modal.offset ().left + modal.width()/2, modal.offset ().top + modal.height()/2];

$ (document).mousemove (function (e) {
	var angle = Math.atan2 (e.pageX - modalCenter [0], (e.pageY - modalCenter [1])) * (180 / Math.PI);
	
	if (angle > 30 || angle < -30) return true;

	modal.css ({ "-webkit-transform": 'rotateY(' + angle + 'deg)'});

	modal.css ({ '-moz-transform': 'rotateY(' + angle + 'deg)'});
});