_popchange.scss

.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;
		}

	}


}

instruction.md

Modified Files

1. themes/bangfitness/assets/styles/main.scss

Newly added File

1. themes/bangfitness/assets/styles/pages/_popchange.scss

Place the files contents with the codes as needed. Then place the html snippet code into the widget. Screenshot added.

https://www.screencast.com/t/tyeClcWvmLf

https://www.screencast.com/t/CzKmzem8

main.scss

@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";

widget.html

<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>