Sweepstakes Prototype

In this example below you will see how to do a Sweepstakes Prototype with some HTML / CSS and Javascript

Sweepstakes prototype for major crafts retail chain. Visitors view or vote on the collection of their choice, triggering a custom form via Typeform.

Thumbnail
This awesome code was written by Loku, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Loku ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Sweepstakes Prototype</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- Built for SalesForceCC, the markup for this prototype will require some modification to work properly on CodePen -->

<div id="lockup">
	<img src="/images/article/makeover/2018/makeover-lockup.png?$staticlink$" alt="Win a $10,000 Room MAKEover">
<!-- `?staticlink$` required for SalesForce link method -->
	<h3>CHECK OUT OUR 3 NEW AND EXCLUSIVE DÉCOR COLLECTIONS.</h3>
	<p>Vote for your favorite for a chance to win.</p>
    <p class="prizes">
        <ul class="disc">
            <li>$3,000 worth of décor and merchandise</li>
            <li>$6,000 cash</li>
            <li>$1,000 Custom Framing gift card</li>
        </ul>
    </p>
</div>
<div id="collections">

  <!-- Collection 1 -->
	<div id="collection-1" class="collection closed">
        <div class="topHalf">
            <img class="beautyshot" src="" alt="">
            <div class="title-container">
                <img class="collection-title" src="" alt="Sand &amp; Sea Collection">
            </div>
        </div>
        <div class="info">
			<div class="description">
                <p>Create a coastal <span>calm inside</span></p>
            </div>
			<div class=button-floater>
                <a class="typeform-share ghost-btn arrow-btn" href="https://michaelscompanies.typeform.com/to/aNLJH9?col=1&reg=us" data-mode="1" target="_parent">Vote Sand &amp; Sea </a>
                <a class="clear-btn arrow-btn" href="$httpUrl(Link-Category,cgid,922329931)$" target="_self">See Full Collection</a>
			</div>
		</div>
	</div>

	<!-- Collection 2 -->
	<div id="collection-2" class="collection closed">
        <div class="topHalf">
            <img class="beautyshot" src="" alt="">
            <div class="title-container">
                <img class="collection-title" src="/images/article/makeover/2018/collection-02.png?$staticlink$" alt="Desert Road Collection">
            </div>
        </div>
        <div class="info">
			<div class="description">
                <p>Infuse Southwestern décor <span>into your own unique style</span></p>
            </div>
			<div class=button-floater>
                <a class="typeform-share ghost-btn arrow-btn" href="https://michaelscompanies.typeform.com/to/aNLJH9?col=2&reg=us" data-mode="1" target="_parent">Vote Desert Road </a>
                <a class="clear-btn arrow-btn" href="$httpUrl(Link-Category,cgid,922330092)$" target="_self">See Full Collection</a>
			</div>
		</div>
	</div>

<!-- Collection 3 -->
	<div id="collection-3" class="collection closed">
        <div class="topHalf">
            <img class="beautyshot" src="" alt="">
            <div class="title-container">
                <img class="collection-title" src="/images/article/makeover/2018/collection-03.png?$staticlink$"  alt="Rustic Charm Collection">
            </div>
        </div>
        <div class="info">
			<div class="description">
                <p>Shop watercolor florals and <span> farmhouse chic finishes</span></p>
            </div>
			<div class=button-floater>
                <a class="typeform-share ghost-btn arrow-btn" href="https://michaelscompanies.typeform.com/to/aNLJH9?col=3&reg=us" data-mode="1" target="_parent">Vote Rustic Charm</a>
                <a class="clear-btn arrow-btn" href="$httpUrl(Link-Category,cgid,922330036)$" target="_self">See Full Collection</a>
			</div>
		</div>
	</div>

</div>

<div class="legal">
  <p id="rules">No purchase necessary. Open to legal residents of the 49 continental United States (including DC, excluding Hawaii) and Canada (excluding QC) over the age of 18 as of February 25, 2018. One (1) Prize available to be won, consisting of a $10,000 Room Makeover.  Approximate retail value $10,000 USD or CAD (depending on nationality of winner).  Odds of winning depend on number of entries.  Sweepstakes ends 11:59:59 PM CT on March 10, 2018.  Subject to full rules at: <a id="tc-link" href="$httpUrl(Page-Show,cid,makeover-tc)$" target="_blank">www.REDATCTEDLINK.com</a></p>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Loku/sweepstakes-prototype-NXmQNw */
.pt_product-search-result .category-landing .category-header {
    /* visibility: hidden; */
    height: 0;
}
.pt_product-search-result .category-landing #primary {
    width: 100% !important;
    max-width: 100%;
}
.pt_product-search-result .category-landing #secondary {
    display: none;
}
#lockup {
   text-align: center;
   font-family: "Montserrat", "Arial", sans-serif;
   margin: auto auto 1em;
}

  #lockup img {
    padding-top: 1em;
    width: 100%;
    height: 100px;
    background: #999;
  }

  #lockup h3 {
      font-size: 1.55em;
      font-weight: 600;
      margin-top: .33em;
      color: #1CB5AE;
  }

  #lockup p, #lockup ul li {
     color: #333;
     font-size: 1em;
     line-height: 1.5em;
     /* margin: .5em auto 1em; */
 }
    ul.disc li {
        display: inline-block;
    }
    ul.disc li::before {
        content: "•";
        margin-right: .25em;
    }



