diff --git a/blog.php b/blog.php
new file mode 100644
index 0000000..257cf39
--- /dev/null
+++ b/blog.php
@@ -0,0 +1,688 @@
+<!doctype html>
+<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><html lang="en" class="no-js"> <![endif]-->
+<html lang="en">
+
+<head>
+
+  <!-- Basic -->
+  <title>Margo | Right Sidebar</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 -->
+  <meta name="description" content="Margo - Responsive HTML5 Template">
+  <meta name="author" content="iThemesLab">
+
+
+  <!-- Bootstrap CSS  -->
+  <link rel="stylesheet" href="asset/css/bootstrap.min.css" type="text/css" media="screen">
+
+  <!-- Font Awesome CSS -->
+  <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" media="screen">
+
+  <!-- Slicknav -->
+  <link rel="stylesheet" type="text/css" href="css/slicknav.css" media="screen">
+
+  <!-- Margo CSS Styles  -->
+  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
+
+  <!-- Responsive CSS Styles  -->
+  <link rel="stylesheet" type="text/css" href="css/responsive.css" media="screen">
+
+  <!-- Color CSS Styles  -->
+  <link rel="stylesheet" type="text/css" href="css/colors/red.css" title="red" 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/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/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/sky-blue.css" title="sky-blue" media="screen" />
+  <link rel="stylesheet" type="text/css" href="css/colors/yellow.css" title="yellow" media="screen" />
+
+
+  <!-- Margo JS  -->
+  <script type="text/javascript" src="js/jquery-2.1.4.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="asset/js/bootstrap.min.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/jquery.slicknav.js"></script>
+
+  <!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+  <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+
+</head>
+
+<body>
+
+  <!-- Container -->
+  <div id="container">
+
+    <!-- Start Header -->
+    <?php include("includes/header_blog.php");?>
+    <!-- End Header -->
+
+
+    <!-- Start Page Banner -->
+    <div class="page-banner">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-6">
+            <h2>Blog</h2>
+            <p>Blog Page With Right Sidebar</p>
+          </div>
+          <div class="col-md-6">
+            <ul class="breadcrumbs">
+              <li><a href="#">Home</a></li>
+              <li>Blog</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- End Page Banner -->
+
+
+    <!-- Start Content -->
+    <div id="content">
+      <div class="container">
+        <div class="row blog-page">
+
+          <!-- Start Blog Posts -->
+          <div class="col-md-9 blog-box">
+
+            <!-- Start Post -->
+            <div class="blog-post image-post">
+              <!-- Post Thumb -->
+              <div class="post-head">
+                <a class="lightbox" title="This is an image title" href="images/blog-01.jpg">
+                  <div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
+                  <img alt="" src="images/blog-01.jpg">
+                </a>
+              </div>
+              <!-- Post Content -->
+              <div class="post-content">
+                <div class="post-type"><i class="fa fa-picture-o"></i></div>
+                <h2><a href="#">Image Box With Nice Lightbox</a></h2>
+                <ul class="post-meta">
+                  <li>By <a href="#">iThemesLab</a></li>
+                  <li>December 30, 2013</li>
+                  <li><a href="#">WordPress</a>, <a href="#">Graphic</a></li>
+                  <li><a href="#">4 Comments</a></li>
+                </ul>
+                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
+                <a class="main-button" href="#">Read More <i class="fa fa-angle-right"></i></a>
+              </div>
+            </div>
+            <!-- End Post -->
+
+            <!-- Start Post -->
+            <div class="blog-post video-post">
+              <!-- Post Video -->
+              <div class="post-head">
+                <iframe src="http://player.vimeo.com/video/63322694?title=0&amp;byline=0&amp;portrait=0" width="800" height="450"></iframe>
+              </div>
+              <!-- Post Content -->
+              <div class="post-content">
+                <div class="post-type"><i class="fa fa-play"></i></div>
+                <h2><a href="#">Iframe Video Post</a></h2>
+                <ul class="post-meta">
+                  <li>By <a href="#">iThemesLab</a></li>
+                  <li>December 30, 2013</li>
+                  <li><a href="#">WordPress</a>, <a href="#">Graphic</a></li>
+                  <li><a href="#">4 Comments</a></li>
+                </ul>
+                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
+                <a class="main-button" href="#">Read More <i class="fa fa-angle-right"></i></a>
+              </div>
+            </div>
+            <!-- End Post -->
+
+
+            <!-- Start Post -->
+            <div class="blog-post standard-post">
+              <!-- Post Content -->
+              <div class="post-content">
+                <div class="post-type"><i class="fa fa-pencil"></i></div>
+                <h2><a href="#">Standard Post Without Image</a></h2>
+                <ul class="post-meta">
+                  <li>By <a href="#">iThemesLab</a></li>
+                  <li>December 30, 2013</li>
+                  <li><a href="#">WordPress</a>, <a href="#">Graphic</a></li>
+                  <li><a href="#">4 Comments</a></li>
+                </ul>
+                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
+                <a class="main-button" href="#">Read More <i class="fa fa-angle-right"></i></a>
+              </div>
+            </div>
+            <!-- End Post -->
+
+            <!-- Start Post -->
+            <div class="blog-post standard-post">
+              <!-- Post Thumb -->
+              <div class="post-head">
+                <a href="#">
+                  <div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
+                  <img alt="" src="images/blog-05.jpg">
+                </a>
+              </div>
+              <!-- Post Content -->
+              <div class="post-content">
+                <div class="post-type"><i class="fa fa-picture-o"></i></div>
+                <h2><a href="#">Standard Post With Image</a></h2>
+                <ul class="post-meta">
+                  <li>By <a href="#">iThemesLab</a></li>
+                  <li>December 30, 2013</li>
+                  <li><a href="#">WordPress</a>, <a href="#">Graphic</a></li>
+                  <li><a href="#">4 Comments</a></li>
+                </ul>
+                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
+                <a class="main-button" href="#">Read More <i class="fa fa-angle-right"></i></a>
+              </div>
+            </div>
+            <!-- End Post -->
+
+            <!-- Start Post -->
+            <div class="blog-post link-post">
+              <!-- Post Content -->
+              <div class="post-content">
+                <div class="post-type"><i class="fa fa-link"></i></div>
+                <h2><a href="#">Link Post</a></h2>
+                <ul class="post-meta">
+                  <li>By <a href="#">iThemesLab</a></li>
+                  <li>December 30, 2013</li>
+                  <li><a href="#">WordPress</a>, <a href="#">Graphic</a></li>
+                  <li><a href="#">4 Comments</a></li>
+                </ul>
+                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
+                <a class="main-button" href="#">Read More <i class="fa fa-angle-right"></i></a>
+              </div>
+            </div>
+            <!-- End Post -->
+
+            <!-- Start Post -->
+            <div class="blog-post gallery-post">
+              <!-- Post Gallery -->
+              <div class="post-head">
+                <div class="post-slider touch-slider">
+                  <div class="item">
+                    <a class="lightbox" title="This is an image title" href="images/blog-02.jpg" data-lightbox-gallery="gallery1">
+                      <div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
+                      <img alt="" src="images/blog-02.jpg">
+                    </a>
+                  </div>
+                  <div class="item">
+                    <a class="lightbox" title="This is an image title" href="images/blog-03.jpg" data-lightbox-gallery="gallery1">
+                      <div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
+                      <img alt="" src="images/blog-03.jpg">
+                    </a>
+                  </div>
+                  <div class="item">
+                    <a class="lightbox" title="This is an image title" href="images/blog-04.jpg" data-lightbox-gallery="gallery1">
+                      <div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
+                      <img alt="" src="images/blog-04.jpg">
+                    </a>
+                  </div>
+                </div>
+              </div>
+              <!-- Post Content -->
+              <div class="post-content">
+                <div class="post-type"><i class=" fa fa-picture-o"></i></div>
+                <h2><a href="#">Gallery Post With Nice Lightbox.</a></h2>
+                <ul class="post-meta">
+                  <li>By <a href="#">iThemesLab</a></li>
+                  <li>December 30, 2013</li>
+                  <li><a href="#">WordPress</a>, <a href="#">Graphic</a></li>
+                  <li><a href="#">4 Comments</a></li>
+                </ul>
+                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
+                <a class="main-button" href="#">Read More <i class="fa fa-angle-right"></i></a>
+              </div>
+            </div>
+            <!-- End Post -->
+
+            <!-- Start Post -->
+            <div class="blog-post quote-post">
+              <!-- Post Content -->
+              <div class="post-content">
+                <div class="post-type"><i class="fa fa-quote-left"></i></div>
+                <div class="qoute-box">
+                  <a href="#">
+                    <h2>Throughout life people will make you mad, disrespect you and treat you bad. Let God deal with the things they do, cause hate in your heart will consume you too.</h2>
+                    <div class="qoute-author">John Kennedy</div>
+                  </a>
+                </div>
+                <ul class="post-meta">
+                  <li>By <a href="#">iThemesLab</a></li>
+                  <li>December 30, 2013</li>
+                  <li><a href="#">WordPress</a>, <a href="#">Graphic</a></li>
+                  <li><a href="#">4 Comments</a></li>
+                </ul>
+              </div>
+            </div>
+            <!-- End Post -->
+
+            <!-- Start Pagination -->
+            <div id="pagination">
+              <span class="all-pages">Page 1 of 3</span>
+              <span class="current page-num">1</span>
+              <a class="page-num" href="#">2</a>
+              <a class="page-num" href="#">3</a>
+              <a class="next-page" href="#">Next</a>
+            </div>
+            <!-- End Pagination -->
+
+          </div>
+          <!-- End Blog Posts -->
+
+
+          <!--Sidebar-->
+          <div class="col-md-3 sidebar right-sidebar">
+
+            <!-- Search Widget -->
+            <div class="widget widget-search">
+              <form action="#">
+                <input type="search" placeholder="Enter Keywords..." />
+                <button class="search-btn" type="submit"><i class="fa fa-search"></i></button>
+              </form>
+            </div>
+
+            <!-- Categories Widget -->
+            <div class="widget widget-categories">
+              <h4>Categories <span class="head-line"></span></h4>
+              <ul>
+                <li>
+                  <a href="#">Brandign</a>
+                </li>
+                <li>
+                  <a href="#">Design</a>
+                </li>
+                <li>
+                  <a href="#">Development</a>
+                </li>
+                <li>
+                  <a href="#">Graphic</a>
+                </li>
+              </ul>
+            </div>
+
+            <!-- Popular Posts widget -->
+            <div class="widget widget-popular-posts">
+              <h4>Popular Post <span class="head-line"></span></h4>
+              <ul>
+                <li>
+                  <div class="widget-thumb">
+                    <a href="#"><img src="images/blog-mini-01.jpg" alt="" /></a>
+                  </div>
+                  <div class="widget-content">
+                    <h5><a href="#">How To Download The Google Fonts Catalog</a></h5>
+                    <span>Jul 29 2013</span>
+                  </div>
+                  <div class="clearfix"></div>
+                </li>
+                <li>
+                  <div class="widget-thumb">
+                    <a href="#"><img src="images/blog-mini-02.jpg" alt="" /></a>
+                  </div>
+                  <div class="widget-content">
+                    <h5><a href="#">How To Download The Google Fonts Catalog</a></h5>
+                    <span>Jul 29 2013</span>
+                  </div>
+                  <div class="clearfix"></div>
+                </li>
+                <li>
+                  <div class="widget-thumb">
+                    <a href="#"><img src="images/blog-mini-03.jpg" alt="" /></a>
+                  </div>
+                  <div class="widget-content">
+                    <h5><a href="#">How To Download The Google Fonts Catalog</a></h5>
+                    <span>Jul 29 2013</span>
+                  </div>
+                  <div class="clearfix"></div>
+                </li>
+              </ul>
+            </div>
+
+            <!-- Video Widget -->
+            <div class="widget">
+              <h4>Video <span class="head-line"></span></h4>
+              <div>
+                <iframe src="http://player.vimeo.com/video/63322694?byline=0&amp;portrait=0&amp;badge=0" width="800" height="450"></iframe>
+              </div>
+            </div>
+
+            <!-- Tags Widget -->
+            <div class="widget widget-tags">
+              <h4>Tags <span class="head-line"></span></h4>
+              <div class="tagcloud">
+                <a href="#">Portfolio</a>
+                <a href="#">Theme</a>
+                <a href="#">Mobile</a>
+                <a href="#">Design</a>
+                <a href="#">Wordpress</a>
+                <a href="#">Jquery</a>
+                <a href="#">CSS</a>
+                <a href="#">Modern</a>
+                <a href="#">Theme</a>
+                <a href="#">Icons</a>
+                <a href="#">Google</a>
+              </div>
+            </div>
+
+          </div>
+          <!--End sidebar-->
+
+
+        </div>
+      </div>
+    </div>
+    <!-- End Content -->
+
+
+    <!-- Start Footer -->
+    <footer>
+      <div class="container">
+        <div class="row footer-widgets">
+
+          <!-- Start Subscribe & Social Links Widget -->
+          <div class="col-md-3">
+            <div class="footer-widget mail-subscribe-widget">
+              <h4>Get in touch<span class="head-line"></span></h4>
+              <p>Join our mailing list to stay up to date and get notices about our new releases!</p>
+              <form class="subscribe">
+                <input type="text" placeholder="mail@example.com">
+                <input type="submit" class="btn-system" value="Send">
+              </form>
+            </div>
+            <div class="footer-widget social-widget">
+              <h4>Follow Us<span class="head-line"></span></h4>
+              <ul class="social-icons">
+                <li>
+                  <a class="facebook" href="#"><i class="fa fa-facebook"></i></a>
+                </li>
+                <li>
+                  <a class="twitter" href="#"><i class="fa fa-twitter"></i></a>
+                </li>
+                <li>
+                  <a class="google" href="#"><i class="fa fa-google-plus"></i></a>
+                </li>
+                <li>
+                  <a class="dribbble" href="#"><i class="fa fa-dribbble"></i></a>
+                </li>
+                <li>
+                  <a class="linkdin" href="#"><i class="fa fa-linkedin"></i></a>
+                </li>
+                <li>
+                  <a class="flickr" href="#"><i class="fa fa-flickr"></i></a>
+                </li>
+                <li>
+                  <a class="tumblr" href="#"><i class="fa fa-tumblr"></i></a>
+                </li>
+                <li>
+                  <a class="instgram" href="#"><i class="fa fa-instagram"></i></a>
+                </li>
+                <li>
+                  <a class="vimeo" href="#"><i class="fa fa-vimeo-square"></i></a>
+                </li>
+                <li>
+                  <a class="skype" href="#"><i class="fa fa-skype"></i></a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- .col-md-3 -->
+          <!-- End Subscribe & Social Links Widget -->
+
+
+          <!-- Start Twitter Widget -->
+          <div class="col-md-3">
+            <div class="footer-widget twitter-widget">
+              <h4>Twitter Feed<span class="head-line"></span></h4>
+              <ul>
+                <li>
+                  <p><a href="#">@GrayGrids </a> Lorem ipsum dolor et, consectetur adipiscing eli.</p>
+                  <span>28 February 2014</span>
+                </li>
+                <li>
+                  <p><a href="#">@GrayGrids </a> Lorem ipsum dolor et, consectetur adipiscing eli.An Fusce eleifend aliquet nis application.</p>
+                  <span>26 February 2014</span>
+                </li>
+                <li>
+                  <p><a href="#">@GrayGrids </a> Lorem ipsum dolor et, consectetur adipiscing eli.</p>
+                  <span>28 February 2014</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- .col-md-3 -->
+          <!-- End Twitter Widget -->
+
+
+          <!-- Start Flickr Widget -->
+          <div class="col-md-3">
+            <div class="footer-widget flickr-widget">
+              <h4>Flicker Feed<span class="head-line"></span></h4>
+              <ul class="flickr-list">
+                <li>
+                  <a href="images/flickr-01.jpg" class="lightbox">
+                    <img alt="" src="images/flickr-01.jpg">
+                  </a>
+                </li>
+                <li>
+                  <a href="images/flickr-02.jpg" class="lightbox">
+                    <img alt="" src="images/flickr-02.jpg">
+                  </a>
+                </li>
+                <li>
+                  <a href="images/flickr-03.jpg" class="lightbox">
+                    <img alt="" src="images/flickr-03.jpg">
+                  </a>
+                </li>
+                <li>
+                  <a href="images/flickr-04.jpg" class="lightbox">
+                    <img alt="" src="images/flickr-04.jpg">
+                  </a>
+                </li>
+                <li>
+                  <a href="images/flickr-05.jpg" class="lightbox">
+                    <img alt="" src="images/flickr-05.jpg">
+                  </a>
+                </li>
+                <li>
+                  <a href="images/flickr-06.jpg" class="lightbox">
+                    <img alt="" src="images/flickr-06.jpg">
+                  </a>
+                </li>
+                <li>
+                  <a href="images/flickr-07.jpg" class="lightbox">
+                    <img alt="" src="images/flickr-07.jpg">
+                  </a>
+                </li>
+                <li>
+                  <a href="images/flickr-08.jpg" class="lightbox">
+                    <img alt="" src="images/flickr-08.jpg">
+                  </a>
+                </li>
+                <li>
+                  <a href="images/flickr-09.jpg" class="lightbox">
+                    <img alt="" src="images/flickr-09.jpg">
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- .col-md-3 -->
+          <!-- End Flickr Widget -->
+
+
+          <!-- Start Contact Widget -->
+          <div class="col-md-3">
+            <div class="footer-widget contact-widget">
+              <h4><img src="images/footer-margo.png" class="img-responsive" alt="Footer Logo" /></h4>
+              <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident</p>
+              <ul>
+                <li><span>Phone Number:</span> +01 234 567 890</li>
+                <li><span>Email:</span> company@company.com</li>
+                <li><span>Website:</span> www.yourdomain.com</li>
+              </ul>
+            </div>
+          </div>
+          <!-- .col-md-3 -->
+          <!-- End Contact Widget -->
+
+
+        </div>
+        <!-- .row -->
+
+        <!-- Start Copyright -->
+        <div class="copyright-section">
+          <div class="row">
+            <div class="col-md-6">
+              <p>&copy; 2014 Margo - All Rights Reserved</p>
+            </div>
+            <div class="col-md-6">
+              <ul class="footer-nav">
+                <li><a href="#">Sitemap</a></li>
+                <li><a href="#">Privacy Policy</a></li>
+                <li><a href="#">Contact</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <!-- End Copyright -->
+
+      </div>
+    </footer>
+    <!-- End Footer -->
+
+  </div>
+  <!-- End Container -->
+
+  <!-- Go To Top Link -->
+  <a href="#" class="back-to-top"><i class="fa fa-angle-up"></i></a>
+
+  <!-- Style Switcher -->
+  <div class="switcher-box">
+    <a class="open-switcher show-switcher"><i class="fa fa-cog fa-2x"></i></a>
+    <h4>Style Switcher</h4>
+    <span>12 Predefined Color Skins</span>
+    <ul class="colors-list">
+      <li>
+        <a onClick="setActiveStyleSheet('blue'); return false;" title="Blue" class="blue"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('sky-blue'); return false;" title="Sky Blue" class="sky-blue"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('cyan'); return false;" title="Cyan" class="cyan"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('jade'); return false;" title="Jade" class="jade"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('green'); return false;" title="Green" class="green"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('purple'); return false;" title="Purple" class="purple"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('pink'); return false;" title="Pink" class="pink"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('red'); return false;" title="Red" class="red"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('orange'); return false;" title="Orange" class="orange"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('yellow'); return false;" title="Yellow" class="yellow"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('peach'); return false;" title="Peach" class="peach"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('beige'); return false;" title="Biege" class="beige"></a>
+      </li>
+    </ul>
+    <span>Top Bar Color</span>
+    <select id="topbar-style" class="topbar-style">
+      <option value="1">Light (Default)</option>
+      <option value="2">Dark</option>
+      <option value="3">Color</option>
+    </select>
+    <span>Layout Style</span>
+    <select id="layout-style" class="layout-style">
+      <option value="1">Wide</option>
+      <option value="2">Boxed</option>
+    </select>
+    <span>Patterns for Boxed Version</span>
+    <ul class="bg-list">
+      <li>
+        <a href="#" class="bg1"></a>
+      </li>
+      <li>
+        <a href="#" class="bg2"></a>
+      </li>
+      <li>
+        <a href="#" class="bg3"></a>
+      </li>
+      <li>
+        <a href="#" class="bg4"></a>
+      </li>
+      <li>
+        <a href="#" class="bg5"></a>
+      </li>
+      <li>
+        <a href="#" class="bg6"></a>
+      </li>
+      <li>
+        <a href="#" class="bg7"></a>
+      </li>
+      <li>
+        <a href="#" class="bg8"></a>
+      </li>
+      <li>
+        <a href="#" class="bg9"></a>
+      </li>
+      <li>
+        <a href="#" class="bg10"></a>
+      </li>
+      <li>
+        <a href="#" class="bg11"></a>
+      </li>
+      <li>
+        <a href="#" class="bg12"></a>
+      </li>
+      <li>
+        <a href="#" class="bg13"></a>
+      </li>
+      <li>
+        <a href="#" class="bg14"></a>
+      </li>
+    </ul>
+  </div>
+
+  <script type="text/javascript" src="js/script.js"></script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/images/our team/abodh.jpg b/images/our team/abodh.jpg
new file mode 100644
index 0000000..96e5a17
Binary files /dev/null and b/images/our team/abodh.jpg differ
diff --git a/images/our team/agnivesh.jpg b/images/our team/agnivesh.jpg
new file mode 100644
index 0000000..5c5f11c
Binary files /dev/null and b/images/our team/agnivesh.jpg differ
diff --git a/images/our team/deepak_kumar_singh_.jpg b/images/our team/deepak_kumar_singh_.jpg
new file mode 100644
index 0000000..501843d
Binary files /dev/null and b/images/our team/deepak_kumar_singh_.jpg differ
diff --git a/images/our team/deepak_kumar_singh_.png b/images/our team/deepak_kumar_singh_.png
new file mode 100644
index 0000000..3e9b5cc
Binary files /dev/null and b/images/our team/deepak_kumar_singh_.png differ
diff --git a/images/our team/diwakar.jpg b/images/our team/diwakar.jpg
new file mode 100644
index 0000000..c3fa4a0
Binary files /dev/null and b/images/our team/diwakar.jpg differ
diff --git a/images/our team/indra.jpg b/images/our team/indra.jpg
new file mode 100644
index 0000000..3dde073
Binary files /dev/null and b/images/our team/indra.jpg differ
diff --git a/images/our team/kantamani_satyasri.jpg b/images/our team/kantamani_satyasri.jpg
index 22453f1..fa31588 100644
Binary files a/images/our team/kantamani_satyasri.jpg and b/images/our team/kantamani_satyasri.jpg differ
diff --git a/images/our team/lokesh.jpg b/images/our team/lokesh.jpg
new file mode 100644
index 0000000..d63de8d
Binary files /dev/null and b/images/our team/lokesh.jpg differ
diff --git a/images/our team/prachi.jpg b/images/our team/prachi.jpg
new file mode 100644
index 0000000..c5d2ca9
Binary files /dev/null and b/images/our team/prachi.jpg differ
diff --git a/images/our team/pradum.jpg b/images/our team/pradum.jpg
new file mode 100644
index 0000000..7788e8e
Binary files /dev/null and b/images/our team/pradum.jpg differ
diff --git a/images/our team/reetu.JPG b/images/our team/reetu.JPG
new file mode 100644
index 0000000..fc0e654
Binary files /dev/null and b/images/our team/reetu.JPG differ
diff --git a/images/our team/rohan.jpg b/images/our team/rohan.jpg
new file mode 100644
index 0000000..650e4fe
Binary files /dev/null and b/images/our team/rohan.jpg differ
diff --git a/images/our team/sai.jpg b/images/our team/sai.jpg
new file mode 100644
index 0000000..29f09ec
Binary files /dev/null and b/images/our team/sai.jpg differ
diff --git a/images/our team/swati.jpg b/images/our team/swati.jpg
new file mode 100644
index 0000000..144c975
Binary files /dev/null and b/images/our team/swati.jpg differ
diff --git a/images/our team/vishal.jpg b/images/our team/vishal.jpg
new file mode 100644
index 0000000..9017fef
Binary files /dev/null and b/images/our team/vishal.jpg differ
diff --git a/includes/header _blog.php b/includes/header _blog.php
new file mode 100644
index 0000000..ab63522
--- /dev/null
+++ b/includes/header _blog.php	
@@ -0,0 +1,341 @@
+<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-7">
+          <!-- Start Contact Info -->
+          <ul class="contact-details">
+            <li><a href="#"><em class="fa fa-map-marker"></em> MG ROAD ,NIT DURGAPUR ,WEST BENGAL, INDIA 713209</a> </li>
+            <li><a href="https://www.facebook.com/groups/108249746199591/?ref=bookmarks" target="blank"><i class="fa fa-facebook"></i> facebook.com/robocell</a>
+            </li>
+            <li><a href="#"><i class="fa fa-phone"></i> +91 999999999999</a>
+            </li>
+          </ul>
+          <!-- End Contact Info -->
+        </div>
+        <!-- .col-md-6 -->
+        <div class="col-md-5">
+          <!-- Start Social Links -->
+          <ul class="social-list">
+            <li>
+              <a class="facebook itl-tooltip" data-placement="bottom" title="Facebook" target="blank" href="https://www.facebook.com/groups/108249746199591/?ref=bookmarks"><i class="fa fa-facebook"></i></a>
+            </li>
+            <li>
+              <a class="twitter itl-tooltip" data-placement="bottom" title="Twitter"  target="blank" href="#"><i class="fa fa-twitter"></i></a>
+            </li>
+            <li>
+              <a class="google itl-tooltip" data-placement="bottom" title="Google Plus" target="blank" href="#"><i class="fa fa-google-plus"></i></a>
+            </li>
+            <li>
+              <a class="youtube itl-tooltip" data-placement="bottom" title="Youtube" target="blank" href="#"><i class="fa fa-youtube"></i></a>
+            </li>
+            <!--
+            <li>
+              <a class="linkdin itl-tooltip" data-placement="bottom" title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
+            </li>
+            <li>
+              <a class="flickr itl-tooltip" data-placement="bottom" title="Flickr" href="#"><i class="fa fa-flickr"></i></a>
+            </li>
+            <li>
+              <a class="tumblr itl-tooltip" data-placement="bottom" title="Tumblr" href="#"><i class="fa fa-tumblr"></i></a>
+            </li>
+            <li>
+              <a class="instgram itl-tooltip" data-placement="bottom" title="Instagram" href="#"><i class="fa fa-instagram"></i></a>
+            </li>
+            <li>
+              <a class="vimeo itl-tooltip" data-placement="bottom" title="vimeo" href="#"><i class="fa fa-vimeo-square"></i></a>
+            </li>
+            <li>
+              <a class="skype itl-tooltip" data-placement="bottom" title="Skype" href="#"><i class="fa fa-skype"></i></a>
+            </li>
+            -->
+          </ul>
+          <!-- End Social Links -->
+        </div>
+        <!-- .col-md-6 -->
+      </div>
+      <!-- .row -->
+    </div>
+    <!-- .container -->
+  </div>
+  <!-- .top-bar -->
+  <!-- End Top Bar -->
+
+
+  <!-- Start  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="fa fa-bars"></i>
+        </button>
+        <!-- End Toggle Nav Link For Mobiles -->
+        <a class="navbar-brand" href="index.html">
+          <img alt="" src="images/robon.png">
+        </a>
+      </div>
+      <div class="navbar-collapse collapse">
+        <!-- Stat Search -->
+        <div class="search-side">
+          <a class="show-search"><i class="fa fa-search"></i></a>
+          <div class="search-form">
+            <form autocomplete="off" role="search" method="get" class="searchform" action="#">
+              <input type="text" value="" name="s" id="s" placeholder="Search the site...">
+            </form>
+          </div>
+        </div>
+        <!-- End Search -->
+        <!-- Start Navigation List -->
+        <ul class="nav navbar-nav navbar-right">
+          <li>
+            <a href="index.php">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>
+            </ul>
+          </li>
+          -->
+          <!--
+          <li>
+            <a href="about.html">Tutorials</a>
+            <ul class="dropdown">
+              <li><a href="about.html">Mechanical bots</a>
+              </li>
+              <li><a href="services.html">Semi-Autonomous bots</a>
+              </li>
+              <li><a href="right-sidebar.html">Autonomous Bots</a>
+              </li>
+              
+            </ul>
+          </li>
+          -->
+         
+          
+          <li>
+            <a href="portfolio-3.php">Robo Gallery</a>
+          </li>
+          <li>
+            <a class="active" href="blog.php">Blog</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="#">Resourses</a>
+           <ul class="dropdown">
+            <li role="separator" class="divider"></li>
+              <li><strong>Tutorials</strong></li>
+               <li><a href="about.html">Mechanical bots</a>
+              </li>
+              <li><a href="services.html">Semi-Autonomous bots</a>
+              </li>
+              <li><a href="right-sidebar.html">Autonomous Bots</a>
+              </li>
+               <li role="separator" class="divider"></li>
+              <li><a href="#"><strong>Online Robotics Shops </strong></a></li>
+               <li role="separator" class="divider"></li>
+              <li><a href="#"><strong> Useful Links </strong></a></li>
+             </ul>
+          </li>
+          <li>
+            <a href="portfolio-3.html">Workshops</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 href="#">Events</a>
+            <ul class="dropdown">
+             <li role="separator" class="divider"></li>
+              <li><strong>NIT DURGAPUR</strong></li>
+              <li><a href="tabs.html">ROBOCITY'16</a>
+              </li>
+              <li><a href="buttons.html">AAROHAN'17</a>
+              </li>
+               <li role="separator" class="divider"></li>
+              <li><strong>OTHER FESTS</strong></li>
+              <li><a href="action-box.html">TECHFEST'17</a>
+              </li>
+              <li><a href="testimonials.html">TECHNICHE'16</a>
+              </li>
+              <li><a href="latest-posts.html">KSHITIJ'17</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>
+              -->
+            </ul>
+          </li>
+          <li><a href="contact.php">Contact Us</a>
+          </li>
+        </ul>
+        <!-- End Navigation List -->
+      </div>
+    </div>
+
+    <!-- Mobile Menu Start -->
+    <ul class="wpb-mobile-menu">
+         <li>
+            <a class="active" 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>
+            </ul>
+          </li>
+          -->
+          <!--
+          <li>
+            <a href="about.html">Tutorials</a>
+            <ul class="dropdown">
+              <li><a href="about.html">Mechanical bots</a>
+              </li>
+              <li><a href="services.html">Semi-Autonomous bots</a>
+              </li>
+              <li><a href="right-sidebar.html">Autonomous Bots</a>
+              </li>
+              
+            </ul>
+          </li>
+          -->
+         
+          
+      <li>
+            <a href="portfolio-3.html">Robo Gallery</a>
+      </li>
+          <li>
+            <a href="blog.html">Blog</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="#">Resourses</a>
+           <ul class="dropdown">
+           
+              <li><a><strong>Tutorials</strong></a></li>
+               <li><a href="about.html">Mechanical bots</a>
+              </li>
+              <li><a href="services.html">Semi-Autonomous bots</a>
+              </li>
+              <li><a href="right-sidebar.html">Autonomous Bots</a>
+              </li>
+               <li role="separator" class="divider"></li>
+              <li><a href="#"><strong>Online Robotics Shops </strong></a></li>
+               <li role="separator" class="divider"></li>
+              <li><a href="#"><strong> Useful Links </strong></a></li>
+        </ul>
+          </li>
+          <li>
+            <a href="portfolio-3.html">Workshops</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 href="#">Events</a>
+            <ul class="dropdown">
+            
+              <li><a><strong>NIT DURGAPUR</strong></a></li>
+              <li><a href="tabs.html">ROBOCITY'16</a>
+              </li>
+              <li><a href="buttons.html">AAROHAN'17</a>
+              </li>
+               
+              <li><a><strong>OTHER FESTS</strong></a></li>
+              <li><a href="action-box.html">TECHFEST'17</a>
+              </li>
+              <li><a href="testimonials.html">TECHNICHE'16</a>
+              </li>
+              <li><a href="latest-posts.html">KSHITIJ'17</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>
+              -->
+            </ul>
+          </li>
+          <li><a href="contact.php">Contact Us</a>
+          </li>
+    </ul>
+    <!-- Mobile Menu End -->
+
+  </div>
+  <!-- End Header Logo & Naviagtion -->
+
+</header>
\ No newline at end of file
diff --git a/includes/header.php b/includes/header.php
index f834a46..ecad84a 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -130,7 +130,7 @@
          
           
           <li>
