<!doctype html>

<html lang="en">

<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
  
    <!-- Basic -->
	<title>SP DYNAMIC VENTURE </title>
    
    <!-- Define Charset -->
	<meta charset="utf-8">
    
    <!-- Responsive Metatag -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <!-- Page Description and Author -->

    
    <!-- Favicon -->
    <link rel="shortcut icon" href="images/fav_logo.png">

    
    <!-- Bootstrap CSS  -->
	<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen">
  
    <!-- Revolution Banner CSS -->
    <link rel="stylesheet" type="text/css" href="css/settings.css" media="screen" />
  
    <!-- Vella CSS Styles  -->
	<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
  <link rel="stylesheet" type="text/css" href="css/styles.css" media="screen">
    <!-- Responsive CSS Styles  -->
	<link rel="stylesheet" type="text/css" href="css/responsive.css" media="screen">
    
    <!-- Css3 Transitions Styles  -->
	<link rel="stylesheet" type="text/css" href="css/animate.css" media="screen">
	<!-- load cubeportfolio css file -->
<link rel="stylesheet" href="cubeportfolio/css/cubeportfolio.min.css">
 
<!-- load latest jquery from google resources-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 
<!-- load cubeportfolio jQuery plugin -->
<script type="text/javascript" src="cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
<link rel="stylesheet" href="css/popup/magnific-popup.css" type="text/css" />
  
    <!-- Color CSS Styles  -->
    <link rel="stylesheet" type="text/css" href="css/colors/blue.css" title="blue" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/colors/beige.css" title="beige" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/colors/cyan.css" title="cyan" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/colors/green.css" title="green" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/colors/jade.css" title="jade" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/colors/orange.css" title="orange" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/colors/peach.css" title="peach" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/colors/pink.css" title="pink" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/colors/purple.css" title="purple" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/colors/red.css" title="red" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/colors/sky-blue.css" title="sky-blue" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/colors/yellow.css" title="yellow" media="screen" />

  
    <!-- Fontello Icons CSS Styles  -->
    <link rel="stylesheet" type="text/css" href="css/fontello.css" media="screen">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
    
    <!-- Vella JS  -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.migrate.js"></script>
    <script type="text/javascript" src="js/modernizrr.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/jquery.fitvids.js"></script>
    <script type="text/javascript" src="js/owl.carousel.min.js"></script>
    <script type="text/javascript" src="js/nivo-lightbox.min.js"></script>
    <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
    <script type="text/javascript" src="js/jquery.appear.js"></script>
    <script type="text/javascript" src="js/count-to.js"></script>
    <script type="text/javascript" src="js/jquery.textillate.js"></script>
    <script type="text/javascript" src="js/jquery.lettering.js"></script>
    <script type="text/javascript" src="js/jquery.easypiechart.min.js"></script>
    <script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>
    <script type="text/javascript" src="js/jquery.parallax.js"></script>
    <script type="text/javascript" src="js/mediaelement-and-player.js"></script>
    <script type="text/javascript" src="js/jquery.themepunch.plugins.min.js"></script>
	<script type="text/javascript" src="js/jquery.themepunch.revolution.min.js"></script>
	<script type="text/javascript" src="js/script.js"></script>

	
</head>
<body>

	<!-- Container -->
	<div id="container">
		
        <!-- Start Header -->
		<div class="hidden-header"></div>
        <header class="clearfix">
            
            <!-- Start Top Bar -->
			<div class="top-bar">
				<div class="container">
					<div class="row">
						<div class="col-md-6">
                            <!-- Start Contact Info -->
							<ul class="contact-details">
                            	<li><a href="#"><i class="icon-mobile-2"></i> +607 2121 210 </a></li>
                                <li><a href="#"><i class="icon-mail-2"></i> <span>enquiry@spdventure.com</span></a></li>
                            </ul>
                            <!-- End Contact Info -->
						</div>
						<div class="col-md-6">
                            <!-- Start Social Links -->
							<ul class="social-list">
								<li>
									<a class="facebook sh-tooltip" data-placement="bottom" target="_blank" title="Facebook" href="https://www.facebook.com/Sp-Dynamic-Venture-Sdn-Bhd-1088562541281098/"><i class="icon-facebook-2"></i></a>
								</li>
								
								
							</ul>
                            <!-- End Social Links -->
						</div>
					</div>
				</div>
			</div>
            <!-- End Top Bar -->
          
			<!-- Start Header ( Logo & Naviagtion ) -->
			<div class="navbar navbar-default navbar-top">
				<div class="container">
					<div class="navbar-header">
                        <!-- Stat Toggle Nav Link For Mobiles -->
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
							<i class="icon-menu-1"></i>
						</button>
                        <!-- End Toggle Nav Link For Mobiles -->
						<a class="navbar-brand" href="index.html" style="padding:5px 0px;"><img alt="" src="images/logo1.png"></a>
					</div>
					<div class="navbar-collapse collapse">
                        <!-- Stat Search -->
                    	
                        <!-- End Search -->
                        <!-- Start Navigation List -->
						<ul class="nav navbar-nav navbar-right">
							<li>
								<a href="index.html">Home</a>
                             <!--   <ul class="dropdown">
									<li><a class="active" href="index.html">Home Main Version</a></li>
                                    <li><a href="index-01.html">Home Version 1</a></li>
									<li><a href="index-02.html">Home Version 2</a></li>
                                    <li><a href="index-03.html">Home Version 3</a></li>
                                    <li><a href="index-04.html">Home Version 4</a></li>
                                    <li><a href="index-05.html">Home Version 5</a></li>
                                    <li><a href="index-06.html">Home Version 6</a></li>
                                    <li><a href="index-07.html">Home Version 7</a></li>
                                    <li><a href="index-08.html">Home Version 8</a></li>
								</ul>-->
							</li>
							<li>
								<a href="about.html">About</a>
							<!--	<ul class="dropdown">
									<li><a href="about.html">About</a></li>
                                    <li><a href="services.html">Services</a></li>
                                    <li><a href="right-sidebar.html">Right Sidebar</a></li>
                                    <li><a href="left-sidebar.html">Left Sidebar</a></li>
									<li><a href="404.html">404 Page</a></li>
								</ul>--->
							</li>
                            <li>
								<a  href="services.html">Services</a>
								<!--<ul class="dropdown">
									<li><a href="tabs.html">Tabs</a></li>
                                    <li><a href="lists.html">Lists</a></li>
                                    <li><a href="alerts.html">Alerts</a></li>
                                    <li><a href="divider.html">Divider</a></li>
                                    <li><a href="buttons.html">Buttons</a></li>
                                    <li><a href="dropcaps.html">Dropcaps</a></li>
                                    <li><a href="action-box.html">Action Box</a></li>
                                    <li><a href="icon-boxes.html">Icon Boxes</a></li>
                                    <li><a href="testimonials.html">Testimonials</a></li>
                                    <li><a href="latest-posts.html">Latest Posts</a></li>
                                    <li><a href="latest-projects.html">Latest Projects</a></li>
                                    <li><a href="pricing.html">Pricing Tables</a></li>
									<li><a href="animated-graphs.html">Animated Graphs</a></li>
                                    <li><a href="accordion-toggles.html">Accordion & Toggles</a></li>
                                    <li><a href="touch-slider-carousel.html">Touch Slider & Carousel</a></li>
								</ul>-->
							</li>
							<li>
								<a href="boat.html">Boat/Assets</a>
							<!--	<ul class="dropdown">
									<li><a href="portfolio-2.html">2 Columns</a></li>
                                    <li><a href="portfolio-3.html">3 Columns</a></li>
									<li><a href="portfolio-4.html">4 Columns</a></li>
                                    <li><a href="single-project.html">Single Project</a></li>
								</ul>-->
							</li>
                            <li>
								<a class="active" href="projects.php">Project</a>
							<!--	<ul class="dropdown">
									<li><a href="blog.html">Blog - right Sidebar</a></li>
                                    <li><a href="blog-left-sidebar.html">Blog - Left Sidebar</a></li>
                                    <li><a href="single-post.html">Blog Single Post</a></li>
								</ul>--->
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
                        <!-- End Navigation List -->
					</div>
				</div>
			</div>
            <!-- End Header ( Logo & Naviagtion ) -->
          
		</header>
		<!-- End Header -->
		
	 <div class="ab">
        <div class="cd">
            <div class="aboutban" >
                
                        
                        
                        <div style="margin-top:90px;position:absolute;width:100%;text-align:center;"><h4 style="font-size:28px;color:#ffd950;font-weight:bold;">PROJECTS</h4></div>
                       
                        <a href="index.html" class="text2"style="position:absolute;font-size:14px;color:#084597;font-weight:bold;margin-top:150px;width:100%;text-align:center;"><i class="fa fa-home"style="color:#084597;"></i>   Home
                        </a>
						<img style="width:100%;height:250px;" src="images/serviceban.jpg" >
	
	</div>
	</div>
	</div>
	
	
	
	
	




     
			
