<!--
author: W3layouts
author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rockypet Ghana - Proud to be Ghanaian</title>
<!-- custom-theme -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Oil Industry Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //custom-theme -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="css/style3.css" /><!--Banner Text-->
<link rel="stylesheet" type="text/css" href="css/team.css" /><!--Banner Text-->

<!-- font-awesome-icons -->
<link href="css/font-awesome.css" rel="stylesheet"> 
<!-- //font-awesome-icons -->
<link href="//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" rel="stylesheet">
</head>
<?php include 'admin/ui/common/config.php' ?>	
<body>
<!-- banner -->
    <?php include 'header.php' ?>
<!-- //banner -->
<!-- banner -->
	<div class="banner-silder">
			 <div class="banner">
					<ul>
					</ul>
				  <ol>
				  </ol>
				  <i class="left"></i><i class="right"></i>
				  <div class="banner_wthree_agile_info">
				      <section class="rw-wrapper">
                        <div class="rw-sentence">
                            <span>Rocky Petroleum Engineering & Consultancy services</span>
                            <br />
                            <span style="visibility: hidden;">,</span>
                            
                            <div class="rw-words rw-words-1">
                                <span>The LPG specialists</span>
                                <span>Plant protection systems</span>
                                <span>Engineering, Procurement, Construction consultancy</span>
                                <span>Training and competence development</span>
                                
                            </div>
                        </div>
                     </section>
				     <!--<section class="rw-wrapper">
						<div class="rw-sentence">
							<span>The Finest Quality </span>
							<br />
							<span>of Oil And</span>
							
							<div class="rw-words rw-words-1">
								<span></span>
								<span>Gas Resources</span>
								<span>Fuel</span>
							    <span>Gas Resources</span>
								<span>Gas Flaring</span>
							</div>
						</div>
			         </section>-->
				  </div>
		     </div>
	</div>
<!-- //banner -->


<!-- banner-bottom -->
	<div class="banner-bottom">
		<div class="container">
		   
		          <h2 class="w3l_header">About Us</h2>
				<!--<p class="quia">Committed to excellence</p>-->
				<p class="agile_paranew">Rocky Petroleum and Engineering Services Limited is a reputable company incorporated and validly operating under the laws of Ghana. The Company’s main focus is to provide high technical and professional standards of engineering services to the Ghanaian and International markets with emphasis on building strong, trusting and long standing relation with our clients
.</p>
					<div class="wthreee_more">
						<p class="quiaa"><a href="about.php"  class="button--wayra button--border-thick button--text-upper button--size-s">Read More</a></p>
					</div>
			<div class="col-md-2 w3_agileits_banner_bottom_grid">
				<h5>LPG</h5>
			</div>
			<div class="col-md-10 w3_agileits_banner_bottom_grid_left">
				<ul id="flexiselDemo1">	
					<li>
						<div class="agileits_w3layouts_banner_bottom_grid">
							<div class="wthree_banner_bottom_grid1">
								<img src="images/g1.jpg" alt=" " class="img-responsive" />
								<div class="agileinfo_banner_bottom_grid1_pos">
									<h3>The Oil</h3>
										<p>Real Quality</p>
								</div>
							</div>
							<h4><a href="#" data-toggle="modal" data-target="#myModal">Construction</a></h4>
						</div>
					</li>
					<li>
						<div class="agileits_w3layouts_banner_bottom_grid">
							<div class="wthree_banner_bottom_grid1">
								<img src="images/g2.jpg" alt=" " class="img-responsive" />
								<div class="agileinfo_banner_bottom_grid1_pos">
									<h3>The Oil</h3>
										<p>Real Quality</p>
								</div>
							</div>
							<h4><a href="#" data-toggle="modal" data-target="#myModal">Training</a></h4>
						</div>
					</li>
					<li>
						<div class="agileits_w3layouts_banner_bottom_grid">
							<div class="wthree_banner_bottom_grid1">
								<img src="images/g4.jpg" alt=" " class="img-responsive" />
								<div class="agileinfo_banner_bottom_grid1_pos">
									<h3>The Oil</h3>
										<p>Real Quality</p>
								</div>
							</div>
							<h4><a href="#" data-toggle="modal" data-target="#myModal">Material Supply</a></h4>
						</div>
					</li>
					<li>
						<div class="agileits_w3layouts_banner_bottom_grid">
							<div class="wthree_banner_bottom_grid1">
								<img src="images/g3.jpg" alt=" " class="img-responsive" />
								<div class="agileinfo_banner_bottom_grid1_pos">
									<h3>The Oil</h3>
										<p>Real Quality</p>
								</div>
							</div>
							<h4><a href="#" data-toggle="modal" data-target="#myModal">Haulage</a></h4>
						</div>
					</li>
					<li>
						<div class="agileits_w3layouts_banner_bottom_grid">
							<div class="wthree_banner_bottom_grid1">
								<img src="images/g5.jpg" alt=" " class="img-responsive" />
								<div class="agileinfo_banner_bottom_grid1_pos">
									<h3>The Oil</h3>
									<p>Real Quality</p>
								</div>
							</div>
							<h4><a href="#" data-toggle="modal" data-target="#myModal">Plant Protection</a></h4>
						</div>
					</li>
				</ul>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
