<!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/Sections</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>
        /* courses */
        .course1-btn {
            border: 1px solid rgb(0, 0, 107);
            text-decoration: none;
            font-size: 0.8rem;
            padding: 13px 35px;
            color: rgb(0, 0, 107);
            font-weight: 600;
            border-radius: 3px;
            text-align: center;
            text-align: center;
            display: inline-block;
            margin: 1rem;
            transition: 0.3s ease;
        }

        .course1-btn:hover {
            transform: scale(1.1);
            background-color: rgb(0, 0, 107);
            color: rgb(255, 255, 255);
        }

        .hero1 {

            overflow: hidden;
        }


        .container1 {
            
            display: flex;
            justify-content: center;
            align-items: center;
            width: 90%;
            margin: 65px auto;
        }

        .hero-content1 {
            flex: 1;
            width: 600px;
            margin: 0px 25px;
            animation: fadeInUp 2s ease;
        }

        .hero-content1 h2 {
            font-weight: bold;
            font-size: 150%;
        }

        .hero-content1 p {
            color: rgb(21, 21, 100);
        }

        .hero-image1 {
            padding-bottom: 6rem;
            flex: 1;
            width: 600px;
            margin: auto;
            animation: fadeInRight 2s ease;
        }

        .sec-p1 {
            text-align: justify;
        }

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

        .sec-img1 {
            width: 80%;
            height: 35vh;
            border-radius: 4px;


        }
        @media(max-width:475px){
          .hero1 {
                padding-top: 3rem;
            }
            nav img{
    width: 102px;
  }
            .container1 {
                width: 124%;
                flex-direction: column-reverse;
                margin: 0px;
                padding: 10px 10px;
                margin-bottom: 4rem;
                
            }

            .hero-content1 {
              width: 78%;
              text-align: justify;
                margin: 0px 0px;
                margin-top: -4rem;
                margin-left: -6rem;
            }

            .hero-h2 {
                font-size: 30px;
            }

            .hero-content1 p {
                font-size: 18px;
               text-align: justify;

            }

            .hero-image1 {
                width: 100%;
            }
            .sec-img1 {
            width: 80%;
          height: 30vh;
          border-radius: 4px;
        
          
        }
      
        
        }
    </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 class="active" 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>
    <section class="hero1">
        
        <h1 class="sec-h1">Engineering</h1>
        <div class="container1">

            <div class="hero-content1">

                <div class="sec-wr1">

                    <h2 class="hero-h2">Computer craft</h2>
                    <p class="sec-p1"> is a specialied field that involves the application of computing principles and
                        technologies to create, manage, and improve computer systems and software. it covers a wide range of of topics 
                    including programming, hardware design, software development, and system integration. students and professionals in the field 
                learn to harnes the power of computers to solve problems, automate tasks, and create innovative solutions accross various industries. This 
             section typically combines theoretical knowledge with hands-on experience in coding, algorithm development, and system architecture.</p>
                    <a class="course1-btn" href="registraton.html">Apply Now <i class="fa fa-arrow-right"></i></a>
                </div>
            </div>
            <div class="hero-image1">
                <img class="sec-img1" src="images/computer craft.jpg" alt="">
            </div>


        </div>


    </section>
    </div>
    <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>