Created
May 27, 2025 14:26
-
-
Save NysaPahari/45b4137297318bb99baa58e30b4fb37d to your computer and use it in GitHub Desktop.
marketing email template
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Marketing Email Template</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| /* Reset styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Open Sans', Arial, sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| background-color: #f4f4f4; | |
| } | |
| .email-container { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| background-color: #ffffff; | |
| box-shadow: 0 0 20px rgba(0,0,0,0.1); | |
| } | |
| /* Header Section */ | |
| .header { | |
| background: linear-gradient(135deg, #667eea, #764ba2); | |
| padding: 20px; | |
| text-align: center; | |
| color: white; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .header::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.1) 75%), linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.1) 75%); | |
| background-size: 20px 20px; | |
| animation: shimmer 20s linear infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } | |
| 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } | |
| } | |
| .logo { | |
| font-family: 'Montserrat', sans-serif; | |
| font-size: 28px; | |
| font-weight: 700; | |
| margin-bottom: 10px; | |
| letter-spacing: 2px; | |
| } | |
| .banner { | |
| background: linear-gradient(45deg, #ff6b6b, #ffd93d); | |
| padding: 10px 20px; | |
| border-radius: 30px; | |
| display: inline-block; | |
| font-weight: 700; | |
| font-size: 16px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| color: #2c3e50; | |
| box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4); | |
| animation: pulse 2s ease-in-out infinite alternate; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 100% { transform: scale(1.05); } | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| position: relative; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); | |
| height: 350px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| text-align: center; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="20" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="10" cy="90" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="70" cy="70" r="1" fill="rgba(255,255,255,0.1)"/></svg>'); | |
| animation: float 15s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0) rotate(0deg); } | |
| 50% { transform: translateY(-20px) rotate(180deg); } | |
| } | |
| .hero-content h1 { | |
| font-family: 'Montserrat', sans-serif; | |
| font-size: 42px; | |
| font-weight: 700; | |
| margin-bottom: 15px; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.3); | |
| background: linear-gradient(45deg, #fff, #f0f8ff); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .hero-content p { | |
| font-size: 20px; | |
| margin-bottom: 30px; | |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.3); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* CTA Button */ | |
| .cta-button { | |
| display: inline-block; | |
| background: linear-gradient(45deg, #ff6b6b, #ffd93d, #4ecdc4); | |
| background-size: 300% 300%; | |
| color: white; | |
| text-decoration: none; | |
| padding: 18px 40px; | |
| border-radius: 50px; | |
| font-weight: 700; | |
| font-size: 16px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| transition: all 0.4s ease; | |
| box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4); | |
| animation: gradientShift 3s ease infinite; | |
| position: relative; | |
| z-index: 1; | |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.3); | |
| } | |
| @keyframes gradientShift { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .cta-button:hover { | |
| transform: translateY(-3px) scale(1.05); | |
| box-shadow: 0 12px 35px rgba(255, 107, 107, 0.6); | |
| } | |
| /* Product Sections */ | |
| .content { | |
| padding: 40px 30px; | |
| } | |
| .section-title { | |
| font-family: 'Montserrat', sans-serif; | |
| font-size: 28px; | |
| font-weight: 600; | |
| text-align: center; | |
| margin-bottom: 30px; | |
| color: #2c3e50; | |
| } | |
| .products-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 30px; | |
| margin-bottom: 40px; | |
| } | |
| .product-card { | |
| text-align: center; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |
| transition: transform 0.3s ease; | |
| background: white; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .product-image { | |
| width: 100%; | |
| height: 200px; | |
| background: linear-gradient(45deg, #f8f9fa, #e9ecef); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #6c757d; | |
| font-size: 14px; | |
| } | |
| .product-info { | |
| padding: 20px; | |
| } | |
| .product-name { | |
| font-family: 'Montserrat', sans-serif; | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| color: #2c3e50; | |
| } | |
| .product-price { | |
| font-size: 20px; | |
| font-weight: 700; | |
| color: #e74c3c; | |
| margin-bottom: 15px; | |
| } | |
| .product-price .original { | |
| text-decoration: line-through; | |
| color: #95a5a6; | |
| font-size: 16px; | |
| margin-right: 8px; | |
| } | |
| .product-cta { | |
| background: linear-gradient(45deg, #2c3e50, #34495e); | |
| color: white; | |
| text-decoration: none; | |
| padding: 10px 20px; | |
| border-radius: 20px; | |
| font-weight: 600; | |
| font-size: 14px; | |
| transition: all 0.3s ease; | |
| display: inline-block; | |
| } | |
| .product-cta:hover { | |
| background: linear-gradient(45deg, #34495e, #2c3e50); | |
| transform: translateY(-1px); | |
| } | |
| /* Footer Section */ | |
| .footer { | |
| background-color: #2c3e50; | |
| color: white; | |
| padding: 30px; | |
| text-align: center; | |
| } | |
| .social-links { | |
| margin-bottom: 20px; | |
| } | |
| .social-links a { | |
| display: inline-block; | |
| margin: 0 10px; | |
| color: white; | |
| text-decoration: none; | |
| font-size: 18px; | |
| padding: 10px; | |
| border-radius: 50%; | |
| background-color: rgba(255,255,255,0.1); | |
| transition: all 0.3s ease; | |
| width: 40px; | |
| height: 40px; | |
| line-height: 20px; | |
| } | |
| .social-links a:hover { | |
| background-color: #e74c3c; | |
| transform: translateY(-2px); | |
| } | |
| .footer-info { | |
| font-size: 14px; | |
| line-height: 1.8; | |
| color: #bdc3c7; | |
| } | |
| .footer-info a { | |
| color: #ecf0f1; | |
| text-decoration: none; | |
| } | |
| .footer-info a:hover { | |
| color: #e74c3c; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 600px) { | |
| .email-container { | |
| margin: 0; | |
| box-shadow: none; | |
| } | |
| .header { | |
| padding: 15px; | |
| } | |
| .logo { | |
| font-size: 24px; | |
| } | |
| .banner { | |
| font-size: 14px; | |
| padding: 6px 12px; | |
| } | |
| .hero { | |
| height: 250px; | |
| } | |
| .hero-content h1 { | |
| font-size: 28px; | |
| } | |
| .hero-content p { | |
| font-size: 16px; | |
| } | |
| .content { | |
| padding: 30px 20px; | |
| } | |
| .section-title { | |
| font-size: 24px; | |
| } | |
| .products-grid { | |
| grid-template-columns: 1fr; | |
| gap: 20px; | |
| } | |
| .footer { | |
| padding: 20px; | |
| } | |
| } | |
| /* Color Variations - Wellness Theme */ | |
| .wellness .header { | |
| background: linear-gradient(135deg, #27ae60, #2ecc71); | |
| } | |
| .wellness .cta-button { | |
| background: linear-gradient(45deg, #27ae60, #2ecc71); | |
| box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3); | |
| } | |
| .wellness .product-price { | |
| color: #27ae60; | |
| } | |
| .wellness .social-links a:hover { | |
| background-color: #27ae60; | |
| } | |
| .wellness .footer-info a:hover { | |
| color: #2ecc71; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="email-container"> | |
| <!-- Header Section --> | |
| <div class="header"> | |
| <div class="logo">BRAND NAME</div> | |
| <div class="banner">🔥 20% OFF Today!</div> | |
| </div> | |
| <!-- Hero Section --> | |
| <div class="hero"> | |
| <div class="hero-content"> | |
| <h1>Summer Collection Launch</h1> | |
| <p>Discover our latest arrivals and exclusive deals</p> | |
| <a href="#" class="cta-button">Shop Now</a> | |
| </div> | |
| </div> | |
| <!-- Content Section --> | |
| <div class="content"> | |
| <h2 class="section-title">Featured Products</h2> | |
| <div class="products-grid"> | |
| <div class="product-card"> | |
| <div class="product-image">Product Image</div> | |
| <div class="product-info"> | |
| <div class="product-name">Premium T-Shirt</div> | |
| <div class="product-price"> | |
| <span class="original">$49.99</span> | |
| $39.99 | |
| </div> | |
| <a href="#" class="product-cta">Add to Cart</a> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <div class="product-image">Product Image</div> | |
| <div class="product-info"> | |
| <div class="product-name">Designer Jeans</div> | |
| <div class="product-price"> | |
| <span class="original">$89.99</span> | |
| $71.99 | |
| </div> | |
| <a href="#" class="product-cta">Add to Cart</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="text-align: center; margin-top: 30px;"> | |
| <a href="#" class="cta-button">View All Products</a> | |
| </div> | |
| </div> | |
| <!-- Footer Section --> | |
| <div class="footer"> | |
| <div class="social-links"> | |
| <a href="#">f</a> | |
| <a href="#">t</a> | |
| <a href="#">i</a> | |
| <a href="#">@</a> | |
| </div> | |
| <div class="footer-info"> | |
| <p><strong>BRAND NAME</strong></p> | |
| <p>123 Fashion Street, Style City, SC 12345</p> | |
| <p>Email: hello@brandname.com | Phone: (555) 123-4567</p> | |
| <p style="margin-top: 15px;"> | |
| <a href="#">Unsubscribe</a> | | |
| <a href="#">Privacy Policy</a> | | |
| <a href="#">Terms of Service</a> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment