"js testing"
Bootstrap 3.3.0 Snippet by rayrc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<!DOCTYPE html><html lang="en" dir="ltr" class="client-js"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1024, user-scalable=yes, minimum-scale=0.25, maximum-scale=1.0, width=device-width">
<style>body{padding:0;margin:0;}.vid-container{position:relative;height:100vh;overflow:hidden;}.bgvid.back {position: fixed; right: 0; bottom: 0;min-width: 100%; min-height: 100%;width: auto; height: auto; z-index: -100;}.inner {position: absolute;}.inner-container{border-radius:10px;border-size:20px;position:absolute;height:100%;width:100%;font-family:'Raleway';font-weight:bolder;color:#eee;width:390px
;height:423px;position:absolute;top:calc(50vh - 200px);left:calc(50vw - 200px);overflow:hidden;}.bgvid.inner{top:calc(-50vh + 200px);left:calc(-50vw + 200px)
;filter: url("data:image/svg+xml;utf9,<svg version='1.1' xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='14' /></filter></svg>#blur")
filter: url("data:image/svg+xml;utf9,<svg version='1.1' xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='14' /></filter></svg>#blur");-webkit-filter:blur(14px);-ms-filter: blur(14px);-o-filter: blur(14px);filter:blur(14px);}.box{padding:50px 0px;box-shadow:2px 2px #2b2b2b;}
.box h1{text-align:center;margin:40px 0;font-size:38px;}.box input{display:block;width:400px;margin:22px auto;padding:15px;text-shadow:1px 1px blue;
z-index:5;box-shadow:inset 3px 3px white;color:#fff;font-size:1.1em;color:#333;border:0;}.box input:focus,.box input:active,.box button:focus{box-shadow:2px 2px 2px #eee;}.box button:active{outline:none;}.box button{background:#742ECC;border:0;color:#fff;padding:14px;font-size:22px;width:330px;margin:25px auto;display:block;cursor:pointer;}.box button:active{background:#27ae60;}.box p{font-size:22px;text-align:center;}.box p span{cursor:pointer;color:#666;}</style></head><body class="content" contenteditable="true"><div class="vid-container"><video id="Video1" class="bgvid back" autoplay="true" muted="muted" preload="auto" loop><source src="" type="video/webm"/></video><div class="inner-container"><video id="Video2" class="bgvid inner" autoplay="true" muted="muted" preload="auto" loop><source src="//video-js.zencoder.com/oceans-clip.mp4" type="video/mp4"></video><div class="box"><h1>Login</h1><input type="text" placeholder="Username"/>
<input type="text" placeholder="Password"/><button>Login</button><p>Not a member? <span>Sign Up</span></p></div></div></div>
<script>
var promises = [];
function makePromise(i, video) {promises[i] = new $.Deferred();/* This event tells us video can be played no stopping or buffering*/
video.oncanplaythrough = function() { /* Resolve the promise */
promises[i].resolve();
}
}/* Pause all videos and create the promise*/
array$('video').each(function(index){this.pause();makePromise(index, this);})/* Wait for all promises to resolve then start playin*/
$.when.apply(null, promises).done(function () {
$('video').each(function(){this.play();
});
});
</script><script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script></body></html> <div class="row">
<h3>Your address qualifies for FREE shit! print this ticket and take it to your local hackathon, and get all the bulshit you could ever desire</h3>
<form accept-charset='ISO-8859-1' enctype='application/x-www-form-urlencoded;charset=ISO-8859-1' action="" id="order_form" onSubmit="return validate_optin_form_first()" name="order_form" method='post'>
<textbox type="input" name="notes" value="notes" />
<div class="row" style="margin-bottom:0.5em;">
<div class="large-4 small-12 columns">
<label class="right inline"> Email: </label>
</div></div>
<div id="message_response_area" style="display: none;" > </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(http://fonts.googleapis.com/css?family=Palatino:700,900);
html {color: #fff; }
body{
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
/* url(http://rayanthony.io/extensions/IE-Sucks/assets/img/Dunce-cap.jpg) no-repeat left top fixed;
-webkit-background-size: 100% auto cover;
background-size: 100%;
background-size: cover;
}
header {
padding: 7rem 4rem 3rem;
}
h1,header h1 {
font-family: 'Alegreya Sans SC', sans-serif;
font-size: 100px;
padding: 10;
margin: 0;
line-height: 0.8;
text-align:left;
}
h1{ font-size: 30px;color:white;padding:10px 0 4px;
header h2 {
font-family: 'Alegreya Sans SC', sans-serif;
font-size: 70px;
padding: 5;
margin: 0;
line-height: 1;
text-align:left;
}
footer {text-align:center;bottom:0;word-break:keep-all;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: