<!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/Events</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>
    #event-container {
      display: flex;
      padding: 1rem;
      padding-top: 7rem;
    }


    #event-container a {
      text-decoration: none;
    }

    #event-container .top-hr {
      width:31%;
    }

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

    #event-container p {
      width: 38%;
      text-align: justify;
    }

    #event-container img {
      width: 18rem;
      height: 30vh;
    }

    #event-container .cate {
      
      margin-top: 1rem;
    }
.news-year{
  color:rgb(0, 0, 107);

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

    .read {
      color: rgb(0, 0, 107);
      text-decoration: none;
      font-size: 0.8rem;
      font-weight: 600;
      text-align: center;
      line-height: 4rem;
    }

    .nn-top {
      font-weight: bold;
      margin-bottom: 1rem;
    }
    @media (max-width: 769px){
      .events-h1 {
      padding-top: 9rem;
    }
    #event-container img {
      width: 18rem;
      height: 30vh;

    }
    }
    @media (max-width: 475px){
      .events-h1 {
      text-align: center;
      font-size: 220%;
      font-weight: bold;
      padding-top: 9rem;
    }
    nav img{
    width: 102px;
  }
  #event-container {
      display: grid;
      grid-template-columns: 1fr;
    
      padding: 14%;
      padding-top: 5rem;
    }
    #event-container p {
      width: 100%;
      text-align: justify;
    }
    
    #event-container .top-hr {
      width:100%;
    }

    }
      
   
  </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="index.html">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>

<h1 class="events-h1">
  Events
</h1>
  <section id="event-container">
    <div class="events">
      <div class="events-post">
        <div class="ev-img">
         
       
         <div class="ne">
           <h4 class="news-year">
             2024
           </h4>
           <a href="events.html">
            <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/interhouse sport 1.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                  <img class="bo-img" src="images/interhouse sport 2.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                  <img class="bo-img" src="images/interhouse sport 3.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                  <img class="bo-img" src="images/interhouse sport 4.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                  <img class="bo-img" src="images/interhouse sport 5.jpg" class="d-block w-100" alt="...">
                </div>
              </div>
           </a>
           
            <div class="nn-date">
              <i class="fa fa-calendar-alt">March 15, 24</i>
      
            </div>
            <p class="nn-top">
              Reflecting on a spectacular week of athleticism and unity 
              at Government Technical College, Ado soba<br>
            </p>
            <hr class="top-hr">
            <p class="nn-wr">
              2024 InterHouse Sports Competition. Kudos to our future champions!
              <br>
            </p>
            <a class="read" href="#">Read More <i class="fa fa-arrow-right"></i></a>
          </div>
        

      </div>

      </div>


      <div class="cate">
        <h2></h2>
       
     
      </div>
       
      </div>
  </section>

  <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>