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

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

        .hero7 {

            overflow: hidden;
        }


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

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

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

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

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

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

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

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


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

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

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

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

            }

            .hero-image7 {
                width: 100%;
            }
            .sec-img7 {
            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="hero7">
        
        <h1 class="sec-h1">Construction</h1>
        <div class="container7">

            <div class="hero-content7">

                <div class="sec-wr7">

                    <h2 class="hero-h2">Bricklaying, Blocklaying, and Concreting</h2>
                    <p class="sec-p7">is a specialized field that deals with the essential techniques for constructing walls, foundations, and uther masonry structures using concrete blocks or bricks. Students will learn how to prepare and mix mortar, accurately lay blocks, ensure proper alignment, and create stable, long-lasting structures. This Section covers a key topics such as blocklaying, methods, safety practices, tools and materials used in 
                        the in the trade. through hands-on training, students gain practical experience in building boyh load-bearing and non-load-bearing walls, preparing them for a career in construction, masonary, or building maintenance.
                    </p>
                    <a class="course7-btn" href="registraton.html">Apply Now <i class="fa fa-arrow-right"></i></a>
                </div>
            </div>
            <div class="hero-image7">
                <img class="sec-img7" src="images/blocklaying bricklaying and concreting.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>