Created
April 29, 2016 13:20
-
-
Save bethcasey/9934e5652751195f8e06eaf4255b25c8 to your computer and use it in GitHub Desktop.
Pardot Responsive Landing Page | 2 Columns | Background Colour Web-Form Styling (P)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <meta content=%%description%% name="description"><meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>%%title%%</title> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <link rel="icon" type="image/png" href=""> | |
| <!-- Bootstrap Responisve Code --> | |
| <!-- Latest compiled and minified CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> | |
| <!-- Optional theme --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> | |
| <!-- Latest compiled and minified JavaScript --> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> | |
| <!-- end of bootstrap code --> | |
| <style type="text/css"> | |
| /* PARDOT CLIENTS: IF YOU WANT TO MAKE ANY STYLING CHANGES TO YOUR FORMS - DO IT HERE */ | |
| /* pardot form background styling */ | |
| #pardot-form { | |
| background-color: #009CDF; | |
| font-family: Arial, sans-serif; | |
| margin-top: 0px; | |
| padding: 20px 16px 20px 16px; | |
| } | |
| /* required symbol adjustments */ | |
| #pardot-form .required .field-label {background-image: none; padding-left: 0;} | |
| #pardot-form .required .field-label:after {content: ' *'; color: none;} | |
| /*Field labels:*/ | |
| #pardot-form .field-label { | |
| font-weight: normal; | |
| text-align: left; | |
| font-family: Arial, sans-serif; | |
| font-size: 16px; | |
| width: 100%; | |
| color: #fff; | |
| margin-bottom: 5px; | |
| } | |
| /*Required Field labels Positioning:*/ | |
| #pardot-form.form p.required, #pardot-form.form span.required, #pardot-form.form label.required { | |
| margin-top: 0; | |
| padding-top: 10px; | |
| } | |
| /*Text inputs:*/ | |
| #pardot-form input.text { | |
| font-family: Arial, sans-serif; | |
| padding: 5px; | |
| border: none; | |
| margin-bottom: 5px; | |
| font-weight: normal; | |
| background-color: #fff; | |
| font-size: 16px; | |
| width: 100%; | |
| color: #fff; | |
| height: 35px; | |
| } | |
| /*Dropdowns:*/ | |
| #pardot-form select { | |
| font-family: Arial, sans-serif; | |
| max-width: 100%; | |
| width: 100%; | |
| border: 0px; | |
| height: 35px; | |
| color: #fff; | |
| font-weight: normal; | |
| font-size: 16px; | |
| background-color: #fff; | |
| } | |
| /*Textareas:*/ | |
| #pardot-form textarea { | |
| font-family: Arial, sans-serif; | |
| padding: 5px; | |
| border: none; | |
| margin-bottom: 5px; | |
| font-weight: normal; | |
| background-color: #fff; | |
| font-size: 16px; | |
| width: 100%; | |
| min-height: 60%; | |
| } | |
| /*Checkbox inputs:*/ | |
| #pardot-form input[type="checkbox"] { | |
| } | |
| /*Inline Labels inputs:*/ | |
| #pardot-form label.inline { | |
| font-family: Arial, sans-serif; | |
| margin: 5px 5px 5px 5px; | |
| font-weight: normal; | |
| font-size: 14px; | |
| color: #fff; | |
| } | |
| /*Submit button:*/ | |
| #pardot-form .submit input { | |
| font-family: Arial, sans-serif; | |
| max-width: 100%; | |
| border: none; | |
| background-color: #e98300; | |
| color: #fff; | |
| text-align: center; | |
| text-decoration: none; | |
| font-size: 120%; | |
| vertical-align: middle; | |
| font-family: Arial, sans-serif; | |
| text-transform: uppercase; | |
| padding: 12px 24px 12px 24px; | |
| text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); | |
| } | |
| #pardot-form.form p.submit { | |
| margin: 0px 0px 0px 8px; !important; | |
| padding: 0; | |
| } | |
| /*Radio inputs:*/ | |
| #pardot-form input[type="radio"] { | |
| font-family: Arial, sans-serif; | |
| } | |
| /*Date inputs:*/ | |
| #pardot-form .date input { | |
| font-family: Arial, sans-serif; | |
| } | |
| /*Field descriptions:*/ | |
| #pardot-form .description { | |
| } | |
| /* PARDOT CLIENTS: STOP STYLING NOW!! */ | |
| .hero_image{ | |
| min-width: 100%; | |
| max-height: 100%; | |
| width: auto; | |
| height: auto; | |
| margin-bottom: 10px; | |
| } | |
| #pardot-form.form span.value { | |
| display: block; | |
| margin-left: 0px; | |
| } | |
| /*Simple Responsive Media Query*/ | |
| @media (min-width: 0px) and (max-width: 768px) { | |
| /* left content div */ | |
| #left_content { | |
| width: 100%; | |
| float: none; | |
| } | |
| #pardot-form.form p.no-label, #pardot-form.form p.email-pref { | |
| margin: .2em .5em .6em 0px; | |
| padding: 0; | |
| } | |
| /* right content div */ | |
| #right_content { | |
| padding-left: 0; | |
| width: 100%; | |
| float: none; | |
| } | |
| /*Field labels:*/ | |
| #pardot-form .field-label { | |
| width: 100%; | |
| float: left; | |
| } | |
| /*Text inputs:*/ | |
| #pardot-form input.text { | |
| width: 100%; | |
| } | |
| /*Dropdowns:*/ | |
| #pardot-form select { | |
| width: 100%; | |
| } | |
| /*Textareas:*/ | |
| #pardot-form textarea { | |
| width: 100%; | |
| height: 80px; | |
| } | |
| /*Submit button:*/ | |
| #pardot-form .submit input { | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header></header> | |
| <section class="container"> | |
| <div class="container-fluid"> | |
| <div class="col-sm-6" pardot-region="opening_content" style="min-height: 300px;"> | |
| </div> | |
| <div class="col-sm-6" style="margin-top: 0px; padding-top: 0px;">%%content%% | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="container-fluid" style="background-color: #f7f7f7;"> | |
| <div class="col-sm-12" pardot-region="footer_content" style="min-height: 50px; padding-top: 10px;"> | |
| </div> | |
| </div> | |
| </footer> | |
| </body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This was a good start for me, thank you!