There is no tool called "CodePen Email Template". CodePen is a platform for front-end development, allowing users to create and share HTML, CSS, and JavaScript code snippets. It does not offer a pre-built "Email Template" specifically designed for steel products or any other subject. To create an email template for steel products on CodePen, you would need to write the HTML, CSS, and potentially JavaScript yourself. I cannot directly generate the code because I don't have access to a real-time code editor or the ability to upload files to CodePen. However, I can provide you with a comprehensive HTML structure and CSS styling to get you started. You would then copy and paste this code into CodePen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Steel Products Email</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.header h1 {
margin: 0;
}
.section {
padding: 20px 0;
}
.section h2 {
color: #333;
}
.section p {
line-height: 1.6;
}
.cta-button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
display: inline-block;
margin-top: 20px;
}
.footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
font-size: 12px;
}
/* Responsive adjustments */
@media (max-width: 600px) {
.container {
padding: 10px;
}
.section {
padding: 10px 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Steel Products</h1>
</div>
<div class="section">
<h2>High-Quality Steel for Your Projects</h2>
<p>We offer a wide range of steel products, including sheets, bars, pipes, and more. Our steel is known for its durability, strength, and reliability.</p>
<img src="your-steel-image-url.jpg" alt="Steel Products" width="500">
</div>
<div class="section">
<h2>Our Product Range</h2>
<ul>
<li>Carbon Steel</li>
<li>Stainless Steel</li>
<li>Alloy Steel</li>
<li>And more!</li>
</ul>
</div>
<div class="section">
<h2>Get a Quote Today!</h2>
<a href="your-quote-link" class="cta-button">Request a Quote</a>
</div>
<div class="footer">
© 2023 Your Company Name
</div>
</div>
</body>
</html>
Remember to replace "your-steel-image-url.jpg" with the actual URL of your image and "your-quote-link" with the appropriate link. This provides a basic structure; you'll likely need to adjust the CSS and add more content to fit your specific needs. You would then copy this code into the HTML editor on CodePen. You will also need to add your own images and adjust the content to accurately reflect your steel products.