<!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/News</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>
        #blog-container6 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 22rem;
            padding: 20vw;
            padding-top: 7rem;
        }


        #blog-container6 a {
            text-decoration: none;
        }

        .news-h1 {
            text-align: center;
            font-size: 220%;
            font-weight: bold;
            padding-top: 6rem;
        }

        #blog-container6 p {
            width: 100%;
            text-align: justify;
        }

        #blog-container6 img {
            width: 30rem;
            height: 40vh;
        }


        .news-year {
            color: rgb(0, 0, 107);

        }

        #blog-container.blogs .post {
            color: #29303b;
            padding: 15px 0 10px 0;
        }

        .read6 {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
        }

        .nn-top6 {
            font-weight: bold;
            margin-bottom: 1rem;
        }
        @media (max-width: 769px){
      #blog-container6 {
      padding-top: 10rem;
    }
    }
        @media (max-width: 475px){
    
    #blog-container6 img {
  width: 20rem;
  height: 40vh;
}
#blog-container6{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 22rem;
  padding: 6vw;
  padding-top: 9rem;
}
nav img{
    width: 102px;
  }
 }
 @media (max-width: 1466px){
      #blog-container6 {
      display: grid;
      grid-template-columns: 1fr 1fr;
 
      padding: 30vw;
      padding-top: 7rem;
    }
    }
    @media (max-width: 1200px){
      #blog-container6 {
      display: grid;
      grid-template-columns: 1fr 1fr;
 
      padding: 22vw;
      padding-top: 7rem;
    }
    }
    </style>
</head>

   <!--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="main.css">Home</a>
            </li>
            <li><a href="About.html">About</a></li>
            <li><a class="active" href="News.html">News</a></li>
            <li><a 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>
<body>
    <section id="blog-container6">
        <div class="blogs6">
            <div class="post6">
                <div class="bo-img6">


                    <div class="ne6">
                        <h4 class="news-year6">

                        </h4>
                        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">

                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <img class="bo-img" src="images/Cleanup Day 1.jpg" class="d-block w-100" alt="...">
                                </div>
                                <div class="carousel-item">
                                    <img class="bo-img" src="images/Cleanup Day 2.jpg" class="d-block w-100" alt="...">
                                </div>
                                <div class="carousel-item">
                                    <img class="bo-img" src="images/Cleanup Day 3.jpg" class="d-block w-100" alt="...">
                                </div>
                                <div class="carousel-item">
                                    <img class="bo-img" src="images/Cleanup Day 4.jpg" class="d-block w-100" alt="...">
                                </div>

                            </div>
                            <div class="nn-date">
                                <i class="fa fa-calendar-alt">October 0, 24</i>

                            </div>
                            <p class="nn-top6">
                                We Did It! A Cleaner World Starts With Us!
                                <hr class="top-hr">
                                <p class="nn-wr">
                                    At <a href="">Government Technical College, Ado Soba.</a>
                                    We took action to celebrate World Cleanup
                                    Day with a successful community clean up.
                                </p>
                                <p>
                                    Our student and staff came together to
                                    make our surroundings cleaner and healthier for every
                                    one. By doing our part, we're protecting the planet and
                                    leading the way for a better future.
                                </p>
                                <p>
                                    A cleaner world is a better world
                                </p>
                                <p>
                                    A huge thank you to everyone who participated together, we've made a difference!
                                </p>
                                <p class="read6">
                                    <a href="">Previous<i></i></a>
                                    <a href=""> Next<i></i></a>
                                </p>
                        </div>

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