MailChimp HTML Email Newsletter Template

This email template will have 3 sections: header, content area, footer. No columns. I will send the bid winner a PSD if they're willig to sign an NDA. Margin: 0 auto; /* the body of the email should be centered in the email client's window */ HEADER: The header will be a bar that runs across the top of the email, and contains the logo within that bar. You should try to achieve this all with HTML & CSS, no tables and images IF POSSIBLE. If you can get these styles to work in Apple Mail or iphone, then it's fine. We expect Outlook to not be able to display some of these CSS/CSS3 capabilties. The header bar should be fluid and grow/shrink depending on the window or screen size. For mobile devices, it will automatically resize to a minimum of 320px wide. For large screens, the header will be centered in the window and a max of 630px. If a screen is in between 320px & 630px, the header will auto-adjust to around that size. I.e., this is fluid, or 100% wide up to a max of 630px. The header bar will have rounded corners using CSS3 border-radius = 3px. For email clients that don't support this, square corners are ok. If you have a solution that works across email clients, feel free to propose it to me. Within the header bar, there will be a small logo image. Padding-Left about 10px within the bar. The logo should have an alt text so that when images are disabled, the company name appears instead. If you can get padding: 5px 10px for the company name alt text within the bar, that would be great. I'm not sure if alt text takes padding or if there is a workaround. The header bar should hyperlinked. All styling for the hyperlink should be disabled, e.g., text-decoration: none. color: #333333; Some of the styling dimensions: max-width: 630px; min-width: 320px; padding: 20px 5px 30px 5px; height: 46px border-radius: 3px; drop-shadow & inner-shadow: will provide PSD or more detail later color: will be a yellow gradient: top color: fdcc33 bottom color: fdc113 BODY CONTENT AND FOOTER: The text body should be placed 30 pixels from the left and right edge of the header bar. Bullets should be aligned with the text. I.e., bullets should not be further indented. Some of the body styling already done: /* @tab Body @section body text @tip Set the styling for your email's main content text. Choose a size and color that is easy to read. @theme main */ .bodyContent div{ /*@editable*/color:#333333; /*@editable*/font-family:"Helvetica Neue", Helvetica, Arial; /*@editable*/font-size:16px; /*@editable*/line-height:18px; /*@editable*/text-align:left; } /* @tab Body @section body link @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text. */ .bodyContent div a:link,.bodyContent div a:visited,.bodyContent div a { /*@editable*/color:#336699; /*@editable*/font-weight:normal; /*@editable*/text-decoration:none; } /* @tab Body @section body style @tip Set the background color for your email's body area. */ #templateContainer,.bodyContent{ /*@editable*/background-color:#FFFFFF; } FOOTER: div: font-family:"Helvetica Neue", Helvetica, Arial; color:#333333;font-size:12px; -webkit-text-size-adjust:none; line-height:14px; text-decoration:none; div a: color: 336699; text-decoration: none; div [login to view URL]: color: 333333; cursor:default; include a 250px wide, 1px tall, #CBCBCB line as a divider on top of the footer to divide it from the content. The space between the line and the footer text should be tight, ~5px. MAILCHIMP TEMPLATE SETTINGS: Everything above is the default styling. Use MailChimps syntax to enable user-changeable styles (like above examples). The template should have 3 sections: header, content, footer. The content section should be repeatable. MISC: Needs to render consistently across most major email clients, specifically: Outlook 2010, 2007, 2003, Apple Mail