EBQ Pardot Form Layout Code

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://use.typekit.net/kww8guo.css">
        <base href="" >
        <meta charset="utf-8"/>
        <meta name="description" content="%%description%%"/>

        <title>%%title%%</title>

        <style>

/**********STEP ONE*********/
/* Single Line field tweaks */
  form.form input {
      border-top-width: 0px;
      border-left-width:0px;
      border-right-width:0px;
      border-color: #ddd;
      border-bottom-width:1px;
  }
/*Stylizes Dropdown menus */

select {
    border-color: #ddd;
    border-top-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
    color: #75758b;
}
/* Hides blue highlight around fields */
/input.text {
    user-select: none;
    padding-left: 5px;
}

input.text:focus {
    outline: none !important;
}

select:focus {
    outline: none !important;
}
/* Recolors Bottom border to blue with smooth transition */
form.form input.text:focus {
    border-color: #2979f2;
    border-bottom-width: 1px;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
}

select:focus {
    border-color: #2979f2;
}


/****** STEP TWO *******/

.pd-text label, .pd-select label, .pd-textarea label {
    display:none !important;

}

/*Hides Required label*/
#pardot-form p.required label, #pardot-form span.required label {
display: none !important;
}

/**** STEP THREE ******/
/*Font family & weight */
  p {
  font-family: proxima-nova, sans-serif;
  font-weight: 300;
  }

/* Input Text Styles */
body form.form input.text, body form.form select {
    width: 100% !important;
    font-family: proxima-nova, sans-serif;
    font-size: 16PX;
}

/***** STEP FOUR *****/
/*Button styling*/
form.form p.submit input {
        border-radius: 5px 5px 5px 5px;
    box-shadow: 0 -3px rgba(0,0,0,0.1) inset;
    color: #FFF;
    font-family: proxima-nova, sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    padding: 13px 18px;
    position: relative;
    text-transform: uppercase;
    top: -3px;
    margin-bottom: 10px;
    opacity: 1;
    line-height: 20px;
    display: inline-block;
    border-width: 0px !important;
    background: linear-gradient(125deg,#2979f2,#2979f2);
    padding-left: 60px;
    padding-right: 60px;
    display: table;
    margin: auto;
    margin-top: 50px !important;
}
/*button hover Styling*/
form.form p.submit input:hover {
    background: linear-gradient(125deg,#4a8df4,#4a8df4);
    box-shadow: 0 20px 38px rgba(0, 0, 0, 0.16);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}
/***** STEP 5 (TWEAKS) ****/
/* Inline Label for Checkboxes fix */
form.form p label.inline {
    background: 0;
    display: inline;
    float: none;
    font-weight: normal;
    line-height: 2em;
    margin-right: 10px;
    padding: 0;
    text-align: left;
    vertical-align: baseline
}

/* Recolors error text Red */
.errors {
    color: red;
}

.error .no-label {
color: red;
}

/* Adds margin below fields */
input {
    margin-bottom: 10px;
}

/* Adds margin to form fields */
.form-field {
    margin-bottom: 30px;
}


/******** OPTIONAL 1 ******/
/* Jenna Molby's Two Column CSS */
body form.form div.form-col-1 {
    float: left !important;
    clear: left; !important;
    width: 49% !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-bottom:10px;
}
body form.form div.form-col-2 {
    float: right !important;
    clear: right !important;
    width: 49% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-bottom:10px;
}
body form.form div.form-col-full {
    width: 100%;
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-bottom:10px;
}
body form.form input.text, body form.form select {
    width: 100% !important;
}
@media only screen and (max-width: 768px) {
    body form.form div.form-col-1 {
        float: none !important;
        width: 100% !important;
        padding-right: 0 !important;
    }
    body form.form div.form-col-2 {
        float: none !important;
        width: 100% !important;
    }
}


</style>
    </head>


    <body>
        %%content%%
    </body>
</html>