<!-- //banner-bottom -->
<!-- Tooltip -->
				<div class="tooltip-content">

					<div class="modal fade features-modal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title">Oil Industry</h4>
								</div>
								<div class="modal-body">
									<img src="images/g4.jpg" alt="">
									<h5>Curabitur quis egestas.</h5>
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent varius lectus vitae porttitor fringilla. Donec turpis orci, elementum a nunc quis, maximus varius ipsum. Sed bibendum ex in dignissim bibendum.</p>
								</div>
							</div>
						</div>
					</div>

				</div>
				<!-- //Tooltip -->


<!-- banner-bottom -->

<div class="services">
   <div class="container">
            <h3 class="w3l_header two">What We Do</h3>
            <p class="quia">Committed to excellence</p>
			<p style="color: #ffffff">Rocky Petroleum & Engineering services is provider of, Engineering services, Consultancy, Training for staff and Equipment and materials for the oil and industry, 
The company’s business activities can be categorized into the following:
</p>
       <div class="wthree_services_bottom_left w3ls_banner_bottom_grids">
			<div class="wthree_services_bottom_left_grid">
				                                        
				<?php
                                                try {
                                                    $pdo = new PDO("mysql:host=$dbhost;dbname=$db_name", $dbuser, $dbpass);
                                                    $rows = $pdo->query("SELECT * FROM rockypet_services");
                                                    while ($row = $rows->fetch()):
                                                        ?>
                                                        <div class="col-md-4 w3_agileits_services_bottom_l_grid">
                                        					<div class="agile_services_bottom_l_grid1">
                                        						<img src="<?php echo $row['image_path']; ?>" alt=" " class="img-responsive" />
                                        						<div class="w3_service_bottom_grid_pos">
                                        							<!--<a href="view_service.php?id=<?php echo $row['service_id']; ?>"><h3 style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><?php echo $row['service']; ?></h3></a>-->
                                        							<a href="#"><h3 style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><?php echo $row['service']; ?></h3></a>

                                        						</div>
                                        					</div>
                                        					<div class="serve_info_agile">
                                        					    <!--<a href="view_service.php?id=<?php echo $row['service_id']; ?>"><h4 style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><?php echo $row['service']; ?></h4></a>-->
                                           					    <a href="#"><h4 style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><?php echo $row['service']; ?></h4></a>
                                        					 </div>
                                        				</div>
                                                        <?php
                                                    endwhile;
                                                }catch(PDOException $e) {
                                                    echo $sql . "<br>" . $e->getMessage();
                                                }
                                                $stmt = null;
                                                $pdo = null;
    										?>
				
					
				<div class="clearfix"> </div>
			</div>
			
		</div>
	</div>
</div>

<!--//services -->
<!--/team-->
<div class="team">
   <div class="container">
            <h3 class="w3l_header">Meet Our Team</h3>
			<!--<p class="quia">Who We Are</p>-->
       <div class="w3ls_banner_bottom_grids">
			<div class="col-md-3 agileits-team-grid">
						<div class="team-info">
							<img src="images/profile_pic.png" alt=""></a>
							<div class="team-caption"> 
								<a href="ceo.php"><h5>Samuel Carl Quarshie</h5></a>
								<p>C E O</p>
								
								
							</div>
						</div>
					</div>
					<div class="col-md-3 agileits-team-grid">
						<div class="team-info">
							<img src="images/profile_pic.png" alt="">
							<div class="team-caption"> 
								<a href="technical.php"><h5>Mohanan K. Sreedharan</h5></a>
								<p>Training and Development Manager</p>
								
							</div>
						</div>
					</div>
					
					<div class="col-md-3 agileits-team-grid">
						<div class="team-info">
							<img src="images/profile_pic.png" alt="">
							<div class="team-caption"> 
								<a href="engineering.php"><h5>Joseph Atsu Afavi</h5></a>
								<p>Operations Manager and head of Department</p>
								
							</div>
						</div>
					</div>
					<div class="col-md-3 agileits-team-grid">
						<div class="team-info">
							<img src="images/profile_pic.png" alt="">
							<div class="team-caption"> 
								<a href="administration.php"><h5>Senyo Kudadze</h5></a>
								<p>Manger – Finance & Administration</p>
								
							</div>
						</div>
					</div>

					<div class="clearfix"> </div>
				</div>

		</div>
	</div>
