Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/Name Tag Signup.markdown

Forked from anonymous/Name Tag Signup.markdown
Last active September 21, 2015 04:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/3aab3e7464aeef1c10ce to your computer and use it in GitHub Desktop.
Save CodeMyUI/3aab3e7464aeef1c10ce to your computer and use it in GitHub Desktop.
Download ZIP
Name Tag Signup
Raw
index.html
<body>
<div class="name-tag">
<div class="hello">
<div id="hello">HELLO</div>
<div id="my-name-is">my name is</div>
</div>
<form>
<div><input type="text" placeholder="Enter Name" required/></div>
<div><input type="email" placeholder="and Email" required/></div>
<div><button type="submit">Let's Go! <i class="fa fa-arrow-right"></i></button></div>
</form>
<div class="underbar"></div>
</div>
<div class="greeting">Hey <span></span>! Thanks for signing up!</div>
</body>
Raw
script.js
$(document).ready(function(){
$("input[type=text]").focus();
$("button").click(function() {
var nameValue = $("input[type=text]").val().trim(),
emailValue = $("input[type=email]").val().trim(),
name = $("input[type=text]"),
email = $("input[type=email]");
if(nameValue && emailValue) {
$(this).remove();
$("span").append(nameValue);
name.prop("disabled", true);
email.prop("disabled", true);
$(".greeting").show(300);
}
});
/*$(".name-tag").hover(function() {
$("i").animate({
opacity: 1
}, 200);
}, function() {
$("i").animate({
opacity: 0
}, 200)
});*/
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
@import url(https://fonts.googleapis.com/css?family=Gochi+Hand)
body
font-family: "Helvetica", sans-serif
height: 100vh
background: linear-gradient(#e53935 0%, #eea849 100%)
.name-tag
position: relative
margin: 90px auto
height: 240px
width: 350px
background: #fff
border-radius: 10px
transform: rotate(-3deg)
.hello
height: 80px
width: 340px
background: #0E9BD6
text-align: center
color: #fff
border: 5px solid #fff
border-top-left-radius: 10px
border-top-right-radius: 10px
#hello
margin-top: 8px
font-weight: 600
font-size: 33px
letter-spacing: 10px
#my-name-is
font-size: 18px
font-weight: 200
letter-spacing: 1px
.underbar
position: absolute
top: 198px
left: 5px
height: 37px
width: 340px
background: #0E9BD6
border-bottom-left-radius: 6px
border-bottom-right-radius: 6px
z-index: -1
form
display: flex
flex-direction: column
justify-content: center
align-items: center
margin: 7px 0 0 0
button
position: absolute
top: 198px
left: 5px
height: 37px
width: 340px
background: #0E9BD6
color: #fff
font-weight: 600
border-bottom-left-radius: 6px
border-bottom-right-radius: 6px
border: 0
transition: all .2s
i
//opacity: 0
&:active
outline: none
input[type="text"], input[type="email"]
width: 300px
font-family: 'Gochi Hand', cursive
text-align: center
border: 0
//border-bottom: 2px dashed #aaa
outline: none
&:valid, &:focus
border: 0
input[type="text"]
font-size: 45px
input[type="email"]
font-size: 22px
margin-top: 7px
.greeting
display: none
height: 100px
font-size: 35px
font-weight: 200
color: #fff
text-align: center
span
font-weight: 600
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment