<!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/About</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>
        .aboutpage-moto{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .aboutpage {
            text-align: start;
            line-height: 1.5;
           
            margin-top: 5rem;
        }

        .aboutpage-h1 {
            font-size: 220%;
            font-weight: bold;
            padding-top: 10rem;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .history-p {
            text-align: justify;
            width: 100%;
        }

        .aboutpage-us {
            display: grid;
            grid-template-columns: 1fr 1fr;
            width: 100%;
            margin-top: 5rem;

        }

        .vision-h1 {
            margin-top: 3rem;
            font-weight: bold;
            font-size: 150%;
            padding-top: 4%;
        }

        .statements {
            margin:  2rem;text-align: justify;
        }

        .mission-h1 {
            margin-top: 2rem;
            font-weight: bold;
            font-size: 150%;
            padding-top: 4%;
        }

        .moto-h1 {
            margin-top: 2rem;
            font-weight: bold;
            font-size: 150%;
            padding-top: 4%;
            grid-gap: 100rem;
        }

        

        .who {
            margin-top: 5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 190%;
            color: rgb(0, 0, 107);
        }

        @media (max-width: 769px) {
            .statements {
           
            margin: -3rem;
    
        } .aboutpage-us {
                display: grid;
                grid-template-columns: 1fr;
                width: 100%;
                margin-top: -8rem;
                
            } 
        }
        @media (max-width: 475px) {
            .aboutpage-us {
                display: grid;
                grid-template-columns: 1fr;
                width: 100%;
                margin-top: 5rem;
                padding-right: 2vw;
                padding-left: 2vw;

            } .history-p {
            text-align: justify;
            width: 100%;
        }
             nav img{
    width: 102px;
  }
            .aboutpage {
            text-align: start;
            line-height: 1.5;
           
            
        }

        .statements {
            margin:  2rem;text-align: justify;
        }
        }

    
    </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 class="active" 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 href="Contacts.html">Contacts</a></li>

            </ul>
            <img id="menu-btn" src="images/menu button.png" alt="">
        </div>
    </nav>
    </div>
    </nav>
    <h1 class="aboutpage-h1">
        About Us
    </h1>
    <h1 class="who">
        Who We Are
    </h1>
    <section>
        <div class="aboutpage-us">
            <div>
                <div class="aboutpage">
                    <h1 class="vision-h1">
                        History
                    </h1>
                    <p class="history-p">
                        The establishment of more industries of Lagos State demanded for the production of technicians
                        craftmen
                        and
                        craftwomen and accompanying needs for more technical colleges apart from the Federal owned
                        Technical
                        College,
                        Yaba. The Lagos state Ministry of Education was becoming aware of the needs for more technical
                        colleges
                        <br>
                        <p class="history-p">The College derieves its name from the adjoining villages, Abule-Ado and Abule-Soba where the
                            college is
                            located, hence
                            the establishment of Government Technical College Ado Soba.
                        </p>
                        The College first started as a
                        vocational
                        college, but later has her status raised to technical college in 1989.
                        <p class="history-p">
                            At the moment, there are twelve (13) occupational trades in the colleg as listed below:
                        </p>
                    </p>



                </div>
                
            </div>
            <div class="statements">
                <h1 class="vision-h1">Vision Statement</h1>
                <p class="aboutpage-about">"To be the best Technical College that will produce students who can apply
                    scientific
                    knowledge to the improvement and solution of environmental problems for the use and convenience of
                    man"</p>
                <h1 class="mission-h1">Mission Statement</h1>
                <p class="aboutpage-about">"To produce quality and excellent students that will reach their full
                    potential,
                    through a
                    structed skilled training, which will not only make them enterprising and self-reliant, but a highly
                    motivated
                    products for our end-users-the industries and tertiary institutions. </p>
                <h1 class="moto-h1">Motto</h1>
                <p class="aboutpage-moto">There's Dignity In Labour</p>
               
    </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>