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

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

        .hero13 {

            overflow: hidden;
        }


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

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

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

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

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

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

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

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


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

            .container13 {
                width: 124%;
                flex-direction: column-reverse;
                margin: 0px;
                padding: 10px 10px;
                margin-bottom: 4rem;
                
            }
            nav img{
    width: 102px;
  }
            .hero-content13 {
              width: 78%;
              text-align: justify;
                margin: 0px 0px;
                margin-top: -2rem;
                margin-left: -6rem;
            }

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

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

            }

            .hero-image13 {
                width: 100%;
            }
            .sec-img13 {
            width: 80%;
          height: 30vh;
          border-radius: 4px;
        
          
        }
      
        
        }
    </style>
</head>

<body>
    <!--Navigation -->
   <!--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="hero13">
        
        <h1 class="sec-h1">Craft</h1>
        <div class="container13">

            <div class="hero-content13">

                <div class="sec-wr13">

                    <h2 class="hero-h2">Catering Craft Practice</h2>
                    <p class="sec-p13">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 menu planning, food safety, kitchen management, and food safety, kitchen management, and food presentation. The section covers a wide range of topics, including meal preparation, dietary requirements, catering for large groups, and managing catering equipment. Through hands-on practice and real-world scenarios, students will develop the ability to  manaage both small-scale and large-scale catering operations, making them well-prepared for careers in hospitality, event management, and food service industries.
                    </p>
                    <a class="course13-btn" href="registraton.html">Apply Now <i class="fa fa-arrow-right"></i></a>
                </div>
            </div>
            <div class="hero-image13">
                <img class="sec-img13" src="images/caterine craft practice.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>