<!-- 		
<section style="background-color:#ffd950;">			
			
<div class="toolbar mb2 mt2" style="padding-left:30px;padding-top:30px;padding-bottom:30px;">
  <button style="background-color:#084597;color:white;font-size:17px;border:1px solid yellow;" class="btn fil-cat" href="" data-rel="all">All</button>
  <button style="background-color:#084597;color:white;font-size:17px;border:1px solid yellow;" class="btn fil-cat" data-rel="web">2015</button>
  <button style="background-color:#084597;color:white;font-size:17px;border:1px solid yellow;" class="btn fil-cat" data-rel="flyers">2016</button>
  <button style="background-color:#084597;color:white;font-size:17px;border:1px solid yellow;" class="btn fil-cat" data-rel="bcards">2017</button>
</div> 
 
<div style="clear:both;"></div>   
<div id="portfolio">
  <div class=" col-md-4 tile scale-anm web all">
        <img src="images/portfolio-01.jpg" alt="" />
  </div>
  <div class="col-md-4 tile scale-anm bcards all">
    <img src="images/portfolio-02.jpg" alt="" />
  </div>
  <div class="col-md-4 tile scale-anm web all">
    <img src="images/portfolio-03.jpg" alt="" />
  </div>
  <div class="col-md-4 tile scale-anm flyers all">
            <img src="images/portfolio-04.jpg" alt="" />
  </div>
  <div class="col-md-4 tile scale-anm flyers all">
        <img src="images/portfolio-05.jpg" alt="" />
  </div>
  <div class="col-md-4 tile scale-anm bcards all">
            <img src="images/portfolio-06.jpg" alt="" />
  </div>
 
 
</div>

<div style="clear:both;"></div>   		
</section>		
 <script>
 $(function() {
		var selectedClass = "";
		$(".fil-cat").click(function(){ 
		selectedClass = $(this).attr("data-rel"); 
     $("#portfolio").fadeTo(100, 0.1);
		$("#portfolio div").not("."+selectedClass).fadeOut().removeClass('scale-anm');
    setTimeout(function() {
      $("."+selectedClass).fadeIn().addClass('scale-anm');
      $("#portfolio").fadeTo(300, 1);
    }, 300); 
		
	});
});
 </script> -->
 
 
 
 
 <section style="background-color:#f98226;padding-bottom:60px;">
