responsive

components/FooterBar.vue

@@ -2,10 +2,11 @@
 <template>
   <v-footer class="footer-bar mt-12 flex-wrap" dark padless>
     <v-container class="footer-top">
-      <v-row class="d-flex justify-space-between align-center" style="padding-right:11px">
+      <v-row class="d-flex justify-space-between align-center footer-top-1" style="padding-right:11px; margin-top: 20px;">
         <v-col
           cols="12"
           md="3"
+          class="footer-top-2"
         >
           <v-img
             width="153px"
@@ -16,22 +17,19 @@
           <h3>Subscribe to our Newsletter</h3>
           <h4>Get all the latest information, Sales and Offers.</h4>
         </div>
-        <v-col
-          cols="12"
-          md="2"
-        >
+        <div class="email">
           <v-text-field label="Email address here ..." />
-        </v-col>
-        <v-btn color="primary">
+          <v-btn color="primary" style="margin-top:14px">
             SUBSCRIBE
           </v-btn>
+        </div>
       </v-row>
     </v-container>
     <v-container class="divider-mid">
       <v-divider />
     </v-container>
     <v-container class="footer-mid">
-      <v-row class="d-flex align-center">
+      <v-row class="footer-mid-1">
         <v-col class="d-flex-column" cols="3">
           <h4 class="title">
             Contact Info
@@ -68,7 +66,7 @@
             <div>Help</div>
           </div>
         </v-col>
-        <v-col class="d-flex-column" cols="3">
+        <v-col class="d-flex-column footer-img" cols="3">
           <h4 class="title">
             Instagram
           </h4>
@@ -89,34 +87,40 @@
         </div>
         <div>
           <v-btn
-            class="btn-social"
-            color="black"
+            class="btn-social btn-social-fb"
             fab
             x-small
             dark
             outlined
+            :style="{ 'background-color': hover ? '#26c !important;' : '#999 !important;' }"
           >
-            <v-icon class="icon-social">mdi-facebook</v-icon>
+            <v-icon class="icon-social">
+              mdi-facebook
+            </v-icon>
           </v-btn>
           <v-btn
-            class="btn-social"
+            class="btn-social btn-social-tw"
             color="black"
             fab
             x-small
             dark
             outlined
           >
-            <v-icon class="icon-social">mdi-twitter</v-icon>
+            <v-icon class="icon-social">
+              mdi-twitter
+            </v-icon>
           </v-btn>
           <v-btn
-            class="btn-social"
+            class="btn-social btn-social-lk"
             color="black"
             fab
             x-small
             dark
             outlined
           >
-            <v-icon class="icon-social">mdi-linkedin</v-icon>
+            <v-icon class="icon-social">
+              mdi-linkedin
+            </v-icon>
           </v-btn>
         </div>
       </v-row>
