📁 File Manager

Dosya Düzenle: add.php

<!DOCTYPE html>
	<html lang="zxx" class="no-js">
	<head>
		
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		
		<link rel="icon" href="img/favicon.ico" type="image/gif" sizes="16x16">
  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
  <link rel="icon" href="img/favicon.ico" type="image/x-icon">
   <title>মঙলদৈ মহাবিদ্যালয়</title>
		
		<meta name="description" content="">
		
		<meta name="keywords" content="">
		
		<meta charset="UTF-8">

.preloader__image {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
			
			#google_translate_element select{

background-color: #f6edfd;
    color: #121689;
    border: 2px solid;
    border-radius: 16px;
    padding: 9px 31px;

}
			.mq{
				    width: 90%;
    				padding: 47px;
    				margin-top: 18px;
				
			}
			
			.goog-te-combo{
				float: right;
			}
			#google_translate_element .goog-te-gadget{
				color:transparent;
			}
			#google_translate_element .VIpgJd-ZVi9od-l4eHX-hSRGPd{
				display:none;
			}
			
		
			
			
			.teamGrid {
    display: grid;
    grid-template-columns: 32.33% 32.33% 32.33%;
    column-gap: 1.5%;
    margin-top: 100px;
}
.avatar {
    position: absolute;
    left: 0;
    right: 0;
    top: -80px;
    text-align: center;
}
.teamcolinner {
    position: relative;
}
.avatar > img {
    width: 150px;
    margin: auto;
    border-radius: 50px;
    border: 1px solid rgb(170 170 173/ 1);
    box-shadow: 0px 3px 10px 3px rgb(170 170 173 / 0.5);
}
.teamcolinner {
    position: relative;
    border: 1px dashed #ddd;
    min-height: 100px;
    background: #fff;
    z-index: 9;
}
.teamcol {
    padding: 15px;
    background: #fff;
    border-radius: 10px;
    position: relative;
    transition: transform 1s ease-in-out;
}
.teamcol:hover {
    transform: translateY(-30px);
    box-shadow: 0px 3px 10px 3px rgb(170 170 173 / 0.5);
    transition: transform 1s ease-in-out;
}
.teamcol:before {
    content: "";
    width: 50%;
    height: 50%;
    position: absolute;
    right: 0;
    top: 0;
    background: -webkit-linear-gradient(#ffbf00, #ffa000);
    border-top-right-radius: 10px;
    transition: width 1s ease-in-out;
}
.teamcol:after {
    content: "";
    width: 50%;
    height: 50%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: -webkit-linear-gradient(#f7631b, #f7631b);
    border-bottom-left-radius: 10px;
    transition: width 1s ease-in-out;
}
.teamcol:hover::before, .teamcol:hover::after {
    width: 100%;
    transition: width 1s ease-in-out;
}
.member-name {
    margin-top: 80px;
}
.member-info {
    padding: 10px 20px;
}
.social-listing {
    align-items: center;
    justify-content: center;
    display: flex;
    list-style: none;
    padding: 0;
}
.social-listing >li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #f4f5f7;
    border-radius: 50%;
    margin: 5px;
}

@media only screen and (max-width: 600px) {
  .teamGrid {
	  display: inline-block;
    
}
		.colmun{
		  padding:20px;	
		}
  }	
	
			
			
			
/*  programme card  */			
	
			
	.section-ajeet-title {
  position: relative;
  font-size: 30px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  margin: 0 0 35px;
}
.gallery-sec {
  padding: 3px 0 40px;
}

.gf-column {
  float: left;
  display: none; /* Hide all elements by default */
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

.filter {
  padding: 20px 2px 10px;
  text-align: center;
  max-width: 1050px;
  margin: auto;
  object-fit: cover;
}

.gf-btn {
  padding: 10px 20px;
  margin: 5px 4px 4px 0;
  display: inline-block;
  color: #000;
  background: #fff;
  font-size: 18px;
  font-weight: 500;
  border: 1px solid #c9771569;
  text-decoration: none;
  transition: all 0.2s;
  border-radius: 9px;
  cursor: pointer;
}
.gf-btn:hover,
.gf-btn-active {
  background: #f7631b;
  color: #fff;
  -webkit-transform: translateY(3px);
  -ms-transform: translateY(3px);
  transform: translateY(3px);
}

.gallery {
  display: flex;
  justify-content: center;
  width: fit-content;
  max-width: 1320px;
  flex-wrap: wrap;
  margin: 25px auto;
  /* gap: 14px; */
}
.gallery img {
  width: 350px;
    height: 200px;
  object-fit: cover;
  /* background: center center/cover no-repeat #ddd; */
  transition: 0.3s ease-in-out;
  border-radius: 12px;
  overflow: hidden;
  margin: 10px 10px;
}
.gallery img:hover::after {
  content: "E";
}

.gallery img:hover,
video:hover {
  transform: scale(1.1);
}

.butonsSection {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 7px 15px;
  gap: 15px;
}
.closeBtn {
  font-size: 22px;
  letter-spacing: 2px;
  color: #fff;
  transition: all 0.4s linear;
  padding: 8px 50px;
  border-radius: 25px;
  background: red;
  border: 0;
  outline-offset: -5px;
  outline: 2px solid #fff;
}
.closeBtn:hover {
  cursor: auto;
  background: white;
  color: black;
  padding: 8px 45px;
  outline-offset: 4px;
  outline: 2px solid #fff;
}

.openDiv {
  width: 100%;
  height: 100vh;
  background: #000000e7;
  position: fixed;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  left: 0;
  z-index: 9999;
}
.imgPreview {
  /*    width: 70%;  */
  object-fit: scale-down;
  max-height: 80vh;
  height: auto;
}

.sets .hide,
.sets .pophide {
  width: 0%;
  opacity: 0;
}

.all-btn {
  text-align: center;
  background-color: #04091e;
  border-radius: 30px;
  margin: -15px auto 0;
  font-size: 1rem;
  width: 100%;
  max-width: 300px;
  padding: 5px 10px;
  letter-spacing: 1px;
  cursor: pointer;
	
}

.all-btn:active {
  transform: translateY(2px);
}

/* Responsive css Code Start */

@media (max-width: 767px) {
  .gallery img {
    margin: 8px 8px;
    width: 175px;
  }

.closeBtn {
    padding: 8px 25px;
  }

.imgPreview {
    width: 80%;
    height: auto;
  }
}

@media (max-width: 575px) {
  .gallery img {
    margin: 8px 6px;
    width: 155px;
  }

.gf-btn {
    font-size: 15px;
  }

.closeBtn {
    font-size: 18px;
    padding: 8px 25px;
    border-radius: 15px;
  }
  .closeBtn:hover {
    padding: 8px 20px;
  }

.imgPreview {
    width: 90%;
    /* max-height: 50vh; */
    height: auto;
  }
}
		
			
			
			
			
			
		</style>
		
		
				
		
		</head>
		<body>	
		
	
			
			 <?php include("menu.html");?>

<section class="banner-area relative" id="home" style="height: 450px;">

<div class="container">
					<div class="row fullscreen d-flex align-items-center justify-content-between">
						<div class="banner-content col-md-12">
							<h1 >
									
								<div class="main">
									
								<h1 style="margin-bottom: 214px;">MANGALDAI COLLEGE  <div class="roller" >
									
									
									
									
									
    								<span id="rolltext"><font size="2px" color="white">
    									<img src="img/logo.png" width="70px" ><br>
    								     Since 1951</font><br/>
   									<font size="3px" color="white"> Promotion of higher education</font><br/>
   									 <font size="4px" color="white">social upliftment and development</font><br/>
									
    							
   									
    
 								 </div>	
							</h1>
							<p class="pt-10 pb-10">
								
							</p>
							
						</div></center>										
					</div>
				</div>

</section>

<section class="feature-area">
				<div class="container">
					<div class="row">
						<div class="col-lg-12">
							<div class="single-feature">
								<div class="title">

<h4>From the Desk of Principal</h4>
								</div>
								<div class="desc-wrap">
									
										<div class="row">

<div class="col-lg-2">
												<div class="thumb relative">
										<div class="overlay overlay-bg"></div>	
										<img class="img-fluid " src="img/princyImg.jpeg" alt="" style="
    height: 113px;
    width: 127px;
    border: 3px solid #f6631c;
    border-radius: 11px;
">
									</div>
											</div>
											<div class="col-lg-10">
												<p align="justify">   Mangaldai College is a pioneer Higher Educational Institute imparting Science and Arts along with skill based B.Voc degree Programme. The college strives to build a top -notch academic environment for learners through inclusive quality education. In this connection, I take the opportunity to offer my heartiest greeting to all the respected and talented faculty members for their endeavour to make our students excel in all aspects. In compliance with the NEP, 2020 we are now trying our level best towards nurturing the holistic development for our learners. <a href="#"> Read More </a>	</p>
											</div>

</div>

</div>
							</div>
						</div>
						
																		
					</div>
				</div>	
			</section>

<div class="container mt-5">
    <div class="row">
        <div class="col-md-12">
            <div class="d-flex justify-content-between align-items-center breaking-news bg-white">
                <div class="d-flex flex-row flex-grow-1 flex-fill justify-content-center bg-danger py-2 text-white px-1 news"><span class="d-flex align-items-center">&nbsp;New Notification</span></div>
                <marquee class="news-scroll" behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
					
					<?php
					include 'connect.php';
					$snotice = "select * from notice where NoticeType = 'Notice' ORDER BY Sno DESC LIMIT 5 ";
					$noticeQ = mysqli_query($con, $snotice);
					while($NoticeRow=mysqli_fetch_array($noticeQ))
					{
						$topic =$NoticeRow['Topic'];
						$Link =$NoticeRow['Link'];
						?>
					<a href="<?php echo $Link;  ?>"><img width="40px" src="img/new.gif" style="margin-bottom: 11px;" > <?php echo $topic; ?> </a> <span class="dot"></span>
						
					
					<?php
					}
					
					?>
					
					
				
                </marquee>
            </div>
        </div>
    </div>
</div>

<section class="upcoming-event-area section-gap" style="background: rgb(255 255 255) 20%;">
				
				<div class="container ">
					<div class="row d-flex justify-content-center">
						<div class="menu-content pb-70 col-lg-8">
							<div class="title text-center">
								<h1 class="mb-10">Upcoming Events</h1>
								
							</div>
						</div>
					</div>								
					<div class="row">
						
						
						<div class="active-review-carusel" >
							
							<?php
							
							$ucEvent = "select * from notice where NoticeType='NoticeU' ORDER BY Sno";
							
							$qucEvent =mysqli_query($con,$ucEvent);
							while($RowucEvent = mysqli_fetch_array($qucEvent))
							{
								$uTopic= $RowucEvent['Topic'];
							?>
							
							
							
							<div class="single-review   item" style="box-shadow: 0px 10px 10px 0px rgb(253 95 95 / 27%);padding: 20px;
																	 background-image:url('https://images.pexels.com/photos/235985/pexels-photo-235985.jpeg?cs=srgb&dl=pexels-pixabay-235985.jpg&fm=jpg');
    height: 240px;
    color: white;
    border: 6px solid #fffefed9;
    border-radius: 12px;
">
								
								<div class="title justify-content-start d-flex" >
									<a href="#"><h4  style="padding:2px; color:white;  overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;"><?php echo $uTopic; ?></h4></a>
									<div class="star">
										
									</div>

</div>
								<p class="meta" style="padding:2px;"  >| <?php echo $RowucEvent['Date'];  ?>  |  </p>
								
								
								
								
								<p align="right">
									<a href="<?php echo $RowucEvent['Link'];  ?>">
										<input type="button" value="View Details" class="genric-btn danger radius"> </a> </p>
								
							</div>
							
							<?php
								
							}
							
							?>

</div>
					</div>
				</div>	
			</section>
			
				
				
					
					
				
			<section class="search-course-area relative">
				<div class="overlay overlay-bg"  id="fog"></div>
				<div class="container">
					<div class="row justify-content-between align-items-center">
						<div class="col-lg-6 col-md-6 search-course-left">
							<h1 class="text-white">
								<br>
								Notice Board <br>
								
							</h1>
							
							<p align="justify" style=";background-image: url(http://mangaldaicollege.org/test123/mldclg/img/noticeBoard.png);background-size: 100% 292px;background-repeat: no-repeat;">
								
									<marquee class="mq" direction="up" height="255px" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start() ;">

<a href="<?php echo $LinkB;  ?>" style="color: white;"> <?php echo $topicB; ?> </a> <br><br><br>
						
					
					<?php
					}
			?>

</font>

</marquee>
							</p>

<div class="row details-content">
															
							</div>
						</div>
						<div class="col-lg-4 col-md-6 search-course-right section-gap">
							<div class="form-wrap">
								<h4 class="text-white pb-20 text-center mb-30"> Notice | Events | Tender</h4>		
								
								<div >
									
								</div>									
								<a href="allNoticeView.php"><button class="primary-btn text-uppercase" >View All</button></a>
							</div>
						</div>
					</div>
				</div>	
			</section>

<section class="popular-course-area section-gap">
				<div class="container">
					<div class="row d-flex justify-content-center">
						<div class="menu-content pb-70 col-lg-8">
							<div class="title text-center">
								<h1 class="mb-10">College Events</h1>
								<p>Organized by Mangaldai College family</p>
							</div>
						</div>
					</div>						
					<div class="row">
						<div class="active-popular-carusel">
							
							
							
							
							<?php
							
								$event = "select * from Event_recent ORDER BY date DESC LIMIT 10";
								$qEvent = mysqli_query($con,$event );
								while($eventRow=mysqli_fetch_array($qEvent))
								{
									$date = $eventRow['date'];
									$title =$eventRow['title'];
									$des =$eventRow['description'];
									$img = $eventRow['icon'];
									$id1= $eventRow['e_id'];
							
							?>
							
							
							
							
							
							<div class="single-popular-carusel">
								<div class="thumb-wrap relative">
									<div class="thumb relative">
										<div class="overlay overlay-bg"></div>	
										<img src="http://mangaldaicollege.org/<?php echo $img ?>" alt="" style="height: 165px;">
									</div>
									<div class="meta d-flex justify-content-between">
										<p><span ></span>  <span ></span></p>
										<h4 style="
    margin-top: -6px;
"><?php echo $date; ?></h4>
									</div>									
								</div>
								<div class="details">
									<a href="Eventbyid.php?id=<?php echo $id1; ?>">
										<h4 style="
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
">
											<?php  echo $title; ?>
										</h4>
									</a>
									<p align="justify" style="display: -webkit-box; max-width: 285px;  -webkit-line-clamp: 4;
									-webkit-box-orient: vertical;   overflow: hidden;">
										<?php  echo $des; ?>								
									</p>
								</div>
							</div>	
							
							
							<?php
								}
							?>
							
								
						</div>
					</div>
				</div>

</section>

<section class="cta-one-area relative section-gap" style="
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
">
				<div class="container">
					<div class="overlay overlay-bg"></div>
					<div class="row justify-content-center">
						<div class="wrap">
							<img src="img/logo.png" width="100px"><br>
							<h1 class="text-white">Our Moto</h1>
							<p>
								<font color="white" style="font-style: italic; font-size: 25px;  font-weight: 400;">
									TOMOSO MA JYOTIRGAMAYA<br> 
								Lead me from the darkness
								(of ignorance)
								 TO LIGHT 
								(of wisdom)</font>

</p>
														
						</div>					
					</div>
				</div>	
			</section>

<br>
				
		<!-- 
					<div class="container ">
<div class="row">
<div class="col-md-4">
	<div class="chat_container">
		<div class="job-box">
			<div class="job-box-filter">
				<div class="row">
					
					
					
					<div class="col-md-12 col-sm-12">
						<div class="filter-search-box text-right">								<br>
							<h5><center>Accademic Notice</center></h5><br>
							<input type="search" class="form-control input-sm" placeholder="Search Accademic Notice">
						</div>
					</div>
				</div>
			</div>
			<div class="inbox-message">
				<ul>
					
					
					
					
					<marquee direction="up" style="
    height: 188px;
" onmouseover="this.stop();" onmouseout="this.start();"> 
						
						//<?php
					//$snotice1 = "select * from notice where NoticeType = 'Notice' ORDER BY Sno DESC LIMIT 10 ";
					//$noticeQ1 = mysqli_query($con, $snotice1);
					//while($NoticeRow1=mysqli_fetch_array($noticeQ1))
					//{
					//	$topi1c =$NoticeRow1['Topic'];
					//	$Link1 =$NoticeRow1['Link'];
					//	?>
					
					<li>
						<a href="<?php// echo $Link1;  ?>">
							<div class="message-avatar">
								<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
							</div>
							<div class="message-body">
								<div class="message-body-heading">
									<h5>Daniel Dock <span class="unread">Unread</span></h5>
									<span>7 hours ago</span>
								</div>
								<p><?php  //echo $topi1c;  ?></p>
							</div>
						</a>
					</li>
					<?php
						
						
					//}
					
					?>
					
					</marquee>
				</ul>
			</div>
		</div>
	</div>
</div>

<div class="col-md-4">
	<div class="chat_container">
		<div class="job-box">
			<div class="job-box-filter">
				<div class="row">
					
					
					
					<div class="col-md-12 col-sm-12">
						<div class="filter-search-box text-right" >							<br>
							<h5><center>News & Events</center></h5><br>
							<input type="search" class="form-control input-sm" placeholder="Search News & Events">
						</div>
					</div>
				</div>
			</div>
			<div class="inbox-message">
				<ul>
					
					
					
					
					<marquee direction="up" style="
    height: 188px;
" onmouseover="this.stop();" onmouseout="this.start();"> 
						
						<?php
					//$snotice1 = "select * from notice where NoticeType = 'Notice' ORDER BY Sno DESC LIMIT 10 ";
				//	$noticeQ1 = mysqli_query($con, $snotice1);
					//while($NoticeRow1=mysqli_fetch_array($noticeQ1))
					//{
					//	$topi1c =$NoticeRow1['Topic'];
					//	$Link1 =$NoticeRow1['Link'];
					//	?>
					
					<li>
						<a href="<?php //echo $Link1;  ?>">
							<div class="message-avatar">
								<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
							</div>
							<div class="message-body">
								<div class="message-body-heading">
									<h5>Daniel Dock <span class="unread">Unread</span></h5>
									<span>7 hours ago</span>
								</div>
								<p><?php // echo $topi1c;  ?></p>
							</div>
						</a>
					</li>
					<?php
						
						
					//}
					
					?>
					
					</marquee>
				</ul>
			</div>
		</div>
	</div>
</div>
	
	
	
	<div class="col-md-4">
	<div class="chat_container">
		<div class="job-box">
			<div class="job-box-filter">
				<div class="row">
					
					
					
					<div class="col-md-12 col-sm-12">
						<div class="filter-search-box text-right"><br>
							<h5><center>Tenders</center></h5><br>
							<input type="search" class="form-control input-sm" placeholder="Search Tenders">
						</div>
					</div>
				</div>
			</div>
			<div class="inbox-message">
				<ul>
					
					
					
					
					<marquee direction="up" style="
    height: 188px;
" onmouseover="this.stop();" onmouseout="this.start();"> 
						
						<?php
					//$snotice1 = "select * from notice where NoticeType = 'Notice' ORDER BY Sno DESC LIMIT 10 ";
					//$noticeQ1 = mysqli_query($con, $snotice1);
				//	while($NoticeRow1=mysqli_fetch_array($noticeQ1))
					//{
					//	$topi1c =$NoticeRow1['Topic'];
					//	$Link1 =$NoticeRow1['Link'];
					//	?>
					
					<li>
						<a href="<?php// echo $Link1;  ?>">
							<div class="message-avatar">
								<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
							</div>
							<div class="message-body">
								<div class="message-body-heading">
									<h5>Daniel Dock <span class="unread">Unread</span></h5>
									<span>7 hours ago</span>
								</div>
								<p><?php  echo $topi1c;  ?></p>
							</div>
						</a>
					</li>
					<?php
						
						
					//}
					
					?>
					
					</marquee>
				</ul>
			</div>
		</div>
	</div>
</div>
</div>
</div>		
				
				
	-->			
				
				
				
				
 <div class="teamWrapper" style="
    background: #e9e9e9;
    /* height: 168px; */
    padding: 50px;
">
    <div class="container">
      <h1 align="center">Degree in discipline</h1>
      <p align="center">Mangaldai College</p>
      <div class="teamGrid">
        <div class="colmun">
          <div class="teamcol">
            <div class="teamcolinner">
              <div class="avatar"><img src="http://mangaldaicollege.org/images/1.jpeg" alt="Member"  style="border: 7px solid #8b6f0d03;"></div>
              <div class="member-name"> <h3 align="center">Bachelor in Computer Application (BCA)
</h3> </div>
              <div class="member-info"><p align="center">Department of Computer Science & IT</p></div>
              <div class="member-mail"> <p align="center"> <a href="mailto:@gmail.com">csitmangaldaicollege@gmail.com</a> </p> </div>
              <div class="member-social"> 
                <ul class="social-listing">
                  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                  <li><a href="#"><i class="fa fa-globe"></i></a></li>
                  <li><a href="#"><i class="fa fa-envelope"></i></a></li>
                </ul> 
              </div>
            </div>
          </div>
        </div>
        <div class="colmun">
          <div class="teamcol">
            <div class="teamcolinner">
              <div class="avatar"><img src="http://mangaldaicollege.org/img/04.jpg" alt="Member"  style="border: 7px solid #8b6f0d03;"></div>
              <div class="member-name"> <h2 align="center">ML MDT (B.Voc)
</h2> </div>
              <div class="member-info"><p align="center">Bachelor of Vocational</p></div>
              <div class="member-mail"> <p align="center"> <a href="mailto:@gmail.com">mailto:@gmail.com</a> </p> </div>
              <div class="member-social"> 
                <ul class="social-listing">
                  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                  <li><a href="#"><i class="fa fa-globe"></i></a></li>
                  <li><a href="#"><i class="fa fa-envelope"></i></a></li>
                </ul> 
              </div>
            </div>
          </div>
        </div>
        <div class="colmun">
          <div class="teamcol">
            <div class="teamcolinner">
              <div class="avatar"><img src="http://mangaldaicollege.org/img/09.jpg" alt="Member"  style="border: 7px solid #8b6f0d03;"></div>
              <div class="member-name"> <h3 align="center">Food Processing Technology (B.Voc)
</h3> </div>
              <div class="member-info"><p align="center">Bachelor of Vocational</p></div>
              <div class="member-mail"> <p align="center"> <a href="mailto:@gmail.com">mailto:@gmail.com</a> </p> </div>
              <div class="member-social"> 
                <ul class="social-listing">
                  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                  <li><a href="#"><i class="fa fa-globe"></i></a></li>
                  <li><a href="#"><i class="fa fa-envelope"></i></a></li>
                </ul> 
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>  
  </div>
				
				
				
				
				
				
				
	<br> <br> 	<br> <br>

<section class="gallery-sec sec-pad">
  <div class="container">
    <div class="section-ajeet-title text-center">Photo Gallery</div>

<div id="gf-BtnContainer" class="filter">
      <button class="gf-btn gf-btn-active" onclick="filterSelection('bollywood')">Cultural</button>
      <button class="gf-btn" onclick="filterSelection('hollywood')">Activity</button>
      <button class="gf-btn" onclick="filterSelection('tv')">Campus View</button>
		<button class="gf-btn" onclick="filterSelection('lab')">Laboratory</button>
		
		
    </div>

<div class="gallery sets">

</div>

<div class="all-btn">
      <a href="#" style="color: white; text-decoration-line: none">MORE IMAGES </a>
    </div>
  </div>
</section>

<section class="cta-two-area">
				<div class="container">
					<div class="row">
						<div class="col-lg-8 cta-left">
							<h1>Connect with us on social media</h1>
						</div>
						<div class="col-lg-4 cta-right">
							<center><a class="primary-btn wh" style="
    border-radius: 6px;
" href="https://www.youtube.com/@mangaldaicollege5564"><img src="img/yt1.png" width="25px" ></a>
								<a class="primary-btn wh" style="
    border-radius: 6px;
" href="https://www.facebook.com/mangaldaicollegeofficialpage/"><img src="img/fb.png" width="25px"></a></center>
						</div>
					</div>
				</div>	
			</section>
			
						
			
					
						 <?php include("footer.html");?> 
					
			
			
			
			<!-- End footer Area

VANTA.DOTS({
  el: "#fog",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00,
  color1: 0xa03f3f,
  colorMode: "variance",
  birdSize: 2.00,
  wingSpan: 18.00,
  speedLimit: 7.00,
  separation: 59.00,
  alignment: 64.00,
  cohesion: 71.00,
  quantity: 2.00
})

</script> -->

// Highlight active button and current button
var btnContainer = document.getElementById("gf-BtnContainer");
var btns = btnContainer.getElementsByClassName("gf-btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function () {
    var current = document.getElementsByClassName("gf-btn-active");
    current[0].className = current[0].className.replace(" gf-btn-active", "");
    this.className += " gf-btn-active";
  });
}

// Popup Gallery Script

let imgs = document.querySelectorAll("img");
let count;
imgs.forEach((img, index) => {
  img.addEventListener("click", function (e) {
    if (e.target == this) {
      count = index;
      let openDiv = document.createElement("div");
      let imgPreview = document.createElement("img");
      let butonsSection = document.createElement("div");
      butonsSection.classList.add("butonsSection");
      let closeBtn = document.createElement("button");

closeBtn.classList.add("closeBtn");
      closeBtn.innerText = "Close";
      closeBtn.addEventListener("click", function () {
        openDiv.remove();
      });

imgPreview.classList.add("imgPreview");
      imgPreview.src = this.src;

//   butonsSection.append(prevButton, nextBtn);
      openDiv.append(imgPreview, butonsSection, closeBtn);

openDiv.classList.add("openDiv");

document.querySelector("body").append(openDiv);
    }
  });
});
	
</script>	
		</body>
	</html>

İptal