-            <a href="portfolio-3.html">Robo Gallery</a>
+            <a href="portfolio-3.php">Robo Gallery</a>
           </li>
           <li>
             <a href="blog.html">Blog</a>
diff --git a/includes/header_roboGallery.php b/includes/header_roboGallery.php
new file mode 100644
index 0000000..8647441
--- /dev/null
+++ b/includes/header_roboGallery.php
@@ -0,0 +1,341 @@
+<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-7">
+          <!-- Start Contact Info -->
+          <ul class="contact-details">
+            <li><a href="#"><em class="fa fa-map-marker"></em> MG ROAD ,NIT DURGAPUR ,WEST BENGAL, INDIA 713209</a> </li>
+            <li><a href="https://www.facebook.com/groups/108249746199591/?ref=bookmarks" target="blank"><i class="fa fa-facebook"></i> facebook.com/robocell</a>
+            </li>
+            <li><a href="#"><i class="fa fa-phone"></i> +91 999999999999</a>
+            </li>
+          </ul>
+          <!-- End Contact Info -->
+        </div>
+        <!-- .col-md-6 -->
+        <div class="col-md-5">
+          <!-- Start Social Links -->
+          <ul class="social-list">
+            <li>
+              <a class="facebook itl-tooltip" data-placement="bottom" title="Facebook" target="blank" href="https://www.facebook.com/groups/108249746199591/?ref=bookmarks"><i class="fa fa-facebook"></i></a>
+            </li>
+            <li>
+              <a class="twitter itl-tooltip" data-placement="bottom" title="Twitter"  target="blank" href="#"><i class="fa fa-twitter"></i></a>
+            </li>
+            <li>
+              <a class="google itl-tooltip" data-placement="bottom" title="Google Plus" target="blank" href="#"><i class="fa fa-google-plus"></i></a>
+            </li>
+            <li>
+              <a class="youtube itl-tooltip" data-placement="bottom" title="Youtube" target="blank" href="#"><i class="fa fa-youtube"></i></a>
+            </li>
+            <!--
+            <li>
+              <a class="linkdin itl-tooltip" data-placement="bottom" title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
+            </li>
+            <li>
+              <a class="flickr itl-tooltip" data-placement="bottom" title="Flickr" href="#"><i class="fa fa-flickr"></i></a>
+            </li>
+            <li>
+              <a class="tumblr itl-tooltip" data-placement="bottom" title="Tumblr" href="#"><i class="fa fa-tumblr"></i></a>
+            </li>
+            <li>
+              <a class="instgram itl-tooltip" data-placement="bottom" title="Instagram" href="#"><i class="fa fa-instagram"></i></a>
+            </li>
+            <li>
+              <a class="vimeo itl-tooltip" data-placement="bottom" title="vimeo" href="#"><i class="fa fa-vimeo-square"></i></a>
+            </li>
+            <li>
+              <a class="skype itl-tooltip" data-placement="bottom" title="Skype" href="#"><i class="fa fa-skype"></i></a>
+            </li>
+            -->
+          </ul>
+          <!-- End Social Links -->
+        </div>
+        <!-- .col-md-6 -->
+      </div>
+      <!-- .row -->
+    </div>
+    <!-- .container -->
+  </div>
+  <!-- .top-bar -->
+  <!-- End Top Bar -->
+
+
+  <!-- Start  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="fa fa-bars"></i>
+        </button>
+        <!-- End Toggle Nav Link For Mobiles -->
+        <a class="navbar-brand" href="index.html">
+          <img alt="" src="images/robon.png">
+        </a>
+      </div>
+      <div class="navbar-collapse collapse">
+        <!-- Stat Search -->
+        <div class="search-side">
+          <a class="show-search"><i class="fa fa-search"></i></a>
+          <div class="search-form">
+            <form autocomplete="off" role="search" method="get" class="searchform" action="#">
+              <input type="text" value="" name="s" id="s" placeholder="Search the site...">
+            </form>
+          </div>
+        </div>
+        <!-- End Search -->
+        <!-- Start Navigation List -->
+        <ul class="nav navbar-nav navbar-right">
+          <li>
+            <a href="index.php">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>
+            </ul>
+          </li>
+          -->
+          <!--
+          <li>
+            <a href="about.html">Tutorials</a>
+            <ul class="dropdown">
+              <li><a href="about.html">Mechanical bots</a>
+              </li>
+              <li><a href="services.html">Semi-Autonomous bots</a>
+              </li>
+              <li><a href="right-sidebar.html">Autonomous Bots</a>
+              </li>
+              
+            </ul>
+          </li>
+          -->
+         
+          
+          <li>
+            <a class="active" href="portfolio-3.php">Robo Gallery</a>
+          </li>
+          <li>
+            <a href="blog.php">Blog</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="#">Resourses</a>
+           <ul class="dropdown">
+            <li role="separator" class="divider"></li>
+              <li><strong>Tutorials</strong></li>
+               <li><a href="about.html">Mechanical bots</a>
+              </li>
+              <li><a href="services.html">Semi-Autonomous bots</a>
+              </li>
+              <li><a href="right-sidebar.html">Autonomous Bots</a>
+              </li>
+               <li role="separator" class="divider"></li>
+              <li><a href="#"><strong>Online Robotics Shops </strong></a></li>
+               <li role="separator" class="divider"></li>
+              <li><a href="#"><strong> Useful Links </strong></a></li>
+             </ul>
+          </li>
+          <li>
+            <a href="portfolio-3.html">Workshops</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 href="#">Events</a>
+            <ul class="dropdown">
+             <li role="separator" class="divider"></li>
+              <li><strong>NIT DURGAPUR</strong></li>
+              <li><a href="tabs.html">ROBOCITY'16</a>
+              </li>
+              <li><a href="buttons.html">AAROHAN'17</a>
+              </li>
+               <li role="separator" class="divider"></li>
+              <li><strong>OTHER FESTS</strong></li>
+              <li><a href="action-box.html">TECHFEST'17</a>
+              </li>
+              <li><a href="testimonials.html">TECHNICHE'16</a>
+              </li>
+              <li><a href="latest-posts.html">KSHITIJ'17</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>
+              -->
+            </ul>
+          </li>
+          <li><a href="contact.php">Contact Us</a>
+          </li>
+        </ul>
+        <!-- End Navigation List -->
+      </div>
+    </div>
+
+    <!-- Mobile Menu Start -->
+    <ul class="wpb-mobile-menu">
+         <li>
+            <a class="active" 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>
+            </ul>
+          </li>
+          -->
+          <!--
+          <li>
+            <a href="about.html">Tutorials</a>
+            <ul class="dropdown">
+              <li><a href="about.html">Mechanical bots</a>
+              </li>
+              <li><a href="services.html">Semi-Autonomous bots</a>
+              </li>
+              <li><a href="right-sidebar.html">Autonomous Bots</a>
+              </li>
+              
+            </ul>
+          </li>
+          -->
+         
+          
+      <li>
+            <a href="portfolio-3.html">Robo Gallery</a>
+      </li>
+          <li>
+            <a href="blog.html">Blog</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="#">Resourses</a>
+           <ul class="dropdown">
+           
+              <li><a><strong>Tutorials</strong></a></li>
+               <li><a href="about.html">Mechanical bots</a>
+              </li>
+              <li><a href="services.html">Semi-Autonomous bots</a>
+              </li>
+              <li><a href="right-sidebar.html">Autonomous Bots</a>
+              </li>
+               <li role="separator" class="divider"></li>
+              <li><a href="#"><strong>Online Robotics Shops </strong></a></li>
+               <li role="separator" class="divider"></li>
+              <li><a href="#"><strong> Useful Links </strong></a></li>
+        </ul>
+          </li>
+          <li>
+            <a href="portfolio-3.html">Workshops</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 href="#">Events</a>
+            <ul class="dropdown">
+            
+              <li><a><strong>NIT DURGAPUR</strong></a></li>
+              <li><a href="tabs.html">ROBOCITY'16</a>
+              </li>
+              <li><a href="buttons.html">AAROHAN'17</a>
+              </li>
+               
+              <li><a><strong>OTHER FESTS</strong></a></li>
+              <li><a href="action-box.html">TECHFEST'17</a>
+              </li>
+              <li><a href="testimonials.html">TECHNICHE'16</a>
+              </li>
+              <li><a href="latest-posts.html">KSHITIJ'17</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>
+              -->
+            </ul>
+          </li>
+          <li><a href="contact.php">Contact Us</a>
+          </li>
+    </ul>
+    <!-- Mobile Menu End -->
+
+  </div>
+  <!-- End Header Logo & Naviagtion -->
+
+</header>
\ No newline at end of file
diff --git a/index.php b/index.php
index bcafdc8..379cb66 100644
--- a/index.php
+++ b/index.php
@@ -106,7 +106,7 @@
 
 							<div  class="big-title text-center" >
 								<h1><strong>About Us</strong></h1>
