back-end done

assets/admin/sass/admin.scss

@@ -78,7 +78,7 @@
 }
 
 ////////////////////////////////////// variables
-$header: rgba(#784FAE, 1);
+$header: rgba(#1B407C, 1);
 $sidebar: rgba(#424242e3, 1);
 $headerLogoTextColor: #fff;
 $headerFontColor: #fff;
@@ -110,19 +110,25 @@ $panelBg: #fff;
   }
 
   .admin--content {
+    padding-top: 60px;
     height: calc(100vh - 55px);
     flex-basis: calc(100% - 300px);
     background: $bg;
     direction: rtl !important;
     text-align: right;
     overflow-y: auto;
+    position: relative;
 
-    .title {
-      //width: 100%;
+    .admin-title-bar {
+      width: calc(100vw - 285px);
       height: 55px;
       background: $titleBg;
       color: $titleColor;
       padding: 0 15px;
+      position: fixed;
+      top: 56px;
+      left: 15px;
+      z-index: 5;
 
       h2 {
         margin-left: auto;
@@ -131,6 +137,11 @@ $panelBg: #fff;
 
       button {
         margin-right: 10px;
+        color: $titleColor;
+
+        span {
+          color: $titleColor;
+        }
       }
 
       a {
@@ -138,7 +149,7 @@ $panelBg: #fff;
       }
     }
 
-    .panel {
+    .admin-panel {
       background: $panelBg;
       @include borderRadius(5px);
       @include boxShadow(0 2px 4px rgba(#000, 0.4));
@@ -190,6 +201,10 @@ $panelBg: #fff;
             margin-left: 10px;
           }
 
+          span {
+            color: $asideIcon;
+          }
+
           .badge {
             display: inline-block;
             width: 23px;
@@ -213,7 +228,7 @@ $panelBg: #fff;
       }
     }
 
-    .user {
+    .admin-user {
       padding: 20px 15px;
       color: $usernameColor;
 
@@ -223,7 +238,7 @@ $panelBg: #fff;
       }
     }
 
-    .language {
+    .admin-language {
       width: 100%;
 
       select {

assets/sass/_globalStyles.scss

@@ -752,3 +752,41 @@ section {
     }
   }
 }
+
+
+.filters {
+  margin: 0 auto 50px;
+
+  ul {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    li {
+      margin: 10px 20px;
+      color: rgba(#000, 0.5);
+      cursor: pointer;
+      @extend %userSelect;
+
+      p {
+        text-align: center;
+
+        &::after {
+          content: '';
+          display: block;
+          height: 2px;
+          width: 0;
+          background: $red;
+          margin: 0 auto;
+          @include transition(0.1s);
+        }
+
+        &.active {
+          &::after {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}

assets/sass/_pages.scss

@@ -32,7 +32,7 @@
 
     .hero {
       .bg {
-        background-image: url("../img/home/hp-s1-i1.jpg");
+        //background-image: url("../img/home/hp-s1-i1.jpg");
       }
 
       .txt--home {
@@ -551,21 +551,6 @@
   .s2 {
     text-align: center;
 
-    .filters {
-      margin: 0 auto;
-      max-width: 700px;
-      background: red;
-
-      ul {
-        display: flex;
-        flex-direction: row;
-
-        li {
-          display: block;
-        }
-      }
-    }
-
     .product {
       display: block;
       background: #fff;
@@ -587,6 +572,15 @@
         margin-top: 10px;
       }
     }
+
+    .no-product {
+      width: 100%;
+      background: $red;
+      color: #fff;
+      padding: 20px;
+      margin-bottom: 50px;
+      text-align: center;
+    }
   }
 
   .s3 {
@@ -710,6 +704,7 @@
         img {
           width: 60%;
           margin: 0 auto;
+          cursor: pointer;
         }
       }
     }
@@ -820,6 +815,10 @@
           h4 {
             margin-bottom: 20px;
           }
+
+          .description {
+            margin-bottom: 20px;
+          }
         }
       }
 
@@ -907,22 +906,12 @@
     text-align: center;
     padding-bottom: 0;
 
-    ul {
-      display: flex;
-      justify-content: center;
-      flex-wrap: wrap;
-
-      li {
-        margin: 10px 20px;
-        color: rgba(#000, 0.5);
-        cursor: pointer;
-        @extend %userSelect;
-      }
+    .filters {
+      margin-bottom: 0;
     }
   }
 
   .s3 {
-
     .post {
       margin-top: 50px;
 
@@ -988,6 +977,15 @@
         }
       }
     }
+
+    .no-post {
+      width: 100%;
+      background: $red;
+      color: #fff;
+      padding: 20px;
+      margin-top: 70px;
+      text-align: center;
+    }
   }
 }