<!--  <div class="toolbar mb2 mt2" style="padding-left:30px;padding-top:30px;padding-bottom:30px;">
  <button style="background-color:#084597;color:white;font-size:17px;border:1px solid yellow;" class="btn fil-cat" href="" data-rel="all">All</button>
  <button style="background-color:#084597;color:white;font-size:17px;border:1px solid yellow;" class="btn fil-cat" data-rel="web">2015</button>
  <button style="background-color:#084597;color:white;font-size:17px;border:1px solid yellow;" class="btn fil-cat" data-rel="flyers">2016</button>
  <button style="background-color:#084597;color:white;font-size:17px;border:1px solid yellow;" class="btn fil-cat" data-rel="bcards">2017</button>
</div>  -->
<div class="container">
<ul class="filtermenu">
 <a href="#" class="project_title"><li class="active" data-filter="all">All</li></a>
 <?php
		include_once("connection.php");
$sql="SELECT gt_id,gallery_title FROM tbl_gallery_title order by gt_id desc  ";
$query=mysqli_query($conn, $sql) or die($sql);
$i=0;
$gt_id[]='';
$rows=mysqli_num_rows($query);
while($row=mysqli_fetch_array($query)){
	$gt_id[]=$row['gt_id'];
$title=$row['gallery_title'];
   echo'  
 
   <a href="#" class="project_title"><li data-filter="'.$i.'">'.$title.'</li></a>
                        ';
						$i++;
}
			?>
	
	
	
	</ul>
	<div class="" style="">
	<?php 
						 for($j=1;$j<=$rows;$j++){
							 //echo $j.'</br>';
							 $res=$j-1;
							  $select_image="SELECT small_img,big_img,title,title_desc FROM tbl_gallery_img where gt_id='".$gt_id[$j]."' order by gi_id desc";
							  $exec_select_image=mysqli_query($conn,$select_image) or die('error');
							  while($img_row=mysqli_fetch_array($exec_select_image)){
								 
								  
								  echo ' 
								  <div class="portfolio-item post '. $res.' animation col-md-4 col-sm-6 col-xs-12">
                        	<div class="portfolio-border">
                                <!-- Start Portfolio Item Thumb -->
                                <div class="portfolio-thumb">
                                    <a class="lightbox" title="'.$img_row['title'].'" href="userdata/bg_img/'.$img_row['big_img'].'" style="width:100%; height:100%;">
                                        <div class="thumb-overlay"><i class="icon-resize-full"></i></div>
                                        <img alt="" src="userdata/sm_img/'.$img_row['small_img'].'" />
                                    </a>
                                </div>
                                <!-- End Portfolio Item Thumb -->
                                <!-- Start Portfolio Item Details -->
                                <div class="portfolio-details">
                                    <a href="#">
                                        <h4>'.$img_row['title'].'</h4>
                                       
                                        <span>'.$img_row['title_desc'].'</span>
                                    </a>
                                 
                                </div>
                                <!-- End Portfolio Item Details -->
                            </div>
                    	</div>';
							
							  }
							  
						 }
						 ?>
	
	

<!--
	<div class="post '. $res.' col-md-3 col-sm-6 col-xs-12">
		<div class="post-thumb"><img src="userdata/sm_img/'.$img_row['small_img'].'" alt="" /></div>
		<div class="post-title">Title</div>
		<div class="post-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</div>
	</div>
	<!-- /post
	<div class="post black col-md-3 col-sm-6 col-xs-12">
		<div class="post-thumb"><img src="images/portfolio-02.jpg" alt="" /></div>
		<div class="post-title">Title</div>
		<div class="post-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</div>
	</div>
	<!-- /post
	<div class="post black col-md-3 col-sm-6 col-xs-12">
		<div class="post-thumb"><img src="images/portfolio-03.jpg" alt="" /></div>
		<div class="post-title">Title</div>
		<div class="post-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</div>
	</div>
	<!-- /post
	<div class="post blue col-md-3 col-sm-6 col-xs-12">
		<div class="post-thumb"><img src="images/portfolio-04.jpg" alt="" /></div>
		<div class="post-title">Title</div>
		<div class="post-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</div>
	</div>
	<!-- /post -->
	
	<!-- /post -->
