<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Government Technical College Ado Soba/Contacts</title>
  <link rel="stylesheet" href="main.css">
  <link rel="icon" type="image/x-icon" href="images/schoollogo.png">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!--Import Bootstrap 5-->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <style>
    /* contact */
    #contact {
      padding: 0vw 3vw;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;

    }

    .cont-h1 {
      padding: 150px 4vw;
      text-align: center;
      font-size: 220%;
      font-weight: bold;

    }

    #contact .getin {
      width: 350px;
    }

    #contact .form {
      width: 60%;
      padding-bottom: 2rem;
      border-radius: 10px;
    }

    #contact .getin h2 {
      color: rgb(0, 0, 107);
      font-size: 30px;
      font-weight: 800;
      line-height: .8;
      margin-bottom: 16px;
    }

    #contact .getin p {
      color: #686875;
      line-height: 24px;
      margin-bottom: 33px;
      padding-bottom: 25px;

    }

    .form label {
      display: block;
      text-align: start;
      margin-bottom: .5rem;
      letter-spacing: 1px;
    }

    #contact .form p {
      color: #686875;
      line-height: 24px;
      padding-bottom: 25px;
    }

    #contact .form .form-row {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }

    #contact .form .form-col input,
    #contact .form .form-col input {
      width: 99%;
      font-size: 14px;
      font-weight: 400;
      color: #686875;
      padding: 10px 20px;
      margin-bottom: 20px;
    }

    #contact .form .form-row input {
      width: 99%;
      font-size: 14px;
      font-weight: 400;
      color: #686875;
      padding: 10px 60px;
      margin-bottom: 20px;
    }
    @media (max-width: 1466px){
      #contact .form .form-row input {
      width: 99%;
      font-size: 14px;
      font-weight: 400;
      color: #686875;
      padding: 10px 122px;
      margin-bottom: 20px;
    }
    }
    @media (max-width: 1200px){
      #contact .form .form-row input {
      width: 99%;
      font-size: 14px;
      font-weight: 400;
      color: #686875;
      padding: 10px 60px;
      margin-bottom: 20px;
    }
    }
    #contact .form .form-col textarea {
      width: 99%;
      font-size: 14px;
      font-weight: 400;
      border-radius: 3px;
      background: rgb(255, 255, 255);
      outline: none;
      padding: 3px 10px;
      margin-bottom: 20px;
    }

    #contact .getin h3 {
      color: rgb(0, 0, 107);
      font-size: 16px;
      font-weight: 600;
      line-height: 26px;
      margin-bottom: 15px;
    }

    #contact .getin .getin-details div {
      display: flex;
    }

    #contact .getin .getin-details div .get {
      font-size: 16px;
      line-height: 22px;
      color: rgb(0, 0, 107);
      margin-right: 20px;
    }

    #contact .getin .getin-details div p {
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 15px;

    }

    #contact .form button {
      font-size: .9rem;
      padding: 10px 26px;
      background: rgb(0, 0, 107);
      border-radius: 5px;
      outline: none;
      border: none;
      font-weight: 600;
      cursor: pointer;
      color: rgb(255, 255, 255);
    }
    #contact .form button:hover{
      background: white;
      color:  rgb(0, 0, 107);
      transform: scale(1.1);
    }
    span {
      color: red;
      font-weight: 900;
    }

    #map {
      width: 100%;
      height: 70vh;
      margin-bottom: 4vw;
    }

    #map iframe {
      width: 100%;
      height: 100%;
    }

    @media (max-width: 769px) {
      .cont-h1 {
        padding-top: 9rem;
        text-align: center;
        font-size: 220%;
        font-weight: bold;
        margin-top: 0rem;
      }

      #contact .form .form-row input {

        font-size: 14px;
        font-weight: 400;
        color: #686875;
        padding: 10px 20px;
        margin-bottom: 20px;
      }


    }

    @media (max-width: 475px) {

      /* Contact */
      #contact {
        padding: 0% 4vw;
        flex-direction: column;
        align-content: flex-start;
        justify-content: flex-start;
      }

      nav img {
        width: 102px;
      }

      #contact .getin {
        width: 100%;
        margin-bottom: 30px;
      }

      #contact .form {
        width: 100%;
        padding: 40px 30px;
      }

      #contact .form .form-row {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
      }

      #contact .form .form-row input {
        width: 100%;

      }



      .cont-h1 {
        padding: 100px 4vw;
        text-align: center;
        font-size: 220%;
        font-weight: bold;
        padding-top: 10rem;
      }

      .gtc {
        font-weight: 700;
        color: rgb(0, 0, 107);
        margin-right: 10px;
      }
    }
  </style>
</head>