@@ -148,6 +152,10 @@ export default {
 .footer-mid {
   margin-top: 0px;
 }
+.footer-mid-1 {
+  display:flex;
+  align-items:center;
+}
 .footer-content {
   gap: 10px;
   display: flex;
@@ -176,11 +184,61 @@ export default {
 .icon-social {
     color: #999 !important;
   }
+  .email {
+    display:flex;
+    flex-direction: row;
+    gap: 5px;
+  }
+  .btn-social-fb:hover {
+    background-color:#26c;
+    border: #26c solid;
+  }
+  .btn-social:hover .icon-social {
+    color: #ffffff !important;
+  }
+  .btn-social-tw:hover {
+    background-color:#1da1f2;
+    border: #1da1f2 solid;
+  }
+  .btn-social-lk:hover {
+    background-color:#0073b2;
+    border: #0073b2 solid;
+  }
 @media only screen and (max-width: 500px) {
   .content-mid {
     display:flex;
     flex-direction: column;
     align-items: flex-start !important;
   }
+  .bottom-line {
+    gap: 15px;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+  }
+  .footer-img {
+    max-width: 100%;
+  }
+  .footer-mid-1 {
+    flex-direction: column;
+    align-items: flex-start !important;
+  }
+  .title {
+    white-space: nowrap;
+  }
+  .footer-content > div {
+    white-space: nowrap;
+  }
+  .footer-top-1 {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+  }
+  .footer-top-2 {
+    padding-left: 130px
+  }
+  .email {
+    width: 90%;
+  }
 }
 </style>

components/user/Header.vue

@@ -632,5 +632,36 @@ b {
   .v-navigation-drawer--close{
     display: none;
   }
+  .form-search {
+    display: none !important;
+  }
+  .contact {
+    display: none;
+  }
+  #menu-activator>span:first-child {
+    display: none;
+  }
+  .wish-list>.v-icon {
+    display: none;
+  }
+  .header-middle-right {
+    display: flex;
+    justify-content: flex-start;
+    gap: 5px;
+    flex: 0 0 25%;
+    width: 25%;
+  }
+  .header-middle-left {
+    width: 44%;
+    flex: 0 0 75%;
+  }
+  .header-middle-content {
+    display: flex;
+    flex-direction: row;
+    padding-right: 5px;
+  }
+  .header-middle-right>.v-divider {
+    display:none;
+  }
 }
 </style>

layouts/user.vue

@@ -4,16 +4,20 @@
     <Nuxt />
     <div class="badge-slide">
       <v-btn elevation="2" color="black" tile class="badge">
-        <a href="#our-categories" class="btn-a"><v-icon color="white"> mdi-home</v-icon></a>
+        <a href="#" class="btn-a"><v-icon color="white"> mdi-home</v-icon></a>
+        <span class="badge-title"> Demos</span>
       </v-btn>
       <v-btn elevation="2" color="black" tile class="badge-1">
         <a href="#" class="btn-a"><v-icon> mdi-information</v-icon></a>
+        <span class="badge-title"> Documentations</span>
       </v-btn>
       <v-btn elevation="2" color="black" tile class="badge-2">
         <a href="#" class="btn-a"><v-icon> mdi-star</v-icon></a>
+        <span class="badge-title"> Reviews</span>
       </v-btn>
       <v-btn elevation="2" color="primary" tile class="badge-3">
         <a href="#" class="btn-a"><v-icon> mdi-cart</v-icon></a>
+        <span class="badge-title"> Buy Now!</span>
       </v-btn>
       <a href="#" class="scroll-to-top-btn"><v-icon> mdi-arrow-up-bold</v-icon></a>
     </div>
@@ -31,6 +35,9 @@ export default {
     FooterBar
   },
   components: { FooterBar },
+  data: () => ({
+    hover: false
+  }),
   mounted () {
     this.scrollToTop()
   },
@@ -79,17 +86,12 @@ export default {
   height: 50px;
   box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
   background-color: #ffffff;
-  border-radius: 50%;
   text-align: center;
   font-size: 24px;
   line-height: 50px;
   z-index: 99;
 }
 
-.scroll-to-top-btn:hover {
-  background-color: #1b92cd;
-}
-
 .scroll-to-top-btn i {
   transform: translateY(-2px);
 }
@@ -97,32 +99,84 @@ export default {
 .scroll-to-top-btn.active {
   display: block;
 }
+.badge-title {
+  display: none;
+  color: #ffffff;
+}
+.badge:hover {
+  width:100px;
+  transition: width .4s;
+}
+.badge:hover .badge-title {
+  display: block;
+  white-space: nowrap;
+  text-transform: capitalize;
+  font-weight: 600;
+  transition: width .3s;
+  margin-left:5px;
+}
+.badge-1:hover {
+  width:180px;
+  transition: width .4s;
+}
+.badge-1:hover .badge-title {
+  display: block;
+  white-space: nowrap;
+  text-transform: capitalize;
+  font-weight: 600;
+  transition: width .3s;
+  margin-left:5px;
+}
+.badge-2:hover {
+  width:120px;
+  transition: width .3s;
+}
+.badge-2:hover .badge-title {
+  display: block;
+  white-space: nowrap;
+  text-transform: capitalize;
+  font-weight: 600;
+  transition: width .3s;
+  margin-left:5px;
+}
+.badge-3:hover {
+  width:120px;
+  transition: width .4s;
+}
+.badge-3:hover .badge-title {
+  display: block;
+  white-space: nowrap;
+  text-transform: capitalize;
+  font-weight: 600;
+  transition: width .3s;
+  margin-left:5px;
+}
 .badge {
   position: fixed;
   right: 0;
   top: 220px;
-  width:40px !important;
+  width:40px ;
   min-width: 40px !important;
 }
 .badge-1 {
   position: fixed;
   right: 0;
   top: 260px;
-  width:40px !important;
+  width:40px;
   min-width: 40px !important;
 }
 .badge-2 {
   position: fixed;
   right: 0;
   top: 300px;
-  width:40px !important;
+  width:40px ;
   min-width: 40px !important;
 }
 .badge-3 {
   position: fixed;
   right: 0;
   top: 340px;
-  width:40px !important;
+  width:40px;
   min-width: 40px !important;
 }
 .btn-a {

pages/home-page/index.vue

@@ -55,6 +55,7 @@
           :key="i"
           cols="12"
           md="3"
+          class="feature-row"
         >
           <v-hover
             v-slot="{ hover }"
@@ -125,10 +126,13 @@
           Our Featured
         </h2>
       </div>
-      <v-row class="grid-example pt-5 pb-5">
+      <v-row class="pt-5 pb-5">
         <v-col
           v-for="(item, i) in features"
           :key="i"
+          cols="12"
+          md="3"
+          class="feature-row"
         >
           <!-- <v-carousel
         hide-delimiters
@@ -210,7 +214,8 @@
         <v-col
           v-for="(item, i) in posts"
           :key="i"
-          cols="4"
+          cols="12"
+          md="4"
         >
           <v-card
             :loading="loading"
@@ -231,15 +236,18 @@
               :src="item.images"
               class="card-img"
             />
+            <v-card-text class="calendar">
+              <span>19</span>
+              <span>JAN</span>
+            </v-card-text>
             <v-card-item class="card-4">
-              <v-card-title style="padding:5px">
+              <v-card-title style="padding:5px;font-weight:800">
                 {{ item.title }}
               </v-card-title>
             </v-card-item>
             <v-card-text style="padding:5px">
               <div>{{ item.content }}</div>
             </v-card-text>
-            <v-divider class="mx-4 mb-1" />
             <v-card-actions>
               <v-btn
                 color="primary"
@@ -418,6 +426,8 @@ export default {
 }
 .card-4 {
   overflow: hidden;
+  padding:10px;
+  box-shadow: 0px 5px 20px 3px rgb(0 0 0 / 8%) !important;
 }
 .card-actions {
   display: none !important;
@@ -433,4 +443,26 @@ export default {
 .card-actions > .v-btn {
   background-color:#ffffff;
 }
+.calendar {
+    display:flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: fit-content;
+    top: 20px;
+    position: absolute;
+    background-color: #ffffff;
+    left: 20px;
+    opacity: 0.8;
+    padding: 10px;
+    border-radius: 4px;
+    color: black !important;
+    font-weight: bold;
+}
+@media only screen and (max-width: 500px) {
+.feature-row {
+  flex: 1 1 49%;
+  max-width: 49%;
+}
+}
 </style>