<!--//team-->

<!-- projects -->
	<div class="projects">
		<div class="container">
	        <h3 class="w3l_header">Latest Works</h3>
			<p class="quia">this space is under construction</p>
			<!--<div class="w3ls_banner_bottom_grids">-->
			<!--<div class="col-md-8 projects-agileits-left">-->
			<!--	<div class="w3_agile_projects_grid">-->
			<!--		<div class="w3layouts_projects_grid projects1">-->
			<!--			<div class="w3layouts_projects_grid_pos">-->
			<!--				<div class="wthree_text">-->
			<!--					<h6>Industry</h6>-->
			<!--				</div>-->
			<!--			</div>-->
			<!--		</div>-->
					
			<!--			<div class="projects1-info-w3ls">-->
			<!--			<h6>Lorem ipsum dolor</h6>-->
			<!--			<p>Donec semper rutrum ipsum et bibendum.</p>-->
			<!--			</div>-->
			<!--			<div class="clearfix"> </div>-->
			<!--	</div>-->
			<!--	<div class="w3_agile_projects_grid">-->
			<!--		<div class="w3layouts_projects_grid projects2">-->
			<!--			<div class="w3layouts_projects_grid_pos">-->
			<!--				<div class="wthree_text">-->
			<!--					<h6>Industry</h6>-->
			<!--				</div>-->
			<!--			</div>-->
			<!--		</div>-->
					
			<!--			<div class="projects2-info-w3ls">-->
			<!--			<h6>Consectetur adipiscing</h6>-->
			<!--			<p>Donec semper rutrum ipsum et bibendum.</p>-->
			<!--			</div>-->
			<!--			<div class="clearfix"> </div>-->
			<!--	</div>-->
			<!--	</div>-->
			<!--	<div class="col-md-4 projects-agileits-right">-->
			<!--	<div class="w3_agile_projects_grid">-->
			<!--		<div class="w3layouts_projects_grid projects3">-->
			<!--			<div class="w3layouts_projects_grid_pos">-->
			<!--				<div class="wthree_text">-->
			<!--					<h6>Industry</h6>-->
			<!--				</div>-->
			<!--			</div>-->
			<!--		</div>-->
			<!--		<div class="projects3-info-w3ls">-->
			<!--			<h6>Lorem ipsum dolor</h6>-->
			<!--			<p>Donec semper rutrum ipsum et bibendum.</p>-->
			<!--		</div>-->
			<!--		<div class="clearfix"> </div>-->
			<!--	</div>-->
			<!--	</div>-->
			<!--	<div class="clearfix"> </div>-->
			<!--</div>-->
		</div>
	</div>
<!-- //projects -->


<!-- testimonials -->
	<div class="testimonials"> 
		<div class="container">
			 <h3 class="w3l_header two">Testimonials</h3>
			<p class="quia">Our Clients words </p>

		   <div class="w3ls_testimonials_grids">
				 <section class="center slider">
						<div class="agileits_testimonial_grid">
							<div class="w3l_testimonial_grid">
								<p>In eu auctor felis, id eleifend dolor. Integer bibendum dictum erat, 
									non laoreet dolor.</p>
								<h4>Rosy Crisp</h4>
									<h5>Client</h5>
								<div class="w3l_testimonial_grid_pos">
									<img src="images/1.png" alt=" " class="img-responsive" />
								</div>
							</div>
						</div>
						<div class="agileits_testimonial_grid">
							<div class="w3l_testimonial_grid">
								<p>In eu auctor felis, id eleifend dolor. Integer bibendum dictum erat, 
									non laoreet dolor.</p>
								<h4>Laura Paul</h4>
									<h5>Client</h5>
								<div class="w3l_testimonial_grid_pos">
									<img src="images/2.png" alt=" " class="img-responsive" />
								</div>
							</div>
						</div>
						<div class="agileits_testimonial_grid">
							<div class="w3l_testimonial_grid">
								<p>In eu auctor felis, id eleifend dolor. Integer bibendum dictum erat, 
									non laoreet dolor.</p>
								<h4>Michael Doe</h4>
								<h5>Client</h5>
								<div class="w3l_testimonial_grid_pos">
									<img src="images/3.png" alt=" " class="img-responsive" />
								</div>
							</div>
						</div>
				</section>
			</div>
		</div>
	</div>
