cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

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.

            
              
<head>
  <!-- NAME: 1 COLUMN -->
  <!--[if gte mso 15]>
		<xml>
			<o:OfficeDocumentSettings>
			<o:AllowPNG/>
			<o:PixelsPerInch>96</o:PixelsPerInch>
			</o:OfficeDocumentSettings>
		</xml>
		<![endif]-->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>🔥&nbsp;Administrator: Dashboard design starter pack</title>

  <style type="text/css">
    p{
    			margin:10px 0;
    			padding:0;
    		}
    		table{
    			border-collapse:collapse;
    		}
    		h1,h2,h3,h4,h5,h6{
    			display:block;
    			margin:0;
    			padding:0;
    		}
    		img,a img{
    			border:0;
    			height:auto;
    			outline:none;
    			text-decoration:none;
    		}
    		body,#bodyTable,#bodyCell{
    			height:100%;
    			margin:0;
    			padding:0;
    			width:100%;
    		}
    		#outlook a{
    			padding:0;
    		}
    		img{
    			-ms-interpolation-mode:bicubic;
    		}
    		table{
    			mso-table-lspace:0pt;
    			mso-table-rspace:0pt;
    		}
    		.ReadMsgBody{
    			width:100%;
    		}
    		.ExternalClass{
    			width:100%;
    		}
    		p,a,li,td,blockquote{
    			mso-line-height-rule:exactly;
    		}
    		a[href^=tel],a[href^=sms]{
    			color:inherit;
    			cursor:default;
    			text-decoration:none;
    		}
    		p,a,li,td,body,table,blockquote{
    			-ms-text-size-adjust:100%;
    			-webkit-text-size-adjust:100%;
    		}
    		.ExternalClass,.ExternalClass p,.ExternalClass td,.ExternalClass div,.ExternalClass span,.ExternalClass font{
    			line-height:100%;
    		}
    		a[x-apple-data-detectors]{
    			color:inherit !important;
    			text-decoration:none !important;
    			font-size:inherit !important;
    			font-family:inherit !important;
    			font-weight:inherit !important;
    			line-height:inherit !important;
    		}
    		#bodyCell{
    			padding:10px;
    		}
    		.templateContainer{
    			max-width:600px !important;
    		}
    		a.mcnButton{
    			display:block;
    		}
    		.mcnImage{
    			vertical-align:bottom;
    		}
    		.mcnTextContent{
    			word-break:break-word;
    		}
    		.mcnTextContent img{
    			height:auto !important;
    		}
    		.mcnDividerBlock{
    			table-layout:fixed !important;
    		}
    		body,#bodyTable{
    			background-color:#ffffff;
    		}
    		#bodyCell{
    			border-top:0;
    		}
    		.templateContainer{
    			border:0;
    		}
    		h1{
    			color:#202020;
    			font-family:Helvetica;
    			font-size:26px;
    			font-style:normal;
    			font-weight:bold;
    			line-height:125%;
    			letter-spacing:normal;
    			text-align:center;
    		}
    		h2{
    			color:#202020;
    			font-family:Helvetica;
    			font-size:22px;
    			font-style:normal;
    			font-weight:bold;
    			line-height:125%;
    			letter-spacing:normal;
    			text-align:left;
    		}
    		h3{
    			color:#202020;
    			font-family:Helvetica;
    			font-size:20px;
    			font-style:normal;
    			font-weight:bold;
    			line-height:125%;
    			letter-spacing:normal;
    			text-align:center;
    		}
    		h4{
    			color:#202020;
    			font-family:Helvetica;
    			font-size:18px;
    			font-style:normal;
    			font-weight:bold;
    			line-height:125%;
    			letter-spacing:normal;
    			text-align:left;
    		}
    		#templatePreheader{
    			background-color:#ffffff;
    			border-top:0;
    			border-bottom:0;
    			padding-top:0px;
    			padding-bottom:20px;
    		}
    		#templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{
    			color:#656565;
    			font-family:Helvetica;
    			font-size:11px;
    			line-height:150%;
    			text-align:center;
    		}
    		#templatePreheader .mcnTextContent a,#templatePreheader .mcnTextContent p a{
    			color:#656565;
    			font-weight:normal;
    			text-decoration:underline;
    		}
    		#templateHeader{
    			background-color:#15202b;
    			border-top:0;
    			border-bottom:0;
    			padding-top:40px;
    			padding-bottom:0px;
    		}
    		#templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{
    			color:#202020;
    			font-family:Helvetica;
    			font-size:16px;
    			line-height:150%;
    			text-align:left;
    		}
    		#templateHeader .mcnTextContent a,#templateHeader .mcnTextContent p a{
    			color:#2BAADF;
    			font-weight:normal;
    			text-decoration:underline;
    		}
    		#templateBody{
    			background-color:#15202b;
    			border-top:0;
    			border-bottom:2px solid #EAEAEA;
    			padding-top:40px;
    			padding-bottom:40px;
    		}
    		#templateBody .mcnTextContent,#templateBody .mcnTextContent p{
    			color:#ffffff;
    			font-family:Helvetica;
    			font-size:24px;
    			line-height:150%;
    			text-align:center;
    		}
    		#templateBody .mcnTextContent a,#templateBody .mcnTextContent p a{
    			color:#ffffff;
    			font-weight:normal;
    			text-decoration:underline;
    		}
    		#templateFooter{
    			background-color:#ffffff;
    			border-top:0;
    			border-bottom:0;
    			padding-top:9px;
    			padding-bottom:30px;
    		}
    		#templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{
    			color:#bebebe;
    			font-family:Helvetica;
    			font-size:11px;
    			line-height:150%;
    			text-align:center;
    		}
    		#templateFooter .mcnTextContent a,#templateFooter .mcnTextContent p a{
    			color:#656565;
    			font-weight:normal;
    			text-decoration:underline;
    		}
    	@media only screen and (min-width:768px){
    		.templateContainer{
    			width:600px !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		body,table,td,p,a,li,blockquote{
    			-webkit-text-size-adjust:none !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		body{
    			width:100% !important;
    			min-width:100% !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		#bodyCell{
    			padding-top:10px !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		.mcnImage{
    			width:100% !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		.mcnCartContainer,.mcnCaptionTopContent,.mcnRecContentContainer,.mcnCaptionBottomContent,.mcnTextContentContainer,.mcnBoxedTextContentContainer,.mcnImageGroupContentContainer,.mcnCaptionLeftTextContentContainer,.mcnCaptionRightTextContentContainer,.mcnCaptionLeftImageContentContainer,.mcnCaptionRightImageContentContainer,.mcnImageCardLeftTextContentContainer,.mcnImageCardRightTextContentContainer{
    			max-width:100% !important;
    			width:100% !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		.mcnBoxedTextContentContainer{
    			min-width:100% !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		.mcnImageGroupContent{
    			padding:9px !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		.mcnCaptionLeftContentOuter .mcnTextContent,.mcnCaptionRightContentOuter .mcnTextContent{
    			padding-top:9px !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		.mcnImageCardTopImageContent,.mcnCaptionBlockInner .mcnCaptionTopContent:last-child .mcnTextContent{
    			padding-top:18px !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		.mcnImageCardBottomImageContent{
    			padding-bottom:9px !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		.mcnImageGroupBlockInner{
    			padding-top:0 !important;
    			padding-bottom:0 !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		.mcnImageGroupBlockOuter{
    			padding-top:9px !important;
    			padding-bottom:9px !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		.mcnTextContent,.mcnBoxedTextContentColumn{
    			padding-right:18px !important;
    			padding-left:18px !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		.mcnImageCardLeftImageContent,.mcnImageCardRightImageContent{
    			padding-right:18px !important;
    			padding-bottom:0 !important;
    			padding-left:18px !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		.mcpreview-image-uploader{
    			display:none !important;
    			width:100% !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		h1{
    			font-size:22px !important;
    			line-height:125% !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		h2{
    			font-size:20px !important;
    			line-height:125% !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		h3{
    			font-size:18px !important;
    			line-height:125% !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		h4{
    			font-size:16px !important;
    			line-height:150% !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		.mcnBoxedTextContentContainer .mcnTextContent,.mcnBoxedTextContentContainer .mcnTextContent p{
    			font-size:14px !important;
    			line-height:150% !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		#templatePreheader{
    			display:block !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		#templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{
    			font-size:11px !important;
    			line-height:150% !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		#templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{
    			font-size:16px !important;
    			line-height:150% !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		#templateBody .mcnTextContent,#templateBody .mcnTextContent p{
    			font-size:20px !important;
    			line-height:150% !important;
    		}
    
    }	@media only screen and (max-width: 480px){
    		#templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{
    			font-size:11px !important;
    			line-height:150% !important;
    		}
    
    }
  </style>
</head>

<body style="height: 100%;margin: 0;padding: 0;width: 100%;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #ffffff;">
  <center>
    <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;height: 100%;margin: 0;padding: 0;width: 100%;background-color: #ffffff;">
      <tbody>
        <tr>
          <td align="center" valign="top" id="bodyCell" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;height: 100%;margin: 0;padding: 10px;width: 100%;border-top: 0;">
            <!-- BEGIN TEMPLATE // -->
            <!--[if gte mso 9]>
						<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
						<tr>
						<td align="center" valign="top" width="600" style="width:600px;">
						<![endif]-->
            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;border: 0;max-width: 600px !important;">
              <tbody>
                <tr>
                  <td valign="top" id="templatePreheader" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #ffffff;border-top: 0;border-bottom: 0;padding-top: 0px;padding-bottom: 20px;">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                      <tbody class="mcnTextBlockOuter">
                        <tr>
                          <td valign="top" class="mcnTextBlockInner" style="padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                            <!--[if mso]>
				<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
				<tr>
				<![endif]-->

                            <!--[if mso]>
				<td valign="top" width="600" style="width:600px;">
				<![endif]-->
                            <table align="left" border="0" cellpadding="0" cellspacing="0" style="max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" width="100%" class="mcnTextContentContainer">
                              <tbody>
                                <tr>

                                  <td valign="top" class="mcnTextContent" style="padding-top: 0;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #656565;font-family: Helvetica;font-size: 11px;line-height: 150%;text-align: center;">

                                    <a href="#" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #656565;font-weight: normal;text-decoration: underline;">View this email in your browser</a>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                            <!--[if mso]>
				</td>
				<![endif]-->

                            <!--[if mso]>
				</tr>
				</table>
				<![endif]-->
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
                <tr>
                  <td valign="top" id="templateHeader" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #15202b;border-top: 0;border-bottom: 0;padding-top: 40px;padding-bottom: 0px;">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                      <tbody class="mcnImageBlockOuter">
                        <tr>
                          <td valign="top" style="padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" class="mcnImageBlockInner">
                            <table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                              <tbody>
                                <tr>
                                  <td class="mcnImageContent" valign="top" style="padding-right: 9px;padding-left: 9px;padding-top: 0;padding-bottom: 0;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">

                                    <a href="http://greatsimple.io" title="" class="" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                      <img align="center" alt="Great Simple Studio" src="https://gallery.mailchimp.com/f49a7bb29cb188fa524c404a8/images/fa53ce3c-d86d-4558-afb8-f5463cf46075.png" width="40" style="max-width: 80px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                        class="mcnImage">
                                    </a>

                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnDividerBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;table-layout: fixed !important;">
                      <tbody class="mcnDividerBlockOuter">
                        <tr>
                          <td class="mcnDividerBlockInner" style="min-width: 100%;padding: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                            <table class="mcnDividerContent" border="0" cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;border-top-width: 1px;border-top-style: solid;border-top-color: #202020;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                              <tbody>
                                <tr>
                                  <td style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                    <span></span>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                            <!--
                <td class="mcnDividerBlockInner" style="padding: 18px;">
                <hr class="mcnDividerContent" style="border-bottom-color:none; border-left-color:none; border-right-color:none; border-bottom-width:0; border-left-width:0; border-right-width:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0;" />
-->
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                      <tbody class="mcnImageBlockOuter">
                        <tr>
                          <td valign="top" style="padding: 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" class="mcnImageBlockInner">
                            <table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                              <tbody>
                                <tr>
                                  <td class="mcnImageContent" valign="top" style="padding-right: 0px;padding-left: 0px;padding-top: 0;padding-bottom: 0;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">

                                    <a href="http://administrator.design" title="" class="" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                      <img align="center" alt="Administrator - Dashboard design starter pack" src="https://gallery.mailchimp.com/f49a7bb29cb188fa524c404a8/images/87bfbe4c-6fcd-4aca-bb08-9011bd526f81.jpg" width="600" style="max-width: 1200px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                        class="mcnImage">
                                    </a>

                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
                <tr>
                  <td valign="top" id="templateBody" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #15202b;border-top: 0;border-bottom: 2px solid #EAEAEA;padding-top: 40px;padding-bottom: 40px;">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                      <tbody class="mcnTextBlockOuter">
                        <tr>
                          <td valign="top" class="mcnTextBlockInner" style="padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                            <!--[if mso]>
				<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
				<tr>
				<![endif]-->

                            <!--[if mso]>
				<td valign="top" width="600" style="width:600px;">
				<![endif]-->
                            <table align="left" border="0" cellpadding="0" cellspacing="0" style="max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" width="100%" class="mcnTextContentContainer">
                              <tbody>
                                <tr>

                                  <td valign="top" class="mcnTextContent" style="padding: 0px 18px 9px;font-size: 20px;font-weight: normal;line-height: 150%;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #ffffff;font-family: Helvetica;">

                                    <p style="font-size: 20px;font-weight: normal;line-height: 150%;text-align: center;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #ffffff;font-family: Helvetica;">All you need for creating dashboard UI and complex web applications in Sketch &amp; Photoshop.&nbsp;Massive collection of fully customizable UI components, closely related to each other and combined&nbsp;on different
                                      levels, regarding systematic design principles. Ultimate tool to&nbsp;start designing in system&nbsp;or boosting up your working process at any stage, from prototyping to stylization.</p>

                                  </td>
                                </tr>
                              </tbody>
                            </table>
                            <!--[if mso]>
				</td>
				<![endif]-->

                            <!--[if mso]>
				</tr>
				</table>
				<![endif]-->
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                      <tbody class="mcnButtonBlockOuter">
                        <tr>
                          <td style="padding-top: 0;padding-right: 18px;padding-bottom: 18px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" valign="top" align="center" class="mcnButtonBlockInner">
                            <table border="0" cellpadding="0" cellspacing="0" class="mcnButtonContentContainer" style="border-collapse: separate !important;border-top-left-radius: 6px;border-top-right-radius: 6px;border-bottom-right-radius: 6px;border-bottom-left-radius: 6px;background-color: #4FCE3D;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                              <tbody>
                                <tr>
                                  <td align="center" valign="middle" class="mcnButtonContent" style="font-family: Arial;font-size: 22px;padding: 30px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                    <a class="mcnButton " title="Learn more" href="http://administrator.design" target="_blank" style="font-weight: bold;letter-spacing: normal;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;display: block;">Learn more</a>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                      <tbody class="mcnTextBlockOuter">
                        <tr>
                          <td valign="top" class="mcnTextBlockInner" style="padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                            <!--[if mso]>
				<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
				<tr>
				<![endif]-->

                            <!--[if mso]>
				<td valign="top" width="600" style="width:600px;">
				<![endif]-->
                            <table align="left" border="0" cellpadding="0" cellspacing="0" style="max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" width="100%" class="mcnTextContentContainer">
                              <tbody>
                                <tr>

                                  <td valign="top" class="mcnTextContent" style="padding: 0px 18px 9px;color: #5A748D;font-size: 16px;font-weight: normal;line-height: 150%;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;font-family: Helvetica;">

                                    <p style="color: #5A748D;font-size: 16px;font-weight: normal;line-height: 150%;text-align: center;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: Helvetica;"><strong>Dear friends!</strong><br> We hope you’ll enjoy to use this design starter pack. If you have a minute, give us a favor and press the Upvote button on&nbsp;<a href="https://www.producthunt.com/" target="_blank"
                                        style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #ffffff;font-weight: normal;text-decoration: underline;">Product Hunt</a>.&nbsp;Thanks!<br>
                                      <br>
                                      <span style="font-size:12px">Find it on home&nbsp;page of Product Hunt or in Tech category.</span></p>

                                  </td>
                                </tr>
                              </tbody>
                            </table>
                            <!--[if mso]>
				</td>
				<![endif]-->

                            <!--[if mso]>
				</tr>
				</table>
				<![endif]-->
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                      <tbody class="mcnImageBlockOuter">
                        <tr>
                          <td valign="top" style="padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" class="mcnImageBlockInner">
                            <table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                              <tbody>
                                <tr>
                                  <td class="mcnImageContent" valign="top" style="padding-right: 9px;padding-left: 9px;padding-top: 0;padding-bottom: 0;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">

                                    <a href="https://www.producthunt.com/" title="" class="" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                      <img align="center" alt="Product Hunt Kitty" src="https://gallery.mailchimp.com/f49a7bb29cb188fa524c404a8/images/bc7212a3-69e7-4d76-8201-7a5d8e0252c4.jpg" width="389" style="max-width: 778px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                        class="mcnImage">
                                    </a>

                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
                <tr>
                  <td valign="top" id="templateFooter" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #ffffff;border-top: 0;border-bottom: 0;padding-top: 9px;padding-bottom: 30px;">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnFollowBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                      <tbody class="mcnFollowBlockOuter">
                        <tr>
                          <td align="center" valign="top" style="padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" class="mcnFollowBlockInner">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnFollowContentContainer" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                              <tbody>
                                <tr>
                                  <td align="center" style="padding-left: 9px;padding-right: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" class="mcnFollowContent">
                                      <tbody>
                                        <tr>
                                          <td align="center" valign="top" style="padding-top: 9px;padding-right: 9px;padding-left: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                            <table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                              <tbody>
                                                <tr>
                                                  <td align="center" valign="top" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                    <!--[if mso]>
                                    <table align="center" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                    <![endif]-->

                                                    <!--[if mso]>
                                        <td align="center" valign="top">
                                        <![endif]-->

                                                    <table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnFollowStacked" style="display: inline;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">

                                                      <tbody>
                                                        <tr>
                                                          <td align="center" valign="top" class="mcnFollowIconContent" style="padding-right: 10px;padding-bottom: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                            <a href="https://www.facebook.com/greatsimple" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"><img src="https://cdn-images.mailchimp.com/icons/social-block-v2/light-facebook-96.png" alt="Facebook" class="mcnFollowBlockIcon" width="48" style="width: 48px;max-width: 48px;display: block;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"></a>
                                                          </td>
                                                        </tr>


                                                      </tbody>
                                                    </table>


                                                    <!--[if mso]>
                                        </td>
                                        <![endif]-->

                                                    <!--[if mso]>
                                        <td align="center" valign="top">
                                        <![endif]-->

                                                    <table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnFollowStacked" style="display: inline;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">

                                                      <tbody>
                                                        <tr>
                                                          <td align="center" valign="top" class="mcnFollowIconContent" style="padding-right: 10px;padding-bottom: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                            <a href="https://twitter.com/great_simple" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"><img src="https://cdn-images.mailchimp.com/icons/social-block-v2/light-twitter-96.png" alt="Twitter" class="mcnFollowBlockIcon" width="48" style="width: 48px;max-width: 48px;display: block;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"></a>
                                                          </td>
                                                        </tr>


                                                      </tbody>
                                                    </table>


                                                    <!--[if mso]>
                                        </td>
                                        <![endif]-->

                                                    <!--[if mso]>
                                        <td align="center" valign="top">
                                        <![endif]-->

                                                    <table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnFollowStacked" style="display: inline;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">

                                                      <tbody>
                                                        <tr>
                                                          <td align="center" valign="top" class="mcnFollowIconContent" style="padding-right: 0;padding-bottom: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                            <a href="https://www.instagram.com/greatsimple/" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;"><img src="https://cdn-images.mailchimp.com/icons/social-block-v2/light-instagram-96.png" alt="Instagram" class="mcnFollowBlockIcon" width="48" style="width: 48px;max-width: 48px;display: block;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"></a>
                                                          </td>
                                                        </tr>


                                                      </tbody>
                                                    </table>


                                                    <!--[if mso]>
                                        </td>
                                        <![endif]-->

                                                    <!--[if mso]>
                                    </tr>
                                    </table>
                                    <![endif]-->
                                                  </td>
                                                </tr>
                                              </tbody>
                                            </table>
                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                              </tbody>
                            </table>

                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnDividerBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;table-layout: fixed !important;">
                      <tbody class="mcnDividerBlockOuter">
                        <tr>
                          <td class="mcnDividerBlockInner" style="min-width: 100%;padding: 10px 18px 25px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                            <table class="mcnDividerContent" border="0" cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;border-top-width: 1px;border-top-style: solid;border-top-color: #EEEEEE;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                              <tbody>
                                <tr>
                                  <td style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                    <span></span>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                            <!--
                <td class="mcnDividerBlockInner" style="padding: 18px;">
                <hr class="mcnDividerContent" style="border-bottom-color:none; border-left-color:none; border-right-color:none; border-bottom-width:0; border-left-width:0; border-right-width:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0;" />
-->
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                      <tbody class="mcnTextBlockOuter">
                        <tr>
                          <td valign="top" class="mcnTextBlockInner" style="padding-top: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                            <!--[if mso]>
				<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
				<tr>
				<![endif]-->

                            <!--[if mso]>
				<td valign="top" width="600" style="width:600px;">
				<![endif]-->
                            <table align="left" border="0" cellpadding="0" cellspacing="0" style="max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" width="100%" class="mcnTextContentContainer">
                              <tbody>
                                <tr>

                                  <td valign="top" class="mcnTextContent" style="padding-top: 0;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #bebebe;font-family: Helvetica;font-size: 11px;line-height: 150%;text-align: center;">

                                    Copyright © 2016 Great Simple Studio<br> 29 Millionnaya, Saint Petersburg, Russia<br>
                                    <a href="http://greatsimple.ru" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #656565;font-weight: normal;text-decoration: underline;">Greatsimple.ru</a>                                    /&nbsp;<a href="#" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #656565;font-weight: normal;text-decoration: underline;"
                                      target="_blank">Unsubscribe</a><br>
                                    <br>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                            <!--[if mso]>
				</td>
				<![endif]-->

                            <!--[if mso]>
				</tr>
				</table>
				<![endif]-->
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
            <!--[if gte mso 9]>
						</td>
						</tr>
						</table>
						<![endif]-->
            <!-- // END TEMPLATE -->
          </td>
        </tr>
      </tbody>
    </table>
  </center>
</body>
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console