contact_us.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>Contact Us | Skule™ French Society</title>

    <link href="images/sfs_logo.png" type="image/x-icon" rel="shortcut icon" />
    <!--  website icon -->

    <link rel="stylesheet" href="./reset.css" />
    <link rel="stylesheet" href="./globalStyles.css" />
    <link rel="stylesheet" href="./components.css" />
    <!-- aos css (animate on scroll library)-->
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  </head>

  <body>
    <!-- Nav Section -->
    <div class="nav">
      <div class="container">
        <div class="nav__wrapper">
          <a href="./index.html" class="logo">
            <img
              src="./images/sfs_logo.png"
              style="width: 40%; height: auto; border-radius: 8px"
              alt="Skule French Society"
            />
          </a>
          <nav>
            <div class="nav__icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <line x1="3" y1="12" x2="21" y2="12" />
                <line x1="3" y1="6" x2="21" y2="6" />
                <line x1="3" y1="18" x2="21" y2="18" />
              </svg>
            </div>

            <div class="nav__bgOverlay"></div>
            <ul class="nav__list">
              <div class="nav__close">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <line x1="18" y1="6" x2="6" y2="18" />
                  <line x1="6" y1="6" x2="18" y2="18" />
                </svg>
              </div>
              <div class="nav__list_wrapper">
                <li><a href="./index.html" class="nav__link">Home</a></li>
                <li><a href="./about.html" class="nav__link">About Us</a></li>
                <li>
                  <a href="./past_events.html" class="nav__link">Past Events</a>
                </li>
                <li>
                  <a href="./resources.html" class="nav__link">Resources</a>
                </li>
                <li>
                  <a href="./sponsors.html" class="nav__link">Partners</a>
                </li>
                <li>
                  <a href="./contact_us.html" class="btn primary-btn"
                    >Contact Us</a
                  >
                </li>
              </div>
            </ul>
          </nav>
        </div>
      </div>
    </div>
    <!-- End Nav Section-->

    <!-- Club Info Section-->
    <section id="storeInfo" data-aos="fade-up">
      <div class="container">
        <h3 class="form__title">Contact us...</h3>
        <div class="store__info__wrapper">
          <div class="store__info__item">
            <div class="club__info__icon">
              <a href="https://www.instagram.com/uoftsfs/" target="_blank">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#26643b"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
                  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
                  <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
                </svg>
              </a>
            </div>
            <h3 class="store__info__title">Instagram</h3>
            <p class="store__info__text">@uoftsfs</p>
          </div>
          <div class="store__info__item">
            <div class="club__info__icon">
              <a href="https://www.facebook.com/utoronto.sfs/" target="_blank">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#26643b"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path
                    d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"
                  />
                </svg>
              </a>
            </div>
            <h3 class="store__info__title">Facebook</h3>
            <p class="store__info__text">@utoronto.sfs</p>
          </div>
          <div class="store__info__item">
            <div class="club__info__icon">
              <a href="mailto:utorontosfs@gmail.com">
                <img src="./images/email.svg" alt="email" />
              </a>
            </div>
            <h3 class="store__info__title">E-mail</h3>
            <p class="store__info__text">utorontosfs@gmail.com</p>
          </div>
        </div>
      </div>
    </section>
    <!-- End Club Info Section -->

    <!-- Join SFS Section -->
    <section id="form" data-aos="fade-down">
      <div class="container">
        <h3 class="form__title">...or join SFS by filling the form!</h3>
        <iframe
          src="https://docs.google.com/forms/d/e/1FAIpQLSezsQppyoDhisVu9V4eh4D_CIck62_8T63LjZg9yP_RiSzW6w/viewform?embedded=true"
          width="100%"
          height="2400"
          frameborder="0"
          marginheight="0"
          marginwidth="0"
        >
          Loading…
        </iframe>
      </div>
    </section>
    <!-- End Join SFS Section -->

    <!-- Info Section-->
    <!-- <section id="storeInfo" data-aos="fade-up">
        <div class="container">
            <div class="store__info__wrapper">
                <div class="store__info__item">
                    <div class="club__info__icon">
                        <img src="./restaurant_website/images/wall-clock-icon.svg" alt="icon">
                    </div>
                    <h3 class="store__info__title">
                        Join Us!
                    </h3>
                    <p class="store__info__text">
                        Please join our general member list through this google form to be part of our newsletter.
                    </p>
                </div>
                <div class="store__info__item">
                    <div class="club__info__icon">
                        <img src="./restaurant_website/images/address-icon.svg" alt="icon">
                    </div>
                    <h3 class="store__info__title">
                        Old Toronto
                    </h3>
                    <p class="store__info__text">
                        Instagram: @uoftsfs  
                        Email: utorontosfs@gmail.com
                    </p>
                </div>
            </div>
        </div>
    </section> -->

    <!-- End Info Section -->

    <!-- Footer -->
    <footer>
      <div class="container">
        <div class="footer__wrapper">
          <div class="footer__col1">
            <div class="footer__logo">
              <img
                src="./images/sfs_logo.png"
                style="width: 30%; height: auto; border-radius: 8px"
                alt=" Skule French Society"
              />
            </div>
            <p class="footer__desc">Francophone Club at U of T...SFS!</p>
          </div>
          <div class="footer__col2">
            <div class="footer__socials">
              <h4 class="footer__socials__title">Follow us</h4>
              <ol>
                <li>
                  <a href="https://www.instagram.com/uoftsfs/" target="_blank">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="1"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
                      <path
                        d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"
                      />
                      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
                    </svg>
                  </a>
                </li>
                <li>
                  <a
                    href="https://www.facebook.com/utoronto.sfs/"
                    target="_blank"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="1"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path
                        d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"
                      />
                    </svg>
                  </a>
                </li>
              </ol>
            </div>
          </div>
          <div class="footer__col3">
            <h3 class="footer__text__title">Links</h3>
            <ol class="footer__text">
              <li>
                <a href="./index.html">Home</a>
              </li>
              <li>
                <a href="./about.html">About Us</a>
              </li>
              <li>
                <a href="./past_events.html">Past Events</a>
              </li>
              <li>
                <a href="./resources.html" class="nav__link">Resources</a>
              </li>
              <li>
                <a href="./sponsors.html">Partners</a>
              </li>
              <li>
                <a href="./contact_us.html">Contact Us</a>
              </li>
            </ol>
          </div>
          <div class="footer__col4">
            <h3 class="footer__text__title">Contact Execs</h3>
            <ol class="footer__text">
              <li>
                <a href="mailto: utorontosfs@gmail.com"
                  >utorontosfs@gmail.com</a
                >
              </li>
            </ol>
            <h3 class="footer__text__title">Report a complaint with EngSoc</h3>
            <ol class="footer__text">
              <li>
                <a href="mailto: ombudsman@skule.com">ombudsman@skule.com</a>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </footer>
    <div id="copyright">
      <div class="container">
        <p class="copyright__text">
          © Copyright 2024 Skule French Society | All rights reserved
        </p>
      </div>
    </div>
    <!-- End Footer-->

    <!-- aos script-->
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <!-- custom script-->
    <script src="./main.js"></script>
  </body>
</html>