<!-- //testimonials -->


<!-- footer -->
	<?php include 'footer.php' ?>
<!-- //footer -->
<!-- bootstrap-pop-up -->
	<div class="modal video-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					Oil Industry
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
				</div>
				<section>
					<div class="modal-body">
						<img src="images/g4.jpg" alt=" " class="img-responsive" />
						<p>Ut enim ad minima veniam, quis nostrum 
							exercitationem ullam corporis suscipit laboriosam, 
							nisi ut aliquid ex ea commodi consequatur? Quis autem 
							vel eum iure reprehenderit qui in ea voluptate velit 
							esse quam nihil molestiae consequatur, vel illum qui 
							dolorem eum fugiat quo voluptas nulla pariatur.
							<i>" Quis autem vel eum iure reprehenderit qui in ea voluptate velit 
								esse quam nihil molestiae consequatur.</i></p>
					</div>
				</section>
			</div>
		</div>
	</div>
		<div class="modal fade" id="myModal2" tabindex="-1" role="dialog">
														<div class="modal-dialog">
														<!-- Modal content-->
															<div class="modal-content">
																<div class="modal-header">
																	<button type="button" class="close" data-dismiss="modal">&times;</button>
																	
																	<div class="signin-form profile">
																	<h3 class="agileinfo_sign">Sign In</h3>	
																			<div class="login-form">
																				<form action="admin\ui\login.php" method="post">
																					<input type="text" name="email" placeholder="E-mail" required="">
																					<input type="password" name="password" placeholder="Password" required="">
																					<div class="tp">
																						<input type="submit" name="authenticate" value="Sign In">
																					</div>
																				</form>
																			</div>
																			<div class="login-social-grids">
																				<ul>
																					<li><a href="#"><i class="fa fa-facebook"></i></a></li>
																					<li><a href="#"><i class="fa fa-twitter"></i></a></li>
																					<li><a href="#"><i class="fa fa-rss"></i></a></li>
																				</ul>
																			</div>
																			<p><a href="#" data-toggle="modal" data-target="#myModal3" > Don't have an account?</a></p>
																		</div>
																</div>
															</div>
														</div>
													</div>
													<!-- //Modal1 -->	
													

<!-- //bootstrap-pop-up -->
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- carousal -->
	<script src="js/slick.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).on('ready', function() {
		  $(".center").slick({
			dots: true,
			infinite: true,
			centerMode: true,
			slidesToShow: 2,
			slidesToScroll: 2,
			responsive: [
				{
				  breakpoint:800,
				  settings: {
					arrows: true,
					centerMode: false,
					slidesToShow: 1
				  }
				},
				{
				  breakpoint: 480,
				  settings: {
					arrows: true,
					centerMode: false,
					centerPadding: '40px',
					slidesToShow: 1
				  }
				}
			 ]
		  });
		});
	</script>