-								<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+								<p>We are the official Robotics Club of NIT Durgapur </p>
 							</div>
 								<div class="row">
 
@@ -440,7 +440,7 @@
 									<div class="team-member modern">
 										<!-- Memebr Photo, Name & Position -->
 										<div class="member-photo">
-											<img alt="" src="images/our team/deepak_kumar_singh.jpg" />
+											<img alt="" src="images/our team/deepak_kumar_singh_.jpg" />
 											<div class="member-name">Deepak Kumar Singh<span>Head</span>
 											</div>
 										</div>
@@ -637,14 +637,13 @@
 												<div class="portfolio-thumb">
 													<a class="lightbox" title="This is an image title" href="images/portfolio-big-01.jpg">
 														<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
-														<img alt="" src="images/portfolio-1/2.png" />
+														<img alt="" src="images/our team/lokesh.jpg" />
 													</a>
 												</div>
 												<div class="portfolio-details">
 													<a href="#">
-														<h4>Lorem Ipsum Dolor</h4>
-														<span>Logo</span>
-														<span>Animation</span>
+														<h4>Lokesh Nandanwar</h4>
+														<span>Dept of CSE</span>
 													</a>
 												</div>
 											</div>
@@ -655,7 +654,7 @@
 												<div class="portfolio-thumb">
 													<a class="lightbox" title="This is an image title" href="images/portfolio-big-01.jpg">
 														<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
