Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <style>
	@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300&display=swap');
</style><!DOCTYPE html>
<html lang="en">
	<head>
		<title>Coldwell Banker Bain | A Monthly Newsletter Template</title>
		<!--

 Monthly Newsletter Template
 =====================================

 Based on code used and tested by Litmus (@litmusapp)
 Originally developed by Kevin Mandeville (@KEVINgotbounce)
 Cleaned up by Jason Rodriguez (@rodriguezcommaj)
 Presented by A List Apart (@alistapart)

 Email is surprisingly hard. While this has been thoroughly tested, your mileage may vary.
 It's highly recommended that you test using a service like Litmus and your own devices.

 Enjoy!

 -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
			/* CLIENT-SPECIFIC STYLES */
			#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
			.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
			.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
			body, table, td, a{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
			table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
			img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */

			/* RESET STYLES */
			body{margin:0; padding:0;}
			img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
			table{border-collapse:collapse !important;}
			body{height:100% !important; margin:0; padding:0; width:100% !important;}

			/* iOS BLUE LINKS */
			.appleBody a {color:#68440a; text-decoration: none;}
			.appleFooter a {color:#999999; text-decoration: none;}

			/* MOBILE STYLES */
			@media screen and (max-width: 525px) {

				/* ALLOWS FOR FLUID TABLES */
				table[class="wrapper"]{
					width:100% !important;
				}

				/* ADJUSTS LAYOUT OF LOGO IMAGE */
				td[class="logo"]{
					text-align: left;
					padding: 0px 0 0px 0 !important;
				}

				td[class="logo"] img{
					margin:0 auto!important;
				}

				/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
				td[class="mobile-hide"]{
					display:none;}

				img[class="mobile-hide"]{
					display: none !important;
				}

				img[class="img-max"]{
					max-width: 100% !important;
					height:auto !important;
				}

				/* FULL-WIDTH TABLES */
				table[class="responsive-table"]{
					width:100%!important;
				}

				/* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */
				td[class="padding"]{
					padding: 0px 5% 0px 5% !important;
				}

				td[class="padding-copy"]{
					padding: 15px 5% 15px 5% !important;
					text-align: center;
				}

				td[class="padding-meta"]{
					padding: 0px 5% 0px 5% !important;
					text-align: center;
				}

				td[class="no-pad"]{
					padding: 0 0 20px 0 !important;
				}

				td[class="no-padding"]{
					padding: 0 !important;
				}

				td[class="section-padding"]{
					padding: 10px 15px 0px 10px !important;
				}

				td[class="section-padding-bottom-image"]{
					padding: 0px 15px 20px 15px !important;
				}

				/* ADJUST BUTTONS ON MOBILE */
				td[class="mobile-wrapper"]{
					padding: 10px 5% 15px 5% !important;
				}

				table[class="mobile-button-container"]{
					margin:0 auto;
					width:100% !important;
				}

				a[class="mobile-button"]{
					width:80% !important;
					padding: 15px !important;
					border: 0 !important;
					font-size: 16px !important;
				}

			}
		</style>
	</head>
	<body style="margin: 0; padding: 0;">
		<!-- HEADER -->
		<table style="table-layout: fixed;" border="0" width="100%" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<td bgcolor="#093254">
						<div style="padding: 0px 0px 0px 0px;" align="center">&nbsp;</div>
					</td>
				</tr>
			</tbody>
		</table>
		<!-- ONE COLUMN SECTION -->
		<table style="table-layout: fixed; height: 10px; width: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0">
			<tbody>
				<tr style="height: 10px;">
					<td class="section-padding" style="padding: 0px 15px; height: 10px;" align="center" bgcolor="#0b3253">
						<table class="responsive-table" border="0" width="500" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<td>
										<table border="0" width="100%" cellspacing="0" cellpadding="0">
											<tbody>
												<tr>
													<td><!-- HERO IMAGE -->
														<table border="0" width="100%" cellspacing="0" cellpadding="0">
															<tbody>
																<tr>
																	<td class="">
																		<table border="0" width="100%" cellspacing="0" cellpadding="0">
																			<tbody>
																				<tr>
																					<td><a href="" target="_blank" rel="noopener"><img class="img-max" style="display: block; padding: 0px; color: #666666; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px; width: 630px; height: 420px;" src="https://coldwellbankerbain.com/shared/fs/0737/company/NEWBANNER-VIRTUALOPENHOUSE2_2.png" alt="virtual open house" width="630" height="420" border="0"></a></td>
																				</tr>
																			</tbody>
																		</table>
																	</td>
																</tr>
															</tbody>
														</table>
													</td>
												</tr>
											</tbody>
										</table>
									</td>
								</tr>
							</tbody>
						</table>
					</td>
				</tr>
			</tbody>
		</table>
		<!-- ONE COLUMN SECTION -->
		<table style="table-layout: fixed;" border="0" width="100%" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<td class="section-padding" style="padding: 50px 15px 50px 15px;" align="center" bgcolor="#ededed">
						<table class="responsive-table" border="0" width="500" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<td>
										<table border="0" width="100%" cellspacing="0" cellpadding="0">
											<tbody>
												<tr>
													<td>
		<!-- ONE COLUMN SECTION -->
		<table style="table-layout: fixed;" border="0" width="100%" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<td class="section-padding" style="padding: 50px 15px 50px 15px;" align="center" bgcolor="#ededed">
						<table class="responsive-table" border="0" width="500" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<td>
										<table border="0" width="100%" cellspacing="0" cellpadding="0">
											<tbody>
												<tr>
													<td><!-- HERO IMAGE -->
														<table border="0" width="100%" cellspacing="0" cellpadding="0">
															<tbody>
																<tr>
																	<td class=""><a href="" target="_blank" rel="noopener"><img class="img-max" style="display: block; padding: 0px; color: #666666; text-decoration: none; font-family: Montserrat, sans-serif; font-size: 16px; width: 630px;" src="https://coldwellbankerbain.com/shared/fs/0737/company/live.jpg" alt="" width="500" border="0"></a></td>
																</tr>
															</tbody>
														</table>
													</td>
												</tr>
												<tr>
													<td><!-- COPY -->
														<table border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
															<tbody>
																<tr>
																	<td class="padding-copy" style="font-size: 25px; font-family: 'Montserrat', sans-serif; color: #333333; padding-top: 30px;" align="center">I'm Hosting a
Virtual Open House<br>& You're Invited!</td>
																</tr>
                                <tr>
																	<td class="padding-copy" style="font-size: 25px; font-family: 'Montserrat', sans-serif; color: #333333; padding-top: 30px;" align="center">WHEN</td>
																</tr>
																<tr>
																	<td class="padding-copy" style="padding: 20px 20px 50px 20px; font-size: 16px; line-height: 25px; font-family: 'Montserrat', sans-serif; color: #666666;" align="center">Tuesday, March 24th @ 12pm</td>
																</tr>
                                 <tr>
																	<td class="padding-copy" style="font-size: 25px; font-family: 'Montserrat', sans-serif; color: #333333; padding-top: 30px;" align="center">WHERE</td>
																</tr>
																<tr>
																	<td class="padding-copy" style="padding: 20px 20px 50px 20px; font-size: 16px; line-height: 25px; font-family: 'Montserrat', sans-serif; color: #666666;" align="center">Online via Facebook Live</td>
																</tr>
                                 <tr>
																	<td class="padding-copy" style="font-size: 25px; font-family: 'Montserrat', sans-serif; color: #333333; padding-top: 30px;" align="center">HOW</td>
																</tr>
																<tr>
																	<td class="padding-copy" style="padding: 20px 20px 50px 20px; font-size: 16px; line-height: 25px; font-family: 'Montserrat', sans-serif; color: #666666;" align="center">Follow me @Agentname.</td>
																</tr>
															</tbody>
														</table>
													</td>
												</tr>
												<tr>
													<td>
															</tbody>
														</table>
													</td>
												</tr>
												<tr>
													<td><!-- BULLETPROOF BUTTON -->
														<table class="mobile-button-container" border="0" width="100%" cellspacing="0" cellpadding="0">
															<tbody>
																<tr>
																	<td class="padding-copy" style="padding: 25px 0 0 0;" color="#fff" align="center">
																		<table class="responsive-table" border="0" cellspacing="0" cellpadding="0">
																			<tbody>
																				<tr>
																					<td align="center"><a class="mobile-button" style="font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #1b83d8; border-top: 15px solid #1b83d8; border-bottom: 15px solid #1b83d8; border-left: 25px solid #1b83d8; border-right: 25px solid #1b83d8; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" href="" target="_blank" rel="noopener">JOIN VIRTUAL OPEN HOUSE &rarr;</a></td>
																				</tr>
																			</tbody>
																		</table>
																	</td>
																</tr>
															</tbody>
														</table>
													</td>
												</tr>
											</tbody>
										</table>
									</td>
								</tr>
							</tbody>
						</table>
					</td>
				</tr>
			</tbody>
		</table>
                    <!-- TITLE SECTION AND COPY -->
														<table border="0" width="100%" cellspacing="0" cellpadding="0">
															<tbody>
																<tr>
																	<td class="padding-copy" style="font-size: 25px; font-family: 'Montserrat', sans-serif; color: #353535;" align="center">Property Information<br><br></td>
																</tr>
															</tbody>
														</table>
													</td>
												</tr>
												<tr>
													<td><!-- HERO IMAGE -->
														<table border="0" width="100%" cellspacing="0" cellpadding="0">
															<tbody>
																<tr>
																	<td class=""><a href="" target="_blank" rel="noopener"><img class="img-max" style="display: block; padding: 0px; color: #666666; text-decoration: none; font-family: Montserrat, sans-serif; font-size: 16px; width: 630px;" src="https://coldwellbankerbain.com/shared/fs/0737/company/house-template.png" alt="13004 NE 128th Place Kirkland Washington " width="500" border="0"></a></td>
																</tr>
															</tbody>
														</table>
													</td>
												</tr>
												<tr>
													<td><!-- COPY -->
														<table border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
															<tbody>
																<tr>
																	<td class="padding-copy" style="font-size: 25px; font-family: 'Montserrat', sans-serif; color: #333333; padding-top: 30px;" align="center"><span style="color: #999999;"></span><strong>13004 NE 128th Place | Kirkland, WA 98034</strong></td>
																</tr>
																<tr>
																	<td class="padding-copy" style="padding: 20px 20px 10px 20px; font-size: 16px; line-height: 25px; font-family: 'Montserrat', sans-serif; color: #666666;" align="center">4 Bedrooms | 3 Baths | Built in 1981 | 2,560 SF<br>
 Offered at $895,950 | MLS# 0000000</td>
																</tr>
                                <tr>
																	<td class="padding-copy" style="padding: 20px 20px 50px 20px; font-size: 16px; line-height: 25px; font-family: 'Montserrat', sans-serif; color: #666666;" align="center">For more property information, please reach out. I'd love to set up a personal virtual meeting with you!</td>
																</tr>
															</tbody>
														</table>
													</td>
												</tr>
												<tr>
													<td><!-- BULLETPROOF BUTTON -->
														<table class="mobile-button-container" border="0" width="100%" cellspacing="0" cellpadding="0">
															<tbody>
																<tr>
																	<td class="padding-copy" style="padding: 25px 0 0 0;" align="center">
																		<table class="responsive-table" border="0" cellspacing="0" cellpadding="0">
																			<tbody>
																				<tr>
																					<td align="center"><a class="mobile-button" style="font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #07243a; border-top: 15px solid #07243a; border-bottom: 15px solid #07243a; border-left: 25px solid #07243a; border-right: 25px solid #07243a; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" href="" target="_blank" rel="noopener">VIEW PROPERTY INFO &rarr;</a></td>
																				</tr>
																			</tbody>
																		</table>
																	</td>
																</tr>
															</tbody>
														</table>
													</td>
												</tr>
											</tbody>
										</table>
									</td>
								</tr>
							</tbody>
						</table>
					</td>
				</tr>
			</tbody>
		</table>
		
		<!-- FOOTER -->
		<table style="table-layout: fixed;" border="0" width="100%" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<td class="section-padding" style="padding: 50px 15px 70px 15px;" align="center" bgcolor="#EDEDED">
						<table class="responsive-table" border="0" width="500" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<td>
										<table border="0" width="100%" cellspacing="0" cellpadding="0">
											<tbody>
												<tr>
													<td>
						<p>&nbsp;</p>
					</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console