A Pen by wendy

Thumbnail
This awesome code was written by wenwenwen, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright wenwenwen ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  wendy</title>
  
  
  
  
  
</head>

<body>

  <style type="text/css">
#ProProgMain {
	width: 980px;
	margin: auto;
	line-height: 1.1em;
	font-family: roboto;
}
#ProProgMain p {
	font-size: 15px;
	line-height: 1.3em;
	color: #222;
	padding: 5px 15px;
}
.ProProgContainer {
	width: 960px;
	display: inline-block;
	margin: 0;
	color: #222;
}
.ProProgContainer h3 {
	font-size: 36px;
	color: #c0392b;
	font-weight: normal;
	margin: 0;
	margin-bottom: 10px;
	border-bottom: 5px solid #34495e;
	width: 100%;
	height: 60px;
	padding-left: 20px;
	line-height: 2em;
	text-align: left;
}
.ProHeaderLeft {
	float: left;
	width: 630px;
}
.ProHeaderRight {
	float: right;
	width: 290px;
	background-color: #ecf0f1;
	padding: 10px;
	border: 1px solid #aaa;
	border-radius: 3px;
	font-size: 15px;
	text-align: center;
	margin-top: 25px;
	box-shadow: 0px 0px 3px #aaa;
	position: relative;
}
#ProProgBtm {
	clear: both;
	width: 980px;
}
.ProProgBenefits {
	width: 625px;
	margin: 0;
	float: left;
	margin-right: 0px;
	margin-top: 20px;
	margin-bottom: 50px;
	border: 1px solid #aaa;
	background-color: #fff;
	box-shadow: 0px 0px 5px #ccc;
	border-radius: 3px;
}
.ProProgBenefits h5 {
	padding: 0 0 5px 15px;
	padding-top: 5px;
	margin: 0;
	font-size: 26px;
	color: #222;
	padding-bottom: 5px;
	font-weight: normal;
	min-height: 25px;
	line-height: 1.5em;
	background-color: #34495e;
	text-align: left;
	color: #fff;
}
.ProProgBenefits p {
	padding-bottom: 15px;
	text-align: left;
}
.ProProgBenefits ul {
	padding: 0;
	margin: 0;
	margin-top: 10px;
	margin-bottom: 25px;
	margin-right: 25px;
	padding-left: 35px;
}
.ProProgBenefits ul li {
	line-height: 1.3em;
	margin-top: 20px;
	font-size: 17px;
	text-align: left;
	color: #252d37;
}
.ProProgHighLight {
	font-size: 16px;
	color: #000;
	font-weight: bold;
	text-align: left;
}
.ProProgRight {
	width: 330px;
	float: right;
	border: 1px solid #aaa;
	margin-left: 0px;
	margin-top: 20px;
	margin-bottom: 50px;
	background-color: #fff;
	border-radius: 3px;
}
.ProProgRight h4 {
	font-size: 17px;
	font-weight: normal;
	padding: 0;
	margin: 0;
	padding: 10px;
	min-height: 20px;
	background-color: #34495e;
	text-align: center;
	color: #fff;
	border-bottom: 1px solid #2c3e50;
}
.ProProgRight p {
	font-size: 13px!important;
}
.ProProgRight ul {
	padding: 0;
	margin: 0;
	margin-top: 10px;
	margin-bottom: 25px;
	padding-left: 25px;
	list-style-type: square;
}
.ProProgRight ul li {
	line-height: 1.5em;
	margin-top: 5px;
	font-size: 13px;
	text-align: left;
	color: #252d37;
}
.ProSignUpBtn {
	text-decoration: none;
	font-size: 20px;
	text-transform: uppercase;
	padding: 5px 30px;
	background-color: #27ae60;
	color: #fff!important;
	border-radius: 3px;
	font-weight: bold;
	box-shadow: 0px 0px 3px #2ecc71;
}
.ProSignUpBtn:hover {
	background-color: #2ecc71;
	box-shadow: none;
}
.ProLogInBtn {
	text-decoration: none;
	font-size: 13px;
	text-transform: uppercase;
	padding: 5px 10px;
	background-color: #c0392b;
	color: #fff!important;
	border-radius: 2px;
}
.ProLogInBtn:hover {
	background-color: #cc0000;
}
.CanadaFlag {
	width: 75px;
	position: absolute;
	top: -20px;
	left: -35px;
}
</style>
<div id="ProProgMain">
  <div class="ProProgContainer">
    <h3>Welcome New ELK Lighting Customers!</h3>
    <div class="ProHeaderLeft"> <br>
      <br>
      <br>
      <img style="margin-left:10px;" src="//images.1stoplighting.com/site/common/promos/elk/elk-pricing-callout.png" alt="Pro Pricings on all ELK Lighting products"> </div>
    <div class="ProHeaderRight">  <br>
      Ready to join? <br>
      <br>
      <a href="/secure/signup.aspx?s=tr1" class="ProSignUpBtn">Sign Up Here</a><br>
      <br>
      <br>
      Already a Member? <a href="https://www.1stoplightingpro.com/secure/loginpro.aspx?ReturnUrl=/" class="ProLogInBtn">Log In</a>
       <br>
      <br>
      <p style="text-align:center; font-size:18px;"> Trouble logging in?<br>
        Call us at <b>1-855-300-9232</b></p>
    </div>
    <img style="margin-left:10px;" src="//images.1stoplighting.com/site/common/promos/Elk/elk-fixtures-header.jpg">
    <div id="ProProgBtm">
      <div class="ProProgBenefits">
        <h5>Pro Membership Benefits!</h5>
        <ul>
        
          <li>Exclusive <b>30% OFF Listed Prices</b> for all ELK products</li>
          <li>Dedicated Account Manager for single source contact for all your needs</li>
          <li><strong>FREE 3 day delivery</strong> on in stock items for all ELK Lighting products or we give you back $100.00 per order</li>
          <li>Free exclusive <strong>lifetime warranties</strong> on many brands</li>
          <li><strong>No restocking fees</strong></li>
        </ul>
 </div>
      <div class="ProProgRight">
        
        <h4>Featured Brands:</h4>
        <a href="/Elk-Lighting/0-0-0-31/list.aspx"><img style="padding:5px 15px; width:125px;" src="//images.1stoplighting.com/supplier/Elk-Lighting/logo/elk-lighting.gif" alt="ELK Lighting"></a>
        <a href="/Landmark/0-0-0-13/list.aspx"><img style="padding:5px 15px; width:125px;" src="//images.1stoplighting.com/supplier/Landmark-Lighting/logo/landmark-lighting.gif" alt="Landmark Lighting"></a> <a href="/Dimond-Lighting/0-0-0-223/list.aspx"><img style="padding:5px 15px; width:125px;" src="//images.1stoplighting.com/supplier/Dimond-Lighting/dimond_logo.jpg" alt="Dimond Lighting"></a>  <a href="/Cornerstone/0-0-0-412/list.aspx"><img style="padding:5px 15px; width:125px;" src="//images.1stoplighting.com/supplier/Cornerstone/cornerstone_logo.png" alt="Cornerstone"></a> <a href="/Bailey-Street/0-0-0-357/list.aspx"><img style="padding:5px 15px;" src="//images.1stoplighting.com/supplier/Bailey-Street/bailey-street_logo.png" alt="Bailey Street"></a>
      <a href="/Sterling-Industries/0-0-0-281/list.aspx"><img style="padding:10px 15px;" src="//images.1stoplighting.com/supplier/SterlingIndustries/SterlingIndustries.gif" alt="Sterling Industries"></a></div>
    </div>
  </div>
</div>
<!--CLOSE wrapper-->
<div style="clear: both;"> </div>
  
  

</body>

</html>

Comments