-														<img alt="" src="images/portfolio-1/2.png" />
+														<img alt="" src="images/our team/vishal.jpg" />
 													</a>
 												</div>
 												<div class="portfolio-details">
@@ -673,7 +672,7 @@
 												<div class="portfolio-thumb">
 													<a class="lightbox" title="This is an image title" href="images/portfolio-big-01.jpg">
 														<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
-														<img alt="" src="images/portfolio-1/2.png" />
+														<img alt="" src="images/our team/indra.jpg" />
 													</a>
 												</div>
 												<div class="portfolio-details">
@@ -691,14 +690,13 @@
 												<div class="portfolio-thumb">
 													<a class="lightbox" title="This is an image title" href="images/portfolio-big-01.jpg">
 														<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
-														<img alt="" src="images/portfolio-1/2.png" />
+														<img alt="" src="images/our team/swati.jpg" />
 													</a>
 												</div>
 												<div class="portfolio-details">
 													<a href="#">
-														<h4>Lorem Ipsum Dolor</h4>
-														<span>Logo</span>
-														<span>Animation</span>
+														<h4>Swati Kanchan</h4>
+														<span>Dept of CSE</span>
 													</a>
 												</div>
 											</div>
@@ -709,14 +707,13 @@
 												<div class="portfolio-thumb">
 													<a class="lightbox" title="This is an image title" href="images/portfolio-big-01.jpg">
 														<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
