RSVP System

<article id="main">
  <header>
    <h2>Confirm Attendance / RSVP</h2>
    <p>
      Please complete the form below to confirm your attendance for 
      all or specific events
    </p>
  </header>
  <section class="wrapper style5">
    <div class="inner">
      <section id="Confirm Attendance">
        <h2>We can't wait to meet you !</h2>
        <p>
          <blockquote>
            This form is to help us get a head count to arrange for 
            food, beverages and other services for all events.
          </blockquote>
          <!-- Embedded form goes here -->
        </p>
      </section>
    </div>
  </section>
</article>

<section class="wrapper style5">
  <div class="inner">
    <section id="Confirm Attendance">
      <h2>We can't wait to meet you !</h2>
      <p>
        <blockquote>
          This form is to help us get a head count to arrange for food, 
          beverages and other services for all events.
        </blockquote>
        <iframe 
          src="https://docs.google.com/forms/d/e/1FAIpQLSeWuYI3M7yymeYlfO38AJlt_fPu1Y26_VlHixqq3D_PmJt73g/viewform?embedded=true" 
          width="100%" 
          height="1100" 
          frameborder="0" 
          marginheight="0" 
          marginwidth="0">
          Loading…
        </iframe>
      </p>
      <h3>
        <a href="schedule.html#Sign Up Sheet">
          <i><u>Click here to take me to Sangeeth performance sign up 
          sheet and make the Bride and Groom's day !</u></i>
        </a>
      </h3>
    </section>
  </div>
</section>

<style>
.rsvp-container {
  background: #f5f5f5;
  padding: 30px;
  border-radius: 8px;
  margin: 20px 0;
}

.rsvp-container blockquote {
  border-left: 4px solid #25a186;
  padding-left: 20px;
  font-style: italic;
}

.rsvp-container iframe {
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>

<div class="rsvp-container">
  <blockquote>
    This form is to help us get a head count to arrange for food, 
    beverages and other services for all events.
  </blockquote>
  <iframe src="YOUR_FORM_URL" width="100%" height="1100"></iframe>
</div>

<section id="Confirm Attendance">
  <h2>We can't wait to meet you!</h2>
  <div class="deadline-notice">
    <p><strong>Please respond by April 15, 2022</strong></p>
    <p>This helps us provide an accurate headcount to our caterers and venue.</p>
  </div>
  <!-- Form here -->
</section>

<section>
  <p>
    Click the button below to <b>confirm</b> your attendance for 
    <i>all</i> or <i>specific events.</i>
  </p>
  <a href="pages/confirm_attendance.html#Confirm Attendance" 
     class="button primary fit">
    Confirm Attendance / RSVP
  </a>
</section>

<!-- Responsive iframe wrapper -->
<div class="iframe-container">
  <iframe src="YOUR_FORM_URL" width="100%" height="1100"></iframe>
</div>

<style>
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

@media screen and (max-width: 736px) {
  .iframe-container iframe {
    height: 1200px; /* Slightly taller on mobile */
  }
}
</style>