<!-- //carousal -->
<!-- //js -->
<script>
        $(function(){ 

  // parameters
  // image height
  var images_height = '650px';
  // array of images
  var images_url = [
      'images/banner1.jpg',
      'images/banner2.jpg',
      'images/banner3.jpg'
  ];
  var images_count = images_url.length;

  // create nodes
  for(var j=0;j<images_count+1;j++){
      $('.banner ul').append('<li></li>')
  }

  // pagination
  for(var j=0;j<images_count;j++){
      if(j==0){
          $('.banner ol').append('<li class="current"></li>')
      }else{
          $('.banner ol').append('<li></li>')
      }
  }

  // convert images into backgrounds
  $('.banner ul li').css('background-image','url('+images_url[0]+')');
  
  $.each(images_url,function(key,value){
      $('.banner ul li').eq(key).css('background-image','url('+value+')');
  });

  $('.banner').css('height',images_height);

  $('.banner ul').css('width',(images_count+1)*100+'%');

  $('.banner ol').css('width',images_count*20+'px');
  $('.banner ol').css('margin-left',-images_count*20*0.5-10+'px');

  var num = 0;

  var window_width = $(window).width();

  $(window).resize(function(){
      window_width = $(window).width();
      $('.banner ul li').css({width:window_width});
      clearInterval(timer);
      nextPlay();
      timer = setInterval(nextPlay,2000);
  });

  $('.banner ul li').width(window_width);

  // pagination dots
  $('.banner ol li').mouseover(function(){
      $(this).addClass('current').siblings().removeClass('current');
      var i = $(this).index();
      //console.log(i);
      $('.banner ul').stop().animate({left:-i*window_width},500);
      num = i;
  });

  // autoplay
  var timer = null;

  function prevPlay(){
      num--;
      if(num<0){
          $('.banner ul').css({left:-window_width*images_count}).stop().animate({left:-window_width*(images_count-1)},500);
          num=images_count-1;
      }else{
          $('.banner ul').stop().animate({left:-num*window_width},500);
      }
      if(num==images_count-1){
          $('.banner ol li').eq(images_count-1).addClass('current').siblings().removeClass('current');
      }else{
          $('.banner ol li').eq(num).addClass('current').siblings().removeClass('current');

      }
  }

  function nextPlay(){
      num++;
      if(num>images_count){
          $('.banner ul').css({left:0}).stop().animate({left:-window_width},500);
          num=1;
      }else{
          $('.banner ul').stop().animate({left:-num*window_width},500);
      }
      if(num==images_count){
          $('.banner ol li').eq(0).addClass('current').siblings().removeClass('current');
      }else{
          $('.banner ol li').eq(num).addClass('current').siblings().removeClass('current');

      }
  }

  timer = setInterval(nextPlay,2000);

  // auto pause on mouse enter
  $('.banner').mouseenter(function(){
      clearInterval(timer);
      $('.banner i').fadeIn();
  }).mouseleave(function(){
      timer = setInterval(nextPlay,2000);
      $('.banner i').fadeOut();
  });

  // goto next
  $('.banner .right').click(function(){
      nextPlay();
  });

  // back to previous
  $('.banner .left').click(function(){
      prevPlay();
  });

});
    </script>


<!-- flexisel -->
		<script type="text/javascript">
		$(window).load(function() {
			$("#flexiselDemo1").flexisel({
				visibleItems: 4,
				animationSpeed: 1000,
				autoPlay: true,
				autoPlaySpeed: 3000,    		
				pauseOnHover: true,
				enableResponsiveBreakpoints: true,
				responsiveBreakpoints: { 
					portrait: { 
						changePoint:480,
						visibleItems: 1
					}, 
					landscape: { 
						changePoint:640,
						visibleItems:2
					},
					tablet: { 
						changePoint:768,
						visibleItems: 2
					}
				}
			});
			
		});
	</script>
	<script type="text/javascript" src="js/jquery.flexisel.js"></script>
<!-- //flexisel -->
<!-- odometer-script -->
			<script src="js/odometer.js"></script>
			<script>
				window.odometerOptions = {
				  format: '(,ddd).dd'
				};
				setTimeout(function(){
					jQuery('#w3l_stats1').html(25);
				}, 1000);
			</script>
			<script>
				window.odometerOptions = {
				  format: '(,ddd).dd'
				};
				setTimeout(function(){
					jQuery('#w3l_stats2').html(330);
				}, 1000);
			</script>
			<script>
				window.odometerOptions = {
				  format: '(,ddd).dd'
				};
				setTimeout(function(){
					jQuery('#w3l_stats3').html(22496);
				}, 1000);
			</script>
			<script>
				window.odometerOptions = {
				  format: '(,ddd).dd'
				};
				setTimeout(function(){
					jQuery('#w3l_stats4').html(620);
				}, 1000);
			</script>
		<!-- //odometer-script -->
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- start-smoth-scrolling -->
	

<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			*/
								
			$().UItoTop({ easingType: 'easeOutQuart' });
								
			});
	</script>
<!-- //here ends scrolling icon -->
<!-- for bootstrap working -->
	<script src="js/bootstrap.js"></script>
<!-- //for bootstrap working -->
</body>
</html>