747 Popup Test Page

@import url(‘https://fonts.googleapis.com/css?family=Montserrat&display=swap’);

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.popup.slide-out {
font-family: ‘Montserrat’, sans-serif;
font-size: 15px;
}
.popup.slide-out h1 {
style =”text-align: center;”
}
.popup.slide-out h2 {
text-align: center;
}
.popup.slide-out h3 {
text-align: center;
margin-top: 5px;
margin-bottom: 10px;
font-size: larger;
}
.popup.slide-out h4 {
text-align: center;
width: 150px;
margin: 0;
margin-top: 5px;
float: left;
padding: 10px;
font-weight: 700;
color: #ee0505;
font-size: 1.2vw;
font-family: serif;
}

.popup.slide-out .just {
padding-top: 25px;
}

.popup.slide-out.just > span {
color: #000;
font-size: 42px;
vertical-align: text-bottom;
padding-right: 10px;
}

.popup.slide-out .class-747 > span {
color: #ba8ad6;
font-size: 6vw;
line-height: 1em;
letter-spacing: -.05em;
}

.popup.slide-out .reg {
display: inline-block;
margin-left: 10px;
padding-top: 40px;
}

.popup.slide-out .reg > span {
color: #000;
font-size: 1.2vw;
line-height: 1em;
}

.popup.slide-out .small {
max-width: 800px;
margin: 9px auto;
text-align: center;
font-size: 12px;
line-height: 1.2rem;
font-weight: 600;
padding-top: 10px;
}

.popup.slide-out .flash-msg {
text-align: right
}

.popup.slide-out .container {
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgb(96, 12, 230);
}

.popup.slide-out h1 {
text-align: center;
text-shadow: 2px 2px 2px dimgrey;
color: #ffb324;
font-size: 35px;
padding-top: 10px;
}

.popup.slide-out .font-cool {
font-family: ‘Open Sans’, sans-serif;
font-weight: 800;
/* padding-top: 10px; */
display: -webkit-box;
padding-left: 20px;
}

.popup.slide-out .popup-content {
margin-top: -80px;
}

.popup.slide-out .popup-content img {
max-width: 325px;
max-height: 250;
width: 50%;
margin-left: auto;
margin-right: auto;
display: block;
margin-top: 100px;
}

.popup.slide-out .open-btn {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 2px;
padding: 1rem 2.5rem;
cursor: pointer;
}

.popup.slide-out {
position: absolute;
width: 100%;
height: 100vh;
display: none;
justify-content: center;
align-items: center;
overflow: hidden;
/* background-color: aqua; */
}

.popup.slide-out .popup-overlay {
background-color: rgba(0, 0, 0, 0.575);
height: 100vh;
width: 100%;
position: absolute;
}

.popup.slide-out .main-popup {
position: inherit;
left: 0;
height: auto;
width: 45%;
z-index: 2000;
padding: 30px 20px;
justify-content: center;
align-items: center;
transform: translateX(-100%);
background-image: url(“http://greatestpos.com/wp-content/uploads/2020/05/home-bg-landscapetall-bigbrain-sm.jpg”)
}

.popup.slide-out .close-btn {
border: .6px solid white;
padding: 10px;
position: absolute;
top: 1rem;
right: 1rem;
font-size: 2rem;
cursor: pointer;
transition: .5s ease all;
}

.popup.slide-out .close-btn:hover {
background: lightgray;
}

.popup.slide-out h4 {
animation: blinker 1s linear infinite;
}

.popup.slide-out .header-img {
margin-top: 90px
}

.gf_simple_horizontal_wrapper .top_label div.ginput_container {
text-align: center;
}

.gf_simple_horizontal_wrapper .gform_footer {
padding: 0px 0px 0px 0px;
}

.gf_simple_horizontal .gform_confirmation_message {
background: rgba(243, 245, 34, 0.5);
}

@keyframes blinker {
50% {
opacity: 20%;
}
}

@keyframes slide-in {
0% {
transform: translateX(-100%);
}

100% {
transform: translateX(0);
}
}

@keyframes slide-out {
0% {
transform: translateX(0);
}

100% {
transform: translateX(-100%);
}
}
.popup.slide-out .h1, .popup.slide-out .h2, .popup.slide-out .h3, .popup.slide-out h1, .popup.slide-out h2 {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
@media only screen and (max-width: 768px) {
.popup.slide-out .main-popup {
position: inherit;
left: 0;
height: auto;
width: 80%;
z-index: 1;
padding: 30px 20px;
line-height: 3em;
display: flow-root;
justify-content: center;
align-items: center;
transform: translateX(-100%);
background-image: url(http://greatestpos.com/wp-content/uploads/2020/05/home-bg-landscapetall-bigbrain-sm.jpg);
max-width: 80%;
max-height: 95%;
background-size: contain;
}
.popup.slide-out img {
max-width: 325px;
max-height: 250px;
width: 75%;
margin-left: auto;
margin-right: auto;
display: block;
margin-top: 100px;
}
.popup.slide-out h1 {
text-align: center;
text-shadow: 2px 2px 2px dimgrey;
color: #ffb324;
padding-top: 10px;
font-size: larger;
}
.popup.slide-out h2 {
text-align: center;
margin-top: 5px;
font-size: small;
}
.popup.slide-out h3 {
font-size: x-small;
}
.popup.slide-out h4 {
width: auto;
margin: 0;
margin-top: 5px;
font-weight: 700;
color: #ee0505;
font-size: small;
font-family: serif;
display: contents;
}
.popup.slide-out .just {
padding-top: 10px;
}
.popup.slide-out .just > span {
color: #000;
font-size: x-large;
vertical-align: text-bottom;
}
.popup.slide-out .class-747 > span {
color: #ba8ad6;
font-size: xxx-large;
line-height: 1em;
letter-spacing: -.05em;
}

.popup.slide-out .reg > span {
color: #000;
font-size: small;
line-height: 1em;
}

.popup.slide-out .reg {
display: inline-block;
margin-left: 10px;
padding-top: 20px;
}
.popup.slide-out .flex-box h1, .popup.slide-out .flex-box h2, .popup.slide-out .flex-box h3 {
padding-right: 10px;
}
.popup.slide-out .flash-msg {
text-align: center;
margin: 0;
margin-top: 5px;
padding: 8px;
font-weight: 700;
color: #ee0505;
font-size: small;
font-family: serif;
}

.popup.slide-out .font-cool {
font-family: ‘Open Sans’, sans-serif;
font-weight: 800;
padding-top: 10px;
display: inline-flex;
padding-left: 0px !important;
}

.popup.slide-out .just {
color: #000;
font-size: x-large;
vertical-align: text-bottom;
}

.popup.slide-out .747 {
color: #ba8ad6;
font-size: xxx-large;
line-height: 1em;
letter-spacing: -.05em;
}

.popup.slide-out .reg {
color: #000;
font-size: smaller;
line-height: 1em;
}

.popup.slide-out .small {
max-width: 800px;
margin: 9px auto;
text-align: center;
font-size: x-small;
line-height: 1.2em;
font-weight: 600;
margin-bottom: -10px;
}

.popup.slide-out .close-btn {
border: .6px solid white;
padding: 0px !important;
position: absolute;
top: 40px;
right: 1rem;
font-size: 2rem;
cursor: pointer;
transition: .5s ease all;
}

.gf_simple_horizontal_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
font-size: inherit;
font-family: inherit;
padding: 5px 4px;
letter-spacing: normal;
height: 35px;
}

.gf_simple_horizontal_wrapper .gform_footer input.button, .gf_simple_horizontal_wrapper .gform_footer input[type=submit], .gf_simple_horizontal_wrapper .gform_page_footer input.button, .gf_simple_horizontal_wrapper .gform_page_footer input[type=submit] {
font-size: 1em;
width: 100%;
margin: 0 0 0px 0;
}

.gf_simple_horizontal_wrapper input:not([type=radio]):not([type=checkbox]):not([type=image]):not([type=file]) {
line-height: 0.5rem;
min-height: 2rem;
}

.gf_simple_horizontal_wrapper div.validation_error {
color: #790000;
font-size: 10px;
font-weight: 700;
border-top: 1px solid #790000;
border-bottom: 1px solid #790000;
clear: both;
width: 100%;
text-align: center;
line-height: 15px;
}

.gf_simple_horizontal_wrapper li.gfield.gfield_error.gfield_contains_required {
line-height: 20px;
margin-top: 5px;
}

.gf_simple_horizontal_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
font-size: inherit;
font-family: inherit;
padding: 5px 4px;
letter-spacing: normal;
height: 20px;
}
}

The popup will load in 5 seconds! Start counting and hang on…!

const open_btn = document.querySelector('.open-btn'); const close_btn = document.querySelector('.close-btn'); const popup = document.querySelector('.popup'); const main_popup = document.querySelector('.main-popup'); window.setTimeout(function () { popup.style.display = 'flex' main_popup.style.cssText = 'animation:slide-in .5s ease; animation-fill-mode: forwards;'; }, 5000) close_btn.addEventListener('click', () => { main_popup.style.cssText = 'animation:slide-out .5s ease; animation-fill-mode: forwards;'; setTimeout(() => { popup.style.display = 'none'; }, 500); }); window.addEventListener('click', (e) => { if (e.target == document.querySelector('.popup-overlay')) { main_popup.style.cssText = 'animation:slide-out .5s ease; animation-fill-mode: forwards;'; setTimeout(() => { popup.style.display = 'none'; }, 500); } }); (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; e=o.createElement(i);r=o.getElementsByTagName(i)[0]; e.src='//www.google-analytics.com/analytics.js'; r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); ga('create','UA-52746336-1');ga('send','pageview'); var isCompleted = {}; function sampleCompleted(sampleName){ if (ga && !isCompleted.hasOwnProperty(sampleName)) { ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); isCompleted[sampleName] = true; } }