index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DevConf 2026</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>

  <!-- navbar section -->
  <header>
    <nav>
     <img src="images/logo.png">
     
    <ul class="menu">
       <li><a href="">Speakers</a></li>
       <li><a href="">Schedule</a></li>
       <li><a href="">Tracks</a></li>
       <li><a href="">Venue</a></li>
       <li><a href="">Blog</a></li>
       
    </ul>
    <button>Register Now</button>
    </nav>
  </header>

  <!-- hero section -->

  <section class="hero">
    <div class="overlay">
      <h1>Code. <em>Connect.</em> Create</h1>

      <p>Join 4,000+ engineers, founders, and builders at the premier developer conference of 2026. Three days of cutting-edge talks, hands-on workshops, and meaningful connections.</p>

      <button>Register Now</button>
    </div>
  </section>

  <!-- speakers section -->

  <section class="speakers">

    <h2>Meet the Speakers</h2>

    <div class="speaker-container">

      <div class="card">
        <img src="images/andrej.png">
        <small>AI / ML</small>
        <h3>Andrej Karpathy</h3>
        <p>Founding Team, OpenAI</p>
      </div>

      <div class="card">
        <img src="images/demis.png">
        <small>Cloud & DevOps</small>
        <h3>Demis Hassabis</h3>
        <p>CEO, Google DeepMind</p>
      </div>

      <div class="card">
        <img src="images/gary.png">
        <small>Frontend</small>
        <h3>Gary Marcus</h3>
        <p>AI Researcher</p>
      </div>

      <div class="card">
        <img src="images/mustafa.png">
        <small>Security</small>
        <h3>Mustafa Suleyman</h3>
        <p>CEO, Microsoft AI</p>
      </div>

    </div>

  </section>

  <!-- pricing section -->

  <section class="pricing">
    <h2>Secure Your Spot</h2>
    <p>Early-birds pricing ends August 15, 2026.</p>

    <div class="pricing-container">

      <!-- Standard -->
       <div class="st-card">
        <small>STANDARD</small>
        <h3>$399</h3>
        <p class="per-person">per person</p>
        <hr>

        <ul class="pricing-list">
          <li>Access to all 3 conference day</li>
          <li>48 curated technical talks</li>
          <li>2 workshop sessions</li>
          <li>Networking lunch & coffee breaks</li>
          <li>Conference swag bag</li>
          <li>Digital recording (30 days)</li>
        </ul>
        <button class="btn">Get Standard</button>
       </div>

       <!-- Pro -->
       <div class="pro-card">
        <small>PRO</small>
        <h3>$749</h3>
        <p class="pricing-card">per person</p>
        <hr>

        <ul class="pricing-list">
          <li>Everything in Standard</li>
          <li>Unlimited workshop access</li>
          <li>Speaker meet and greet</li>
          <li>VIP networking dinner</li>
          <li>Lifetime recording access</li>
          <li>1-on-1 mentorship (30 min)</li>
        </ul>
        <button class="btn">Get Pro</button>
        </div>

        <!-- Team -->
        <div class="st-card">
          <small>TEAM</small>
          <h3>$5,999</h3>
          <p class="pricing-card">up to 10 people</p>
          <hr>

          <ul class="pricing-list">
            <li>Everything in Pro (10 seats)</li>
            <li>Dedicated team lounge access</li>
            <li>Private workshop booking</li>
            <li>Company logo on event page</li>
            <li>Recruitment booth (1 day)</li>
            <li>Proirity customer support</li>
          </ul>
          <button class="btn">Contact Us</button>
        </div>

    </div>
  </section>

  <!-- AI Challenge section - FAQ -->

  <section class="faq-section">
    <h2>Frequently Asked Questions</h2>
    <p class="faq-subtitle">Everything you need to know about DevConf 2026</p>

    <div class="faq-container">
      <!-- 1st question -->
       <div class="faq-item">
        <h4>When and where will DevConf 2026 take place?</h4>
        <p>DevConf 2o26 will be held from August 15-17, 2026. It is a fully in-person  event packed with technical talks and workshops.</p>
       </div>

       <!-- 2nd question -->
        <div class="faq-item">
          <h4>Will recorded sessions be available after the event?</h4>
          <p>Yes! Depending on your ticket plan (Standard, Pro, or Team), you will get digital recording access for up to 30 days or lifetime access.</p>
        </div>

        <!-- 3rd question -->
         <div class="faq-item">
          <h4>Is there any discount for group bookings?</h4>
          <p>Yes, our "Team" plan offers a great discount for up to 10 people, which includes a dedicated team lounge and private workshop booking.</p>
         </div>

         <!-- 4th question -->
          <div class="faq-item">
            <h4>Can I change my ticket plan later?</h4>
            <p>Absolutely. You can upgrade your ticket from Standard to Pro anytime before the event starts by contacting our support team.</p>
          </div>
    </div>
  </section>

  <!-- footer section start -->

    <footer class="main-footer">

      <div class="footer-top">
        <div class="footer-logo">
          <img src="images/logo-mini.png" alt="DevConf Mini Logo" class="f-logo-img">
        </div>
        <div class="footer-socials">
          <a href="">Facebook</a>
          <a href="">Twitter</a>
          <a href="">LinkedIn</a>
          <a href="">GitHub</a>
        </div>
      </div>

      <hr class="footer-divider">

      <div class="footer-bottom">
        <p>&copy; 2026 DevConf. All rights reserved</p>
      </div>
    </footer>

</body>
</html>