-														<img alt="" src="images/portfolio-1/2.png" />
+														<img alt="" src="images/our team/rohan.jpg" />
 													</a>
 												</div>
 												<div class="portfolio-details">
 													<a href="#">
-														<h4>Lorem Ipsum Dolor</h4>
-														<span>Logo</span>
-														<span>Animation</span>
+														<h4>Rohan Chaudhury</h4>
+														<span>Dept of ECE</span>
 													</a>
 												</div>
 											</div>
@@ -727,14 +724,13 @@
 												<div class="portfolio-thumb">
 													<a class="lightbox" title="This is an image title" href="images/portfolio-big-01.jpg">
 														<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
-														<img alt="" src="images/portfolio-1/2.png" />
+														<img alt="" src="images/our team/agnivesh.jpg" />
 													</a>
 												</div>
 												<div class="portfolio-details">
 													<a href="#">
-														<h4>Lorem Ipsum Dolor</h4>
-														<span>Logo</span>
-														<span>Animation</span>
+														<h4>Agnivesh Adhikari</h4>
+														<span>Dept of CSE</span>
 													</a>
 												</div>
 											</div>
@@ -745,14 +741,13 @@
 												<div class="portfolio-thumb">
 													<a class="lightbox" title="This is an image title" href="images/portfolio-big-01.jpg">
 														<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
