add mockup project 6

Author: logustra

index.html

@@ -76,8 +76,8 @@ <h1>Simple Quiz App</h1>
 
             <div class="item col-sm-4">
                 <div class="wrapper">
-                    <a href="" target="_blank">
-                        <h1>Simple Gallery App</h1>
+                    <a href="simple-movies-web.html" target="_blank">
+                        <h1>Simple Movies Web</h1>
                     </a>
                 </div>
             </div>

public/css/main.css

@@ -65,7 +65,7 @@
                 return true;
             } else {
                 $('.error').fadeIn('300', function() {
-                    $(this).fadeOut();
+                    $(this).delay(500).fadeOut();
                 });
             }
         }
@@ -75,7 +75,6 @@
             answer.each( function (index, current) {
                 if($(this).hasClass('active')) {
                     data.results.push($(this).text());
-                    console.log(data.results);
                 }
             });
         }

public/images/1.jpg

@@ -6,8 +6,8 @@
     }
 }
 
-body {
-    background: $smoke;
+.input-group {
+    width: 100%;
 }
 
 .btn-success {

public/images/2.jpg

@@ -1,4 +1,5 @@
 .list-projects {
+    background: $smoke;
 
     .container {
         margin: 35px auto;

public/images/3.jpg

@@ -2,6 +2,7 @@
     @include bgTintedImg('../images/overlay.jpg', center center, no-repeat, cover, rgba(0, 0, 0, 0.45));
 
     .container {
+        width: 40%;
         background: $white;
         padding: 50px;
         margin: 160px auto;

public/images/4.jpg

@@ -0,0 +1,118 @@
+.simple-movies-web {
+
+    h1 {
+        text-align: center;
+        font-family: $font2;
+        font-weight: bold;
+        letter-spacing: 4px;
+        background: $green;
+        margin: 0;
+        padding: 50px 0;
+        color: $white;
+    }// h1
+
+    .filter {
+
+        .btn-filter {
+            width: 100%;
+            border-radius: 0;
+            @include font-size(17px);
+            background: $white;
+            padding: 20px 0;
+
+            &:focus {
+                box-shadow: none;
+            }
+
+            i {
+                margin-right: 10px;
+            }
+        }// .btn-filter
+
+        .filter-collapse {
+            @include clearfix;
+            padding: 20px 0;
+            background: $smoke;
+
+            form {
+
+                select {
+
+                    &:focus {
+                        outline: none;
+                        box-shadow: none;
+                        border-color: $green;
+                    }// pseudoclass
+                }// select
+            }// form
+        }// .filter-collapse
+    }// .filter
+
+    .container {
+        margin: 50px auto;
+
+        .movie-item {
+            margin-top: 20px;
+            
+            .left {
+                position: relative;
+                float: left;
+                z-index: 100;
+                margin-right: 20px;
+            }// .left
+
+            .right {
+                position: relative;
+                border: 2px solid $green;
+                height: 268px;
+                font-weight: 300;
+                letter-spacing: 1px;
+                z-index: 50;
+
+                .title {
+                    border-bottom: 2px solid $green;
+                    margin-bottom: 20px;
+                    background: $green;
+                    color: $white;
+                    font-weight: bold;
+                    letter-spacing: 2px;
+
+                    h2 {
+                        margin: 0;
+                        padding: 10px 0 10px 20px;
+                        font-family: $font2;
+                        @include font-size(20px);
+                    }// h2
+                }// .title
+
+                .information {
+                    padding-left: 20px;
+                }// .information
+
+                .btn-description {
+                    position: absolute;
+                    bottom: 0;
+                    right: 0;
+                    float: right;
+                    font-weight: bold;
+                    margin-top: 63px;
+                    background: $green;
+                    color: $white;
+                    border-radius: 0;
+                    border-top-left-radius: 10px;
+                    letter-spacing: 1.5px;
+                }// btn-description
+            }// .right
+
+            .description {
+                display: none;
+                width: 100%;
+                background: $green;
+                color: $white;
+                padding: 20px;
+                font-weight: 300;
+                letter-spacing: 1px;
+            }// .description
+        }// .movie-item
+    }// .contaier
+}// simple-movie-web

public/images/5.jpg

@@ -23,6 +23,7 @@ Telegram    : @logustra
 @import "components/images-slider-widget";
 @import "components/overlay-widget";
 @import "components/simple-quiz-app";
+@import "components/simple-movies-web";
 @import "components/helper";
 
 // layout