Created
April 27, 2016 15:29
-
-
Save bethcasey/a4e92f284991c9cd518a44eab1b6a8af to your computer and use it in GitHub Desktop.
Email Preference Center - No Branding or HTML editing required by client
This file contains hidden or 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="" 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="shortcut icon" type="image/x-icon" href=""> | |
| <!-- Bootstrap code to make the page responsive --> | |
| <!-- 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"> | |
| /*Overall Form Styling:*/ | |
| #pardot-form { | |
| font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| text-align: center; | |
| padding: 20px 30px; | |
| height: 100%; | |
| font-size: 14px; | |
| color: #333; | |
| } | |
| /*Field labels:*/ | |
| #pardot-form .field-label { | |
| font-weight: normal; | |
| text-align: center; | |
| width: 100%; | |
| font-family:; | |
| font-size: 16px; | |
| padding: 3px 13px 3px 0; | |
| color: #333; | |
| } | |
| /* required symbol adjustments */ | |
| #pardot-form .required .field-label {background-image: none; padding-left: 0;} | |
| #pardot-form .required .field-label:after {content: ' *'; color: grey;} | |
| /* URL Colour - on the EPC Page this will be the color of the "Opt out from all communications link": */ | |
| a { | |
| color: #009ddc; | |
| text-decoration: none; | |
| } | |
| /*Text inputs (email address, name etc):*/ | |
| #pardot-form input.text { | |
| text-align: center; | |
| width: 50%; | |
| height: 35px; | |
| padding: 5px; | |
| border: none; | |
| margin-bottom: 5px; | |
| color: #666; | |
| background-color: #eeeeee; | |
| } | |
| /*Submit button:*/ | |
| #pardot-form .submit input { | |
| padding: 5px 15px; | |
| background-color: #1c6b9f; | |
| font: 700 15px/30px 'ProximaNovaSemiBold','Helvetica Neue',Arial,sans-serif; | |
| color: #fff; | |
| text-shadow: 0 -1px 0 rgba(0,0,0,.25); | |
| text-transform: uppercase; | |
| border-radius: 3px; | |
| border: 1px solid #bbb; | |
| border-color: rgba(0,0,0,.1)rgba(0,0,0,.1)rgba(0,0,0,.25); | |
| box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05); | |
| text-align: center; | |
| vertical-align: middle; | |
| cursor: pointer; | |
| margin-bottom: 15px; | |
| white-space: normal; | |
| width: auto; | |
| line-height: 130%; | |
| margin-top: 10px; | |
| } | |
| /*Submit button Positioning:*/ | |
| #pardot-form.form p.submit { | |
| margin: .2em .5em .6em 0px; | |
| padding: 0; | |
| } | |
| #pardot-form.form p.submit input { | |
| margin: 0 0 0 0; | |
| } | |
| /*Email Preference label positioning:*/ | |
| #pardot-form.form p.no-label, #pardot-form.form p.email-pref { | |
| margin: .2em .5em .6em 0px; | |
| padding: 0; | |
| } | |
| /* Pardot Imp Specialist: Leacve this styling here - it makes the form respinsive */ | |
| /*Simple Responsive Media Query*/ | |
| @media (min-width: 0px) and (max-width: 768px) { | |
| /* left content div */ | |
| #left_content { | |
| width: 100%; | |
| float: none; | |
| } | |
| /* 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="header"> | |
| <div class="container" style="margin-top: 20px; text-align: center;"> | |
| <h2>%%title%%</h2> | |
| </div> | |
| </div> | |
| <!-- This is the area for the form - leave this as is --> | |
| <div class="container-fluid"> | |
| <div class="col-sm-12" style="min-height: 640px;"> | |
| %%content%% | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="container-fluid" style="background-color: #eeeeee; min-height: 50px;"> | |
| </div> | |
| </footer> | |
| </body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment