Skip to content

Instantly share code, notes, and snippets.

@bethcasey

bethcasey/gist:382b5f35e824c0042dcab87efd347598

Created April 29, 2016 13:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bethcasey/382b5f35e824c0042dcab87efd347598 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bethcasey/382b5f35e824c0042dcab87efd347598 to your computer and use it in GitHub Desktop.
Download ZIP
Pardot Responsive Landing Page | 2 Columns | Banner | Social icon | Footer
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>%%title%%</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--css-->
<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: none;}
/*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 {
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>
<!--endcss-->
</head>
<body>
<div class="container" style="width: 100%; padding: 0 0 0 0;">
<div class="white-bg">
<div class="featured-image" pardot-region="featured-image" style="min-height: 15px; ">
</div>
</div>
<div class="container-fluid">
<div class="content">
<div class="row">
<div class="content-left col-md-8" pardot-region="content-left">
<!-- Start Editable Content Section -->
<!-- End Editable Content Section -->
</div>
<div class="content-right col-md-4">
<div class="form-container">
<div class="form-body">
<!-- Start Form -->
%%content%%
<!-- End Form -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="row">
<div class="col-sm-8 copyright" pardot-region="copyright">
<!-- Start Editable Footer -->
<!-- End Editable Footer -->
</div>
<div class="col-sm-4 social-links" pardot-region="social-links">
<!-- Start Social Media Icons -->
<!-- End Social Media Icons -->
</div>
</div>
</div>
</div>
</div>
<!-- Load Boostrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment