<!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>
            @media (max-width: 475px) {
               
            .hero {
                margin: 20px;
               
            }
            nav img{
    width: 102px;
  }
         

            .sec-wr {
                margin-left: 31vw;width: 60%;
               
            }
            
            .hero-h2 {
                font-size: 30px;
            }

            .hero-content p {
                font-size: 3px;
                margin-bottom: 20px;

            }

            .sec-img {
                width: 50%;
            }
          
        }
        

        @media screen and (max-width: 475px) {

            .hero {
                margin: 0px;
            }

            .container {
                width: 100%;
                flex-direction: column-reverse;
                margin: 0px;
                padding: 0px .1px;
            }

            .hero-content {
                width: 100%;
                margin: 35px 0px;
            }

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

            .hero-content p {
                font-size: 18px;
                margin-bottom: 20px;

            }

            .hero-image {
                width: 100%;
            }
            .sec-img {
            width: 80%;
          height: 30vh;
          border-radius: 4px;
        
          
        }
      
        }

        /* courses */
        .course-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;
        }

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

        .hero {
           
            overflow: hidden;
        }

        .heading h1 {
            color:rgb(0, 0, 107);
            font-size: 220%;
            font-weight: bold;
            text-align: center;
            padding-top: 10rem;
        }

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

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

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

        .hero-content p {
            color: rgb(0, 0, 107)
        }

        .hero-image {
            flex: 1;
            width: 600px;
            margin: auto;
           
        }
       .sec-p{
       text-align: justify;
       }
       .sec-h1{
            font-size: 220%;
            font-weight: bold;
            padding-top: 4rem;
            display: flex;
            align-items: center;
            justify-content: center;
       }
        .sec-img {
            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="hero">
        <div class="heading">
            <h1>Sections We offer</h1>
        </div>
        
        <div class="container">

            <div class="hero-content">
                
               <div class="sec-wr">
                 
                <h2 class="hero-h2">Computer craft</h2>
                <p class="sec-p"> is a specialied field that involves the application of computing principles and technologies to create, manage, and improve computer systems and software...</p>
                <a class="course-btn" href="Computer readmore.html">Learn More <i class="fa fa-arrow-right"></i></a>
               </div>
            </div>
            <div class="hero-image">
                <img class="sec-img" src="images/computer craft.jpg" alt="">
            </div>
            
        </div>
        <div class="container">
            <div class="hero-content">
               <div class="sec-wr">
                <h2 class="hero-h2">Electronics Works</h2>
                <p class="sec-p"> is a specialized field that deals with the design, development, and application of devices, circuit, and system that use electrical components such as resistors... </p>
                <a class="course-btn" href="Electronics readmore.html">Learn More <i class="fa fa-arrow-right"></i></a>
               </div>
            </div>
            <div class="hero-image">
                <img class="sec-img" src="images/electronics works.jpg" alt="">
            </div>
            
        </div>
        <div class="container">
            <div class="hero-content">
               <div class="sec-wr">
                <h2 class="hero-h2">Electrical Installation and Maintenance Works</h2>
                <p class="sec-p"> is a specialized field that focuses on the study and application of electrical systems, circuit, and technology. it encompasses the generation, distribution, and... </p>
                <a class="course-btn" href="Electrical readmore.html">Learn More <i class="fa fa-arrow-right"></i></a>
               </div>
            </div>
            <div class="hero-image">
                <img class="sec-img" src="images/electrical intallation and maintenance works.jpg" alt="">
            </div>
            
        </div>
        <div class="container">
            <div class="hero-content">
               <div class="sec-wr">
                <h2 class="hero-h2">Mechanical craft</h2>
                <p class="sec-p"> is a specialized field that deals with the design, analysis and manufacturing of mechanical systems. it involves the application of principles from physics, mathematics...</p>
                <a class="course-btn" href="Mechanical readmore.html">Learn More <i class="fa fa-arrow-right"></i></a>
               </div>
            </div>
            <div class="hero-image">
                <img class="sec-img" src="images/mechanical craft.jpg" alt="">
            </div>
            
        </div>
        <div class="container">
            <div class="hero-content">
               <div class="sec-wr">
                <h2 class="hero-h2">Welding and Fabrication</h2>
                <p class="sec-p"> is a specialized field that deals with the fabrication and construction industries where materials, typically metals or thermo plastics, are joined togrther by applying ...</p>
                <a class="course-btn" href="welding readmore.html">Learn More <i class="fa fa-arrow-right"></i></a>
               </div>
            </div>
            <div class="hero-image">
                <img class="sec-img" src="images/welding and fabrication.jpg" alt="">
            </div>
            
        </div>
        <div class="container">
            <div class="hero-content">
               <div class="sec-wr">
                <h2 class="hero-h2">Motor Vehicle Mechanics</h2>
                <p class="sec-p"> is a specialized field that deals with the repair, maintenance, and servicing of cars, trucks, and other motorized vehicles. Students learn about the operation of...</p>
                <a class="course-btn" href="motorvehicle readmore.html">Learn More <i class="fa fa-arrow-right"></i></a>
               </div>
            </div>
            <div class="hero-image">
                <img class="sec-img" src="images/motorvehicle mechanic.jpg" alt="">
            </div>
            
        </div>
        <h1 class="sec-h1">Construction</h1>
        <div class="container">
            <div class="hero-content">
               <div class="sec-wr">
                <h2 class="hero-h2">Bricklaying, Blocklaying, and Concreting</h2>
                <p class="sec-p"> is a specialized field that deals with the essential techniques for constructing walls, foundations, and uther masonry structures using concrete blocks or bricks...</p>
                <a class="course-btn" href="blocklaying readmore.html">Learn More <i class="fa fa-arrow-right"></i></a>
               </div>
            </div>
            <div class="hero-image">
                <img class="sec-img" src="images/blocklaying bricklaying and concreting.jpg" alt="">
            </div>
            
        </div>
        <div class="container">
            <div class="hero-content">
               <div class="sec-wr">
                <h2 class="hero-h2">Furniture Making</h2>
                <p class="sec-p"> is a specialized field that deals with the essential knowlede of craft high quality functional, and aesthetically pleasing furniture. Students will learn woodworking...</p>
                <a class="course-btn" href="furniture readmore.html">Learn More <i class="fa fa-arrow-right"></i></a>
               </div>
            </div>
            <div class="hero-image">
                <img class="sec-img" src="images/furniture making.jpg" alt="">
            </div>
            
        </div>
        <div class="container">
            <div class="hero-content">
               <div class="sec-wr">
                <h2 class="hero-h2">Plumbing and Pipe Fitting</h2>
                <p class="sec-p"> is a specialized field that deals with knowledge and hand-on skills need to install, maintain, and repair plumbing systems. Students will learn about pipefitting fixtures...</p>
                <a class="course-btn" href="plumbing readmore.html">Learn More <i class="fa fa-arrow-right"></i></a>
               </div>
            </div>
            <div class="hero-image">
                <img class="sec-img" src="images/plumbing and pipefitting.jpg" alt="">
            </div>
            
        </div>
        <div class="container">
            <div class="hero-content">
               <div class="sec-wr">
                <h2 class="hero-h2">Painting and Decoration</h2>
                <p class="sec-p"> is a specialized field that deals with the foundation skills and techniques necessary to apply paint and finishes to various surfaces in both residental and commercial...</p>
                <a class="course-btn" href="painting readmore.html">Learn More <i class="fa fa-arrow-right"></i></a>
               </div>
            </div>
            <div class="hero-image">
                <img class="sec-img" src="images/painting and decoration.jpg" alt="">
            </div>
            
        </div>
       
        <h1 class="sec-h1">Business</h1>
        <div class="container">
            <div class="hero-content">
               <div class="sec-wr">
                <h2 class="hero-h2">Book Keeping</h2>
                <p class="sec-p">is a specialized field that offers comprehensive introduction to the fundamentals of running and managing a business. Students will learn key concepts in areas...</p>
                <a class="course-btn" href="bookkeeping readmore.html">Learn More <i class="fa fa-arrow-right"></i></a>
               </div>
            </div>
            <div class="hero-image">
                <img class="sec-img" src="images/book keeping.jpg" alt="">
            </div>
        </div>
        <h1 class="sec-h1">Craft</h1>
        <div class="container">
            <div class="hero-content">
               <div class="sec-wr">
                <h2 class="hero-h2">Garment Making</h2>
                <p class="sec-p"> is a specialized field that deals with design, cut, sew, and finish custom clothing. Stsudents will learn about fabric selection, pattern making, garment construction...</p>
                <a class="course-btn" href="garment readmore.html">Learn More <i class="fa fa-arrow-right"></i></a>
               </div>
            </div>
            <div class="hero-image">
                <img class="sec-img" src="images/garment Making.jpg" alt="">
            </div>
        </div>
        <div class="container">
            <div class="hero-content">
               <div class="sec-wr">
                <h2 class="hero-h2">Catering Craft Practice</h2>
                <p class="sec-p"> is a speialiezd field that deals with the skills and knowledge to plan, prepare, and serve food for various events and occassions. Students will learn the fundamentals of... </p>
                <a class="course-btn" href="catering readmore.html">Learn More <i class="fa fa-arrow-right"></i></a>
               </div>
            </div>
            <div class="hero-image">
                <img class="sec-img" src="images/caterine craft practice.jpg" alt="">
            </div>
            
    </section>
    </div>


    <footer>
        <div class="footer-col">
            <h4>INFORMATION</h4>
            <li>Contact</li>
            <li>About Us</li>
            <li>News</li>
            <li>Sections</li>
        </div>
        <div class="footer-col">
            <h4>USEFUL LINKS</h4>
            <li>Our College Team</li>
            <li>Admission</li>
            <li>Features</li>
            <li>Events</li>
        </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("keydown", function (event) { if (event.ctrlKey){ 
          event.preventDefault();
      }
      if(event.keyCode == 123) {
          event.preventDefault();
          }
          })
          
        document.addEventListener('contextmenu',(e) => {
            e.preventDefault()
            
            return false

        })

        document.addEventListener('Keydown',(e) => {
             if(e.ctrlKey || e.keyCode == 123){
                 e.stopPropagation()
                 e.preventDefault()
             }
            
            })
    </script>
</body>
</html>