post.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pengumuman Palu Developer Day 2024</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f3f4f6;
        margin: 0;
        padding: 0;
      }
      .container {
        max-width: 700px;
        margin: 0 auto;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }
      .header {
        background: linear-gradient(90deg, #6b46c1, #4299e1);
        text-align: center;
        color: white;
        padding: 40px 20px;
      }
      .header h1 {
        font-size: 32px;
        margin: 0;
        font-weight: bold;
      }
      .header p {
        font-size: 18px;
        margin: 5px 0;
        font-weight: bold;
      }
      .content {
        padding: 20px 30px;
      }
      .content p {
        font-size: 18px;
        color: #333333;
        margin-bottom: 20px;
        line-height: 1.6;
      }
      .content h2 {
        font-size: 26px;
        color: #333333;
        font-weight: bold;
        margin-bottom: 20px;
      }
      .speaker-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
      }
      .speaker {
        text-align: center;
        background-color: #f9fafb;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .speaker img {
        border-radius: 50%;
        margin-bottom: 10px;
        width: 100px;
        height: 100px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }
      .speaker h3 {
        font-size: 20px;
        color: #333333;
        margin: 10px 0;
        font-weight: bold;
      }
      .speaker p {
        font-size: 16px;
        color: #666666;
        margin: 0;
      }
      .cta {
        background-color: #f0fdf4;
        padding: 30px;
        border-radius: 10px;
        border: 2px solid #34d399;
        margin: 30px 0;
      }
      .cta h2 {
        font-size: 24px;
        color: #333333;
        margin-bottom: 10px;
      }
      .cta p {
        font-size: 18px;
        color: #333333;
        margin-bottom: 20px;
      }
      .cta a {
        display: inline-block;
        background-color: #34d399;
        color: white;
        padding: 12px 24px;
        text-decoration: none;
        font-size: 18px;
        border-radius: 50px;
        transition: background-color 0.3s ease;
      }
      .cta a:hover {
        background-color: #059669;
      }
      .event-details {
        background-color: #ebf8ff;
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 30px;
      }
      .event-details h3 {
        font-size: 22px;
        color: #333333;
        margin-bottom: 10px;
      }
      .event-details ul {
        list-style-type: disc;
        margin-left: 20px;
      }
      .event-details ul li {
        font-size: 18px;
        color: #333333;
        margin-bottom: 5px;
      }
      .footer {
        background-color: #2d3748;
        color: white;
        text-align: center;
        padding: 20px;
        font-size: 14px;
      }
      .footer a {
        color: #9f9f9f;
        text-decoration: underline;
      }
      .social-links {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        gap: 15px;
      }
      .social-links a {
        text-decoration: none;
        color: #1d4ed8;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- Header Section -->
      <div class="header">
        <h1>Palu Developer Day 2024 🎉</h1>
        <p>Driving Technological Advancements: AI-Powered IT from Concept to Reality</p>
      </div>

      <!-- Main Content Section -->
      <div class="content">
        <!-- Additional Text Before Speakers -->
        <p>
          Kami dengan penuh antusias mengundang Anda untuk menghadiri <strong>Palu Developer Day 2024</strong>, acara
          spektakuler yang akan mempertemukan para ahli teknologi, pengembang, dan inovator dari seluruh negeri! 🌍
          Bersiaplah untuk hari penuh ilmu, inspirasi, dan peluang kolaborasi yang tidak boleh Anda lewatkan!
        </p>

        <!-- Speaker Section -->
        <h2>📢 Pembicara Utama Kami</h2>
        <div class="speaker-section">
          <!-- Speaker 1 -->
          <div class="speaker">
            <img src="https://via.placeholder.com/100" alt="Jane Doe" />
            <h3>Jane Doe</h3>
            <p>Software Engineer, TechCorp</p>
          </div>
          <!-- Speaker 2 -->
          <div class="speaker">
            <img src="https://via.placeholder.com/100" alt="John Smith" />
            <h3>John Smith</h3>
            <p>CTO, DevSolutions</p>
          </div>
        </div>

        <!-- Early Bird Tickets -->
        <div class="cta">
          <h2>🎟️ Tiket Early Bird Sudah Tersedia!</h2>
          <p>
            Dapatkan tiket early bird Anda sekarang dengan harga spesial <strong>hanya Rp25.000</strong> sebelum
            <strong>30 November 2024</strong>! Jangan lewatkan kesempatan ini untuk menjadi bagian dari acara terbesar
            tahun ini!
          </p>
          <a href="https://palu-devday.com/tickets">Dapatkan Tiket Sekarang</a>
        </div>

        <!-- Event Details -->
        <div class="event-details">
          <h3>🗓️ Detail Acara</h3>
          <ul>
            <li><strong>Tanggal:</strong> 24-25 Maret 2024</li>
            <li><strong>Lokasi:</strong> Palu, Sulawesi Tengah</li>
            <li><strong>Tempat:</strong> Palu Convention Center</li>
          </ul>
        </div>

        <!-- Social Media -->
        <div class="social-links">
          <a href="https://twitter.com/paludevday">🐦 Twitter</a>
          <a href="https://facebook.com/paludevday">📘 Facebook</a>
          <a href="https://instagram.com/paludevday">📸 Instagram</a>
        </div>
      </div>

      <!-- Footer Section -->
      <div class="footer">
        <p>&copy; 2024 Palu Developer Day. Hak Cipta Dilindungi Undang-undang.</p>
        <p><a href="#">Berhenti Berlangganan</a> dari notifikasi ini.</p>
      </div>
    </div>
  </body>
</html>