</div>
</div>
</section>
<script>
class FilterGallery {
	
	constructor(){
		this.$filtermenuList = $('.filtermenu li');
		this.$container      = $('.container');
		
		this.updateMenu('all');
		this.$filtermenuList.on('click', $.proxy(this.onClickFilterMenu, this));
	}
	
	onClickFilterMenu(event){
		const $target      = $(event.target);
		const targetFilter = $target.data('filter');

		this.updateMenu(targetFilter);
		this.updateGallery(targetFilter);
	}
	
	updateMenu(targetFilter){
		this.$filtermenuList.removeClass('active');
		this.$filtermenuList.each((index, element)=>{
			const targetData = $(element).data('filter');

			if(targetData === targetFilter){
				$(element).addClass('active');
			}
		})
	}
	
	updateGallery(targetFilter){

		if(targetFilter === 'all'){
			this.$container.fadeOut(300, ()=>{
				$('.post').show();
				this.$container.fadeIn();
			});
		}else {
			this.$container.find('.post').each((index, element)=>{
				this.$container.fadeOut(300, ()=>{
					if($(element).hasClass(targetFilter)) {
						$(element).show();
					}else {
						$(element).hide();
					}
					this.$container.fadeIn();
				})
			});
		}
	}
}

const fliterGallery = new FilterGallery();
</script>
	
				<!-- Start Footer -->
		<footer>
			<div class="container">
				<div class="row footer-widgets">
                  
                    <!-- Start Contact Widget -->
					<div class="col-md-4">
                        <div class="footer-widget contact-widget">
							<h4>About Us<span class="head-line"></span></h4>
							<p>SP Dynamic Venture Sdn Bhd was venture company between Straight Perkasa Services and Dynamic Group of companies to provide a variety of marine services to domestic market in Malaysia.</p>
						</div>
					</div>
                    <!-- End Contact Widget -->
                  
                    <!-- Start Flickr Widget -->  
                    <div class="col-md-4">
						<div class="footer-widget flickr-widget">
							<h4>Visitors<span class="head-line"></span></h4>
								<a href="https://info.flagcounter.com/BxwQ"><img src="https://s04.flagcounter.com/count2/BxwQ/bg_222222/txt_FFFFFF/border_CCCCCC/columns_3/maxflags_15/viewers_3/labels_1/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0"></a>
						</div>
					</div>
                    <!-- End Flickr Widget -->
                    
                    <!-- Start Twitter Widget -->
				
                    <!-- End Twitter Widget -->
                    
					<!-- Start Subscribe & Social Links Widget -->
                    <div class="col-md-4">
						<div class="footer-widget contact-widget">
							<h4>Contact info<span class="head-line"></span></h4>
							<ul>
								<li><span>Address:</span> No 10-02 Austin 18 Jalan Austin Perdana 3, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia.

</li>
								<li><span>Phone Number:</span> +607 2121 210 </li>
                               
								<li><span>Email:</span> <a href="#" > enquiry@spdventure.com</a></li>
                                
							</ul>
						</div>
                     
					</div>
				</div>
                <!-- End Subscribe & Social Links Widget -->
              
                <!-- Start Copyright -->
				<div class="copyright-section">
					<div class="row">
						<div class="col-md-6">
							<p>© 2017 SP DYNAMIC VENTURE  -  All Rights Reserved</p>
						</div>
						<div class="col-md-6" >
							<p class="footer_global"><a href="http://www.krglobalsystems.com/" target="_blank">KR Global Systems</a></p>
						</div>						
					</div>
				</div>
                <!-- End Copyright -->
                
			</div>
		</footer>
		<!-- End Footer -->


		
      
	</div>
	<!-- End Container -->
    
    <!-- Go To Top Link -->
    <a href="#" class="back-to-top"><i class="icon-up-open-1"></i></a>
    

    
   
	

  
</body>


</html>					