<div class="container"><div class="row"><h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2></div></div>
@import url('https://fonts.googleapis.com/css?family=Notable|Quicksand&display=swap');
body {
/* background:whitesmoke; */
background: linear-gradient(to bottom, #ffffff 60%, #e2e2e2);
margin:0;
padding:0;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
#contact {
font-family: 'DM Serif Text', serif;
margin:0 auto;
max-width:800px;
text-align:center;
position:relative;
}
h2 {
font-family: 'Notable', sans-serif;
font-size:3em;
transition: all ease .25s;
}
#news {
transition: all ease .85s;
letter-spacing:3px;
/* -webkit-text-stroke: 1px #333333;
-webkit-text-fill-color: transparent; */
}
#news.active {
transform:translateY(10px);
/* -webkit-text-stroke: 0px;
text-shadow: 1px 1px 2px #333333;
-webkit-text-fill-color: #333333; */
}
p {
font-family: 'Quicksand', sans-serif;
transition: all ease .5s;
}
.newsletter {
position: relative;
max-width: 480px;
margin: 0 auto;
}
.newsletter input[type=email] {
font-family: 'DM Serif Text', serif;
height: 60px;
font-size: 1em;
border-radius: 30px;
background: white;
width: 100%;
border: 2px solid #d4d4d4;
outline: none;
}
/* input padding */
input{
text-indent: 25px;
}
.signup-btn {
font-family: 'Quicksand', sans-serif;
background: #e4e4e4;
border-radius: 30px;
height: 54px;
width: 120px;
position: absolute;
top: 6px;
right: -1px;
border: none;
font-size: .9em;
outline: none;
text-transform: uppercase;
transition: all ease .5s;
}
.signup-btn:hover {
cursor:pointer;
background:#cccccc;
}
#distance_text {
font-family: 'DM Serif Text', serif;
display: inline-block;
width: 25px;
background: white;
padding: 0px 7px;
border-radius: 5px;
}
h2 #news:before {
background:yellow;
content:' ';
}
(function() {
$(document).mousemove(function(e) {
var mX = e.pageX;
var mY = e.pageY;
var from = {x:mX, y:mY};
var $n=$('.signup-btn');
var off = $n.offset(),
nx1 = off.left,
ny1 = off.top,
nx2 = nx1 + $n.outerWidth(),
ny2 = ny1 + $n.outerHeight(),
maxX1 = Math.max(mX, nx1),
minX2 = Math.min(mX, nx2),
maxY1 = Math.max(mY, ny1),
minY2 = Math.min(mY, ny2),
intersectX = minX2 >= maxX1,
intersectY = minY2 >= maxY1,
to = {
x: intersectX ? mX : nx2 < mX ? nx2 : nx1,
y: intersectY ? mY : ny2 < mY ? ny2 : ny1
};
var distX = to.x - from.x,
distY = to.y - from.y,
hypot = Math.sqrt(distX * distX + distY * distY);
final = Math.round(hypot);
$('#distance_text').text(final);//this will output 0 when next to your element.
if (final == 0) {
// document.getElementById("news").style.color = "yellow"
document.getElementById("news").classList.add("active");
}
else {
// document.getElementById("news").style.color = "black"
document.getElementById("news").classList.remove("active");
}
});
})();