Skip to content

Instantly share code, notes, and snippets.

@bethcasey

bethcasey/gist:d5b1aaf1570f9dd6f0aa

Last active March 2, 2019 15:47
Show Gist options
  • Save bethcasey/d5b1aaf1570f9dd6f0aa to your computer and use it in GitHub Desktop.
Save bethcasey/d5b1aaf1570f9dd6f0aa to your computer and use it in GitHub Desktop.
Download ZIP
Pardot Responsive Landing Page | 2 Columns | Simple Web-Form Styling
Raw
gistfile1.txt
<!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 Code for responsive design -->
<!-- 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:;
font-family: Arial, sans-serif;
}
/* required symbol adjustments */
#pardot-form .required .field-label {background-image: none; padding-left: 0;}
#pardot-form .required .field-label:after {content: '*'; color: grey;}
/*Field labels:*/
#pardot-form .field-label {
font-weight: normal;
text-align: left;
font-family: Arial, sans-serif;
font-size: 16px;
width: 100%;
color: rgb(102, 102, 102);
margin-bottom: 5px;
}
/*Text inputs:*/
#pardot-form input.text {
font-family: Arial, sans-serif;
padding: 5px;
border: none;
margin-bottom: 5px;
font-weight: normal;
background-color: rgb(248, 248, 248);
font-size: 16px;
width: 100%;
color: rgb(102, 102, 102);
height: 35px;
}
/*Dropdowns:*/
#pardot-form select {
font-family: Arial, sans-serif;
max-width: 100%;
width: 100%;
border: 0px;
height: 35px;
color: #666;
font-weight: normal;
font-size: 16px;
}
/*Textareas:*/
#pardot-form textarea {
font-family: Arial, sans-serif;
padding: 5px;
border: none;
margin-bottom: 5px;
font-weight: normal;
background-color: rgb(248, 248, 248);
font-size: 16px;
width: 100%;
min-height: 60%;
}
/*Checkbox inputs:*/
#pardot-form input[type="checkbox"] {
}
/*Field Labels inline with checkboxes, radio inputs etc:*/
#pardot-form label.inline {
font-family: Arial, sans-serif;
margin: 5px 5px 5px 5px;
font-weight: normal;
font-size: 14px;
color: rgb(102, 102, 102);
}
/*Submit button:*/
#pardot-form .submit input {
background-color: #e98300;
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;
}
/*Submit button Positioning in the form:*/
#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!! The below classes are to ensure responsive design. */
.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="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12" pardot-region="opening_image" style="min-height: 50px;">
</div>
</div>
<div class="row">
<div class="col-sm-12">
%%content%%
</div>
</div>
</div>
</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: 10px;">
</div>
</div>
</footer>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment