<!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 */
        .course12-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;
        }

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

        .hero12 {

            overflow: hidden;
        }


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

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

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

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

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

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

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

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


        }
        @media(max-width:475px){
          .hero12 {
                padding-top: 3rem;
            }

            .container12 {
                width: 124%;
                flex-direction: column-reverse;
                margin: 0px;
                padding: 10px 10px;
                margin-bottom: 4rem;
                
            }

            .hero-content12 {
              width: 78%;
              text-align: justify;
                margin: 0px 0px;
                margin-top: -2rem;
                margin-left: -6rem;
            }
            nav img{
    width: 102px;
  }
            .hero-h2 {
                font-size: 30px;
            }

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

            }

            .hero-image12 {
                width: 100%;
            }
            .sec-img12 {
            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="hero12">
        
        <h1 class="sec-h1">Craft</h1>
        <div class="container12">

            <div class="hero-content12">

                <div class="sec-wr12">

                    <h2 class="hero-h2">Garment Making</h2>
                    <p class="sec-p12">is a specialized field that deals with design, cut, sew, and finish custom clothing. Stsudents will learn about fabric selection, pattern making, garment construction techniques, and the use of various sewing tools and machines. The section covers key topics such as fitting, stitching, hemming, and adding finishing touches 
                        like buttons, zippers, and trims, Emphasis is placed on both creativity and technical precision, allowing 
                        students to create high-quality functional garments. Whether for fashion design or custom tailoring, this section prepares students for careers in the fashion industry, clothing production, or starting their own garment-making business.
                    </p>
                    <a class="course12-btn" href="registraton.html">Apply Now <i class="fa fa-arrow-right"></i></a>
                </div>
            </div>
            <div class="hero-image12">
                <img class="sec-img12" src="images/garment Making.jpg" alt="">
            </div>


        </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('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>