Skip to content

Instantly share code, notes, and snippets.

@nixon1333
Last active August 14, 2017 10:41
Show Gist options
  • Save nixon1333/6f36a3e62b82950bb7e9ee2cc4c66eeb to your computer and use it in GitHub Desktop.
Save nixon1333/6f36a3e62b82950bb7e9ee2cc4c66eeb to your computer and use it in GitHub Desktop.
.signup-modal-mod {
display: none;
width: 36.6rem;
padding: 1.1rem;
max-width: 90%;
z-index: 100;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background: #FEC10D;
position: absolute;
background: #E3E3E5;
max-width: 100%;
top: 3.6rem;
left: 0;
width: 100%;
min-height: 100%;
-webkit-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
input[type=email], input[type=text], select {
font-size: 1rem;
line-height: .84375 rem;
display: block;
font-family: inherit;
width: 100%;
background: 0 0;
border: 3px solid #353230;
color: #353230;
-webkit-transition: .25s background-color;
-o-transition: .25s background-color;
transition: .25s background-color;
border-radius: 0;
}
.trigger {
position: absolute;
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
-webkit-transform: rotate(135deg) !important;
-ms-transform: rotate(135deg) !important;
-o-transform: rotate(135deg) !important;
transform: rotate(135deg) !important;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
-webkit-transition: -webkit-transform .25s;
-o-transition: -o-transform .25s;
transition: transform .25s;
top: 1.1rem;
right: 1.1rem;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
>h1 {
margin-bottom: .65rem;
}
h1 {
font-family: 'Druk Web';
font-weight: 700;
font-style: normal;
font-stretch: normal;
text-transform: uppercase;
letter-spacing: .035em;
font-size: 2rem;
line-height: 2rem;
margin-bottom: 1.1rem;
}
form {
position: relative;
margin-top: .55rem;
}
[data-drip-attribute=headline] {
display: none;
}
.contact-form-row {
display: block;
position: relative;
//padding-right: 4.5rem;
margin-bottom: 1.5em;
}
.contact-form-row label {
display: none;
}
input[type=email], input[type=text], select {
display: block;
position: relative;
}
input[type=email], input[type=submit], input[type=text], select {
-webkit-appearance: none;
line-height: 1rem;
padding: 0 .88rem;
height: 3.6rem;
line-height: 3.6rem;
}
input[type=submit] {
font-family: 'Druk Web';
font-weight: 700;
font-style: normal;
font-stretch: normal;
text-transform: uppercase;
letter-spacing: .035em;
letter-spacing: .05em;
font-size: 2rem;
line-height: 2rem;
font-size: 1.25rem;
line-height: 1.25rem;
border: 3px solid #353230;
padding: .5em .5em .425em;
-webkit-transition: background-color .25s,color .25s;
-o-transition: background-color .25s,color .25s;
transition: background-color .25s,color .25s;
cursor: pointer;
background: #353230;
color: #E3E3E5;
margin-bottom: 0;
height: auto;
}
.trigger svg {
fill: #353230 !important;
}
.trigger svg:last-child {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
svg.minus {
position: absolute;
}
@media (min-width: 700px){
position: absolute;
top: 7.2rem;
left: 50%;
height: auto;
max-width: 600px;
min-height: 0;
-webkit-transform: translate(-50%,0);
-ms-transform: translate(-50%,0);
-o-transform: translate(-50%,0);
transform: translate(-50%,0);
.trigger {
top: 1.9rem;
right: 1.9rem;
}
.trigger, .trigger svg {
width: 2rem;
height: 2rem;
}
.trigger {
top: 1.1rem;
right: 1.1rem;
}
h1 {
font-size: 2.75rem;
line-height: 2.75rem;
}
input[type=email], input[type=text], select {
font-size: 1.25rem;
}
input[type=submit] {
font-size: 1.35rem;
line-height: 1.35rem;
}
input[type=submit] {
font-size: 2.75rem;
line-height: 2.75rem;
}
input[type=submit] {
font-size: 1.35rem;
line-height: 1.35rem;
}
}
}
@import url("//hello.myfonts.net/count/2e6a7a");
@import "vendor/_flexslider";
@import "common/_reset";
@import "common/_variables";
@import "common/_mixins";
@import "common/_fonts";
@import "common/_global";
@import "vendor/_toggle";
@import "layouts/_header";
@import "layouts/_footer";
@import "pages/_home";
@import "pages/_training";
@import "pages/_classes";
@import "pages/_clinical";
@import "pages/_blog";
@import "pages/_contact";
@import "pages/_healcode";
@import "pages/_popchange";
<section class="signup-modal-mod modal" id="signup-modal-viw" >
<span class="trigger">
<svg class="minus" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 26.8 26.8" enable-background="new 0 0 26.8 26.8" xml:space="preserve">
<rect y="10.7" width="26.8" height="5"></rect>
</svg>
<svg class="minus" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 26.8 26.8" enable-background="new 0 0 26.8 26.8" xml:space="preserve">
<rect y="10.7" width="26.8" height="5"></rect>
</svg>
</span>
<h1>Ready to rumble?</h1>
<form action="https://www.getdrip.com/forms/90247972/submissions" method="post" data-drip-embedded-form="90247972">
<h3 data-drip-attribute="headline">Blog lead generation form</h3>
<div data-drip-attribute="description"></div>
<div class="contact-form-row">
<label for="drip-Subscribed">First Name</label><br />
<input type="text" id="drip-Subscribed" name="fields[Subscribed]" placeholder="First Name" value="" />
</div>
<div class="contact-form-row">
<label for="drip-email">Email Address</label><br />
<input type="email" id="drip-email" name="fields[email]" placeholder="Email Address" value="" />
</div>
<div>
<input type="submit" name="submit" value="Download" data-drip-attribute="sign-up-button" />
</div>
</form>
</section>
<script>
function load() {
$('#po-open').click(function(e){
e.preventDefault();
$('#signup-modal-viw').show();
});
$('.trigger').click(function(e){
e.preventDefault();
$('#signup-modal-viw').hide();
})
}
window.onload = load;
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment