<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/zaneriley/pen/LfrCu?limit=all&page=22&q=gradient" />
<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Mr+Dafoe);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900);
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
html {
font-size: 16px;
}
@media screen and (min-width: 769px) {
html {
font-size: 18px;
}
}
@media screen and (min-width: 992px) {
html {
font-size: 20px;
}
}
@media screen and (min-width: 1200px) {
html {
font-size: 22px;
}
}
html, body {
font-family: 'Open Sans',sans-serif;
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans',sans-serif;
font-weight: 400;
line-height: 1.45;
color: #333;
}
p {
margin-bottom: 1.3em;
}
h1, h2, h3, h4 {
font-weight: inherit;
line-height: 1.2;
margin: 1.414em 0 .5em;
}
h1 {
margin-top: 0;
font-size: 3.157em;
}
h2 {
font-size: 2.369em;
}
h3 {
font-size: 1.777em;
}
h4 {
font-size: 1.333em;
}
.lead {
font-size: 1.333em;
margin-bottom: 0;
}
small, .font_small {
font-size: .75em;
}
.hero {
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
height: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
left: 0;
right: 0;
top: 0;
width: 100%;
position: absolute;
color: rgba(255, 255, 255, 0.95);
font-weight: 300;
font-family: 'Open Sans',sans-serif;
margin: 0;
padding: 0;
background-color: #00214f;
background-image: url();
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.header-wrapper {
line-height: 1;
margin-bottom: 1em;
position: relative;
z-index: 0;
white-space: nowrap;
font-size: 1.75em;
}
@media screen and (min-width: 769px) {
.header-wrapper {
font-size: 2.5em;
}
}
@media screen and (min-width: 992px) {
.header-wrapper {
font-size: 3em;
}
}
.house {
font-family: 'Mr Dafoe',cursive;
font-size: 4em;
position: relative;
z-index: 3;
padding: 0 .23em 0 .02em;
}
.music {
color: rgba(255, 255, 255, 0.95);
font-family: 'Source Sans Pro', sans-serif;
font-size: 3.5em;
font-weight: 900;
line-height: 1;
letter-spacing: -.05em;
text-transform: uppercase;
text-rendering: optimizeLegibility;
margin-left: -1.6em;
top: -.13em;
position: relative;
z-index: 0;
}
.form-wrapper {
margin-top: 1em;
z-index: 4;
}
form {
position: relative;
}
input, button {
border: none;
border-radius: 5px;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 91, 103, 0.1), 0 1px 2px rgba(0, 91, 103, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.5);
box-shadow: 0 0 1px 1px rgba(0, 91, 103, 0.1), 0 1px 2px rgba(0, 91, 103, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.5);
font-size: 1em;
padding: 1em 0 1em 3em;
}
input {
border-radius: 5px 0 0 5px;
color: rgba(0, 0, 0, 0.87);
position: relative;
}
button {
color: rgba(255, 255, 255, 0.95);
font-weight: 500;
text-shadow: 0 1px 0 #212121;
-webkit-transition: .5s;
transition: .5s;
margin-left: -7px;
border-radius: 0 5px 5px 0;
-webkit-box-shadow: 0 0 10px 3px rgba(0, 91, 103, 0.1), 0 1px 2px rgba(0, 91, 103, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.5);
box-shadow: 0 0 10px 3px rgba(0, 91, 103, 0.1), 0 1px 2px rgba(0, 91, 103, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.5);
width: 9em;
z-index: 5;
padding: 1em 2em;
background: #ed4264;
}
button:hover {
background-color: #dd1c42;
}
button:active {
-webkit-transition: .1s;
transition: .1s;
background-color: #d31138;
}
button.sent {
background: #0abfbc;
-webkit-transition: 2.25s all ease-in;
transition: 2.25s all ease-in;
}
input.sent {
color: #0abfbc !important;
-webkit-transition: 2s all ease-in;
transition: 2s all ease-in;
}
.input-icon.sent {
color: #0abfbc !important;
-webkit-transition: 2.5s all ease-in;
transition: 2.5s all ease-in;
}
label {
color: rgba(255, 255, 255, 0.95);
margin-right: 0;
position: relative;
z-index: 0;
}
input:focus {
color: #ed4264;
}
.input-icon {
position: absolute;
top: .05em;
left: .65em;
z-index: 2;
font-size: 1.5em;
color: rgba(0, 0, 0, 0.25);
-webkit-transition: all .5s;
transition: all .5s;
}
input:focus + .input-icon {
color: #ed4264;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.loadingBar {
z-index: 4;
}
.submit--reflection {
position: absolute;
right: 0;
top: 0;
z-index: -5;
-webkit-animation: pulse 1.5s infinite;
animation: pulse 1.5s infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
@-webkit-keyframes pulse {
0% {
-webkit-filter: blur(5px);
filter: blur(5px);
}
100% {
-webkit-filter: blur(10px);
filter: blur(10px);
}
}
@keyframes pulse {
0% {
-webkit-filter: blur(5px);
filter: blur(5px);
}
100% {
-webkit-filter: blur(10px);
filter: blur(10px);
}
}
::-moz-selection {
color: rgba(255, 255, 255, 0.95);
background-color: #ed4264;
}
::selection {
color: rgba(255, 255, 255, 0.95);
background-color: #ed4264;
}
</style></head><body>
<section class="hero">
<h1 class="header-wrapper">
<span class="house">House</span>
<span class="music">MUSIC</span>
</h1>
<p class="lead">Get access to secret shows in your city.</p>
<div class="form-wrapper">
<form id="notify-me" data-validate="parsley">
<label for="phone">
<input type="tel" id="phone" type="number" name="phone" required="required" placeholder="573-555-5555" data-parsley-ui-enabled="false" data-parsley-minlength="14" data-parsley-maxlength="14" class="phone"/>
<i class="fa fa-phone input-icon"></i>
</label>
<button type="submit">
<span>Notify Me</span>
</button>
<button class="submit--reflection">
<span>Notify Me</span>
</button>
</form>
</div>
</section>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery.mask/0.9.0/jquery.mask.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.4/parsley.min.js'></script>
<script >/* This pen made me realize you can't keyframe CSS gradients. Luckily Mario Klingemann is a genius. Check out his original pen here:
https://codepen.io/quasimondo/pen/lDdrF
However, because the gradients are added inline, -webkit-background-clip and -webkit-text-color have to be as well.
*/
var colors = new Array(
[28, 216, 210], [147, 237, 199],
[237, 66, 100], [255, 237, 188],
[220, 36, 36], [74, 86, 157],
[252, 53, 76], [10, 191, 188],
[248, 87, 166], [255, 88, 88],
[229, 93, 135], [95, 195, 228]
);
var step = 0;
//color table indices for:
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0, 1, 2, 3];
//transition speed
var gradientSpeed = 0.005;
function updateGradient() {
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];
var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "#" + ((r1 << 16) | (g1 << 8) | b1).toString(16);
var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "#" + ((r2 << 16) | (g2 << 8) | b2).toString(16);
$('.house').css({
background: "-webkit-gradient(linear, left top, right top, from(" + color1 + "), to(" + color2 + "))"
}).css({
background: "-moz-linear-gradient(left, " + color1 + " 0%, " + color2 + " 100%)"
}).css({
'-webkit-text-fill-color': 'transparent',
'-webkit-background-clip': 'text'
});
step += gradientSpeed;
if (step >= 1) {
step %= 1;
colorIndices[0] = colorIndices[1];
colorIndices[2] = colorIndices[3];
//pick two new target color indices
//do not pick the same as the current one
colorIndices[1] = (colorIndices[1] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
colorIndices[3] = (colorIndices[3] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
}
}
setInterval(updateGradient, 10);
// The rest of this is just polish. Ignore at will.
// INPUT MASK
$("#phone").mask("(999) 999-9999");
$("#phone").on("blur", function() {
var last = $(this).val().substr($(this).val().indexOf("-") + 1);
if (last.length == 3) {
var move = $(this).val().substr($(this).val().indexOf("-") - 1, 1);
var lastfour = move + last;
var first = $(this).val().substr(0, 9);
$(this).val(first + '-' + lastfour);
}
});
// BUTTON SUBMISSION
$(function() {
$('form').submit(function(e) {
e.preventDefault();
//on successful submission
if ($(this).parsley().isValid()) {
trigger: 'keyup',
$(this).find("button, input, .input-icon").addClass("sent");
$(this).find("button").html("Sending...");
$(this).find("button[type='submit'], input").prop('disabled', true);
// http://stackoverflow.com/questions/591269/settimeout-and-this-in-javascript
var that = this;
//SUCCESS STATE
setTimeout(function() {
$(that).find('button').html("<span class='fa fa-check button-icon'></span> Sent!");
$(that).find('input-icon').remove
}, 3500);
//RESET STATE
setTimeout(function() {
$(that).find('button, input, .input-icon').removeClass('sent');
$(that).find('button').html("Notify Me");
$(that).find(':input', '#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
$(that).find("button[type='submit'], input").prop('disabled', false);
}, 4700);
}
});
});
//# sourceURL=pen.js
</script>
</body></html>