-														<img alt="" src="images/portfolio-1/2.png" />
+														<img alt="" src="images/our team/prachi.jpg" />
 													</a>
 												</div>
 												<div class="portfolio-details">
 													<a href="#">
-														<h4>Lorem Ipsum Dolor</h4>
-														<span>Logo</span>
-														<span>Animation</span>
+														<h4>Prachita Prachi</h4>
+														<span>Dept of EE</span>
 													</a>
 												</div>
 											</div>
@@ -763,14 +758,13 @@
 												<div class="portfolio-thumb">
 													<a class="lightbox" title="This is an image title" href="images/portfolio-big-01.jpg">
 														<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
-														<img alt="" src="images/portfolio-1/2.png" />
+														<img alt="" src="images/our team/abodh.jpg" />
 													</a>
 												</div>
 												<div class="portfolio-details">
 													<a href="#">
-														<h4>Lorem Ipsum Dolor</h4>
-														<span>Logo</span>
-														<span>Animation</span>
+														<h4>Abodh Prasad</h4>
+														<span>Dept of MME</span>
 													</a>
 												</div>
 											</div>
@@ -781,14 +775,13 @@
 												<div class="portfolio-thumb">
 													<a class="lightbox" title="This is an image title" href="images/portfolio-big-01.jpg">
 														<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
-														<img alt="" src="images/portfolio-1/2.png" />
+														<img alt="" src="images/our team/pradum.jpg" />
 													</a>
 												</div>
 												<div class="portfolio-details">
 													<a href="#">
-														<h4>Lorem Ipsum Dolor</h4>
-														<span>Logo</span>
-														<span>Animation</span>
+														<h4>Pradum Kumar</h4>
+														<span>Dept of CSE</span>
 													</a>
 												</div>
 											</div>
@@ -799,19 +792,35 @@
 												<div class="portfolio-thumb">
 													<a class="lightbox" title="This is an image title" href="images/portfolio-big-01.jpg">
 														<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
-														<img alt="" src="images/portfolio-1/2.png" />
+														<img alt="" src="images/our team/reetu.jpg" />
 													</a>
 												</div>
 												<div class="portfolio-details">
 													<a href="#">
-														<h4>Lorem Ipsum Dolor</h4>
-														<span>Logo</span>
-														<span>Animation</span>
+														<h4>Reetuparna Saha</h4>
+														<span>Dept of EE</span>
 													</a>
 												</div>
 											</div>
 										</div>
 
+										<div class="portfolio-item item">
+											<div class="portfolio-border">
+												<div class="portfolio-thumb">
+													<a class="lightbox" title="This is an image title" href="images/portfolio-big-01.jpg">
+														<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
+														<img alt="" src="images/our team/roshan.jpg" />
+													</a>
+												</div>
+												<div class="portfolio-details">
+													<a href="#">
+														<h4>Roshan Vaduri</h4>
+														<span>Dept of EE</span>
+														
+													</a>
+												</div>
+											</div>
+										</div>
 										<div class="portfolio-item item">
 											<div class="portfolio-border">
 												<div class="portfolio-thumb">
@@ -822,13 +831,65 @@
 												</div>
 												<div class="portfolio-details">
 													<a href="#">
