Modern Tech Company Email | Light Theme
Light mode email template with sci-fi aesthetics, featuring Space Grotesk typography, gradient backgrounds, and neon blue accents - perfect for tech startups and innovation companies.
Preview
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="x-apple-disable-message-reformatting" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;600&display=swap');
</style>
</head>
<body style="background-color:#f8fafc;margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-family:'Space Grotesk', ui-sans-serif, system-ui">
<!-- Main Container -->
<table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:600px;margin:0 auto">
<!-- Header Section -->
<tr>
<td style="padding:40px 20px 20px">
<h1 style="font-weight:600;font-size:24px;text-align:center;color:#0f172a;margin:0;letter-spacing:4px">QUANTUM</h1>
</td>
</tr>
<!-- Hero Section -->
<tr>
<td style="padding:0 20px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background:linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%)">
<tr>
<td style="padding:40px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
<tr>
<td style="padding-bottom:32px">
<p style="font-size:12px;letter-spacing:2px;color:#0284c7;margin:0 0 8px 0;text-transform:uppercase">What's Next</p>
<h2 style="font-weight:600;font-size:32px;line-height:1.2;margin:0;color:#0f172a">Future of Computing</h2>
</td>
</tr>
<tr>
<td>
<img src="https://images.unsplash.com/photo-1518770660439-4636190af475" alt="Tech Future" style="width:100%;height:400px;object-fit:cover" />
<table width="90%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin:-60px auto 0;position:relative;background:white;padding:32px;border:1px solid #e2e8f0;box-shadow:0 4px 6px rgba(0,0,0,0.05)">
<tr>
<td>
<h3 style="font-weight:600;font-size:24px;margin:0 0 16px 0;color:#0f172a">Innovation Unleashed</h3>
<p style="font-size:15px;line-height:1.6;color:#475569;margin:0 0 24px 0">Exploring the boundaries of what's possible with quantum computing.</p>
<a href="#" style="font-size:14px;color:#0284c7;text-decoration:none;border-bottom:1px solid #0284c7;padding-bottom:4px;text-transform:uppercase;letter-spacing:1px">Learn More</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Featured Products -->
<tr>
<td style="padding:60px 20px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
<tr>
<td style="text-align:center;padding-bottom:40px">
<p style="font-size:12px;letter-spacing:2px;color:#0284c7;margin:0 0 8px 0;text-transform:uppercase">Featured</p>
<h2 style="font-weight:600;font-size:28px;margin:0;color:#0f172a">Latest Innovations</h2>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
<tr>
<td style="width:50%;padding:10px">
<img src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5" alt="Innovation 1" style="width:100%;height:300px;object-fit:cover;margin-bottom:16px" />
<h3 style="font-weight:600;font-size:18px;margin:0 0 8px 0;color:#0f172a">Quantum Processing</h3>
<p style="font-size:14px;color:#0284c7;margin:0">Early Access Available</p>
</td>
<td style="width:50%;padding:10px">
<img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa" alt="Innovation 2" style="width:100%;height:300px;object-fit:cover;margin-bottom:16px" />
<h3 style="font-weight:600;font-size:18px;margin:0 0 8px 0;color:#0f172a">Neural Networks</h3>
<p style="font-size:14px;color:#0284c7;margin:0">Coming Soon</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Event Section -->
<tr>
<td style="padding:0 20px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background:linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);border:1px solid #e2e8f0;box-shadow:0 4px 6px rgba(0,0,0,0.05)">
<tr>
<td style="padding:60px 40px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
<tr>
<td style="text-align:center;padding-bottom:40px">
<p style="font-size:12px;letter-spacing:3px;color:#0284c7;margin:0 0 16px 0;text-transform:uppercase">Join Us</p>
<h2 style="font-weight:600;font-size:36px;line-height:1.2;color:#0f172a;margin:0 0 24px 0">Tech Summit 2024</h2>
<p style="font-size:16px;line-height:1.6;color:#475569;margin:0 0 32px 0">Experience the future of technology first-hand</p>
<table align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin:0 auto">
<tr>
<td style="padding:24px 0;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0">
<p style="font-size:14px;color:#0284c7;margin:0 0 8px 0">AUGUST 15TH, 2024</p>
<p style="font-size:14px;color:#0284c7;margin:0">9:00 AM - 6:00 PM PST</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="text-align:center">
<a href="#" style="font-size:12px;letter-spacing:2px;color:white;text-decoration:none;background-color:#0284c7;padding:16px 32px;display:inline-block;text-transform:uppercase">Register Now</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding:60px 20px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
<tr>
<td style="text-align:center;padding-bottom:32px">
<p style="font-size:12px;letter-spacing:2px;color:#0284c7;margin:0 0 16px 0;text-transform:uppercase">Stay Connected</p>
<table width="100%" max-width="300px" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin:0 auto">
<tr>
<td style="padding:0 16px">
<a href="#" style="font-size:14px;color:#475569;text-decoration:none">Twitter</a>
</td>
<td style="padding:0 16px">
<a href="#" style="font-size:14px;color:#475569;text-decoration:none">GitHub</a>
</td>
<td style="padding:0 16px">
<a href="#" style="font-size:14px;color:#475569;text-decoration:none">Discord</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="text-align:center">
<p style="font-size:16px;color:#0f172a;margin:0 0 8px 0">Quantum Technologies</p>
<p style="font-size:14px;line-height:1.6;color:#475569;margin:0">San Francisco • New York • London</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>