Gallery

css/main.css

@@ -2,11 +2,13 @@
 @media (min-width:768px){ .footer{position:absolute;width:100%;bottom:0;height:100px;} }
 .header-container{
     width: 100%;
-    height: 900px;
+    height: 760px;
     border-left: none;
     border-right: none;
     position: relative;
-    padding: 20px;
+}
+.temp{
+    height: 1000px;
 }
 .video-container
 {
@@ -23,9 +25,6 @@ video{
     opacity: 0.78;
     width: 100%;
 }
-.temp{
-    height: 1000px;
-}
 .icon-bar
 {
     background-color: #FFF !important;
@@ -37,6 +36,7 @@ video{
     margin-top: 25.833333333%;
     margin-left: 2%
 }
+/*
 html {
     position: relative;
     min-height: 100%;
@@ -50,7 +50,7 @@ body {
     width: 100%;
     height: 100px;
     background-color: #393939;
-}
+}*/
 .footer-text {
     color: #FF9900;    
 }
@@ -105,4 +105,11 @@ body {
     width: 100%;
     bottom: 0;
     position: absolute;
+}
+#list{
+  list-style:none;
+  padding:50px 50px 50px 50px;
+}
+#image{
+  cursor: pointer;
 }

index.html

@@ -72,10 +72,37 @@
             	<img class="logo" src="./images/logo/logo_white.png">
         	</div>
     	</div>
-        <div class="temp">
-            <p>hello</p>    
+        <div>
+            <div class="container">
+                <ul class="row row-content">
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/css3.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/html5.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/java.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/jquery.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/js.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/python.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/android.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/cplusplus.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/markdown.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/php.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/ruby.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/windows.png"></li>
+                </ul>
+            </div>
         </div>
-        <footer class="footer">
+
+
+
+        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-body">
+                    </div>
+                </div><!-- /.modal-content -->
+            </div><!-- /.modal-dialog -->
+        </div><!-- /.modal -->
+
+        <footer>
             <div class="container">
                 <div class="row row-footer">
                     <div class="col-sm-10 col-xs-12">

js/main.js

@@ -17,3 +17,16 @@ $(document).ready(function() {
 		}
 	});
 });
+$(document).ready(function(){
+   $('li img').on('click',function(){
+        var src = $(this).attr('src');
+        var img = '<img src="' + src + '" class="img-responsive"/>';
+        $('#myModal').modal();
+        $('#myModal').on('shown.bs.modal', function(){
+            $('#myModal .modal-body').html(img);
+        });
+        $('#myModal').on('hidden.bs.modal', function(){
+            $('#myModal .modal-body').html('');
+        });
+   });
+})