-														<h4>Lorem Ipsum Dolor</h4>
-														<span>Logo</span>
-														<span>Animation</span>
+														<h4>Rupesh Das</h4>
+														<span>Dept of CSE</span>
+														
 													</a>
 												</div>
 											</div>
 										</div>
+										<div class="portfolio-item item">
+											<div class="portfolio-border">
+												<div class="portfolio-thumb">
+													<a class="lightbox" title="This is an image title" href="images/portfolio-big-01.jpg">
+														<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
+														<img alt="" src="images/our team/sai.jpg" />
+													</a>
+												</div>
+												<div class="portfolio-details">
+													<a href="#">
+														<h4>Sai Vara Prasad</h4>
+														<span>Dept of ECE</span>
+														
+													</a>
+												</div>
+											</div>
+										</div>
+										<div class="portfolio-item item">
+											<div class="portfolio-border">
+												<div class="portfolio-thumb">
+													<a class="lightbox" title="This is an image title" href="images/portfolio-big-01.jpg">
+														<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
+														<img alt="" src="images/our team/diwakar.jpg" />
+													</a>
+												</div>
+												<div class="portfolio-details">
+													<a href="#">
+														<h4>Diwakar Bharti</h4>
+														<span>Dept of CSE</span>
+														
+													</a>
+												</div>
+											</div>
+										</div>
+										<div class="portfolio-item item">
+											<div class="portfolio-border">
+												<div class="portfolio-thumb">
+													<a class="lightbox" title="This is an image title" href="images/portfolio-big-01.jpg">
+														<div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
+														<img alt="" src="images/portfolio-1/2.png" />
+													</a>
+												</div>
+												<div class="portfolio-details">
+													<a href="#">
+														<h4>Avinash Kumar</h4>
+														<span>Dept of ME</span>
+														
+													</a>
+												</div>
+											</div>
+										</div>
+
 
 										<div class="portfolio-item item">
 											<div class="portfolio-border">
@@ -840,9 +901,9 @@
 												</div>
 												<div class="portfolio-details">
 													<a href="#">
-														<h4>Lorem Ipsum Dolor</h4>
-														<span>Logo</span>
-														<span>Animation</span>
+														<h4>Shreya Shrivastava</h4>
+														<span>Dept of EE</span>
+														
 													</a>
 												</div>
 											</div>
diff --git a/portfolio-3.html b/portfolio-3.html
index 70e0d41..e0bc453 100644
--- a/portfolio-3.html
+++ b/portfolio-3.html
@@ -6,7 +6,7 @@
 <head>
 
   <!-- Basic -->
-  <title>Margo | Portfolio</title>
+  <title>ROBOCELL | Portfolio</title>
 
   <!-- Define Charset -->
   <meta charset="utf-8">
@@ -147,7 +147,7 @@
               <i class="fa fa-bars"></i>
             </button>
             <!-- End Toggle Nav Link For Mobiles -->
-            <a class="navbar-brand" href="index.html"><img alt="" src="images/margo.png"></a>
+            <a class="navbar-brand" href="index.html"><img alt="" src="images/robon.png"></a>
           </div>
           <div class="navbar-collapse collapse">
             <!-- Start Search -->
@@ -176,7 +176,41 @@
                   <li><a href="index-08.html">Home Version 8</a></li>
                 </ul>
               </li>
-              <li>
+	      <li>
+                <a class="active" href="portfolio-3.php">Robo Gallery</a>
+                <ul class="dropdown">
+                  <li><a href="portfolio-2.html">2 Columns</a></li>
+                  <li><a class="active" 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 href="blog.html">Blog</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="#">Resourses</a>
+           	<ul class="dropdown">
+            	  <li role="separator" class="divider"></li>
+              	  <li><strong>Tutorials</strong></li>
+                  <li><a href="about.html">Mechanical bots</a></li>
+                  <li><a href="services.html">Semi-Autonomous bots</a></li>
+                  <li><a href="right-sidebar.html">Autonomous Bots</a></li>
+                  <li role="separator" class="divider"></li>
+                  <li><a href="#"><strong>Online Robotics Shops </strong></a></li>
+                  <li role="separator" class="divider"></li>
+                  <li><a href="#"><strong> Useful Links </strong></a></li>
+                </ul>
+              </li>
+	      <li>
+		<a href="#">Workshop</a>
+	      </li>
+        <!--      <li>
                 <a href="about.html">Pages</a>
                 <ul class="dropdown">
                   <li><a href="about.html">About</a></li>
@@ -185,7 +219,7 @@
                   <li><a href="left-sidebar.html">Left Sidebar</a></li>
                   <li><a href="404.html">404 Page</a></li>
                 </ul>
-              </li>
+              </li> 
               <li>
                 <a href="#">Shortcodes</a>
                 <ul class="dropdown">
@@ -199,25 +233,29 @@
                   <li><a href="animated-graphs.html">Animated Graphs</a></li>
                   <li><a href="accordion-toggles.html">Accordion & Toggles</a></li>
                 </ul>
-              </li>
-              <li>
-                <a class="active" href="portfolio-3.html">Portfolio</a>
-                <ul class="dropdown">
-                  <li><a href="portfolio-2.html">2 Columns</a></li>
-                  <li><a class="active" 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 href="blog.html">Blog</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>
+              </li>	-->
+	     <li>
+            	<a href="#">Events</a>
+           	 <ul class="dropdown">
+            	 <li role="separator" class="divider"></li>
+                 <li><strong>NIT DURGAPUR</strong></li>
+                 <li><a href="tabs.html">ROBOCITY'16</a></li>
+              	 <li><a href="buttons.html">AAROHAN'17</a></li>
+                 <li role="separator" class="divider"></li>
+                 <li><strong>OTHER FESTS</strong></li>
+                 <li><a href="action-box.html">TECHFEST'17</a></li>
+                 <li><a href="testimonials.html">TECHNICHE'16</a></li>
+                 <li><a href="latest-posts.html">KSHITIJ'17</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>
+                 -->
+                 </ul>
+             </li>
+              
+              <li><a href="contact.html">Contact Us</a></li>
             </ul>
             <!-- End Navigation List -->
           </div>
@@ -246,6 +284,19 @@
               </li>
             </ul>
           </li>
+	  <li>
+            <a class="active" href="portfolio-3.html">Robo Gallery</a>
+            <ul class="dropdown">
+              <li><a href="portfolio-2.html">2 Columns</a>
+              </li>
+              <li><a class="active" 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 href="about.html">Pages</a>
             <ul class="dropdown">
@@ -282,19 +333,7 @@
               </li>
             </ul>
           </li>
-          <li>
-            <a class="active" href="portfolio-3.html">Portfolio</a>
-            <ul class="dropdown">
-              <li><a href="portfolio-2.html">2 Columns</a>
-              </li>
-              <li><a class="active" 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 href="blog.html">Blog</a>
             <ul class="dropdown">
@@ -464,7 +503,7 @@ <h2>Portfolio</h2>
 
 
     <!-- Start Footer -->
-    <footer>
+   <footer>
       <div class="container">
         <div class="row footer-widgets">
 
@@ -636,7 +675,7 @@ <h4><img src="images/footer-margo.png" class="img-responsive" alt="Footer Logo"
         <!-- End Copyright -->
 
       </div>
-    </footer>
+    </footer>	
     <!-- End Footer -->
 
   </div>
