Cyberpunk Tech Conference Email Template

Bold neon-gradient email design with cyberpunk aesthetics featuring hot pink and cyan color scheme, Orbitron font, and glowing text effects - perfect for tech events and digital experiences.

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=Orbitron:wght@400;700;900&display=swap');
    </style>
  </head>
  <body style="background-color:#13001a;margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-family:'Orbitron', 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 with Neon Border -->
        <tr>
            <td style="padding:40px 20px">
                <table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background:linear-gradient(125deg, #ff00ea 0%, #00f6ff 100%);padding:3px;border-radius:15px">
                    <tr>
                        <td style="background:#13001a;padding:32px;border-radius:12px">
                            <h1 style="font-weight:900;font-size:36px;text-align:center;color:#fff;margin:0;letter-spacing:4px;text-shadow:0 0 10px #ff00ea, 0 0 20px #ff00ea">CYBERCON</h1>
                            <p style="text-align:center;color:#00f6ff;font-size:14px;letter-spacing:8px;margin:8px 0 0 0;text-shadow:0 0 5px #00f6ff">2024</p>
                        </td>
                    </tr>
                </table>
            </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(150deg, #240041 0%, #900048 100%);border-radius:15px;border:1px solid #ff00ea">
                    <tr>
                        <td style="padding:40px">
                            <table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
                                <tr>
                                    <td>
                                        <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f" alt="Cyberpunk Scene" style="width:100%;height:300px;object-fit:cover;border-radius:10px;border:2px solid #00f6ff;box-shadow:0 0 20px rgba(0,246,255,0.5)" />
                                        <table width="95%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin:-40px auto 0;position:relative;background:#13001a;padding:32px;border:2px solid #ff00ea;border-radius:10px">
                                            <tr>
                                                <td>
                                                    <h2 style="font-weight:700;font-size:28px;color:#fff;margin:0 0 16px 0;text-shadow:0 0 10px #ff00ea">VIRTUAL REALITY SUMMIT</h2>
                                                    <p style="font-size:16px;line-height:1.6;color:#00f6ff;margin:0 0 24px 0;text-shadow:0 0 5px #00f6ff">Enter a new dimension of reality with groundbreaking VR technology.</p>
                                                    <a href="#" style="font-size:14px;background:linear-gradient(90deg, #ff00ea, #00f6ff);-webkit-background-clip:text;color:transparent;text-decoration:none;border:2px solid #ff00ea;padding:12px 24px;display:inline-block;border-radius:25px;text-transform:uppercase;font-weight:700;letter-spacing:2px">Join the Future</a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <!-- Feature Grid -->
        <tr>
            <td style="padding:40px 20px">
                <table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
                    <tr>
                        <td>
                            <table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
                                <tr>
                                    <td style="width:50%;padding:10px">
                                        <div style="background:linear-gradient(135deg, #240041 0%, #900048 100%);padding:2px;border-radius:15px">
                                            <div style="background:#13001a;padding:24px;border-radius:13px;min-height:200px">
                                                <h3 style="font-size:20px;color:#ff00ea;margin:0 0 16px 0;text-shadow:0 0 10px #ff00ea">Neural Link</h3>
                                                <p style="font-size:14px;color:#fff;margin:0;line-height:1.6">Direct brain-computer interface technology. Experience thoughts in real-time.</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td style="width:50%;padding:10px">
                                        <div style="background:linear-gradient(135deg, #240041 0%, #900048 100%);padding:2px;border-radius:15px">
                                            <div style="background:#13001a;padding:24px;border-radius:13px;min-height:200px">
                                                <h3 style="font-size:20px;color:#00f6ff;margin:0 0 16px 0;text-shadow:0 0 10px #00f6ff">Quantum OS</h3>
                                                <p style="font-size:14px;color:#fff;margin:0;line-height:1.6">Next-gen operating system powered by quantum computing architecture.</p>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <!-- Event Details -->
        <tr>
            <td style="padding:20px">
                <table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background:linear-gradient(125deg, #ff00ea 0%, #00f6ff 100%);padding:2px;border-radius:15px">
                    <tr>
                        <td style="background:#13001a;padding:40px;border-radius:13px;text-align:center">
                            <p style="font-size:14px;color:#ff00ea;margin:0 0 16px 0;text-transform:uppercase;letter-spacing:4px">Live Stream</p>
                            <h2 style="font-weight:700;font-size:32px;color:#fff;margin:0 0 24px 0;text-shadow:0 0 15px #ff00ea">12.12.2024</h2>
                            <div style="margin:32px 0;height:1px;background:linear-gradient(90deg, transparent, #ff00ea, transparent)"></div>
                            <table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:300px;margin:0 auto">
                                <tr>
                                    <td style="text-align:center">
                                        <a href="#" style="display:inline-block;padding:16px 32px;background:linear-gradient(90deg, #ff00ea, #00f6ff);color:#13001a;text-decoration:none;border-radius:25px;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:14px">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;color:#ff00ea;margin:0 0 16px 0;text-transform:uppercase;letter-spacing:4px">Follow Us</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;background:linear-gradient(90deg, #ff00ea, #00f6ff);-webkit-background-clip:text;color:transparent;text-decoration:none">Discord</a>
                                    </td>
                                    <td style="padding:0 16px">
                                        <a href="#" style="font-size:14px;background:linear-gradient(90deg, #ff00ea, #00f6ff);-webkit-background-clip:text;color:transparent;text-decoration:none">Twitter</a>
                                    </td>
                                    <td style="padding:0 16px">
                                        <a href="#" style="font-size:14px;background:linear-gradient(90deg, #ff00ea, #00f6ff);-webkit-background-clip:text;color:transparent;text-decoration:none">Twitch</a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:center">
                            <div style="margin:32px 0;height:1px;background:linear-gradient(90deg, transparent, #ff00ea, transparent)"></div>
                            <p style="font-size:14px;color:#fff;margin:0">CYBERCON Inc. • Virtual Reality Division</p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
  </body>
</html>