/* BLOCK STYLING */


  #collections {
    width: 100%;
    text-align: center;
    max-width: 1024px;
    margin: auto;
    display: flex;
    /* padding: 1em 0; */
    flex-flow: row nowrap;
    justify-content: space-between;
    background: #ddd;
  }

  .collection {
    display: flex;
    background: #999;
    padding: .75em;
    margin: auto;
    width: 100%;
    max-width: 296px;
    flex-flow: column nowrap;
    justify-content: space-between;
    flex: none;
  }
  .topHalf {
      display: flex;
      justify-content: space-between;
      flex-flow: column nowrap;
      justify-content: space-between;
      flex: none;
  }
  img.beautyshot, img.collection-title,  .info {
      flex: none;
  }

div.description {
    height: 3em;
    position: relative;
}

div.description p {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

div.description p span {
    display: inline-block;
}

div.description div.info div.button-floater a {
  display: block;
  float: left;
}
img.beautyshot {
    width: initial;
    height: 350px;
    background: #666;
    order: 1;
}
.title-container {
    order: 2;
}

img.collection-title {
    width: 100%;
    height: 4em;
    background: #333;
    margin: -.5em auto auto;
}
  .info {
    /*padding: 0 1em;
    box-sizing: content-box;*/
  }

  .info h3, .info p, .info a {
    color: #fff;
    font-family: "Gotham", "Montserrat", sans-serif;
  }

  .info p {
      font-size: 1em;
      line-height: 1.25em;
      font-weight: 500;
      margin: .75em auto;
      color: #333;
  }

  .info h3 {
    font-size: 1.5em;
  }

  .info h3, .info a {
    text-transform: uppercase;
  }

  .info a {
    width: 100%;
    font-size: .85em;
    font-weight: bold;
    line-height: 2.5em
  }

  .info a.ghost-btn {
      line-height: 4em;
      background: #fff;
      box-sizing: border-box;
      margin: auto;
      color: #999;
    display: block;
  }
  .info a.ghost-btn::after, .info a.clear-btn::after {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2px solid #999;
    border-right: 2px solid #999;
    background: none;
    transform: rotate(45deg);
    margin-left: .25em;
    display: inline-block;
}
.info a.clear-btn::after {
    border-top-color: #fff;
    border-right-color: #fff;
}
  .info a.clear-btn {
      line-height: 4em;
  }

  p#rules{
    color: #999 !important;
    display: inline-block;
    width: 90%;
    padding-top: 1em;
    font-family: "Montserrat" , arial, sans-serif;
    font-size: .6em;
  }
  p#rules a#tc-link {
    color: #999;
  }
  p#rules a#tc-link:hover {
    color: #333;
    text-decoration: none;
  }





	/* TYPEFORM MODIFICATIONS */

	.typeform-open #typeform-overlay {
	    visibility: visible;
	    opacity: .8;
	    transition: opacity .2s ease-out;
	}

	div#typeform-wrapper {
	    background: #000;
	    width: 50% !important;
	    height: 80% !important;
	    box-sizing: content-box;
	    padding: 2em;
	    margin: auto;
	    float: none;
	    margin: auto;
	    top: 5% !important;
	    left: 25% !important;
	    min-width: 320px;
	    max-width: 1120px;
	}

	#typeform-wrapper.popup iframe {
	    border-radius: 5px;
	    width: 100%;
	    height: 100%;
	    margin: auto;
	    min-height: 600px;
	}

	ul.questions {
	    margin-top: 5% !important;
	}

	#typeform .form .questions>li .content {
	    display: none;
	    position: relative;
	    padding: 2% 5%;
	}

	#typeform .form .questions>li .wrapper {
	    padding: 0;
	}

	.ready input[type="text"] {
	    border-color: rgba(28,181,174,0.4);
	}

div.legal {
    text-align: center;
    margin-bottom: 1em;
}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
    .pt_product-search-result .category-landing #primary {
        width: auto !important;
        /* margin-top: 0!important; */
    }
}
  /* Portrait */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)  {

    #collections {
        padding-bottom: .25em;
    }

    img.collection-title {
      width: 100%;
      max-width: initial;
    }
  }

@media screen and (max-width:500px) {
    .closed .info, .closed img.beautyshot {
        display: none;
    }
    #collections {
        flex-flow: column nowrap;
    }
    .collection {
        padding: 0;
        /* width: 100%; */
    }
    img.beautyshot {
        order: 2;
    }
    .title-container {
        order: 1;
    }
    img.collection-title {
        margin: auto;
    }
}

/*Downloaded from https://www.codeseek.co/Loku/sweepstakes-prototype-NXmQNw */

$('#collections').on('click', '.collection', function() {
  $(this).toggleClass('closed');
});

Comments