diff --git a/portfolio-3.php b/portfolio-3.php
new file mode 100644
index 0000000..d60b08e
--- /dev/null
+++ b/portfolio-3.php
@@ -0,0 +1,344 @@
+<!doctype html>
+<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><html lang="en" class="no-js"> <![endif]-->
+<html lang="en">
+
+<head>
+
+  <!-- Basic -->
+  <title>ROBOCELL | Portfolio</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 -->
+  <meta name="description" content="Margo - Responsive HTML5 Template">
+  <meta name="author" content="iThemesLab">
+
+
+  <!-- Bootstrap CSS  -->
+  <link rel="stylesheet" href="asset/css/bootstrap.min.css" type="text/css" media="screen">
+
+  <!-- Font Awesome CSS -->
+  <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" media="screen">
+
+  <!-- Slicknav -->
+  <link rel="stylesheet" type="text/css" href="css/slicknav.css" media="screen">
+
+  <!-- Margo CSS Styles  -->
+  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
+
+  <!-- Responsive CSS Styles  -->
+  <link rel="stylesheet" type="text/css" href="css/responsive.css" media="screen">
+
+  <!-- Color CSS Styles  -->
+  <link rel="stylesheet" type="text/css" href="css/colors/red.css" title="red" 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/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/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/sky-blue.css" title="sky-blue" media="screen" />
+  <link rel="stylesheet" type="text/css" href="css/colors/yellow.css" title="yellow" media="screen" />
+
+
+  <!-- Margo JS  -->
+  <script type="text/javascript" src="js/jquery-2.1.4.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="asset/js/bootstrap.min.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/jquery.slicknav.js"></script>
+
+  <!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+  <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+
+</head>
+
+<body>
+
+  <!-- Container -->
+  <div id="container">
+
+    <!-- Start Header -->
+    <?php include("includes/header_roboGallery.php");?>
+    <!-- End Header -->
+
+
+    <!-- Start Page Banner -->
+    <div class="page-banner">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-6">
+            <h2>Robo Gallery</h2>
+            <p>RoboCell</p>
+          </div>
+          <div class="col-md-6">
+            <ul class="breadcrumbs">
+              <li><a href="#">Home</a></li>
+              <li>Robo Gallery</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- End Page Banner -->
+
+
+    <!-- Start Content -->
+    <div id="content">
+      <div class="container">
+        <div class="row portfolio-page">
+
+          <!-- Start Recent Projects Carousel -->
+          <ul id="portfolio-list" data-animated="fadeIn">
+            <li>
+              <img src="images/portfolio-1/1.png" alt="" />
+              <div class="portfolio-item-content">
+                <span class="header">Town winter 2013</span>
+                <p class="body">web develpment, design</p>
+              </div>
+              <a href="#"><i class="more">+</i></a>
+
+            </li>
+            <li>
+              <img src="images/portfolio-1/2.png" alt="" />
+              <div class="portfolio-item-content">
+                <span class="header">Quarterly Musashino</span>
+                <p class="body">web develpment, design</p>
+              </div>
+              <a href="#"><i class="more">+</i></a>
+
+            </li>
+            <li>
+              <img src="images/portfolio-1/3.png" alt="" />
+              <div class="portfolio-item-content">
+                <span class="header">Mainichi April 2014</span>
+                <p class="body">web develpment, design</p>
+              </div>
+              <a href="#"><i class="more">+</i></a>
+
+            </li>
+            <li>
+              <img src="images/portfolio-1/4.png" alt="" />
+              <div class="portfolio-item-content">
+                <span class="header">Shitamachi Rocket</span>
+                <p class="body">web develpment, design</p>
+              </div>
+              <a href="#"><i class="more">+</i></a>
+
+            </li>
+            <li>
+              <img src="images/portfolio-1/5.png" alt="" />
+              <div class="portfolio-item-content">
+                <span class="header">Majesty express vol. 01</span>
+                <p class="body">web develpment, design</p>
+              </div>
+              <a href="#"><i class="more">+</i></a>
+
+            </li>
+            <li>
+              <img src="images/portfolio-1/6.png" alt="" />
+              <div class="portfolio-item-content">
+                <span class="header">Monocle issue 69</span>
+                <p class="body">web develpment, design</p>
+              </div>
+              <a href="#"><i class="more">+</i></a>
+
+            </li>
+            <li>
+              <img src="images/portfolio-1/7.png" alt="" />
+              <div class="portfolio-item-content">
+                <span class="header">Monocle issue 69</span>
+                <p class="body">web develpment, design</p>
+              </div>
+              <a href="#"><i class="more">+</i></a>
+
+            </li>
+            <li>
+              <img src="images/portfolio-1/8.png" alt="" />
+              <div class="portfolio-item-content">
+                <span class="header">Monocle issue 69</span>
+                <p class="body">web develpment, design</p>
+              </div>
+              <a href="#"><i class="more">+</i></a>
+
+            </li>
+            <li>
+              <img src="images/portfolio-1/9.png" alt="" />
+              <div class="portfolio-item-content">
+                <span class="header">Monocle issue 69</span>
+                <p class="body">web develpment, design</p>
+              </div>
+              <a href="#"><i class="more">+</i></a>
+
+            </li>
+            <li>
+              <img src="images/portfolio-1/10.png" alt="" />
+              <div class="portfolio-item-content">
+                <span class="header">Monocle issue 69</span>
+                <p class="body">web develpment, design</p>
+              </div>
+              <a href="#"><i class="more">+</i></a>
+
+            </li>
+            <li>
+              <img src="images/portfolio-1/11.png" alt="" />
+              <div class="portfolio-item-content">
+                <span class="header">Monocle issue 69</span>
+                <p class="body">web develpment, design</p>
+              </div>
+              <a href="#"><i class="more">+</i></a>
+
+            </li>
+            <li>
+              <img src="images/portfolio-1/12.png" alt="" />
+              <div class="portfolio-item-content">
+                <span class="header">Monocle issue 69</span>
+                <p class="body">web develpment, design</p>
+              </div>
+              <a href="#"><i class="more">+</i></a>
+
+            </li>
+          </ul>
+          <!-- End Portfolio Items -->
+
+        </div>
+      </div>
+    </div>
+    <!-- End Content -->
+
+
+    <!-- Start Footer -->
+<?php include("includes/footer.php");?>
+    <!-- End Footer -->
+
+  </div>
+  <!-- End Container -->
+
+  <!-- Go To Top Link -->
+  <a href="#" class="back-to-top"><i class="fa fa-angle-up"></i></a>
+
+  <!-- Style Switcher -->
+  <div class="switcher-box">
+    <a class="open-switcher show-switcher"><i class="fa fa-cog fa-2x"></i></a>
+    <h4>Style Switcher</h4>
+    <span>12 Predefined Color Skins</span>
+    <ul class="colors-list">
+      <li>
+        <a onClick="setActiveStyleSheet('blue'); return false;" title="Blue" class="blue"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('sky-blue'); return false;" title="Sky Blue" class="sky-blue"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('cyan'); return false;" title="Cyan" class="cyan"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('jade'); return false;" title="Jade" class="jade"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('green'); return false;" title="Green" class="green"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('purple'); return false;" title="Purple" class="purple"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('pink'); return false;" title="Pink" class="pink"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('red'); return false;" title="Red" class="red"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('orange'); return false;" title="Orange" class="orange"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('yellow'); return false;" title="Yellow" class="yellow"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('peach'); return false;" title="Peach" class="peach"></a>
+      </li>
+      <li>
+        <a onClick="setActiveStyleSheet('beige'); return false;" title="Biege" class="beige"></a>
+      </li>
+    </ul>
+    <span>Top Bar Color</span>
+    <select id="topbar-style" class="topbar-style">
+      <option value="1">Light (Default)</option>
+      <option value="2">Dark</option>
+      <option value="3">Color</option>
+    </select>
+    <span>Layout Style</span>
+    <select id="layout-style" class="layout-style">
+      <option value="1">Wide</option>
+      <option value="2">Boxed</option>
+    </select>
+    <span>Patterns for Boxed Version</span>
+    <ul class="bg-list">
+      <li>
+        <a href="#" class="bg1"></a>
+      </li>
+      <li>
+        <a href="#" class="bg2"></a>
+      </li>
+      <li>
+        <a href="#" class="bg3"></a>
+      </li>
+      <li>
+        <a href="#" class="bg4"></a>
+      </li>
+      <li>
+        <a href="#" class="bg5"></a>
+      </li>
+      <li>
+        <a href="#" class="bg6"></a>
+      </li>
+      <li>
+        <a href="#" class="bg7"></a>
+      </li>
+      <li>
+        <a href="#" class="bg8"></a>
+      </li>
+      <li>
+        <a href="#" class="bg9"></a>
+      </li>
+      <li>
+        <a href="#" class="bg10"></a>
+      </li>
+      <li>
+        <a href="#" class="bg11"></a>
+      </li>
+      <li>
+        <a href="#" class="bg12"></a>
+      </li>
+      <li>
+        <a href="#" class="bg13"></a>
+      </li>
+      <li>
+        <a href="#" class="bg14"></a>
+      </li>
+    </ul>
+  </div>
+
+  <script type="text/javascript" src="js/script.js"></script>
+
+</body>
+
+</html>
\ No newline at end of file
