cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

<title>013177_WNB_Make-Summer-Sweet-landing page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">


<div id="container">
	<div id="form1">
    <form action="http://mcfaddengavender.createsend.com/t/r/s/ykkkllt/" method="post" id="subForm">
<p>We’re <strong>GIVING AWAY</strong> a bottle of BANDNAME a day throughout the month of August! Register below for your <strong>CHANCE TO WIN</strong>!<br /> 
<span>(Winners will be randomly drawn daily throughout the month of August.)</span></p>
<div class="form_labels"><label for="name">Name:</label><br /><input type="text" name="cm-name" input style="width:445px; height: 30px; border: 1px solid 256632; margin-bottom: 10px" id="name" /><br />
<label for="ykkkllt-ykkkllt">Email:</label><br /><input type="text" name="cm-ykkkllt-ykkkllt" input style="width:445px; height: 30px; border: 1px solid 256632; margin-bottom: 10px" id="ykkkllt-ykkkllt" /><br />
<label for="Tell Us What You Like">Tell us what you like about SweetLeaf® Sweet Drops:</label><br /><input type="text" name="cm-f-vtljth" input style="width:445px; height: 90px; border: 1px solid 256632; margin-bottom: 10px"id="TellUsWhatYouLike" /><br />

<input type="submit" value="Submit" id="button" />
              #hike_logo_img {
    background-position: 0 0;
    display: none;

#container {
	background:url() no-repeat;
	height: 855px;
	width: 800px;
#form1 {
	left: 100px;
	background: #fcfff1;
	width: 550px;
	height: 400px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; 
-moz-box-shadow: 0px 0px 7px #000;
-webkit-box-shadow: 0px 0px 7px #000;
box-shadow: 0px 0px 7px #000;
	#container p {
		color: #346a2e;
		padding: 10px 20px 20px 20px;
		font-size: 17px;
		font-family:Arial, Helvetica, sans-serif;
		#container p span {
		color: #346a2e;
		font-size: 13px;
		padding-left: 40px;
	.form_labels {
		padding-left: 38px;
		color: #1a6e34;
		margin-top: -20px;
		font-family:Arial, Helvetica, sans-serif;
	.form_labels label {
	input #name {
		color: red;
	#button {
		width: 75px;
		height: 30px;
		background: white;
		border: 1px solid #717171;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.


Loading ..................