<body>
  <!--Navigation -->
  <nav>
    <img src="images/schoollogo.png" alt="schoollogo">
    <h6 class="gtc">Government Technical College Ado-Soba</h6>
    <div class="navigation">
      <ul>
        <i id="menu-close" class="fas fa-times"></i>
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="about.html">About</a></li>
        <li><a href="News.html">News</a></li>
        <li><a href="Sections.html">Sections</a></li>
        <li><a href="Admission.html">Admission</a></li>
        <li><a class="active" href="Contacts.html">Contacts</a></li>

      </ul>
      <img id="menu-btn" src="images/menu button.png" alt="">
    </div>
  </nav>
  </div>
  </nav>
  <!-- Contact -->
  <h1 class="cont-h1">Contact Us</h1>
  <section id="contact">
    <div class="getin">
      <h2 class="cont"></h2>
      <h2>Get in touch</h2>
      <div class="getin-details">
        <h3>Address:</h3>
        <div>
          <i class="fa fa-map-marker-alt get"></i>
          <p> Government Technical College,<br> Ado-Soba,<br>Festac Extension, <br> Abule Ado Bus Stop <br>Lagos
            Badagary Expressway, lagos</p>
        </div>
        <h3>Phone:</h3>
        <div>
          <i class="fa fa-phone-alt get"></i>
          <p>+234 000 000 0000 <br> +234 000 000 0000
          </p>
        </div>
        <h3>Email:</h3>
        <div>
          <i class="fas fa-envelope get"></i>
          <p>governmentechnicalcollege <br> adosoba@gmail.com</p>
        </div>
      </div>
    </div>

    

        <div class="form">
          <h2> Contact Information</h2>
          <p>Contact us on any issues and your answer will be attendent as soon as possible</p>
          <div class="form-row">
            <div>
              <label for=""> Name<span>*</span></label>
              <input id="name" type="text" required>
            </div>
            <div>
              <label for="">Email<span>*</span></label>
              <input id="email" type="email" required>
            </div>
          </div>
          <div class="form-col">
            <label for="">Phone no<span>*</span>
            </label>
            <input id="phone" type="text" required>
    
          </div>
          <div class="form-col">
            <label for="">Message<span>*</span></label>
            <textarea id="message" name="TT" id="" cols="30" rows="8" placeholder="Type Your Message here..."></textarea>
          </div>
          <div class="form-col">
            <button type="submit">Submit</button>
          </div>
        </div>
        <div>
        </div>

    
  </section>

  <section id="map">
    <iframe
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3964.4992385427904!2d3.2580449!3d6.4582519!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x103b8620814f5fb5%3A0x6a2e7164c02a18cd!2sGOVERNMENT%20TECHNICAL%20COLLEGE%20ADOSOBA!5e0!3m2!1sen!2sng!4v1734713464332!5m2!1sen!2sng"
      style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  </section>


  <footer>
    <div class="footer-col">
      <h4>INFORMATION</h4>
      <a href="Contacts.html">
        <li>Contact</li>
      </a>
      <a href="About.html">
        <li>About Us</li>
      </a>
      <a href="News.html">
        <li>News</li>
      </a>
      <a href="Sections.html">
        <li>Sections</li>
      </a>
    </div>
    <div class="footer-col">
      <h4>USEFUL LINKS</h4>
      <li>Our College Team</li>
      <a href="Admission.html">
        <li>Admission</li>
      </a>
      <a href="About.html">
        <li>Features</li>
      </a>
      <a href="Events.html">
        <li>Events</li>
      </a>
    </div>

    <div class="footer-col">
      <h4>NEWSLETTER</h4>
      <p>Get latest updates offers </p>
      <div class="subscribe">
        <input type="text" placeholder="Your Email address">
        <br><a href="" class="yellow">SUBSCRIBE</a>

      </div>
    </div>

    <div class="footer-col">
      <h4>CONTACT</h4>
      <p>Address: <br> Government Technical College,<br> Ado-Soba,<br>Festac Extension, <br> Abule Ado Bus Stop
        <br>Lagos
        Badagary Expressway, lagos</p>
      <p>Phone: <br> +234 000 000 000 0000 <br> +234 000 000 000 0000</p>
      <p>Email: <br>governmentechnicalcollege <br> adosoba@gmail.com</p>
    </div>
    <div class="copyright">
      <p> Copyright ©2024 All Right Reserve Designed by <br></p>
      <di class="pro-linkss">
        <h4 class="copy-h4">FOLLOW US</h4>
        <a href=""><i class="fab fa-facebook-f"></i></a>
        <a href=""><i class="fab fa-twitter"></i></a>
        <a href=""><i class="fab fa-instagram"></i></a>
        <a href=""><i class="fab fa-youtube"></i></a>
        <a href=""><i class="fab fa-linkedin-in"></i></a>
    </div>
    </div>
  </footer>

  <script>
    $("#menu-btn").click(function () {
      $("nav .navigation ul").addClass("active")
    });

    $("#menu-close").click(function () {
      $("nav .navigation ul").removeClass("active")
    });


    document.addEventListener('contextmenu', (e) => {
      e.preventDefault()

      return false

    })
    document.addEventListener("keydown", function (event) {
      if (event.ctrlKey) {
        event.preventDefault();
      }
      if (event.keyCode == 123) {
        event.preventDefault();
      }
    })
    document.addEventListener('Keydown', (e) => {
      if (e.ctrlKey || e.keyCode == 123) {
        e.stopPropagation()
        e.preventDefault()
      }

    })
  
  </script>

</body>

</html>