tabexseriescomponents 0.0.71 → 0.0.73

package/src-aya/index.jsx

@@ -0,0 +1,222 @@
+import AwesomeButton from './button.jsx';
+// // import AwesomeButton2 from './button2.jsx';
+// //Contexts
+import { LanguageContext, LanguageProvider } from './Contexts/LanguageContext.jsx';
+import { ProductsCardsSectionContext, ProductsCardsSectionContext_Provider } from './Contexts/ProductsCardsSectionContext.jsx';
+
+//Static Pages
+import Login from './TabexComponents/StaticPages/Login/Login.jsx';
+import Productinfo from './TabexComponents/StaticPages/Productinfo/Productinfo.jsx';
+import Ordershistory from './TabexComponents/StaticPages/Ordershistory/Ordershistory.jsx';
+import Wishlist from './TabexComponents/StaticPages/Wishlist/Wishlist.jsx';
+import Viewcart from './TabexComponents/StaticPages/Viewcart/Viewcart.jsx';
+import Checkout from './TabexComponents/StaticPages/Checkout/Checkout.jsx';
+import Signup from './TabexComponents/StaticPages/Signup/Signup.jsx';
+import AccountInformation from './TabexComponents/StaticPages/AccountInformation/AccountInformation.jsx';
+import Policies from './TabexComponents/StaticPages/Policies/Policies.jsx';
+import CartSlider from './TabexComponents/StaticPages/CartSlider/CartSlider.jsx';
+import Categoriesdropdown from './TabexComponents/StaticPages/Categoriesdropdown/Categoriesdropdown.jsx';
+
+// Cards Sections
+import CardsSection from './TabexComponents/Sections/Cards/CardsSection/CardsSection.jsx';
+import CardsSection2 from './TabexComponents/Sections/Cards/CardsSection2/CardsSection2.jsx';
+import Sixverticalcardssection from './TabexComponents/Sections/Cards/Sixverticalcardssection/Sixverticalcardssection.jsx';
+import ModernCardsSection from './TabexComponents/Sections/Cards/ModernCardsSection/ModernCardsSection.jsx';
+import ElegantCategoriesCardSection from './TabexComponents/Sections/Cards/ElegantCategoriesCardSection/ElegantCategoriesCardSection.jsx';
+import CardsSection7 from './TabexComponents/Sections/Cards/CardsSection7/CardsSection7.jsx';
+
+// Background images
+import BacgroundThreeImageWithCategories from './TabexComponents/Sections/BackgroundImages/BacgroundThreeImageWithCategories/BacgroundThreeImageWithCategories.jsx';
+import BackgroundFiveImageStructure from './TabexComponents/Sections/BackgroundImages/BackgroundFiveImageStructure/BackgroundFiveImageStructure.jsx';
+import Backgroundimage_with_toppill from './TabexComponents/Sections/BackgroundImages/Backgroundimage_with_toppill/Backgroundimage_with_toppill.jsx';
+import Backgroundimage1 from './TabexComponents/Sections/BackgroundImages/Backgroundimage1/Backgroundimage1.jsx';
+import BackgroundimageandTextsection from './TabexComponents/Sections/BackgroundImages/BackgroundimageandTextsection/BackgroundimageandTextsection.jsx';
+import BackgroundImageWithTopContent from './TabexComponents/Sections/BackgroundImages/BackgroundImageWithTopContent/BackgroundImageWithTopContent.jsx';
+import Bgimagewithsearchbar from './TabexComponents/Sections/BackgroundImages/Bgimagewithsearchbar/Bgimagewithsearchbar.jsx';
+import Section_with_rightbgcont from './TabexComponents/Sections/BackgroundImages/Section_with_rightbgcont/Section_with_rightbgcont.jsx';
+import Threebgimages from './TabexComponents/Sections/BackgroundImages/Threebgimages/Threebgimages.jsx';
+import Twobgimages from './TabexComponents/Sections/BackgroundImages/Twobgimages/Twobgimages.jsx';
+
+// // import AboutSection from './TabexComponents/Sections/Slideshow/AboutSection/AboutSection.jsx';
+import Backgroundimage_with_topcircle from './TabexComponents/Sections/Slideshow/Backgroundimage_with_topcircle/Backgroundimage_with_topcircle.jsx';
+import Freetextsection from './TabexComponents/Sections/Slideshow/Freetextsection/Freetextsection.jsx';
+import Image_with_leftwords from './TabexComponents/Sections/Slideshow/Image_with_leftwords/Image_with_leftwords.jsx';
+import Image_with_rightwords from './TabexComponents/Sections/Slideshow/Image_with_rightwords/Image_with_rightwords.jsx';
+import Servicesection from './TabexComponents/Sections/Slideshow/Servicesection/Servicesection.jsx';
+import ServicesectionCenteredcards from './TabexComponents/Sections/Slideshow/ServicesectionCenteredcards/ServicesectionCenteredcards.jsx';
+import Slideshow_with_rotatedsquare from './TabexComponents/Sections/Slideshow/Slideshow_with_rotatedsquare/Slideshow_with_rotatedsquare.jsx';
+import Slideshow_with_squarebg from './TabexComponents/Sections/Slideshow/Slideshow_with_squarebg/Slideshow_with_squarebg.jsx';
+import Slideshowdifferentanimations from './TabexComponents/Sections/Slideshow/Slideshowdifferentanimations/Slideshowdifferentanimations.jsx';
+import Slideshowfade from './TabexComponents/Sections/Slideshow/Slideshowfade/Slideshowfade.jsx';
+import Slideshowslide from './TabexComponents/Sections/Slideshow/Slideshowslide/Slideshowslide.jsx';
+import Slideshowzoom from './TabexComponents/Sections/Slideshow/Slideshowzoom/Slideshowzoom.jsx';
+
+// //Headers
+import Gotoheader from './TabexComponents/Headers/Gotoheader/Gotoheader.jsx';
+import CategoryFeaturingHeader from './TabexComponents/Headers/CategoryFeaturingHeader/CategoryFeaturingHeader.jsx';
+import ClassicHeader from './TabexComponents/Headers/ClassicHeader/ClassicHeader.jsx';
+import CTAHeader from './TabexComponents/Headers/CTAHeader/CTAHeader.jsx';
+import Header_threesectionslogocentered from './TabexComponents/Headers/Header_threesectionslogocentered/Header_threesectionslogocentered.jsx';
+import Header6 from './TabexComponents/Headers/Header6/Header6.jsx';
+import Header8 from './TabexComponents/Headers/Header8/Header8.jsx';
+import HeaderRestaurant from './TabexComponents/Headers/HeaderRestaurant/HeaderRestaurant.jsx';
+import HeaderwithContactinfo from './TabexComponents/Headers/HeaderwithContactinfo/HeaderwithContactinfo.jsx';
+import Modernheader from './TabexComponents/Headers/Modernheader/Modernheader.jsx';
+import StylishHeader from './TabexComponents/Headers/StylishHeader/StylishHeader.jsx';
+import ThreeTieredHeader from './TabexComponents/Headers/ThreeTieredHeader/ThreeTieredHeader.jsx';
+
+// //Footers
+import Allinonefooter from './TabexComponents/Footer/Allinonefooter/Allinonefooter.jsx';
+import Footer1 from './TabexComponents/Footer/Footer1/Footer1.jsx';
+import Footer2 from './TabexComponents/Footer/Footer2/Footer2.jsx';
+import Footer3 from './TabexComponents/Footer/Footer3/Footer3.jsx';
+import Footer4 from './TabexComponents/Footer/Footer4/Footer4.jsx';
+import Footer5 from './TabexComponents/Footer/Footer5/Footer5.jsx';
+import Footer6 from './TabexComponents/Footer/Footer6/Footer6.jsx';
+import Footer7 from './TabexComponents/Footer/Footer7/Footer7.jsx';
+import Simplefooter from './TabexComponents/Footer/Simplefooter/Simplefooter.jsx';
+
+// //Cards
+import Card20 from './TabexComponents/Cards/Card20/Card20.jsx';
+import Card21 from './TabexComponents/Cards/Card21/Card21.jsx';
+import Card22 from './TabexComponents/Cards/Card22/Card22.jsx';
+import Card23 from './TabexComponents/Cards/Card23/Card23.jsx';
+import CardBadgeSlideFromTop from './TabexComponents/Cards/CardBadgeSlideFromTop/CardBadgeSlideFromTop.jsx';
+import Productcard_with_zoominonhover from './TabexComponents/Cards/Productcard_with_zoominonhover/Productcard_with_zoominonhover.jsx';
+import Categorycard_with_twolinestransition from './TabexComponents/Cards/Categorycard_with_twolinestransition/Categorycard_with_twolinestransition.jsx';
+import Categorycard_fullimage from './TabexComponents/Cards/Categorycard_fullimage/Categorycard_fullimage.jsx';
+import Categorycard_slidebgscaled from './TabexComponents/Cards/Categorycard_slidebgscaled/Categorycard_slidebgscaled.jsx';
+import Categorycard_with_trianglebg from './TabexComponents/Cards/Categorycard_with_trianglebg/Categorycard_with_trianglebg.jsx';
+import Categorycard_withshapes from './TabexComponents/Cards/Categorycard_withshapes/Categorycard_withshapes.jsx';
+import Categorycard_withtext from './TabexComponents/Cards/Categorycard_withtext/Categorycard_withtext.jsx';
+import CategoryCardwithhoveraction from './TabexComponents/Cards/CategoryCardwithhoveraction/CategoryCardwithhoveraction.jsx';
+import Classiccategorycard from './TabexComponents/Cards/Classiccategorycard/Classiccategorycard.jsx';
+import Horizontalcard from './TabexComponents/Cards/Horizontalcard/Horizontalcard.jsx';
+import MenuCard from './TabexComponents/Cards/MenuCard/MenuCard.jsx';
+import ModernCardWithQuantityButton from './TabexComponents/Cards/ModernCardWithQuantityButton/ModernCardWithQuantityButton.jsx';
+import ModernProductCard from './TabexComponents/Cards/ModernProductCard/ModernProductCard.jsx';
+import Productcard_animatedbuttons from './TabexComponents/Cards/Productcard_animatedbuttons/Productcard_animatedbuttons.jsx';
+import Productcard_with_circularbg from './TabexComponents/Cards/Productcard_with_circularbg/Productcard_with_circularbg.jsx';
+import Productcard_with_circularhover from './TabexComponents/Cards/Productcard_with_circularhover/Productcard_with_circularhover.jsx';
+import Productcard_with_slideanimation from './TabexComponents/Cards/Productcard_with_slideanimation/Productcard_with_slideanimation.jsx';
+import Productcard_with_variants from './TabexComponents/Cards/Productcard_with_variants/Productcard_with_variants.jsx';
+import Productcard6 from './TabexComponents/Cards/Productcard6/Productcard6.jsx';
+import Productcard7 from './TabexComponents/Cards/Productcard7/Productcard7.jsx';
+import Productcarddefault from './TabexComponents/Cards/Productcarddefault/Productcarddefault.jsx';
+import Productccard_with_imageontopleft from './TabexComponents/Cards/Productccard_with_imageontopleft/Productccard_with_imageontopleft.jsx';
+import Prouductcard_with_zoomhover from './TabexComponents/Cards/Prouductcard_with_zoomhover/Prouductcard_with_zoomhover.jsx';
+import Simplecategorycardwithtextbelow from './TabexComponents/Cards/Simplecategorycardwithtextbelow/Simplecategorycardwithtextbelow.jsx';
+import Simpleproductcard from './TabexComponents/Cards/Simpleproductcard/Simpleproductcard.jsx';
+import StylishProductCard from './TabexComponents/Cards/StylishProductCard/StylishProductCard.jsx';
+
+const returnLibrary = () => {
+    return {
+        LanguageContext: LanguageContext,
+        LanguageProvider: LanguageProvider,
+        ProductsCardsSectionContext: ProductsCardsSectionContext,
+        ProductsCardsSectionContext_Provider: ProductsCardsSectionContext_Provider,
+
+        AwesomeButton: AwesomeButton,
+        Checkout: Checkout,
+        Signup: Signup,
+        Productinfo: Productinfo,
+        Ordershistory: Ordershistory,
+        Wishlist: Wishlist,
+        Viewcart: Viewcart,
+        Login: Login,
+        AccountInformation: AccountInformation,
+        Policies: Policies,
+        CartSlider: CartSlider,
+        Categoriesdropdown: Categoriesdropdown,
+
+        // Cards Sections
+        CardsSection: CardsSection,
+        CardsSection2: CardsSection2,
+        Sixverticalcardssection: Sixverticalcardssection,
+        ModernCardsSection: ModernCardsSection,
+        ElegantCategoriesCardSection: ElegantCategoriesCardSection,
+        CardsSection7: CardsSection7,
+
+        // Headers
+        Gotoheader: Gotoheader,
+        CategoryFeaturingHeader: CategoryFeaturingHeader,
+        ClassicHeader: ClassicHeader,
+        CTAHeader: CTAHeader,
+        Header_threesectionslogocentered: Header_threesectionslogocentered,
+        Header6: Header6,
+        Header8: Header8,
+        HeaderRestaurant: HeaderRestaurant,
+        HeaderwithContactinfo: HeaderwithContactinfo,
+        Modernheader: Modernheader,
+        StylishHeader: StylishHeader,
+        ThreeTieredHeader: ThreeTieredHeader,
+
+        Allinonefooter: Allinonefooter,
+        Footer1: Footer1,
+        Footer2: Footer2,
+        Footer3: Footer3,
+        Footer5: Footer5,
+        Footer6: Footer6,
+        Footer7: Footer7,
+        Simplefooter: Simplefooter,
+        Footer4: Footer4,
+
+        Card20: Card20,
+        Card21: Card21,
+        Card22: Card22,
+        Card23: Card23,
+        CardBadgeSlideFromTop: CardBadgeSlideFromTop,
+        Categorycard_with_twolinestransition: Categorycard_with_twolinestransition,
+        Productcard_with_zoominonhover: Productcard_with_zoominonhover,
+        Categorycard_fullimage: Categorycard_fullimage,
+        Categorycard_slidebgscaled: Categorycard_slidebgscaled,
+        Categorycard_with_trianglebg: Categorycard_with_trianglebg,
+        Categorycard_withshapes: Categorycard_withshapes,
+        Categorycard_withtext: Categorycard_withtext,
+        CategoryCardwithhoveraction: CategoryCardwithhoveraction,
+        Classiccategorycard: Classiccategorycard,
+        Horizontalcard: Horizontalcard,
+        MenuCard: MenuCard,
+        ModernCardWithQuantityButton: ModernCardWithQuantityButton,
+        ModernProductCard: ModernProductCard,
+        Productcard_animatedbuttons: Productcard_animatedbuttons,
+        Productcard_with_circularbg: Productcard_with_circularbg,
+        Productcard_with_circularhover: Productcard_with_circularhover,
+        Productcard_with_slideanimation: Productcard_with_slideanimation,
+        Productcard_with_variants: Productcard_with_variants,
+        Productcard6: Productcard6,
+        Productcard7: Productcard7,
+        Productcarddefault: Productcarddefault,
+        Productccard_with_imageontopleft: Productccard_with_imageontopleft,
+        Prouductcard_with_zoomhover: Prouductcard_with_zoomhover,
+        Simplecategorycardwithtextbelow: Simplecategorycardwithtextbelow,
+        Simpleproductcard: Simpleproductcard,
+        StylishProductCard: StylishProductCard,
+
+        BacgroundThreeImageWithCategories: BacgroundThreeImageWithCategories,
+        BackgroundFiveImageStructure: BackgroundFiveImageStructure,
+        Backgroundimage_with_toppill: Backgroundimage_with_toppill,
+        Backgroundimage1: Backgroundimage1,
+        BackgroundimageandTextsection: BackgroundimageandTextsection,
+        BackgroundImageWithTopContent: BackgroundImageWithTopContent,
+        Bgimagewithsearchbar: Bgimagewithsearchbar,
+        Section_with_rightbgcont: Section_with_rightbgcont,
+        Threebgimages: Threebgimages,
+        Twobgimages: Twobgimages,
+
+        // AboutSection: AboutSection,
+        Backgroundimage_with_topcircle: Backgroundimage_with_topcircle,
+        Freetextsection: Freetextsection,
+        Image_with_leftwords: Image_with_leftwords,
+        Image_with_rightwords: Image_with_rightwords,
+        Servicesection: Servicesection,
+        ServicesectionCenteredcards: ServicesectionCenteredcards,
+        Slideshow_with_rotatedsquare: Slideshow_with_rotatedsquare,
+        Slideshow_with_squarebg: Slideshow_with_squarebg,
+        Slideshowdifferentanimations: Slideshowdifferentanimations,
+        Slideshowfade: Slideshowfade,
+        Slideshowslide: Slideshowslide,
+        Slideshowzoom: Slideshowzoom,
+    };
+};
+export default returnLibrary();

package/src-aya/styles/cards/ModernCardWithQuantityButton.module.css

@@ -0,0 +1,34 @@
+.productcard {
+	position: relative;
+}
+.productcard  .wishlistbtn {
+	position: absolute;
+	top: 5px;
+	right: 5px;
+	opacity: 0;
+	transition: .3s
+}
+.productcard .card_inner {
+	position: relative;
+	z-index: 1
+}
+.productcard .card_inner:hover  .wishlistbtn {
+	opacity: 1;
+	z-index: 8
+}
+.wishlistbtn  {
+	transform: translateX(10px);
+	transition: .3s;
+	transition-property: transform;
+	display: block
+
+}
+.productcard .card_inner:hover .wishlistbtn  {
+	transform: translateX(0)
+}
+.productcard .card_informationcontainer {
+	/* display: none; */
+	padding: 0 10px;
+	/* width: 101% !important;
+	left: -1px; */
+}

package/src-aya/styles/cards/Prouductcard_with_zoomhover.module.css

@@ -0,0 +1,61 @@
+.productcard{
+    width:200px;
+    height:200px;
+    /* margin-bottom:20px; */
+    display:'flex';
+    flex-direction: 'column';
+    justify-content:'center';
+    align-items: 'center';
+    transition: transform 0.2s ease;
+    box-shadow: 0 4px 6px 0 rgba(22, 22, 26, 0.18);
+    /* border-radius: 0;
+    border: 0; */
+    
+    
+    }
+    
+    
+    .productcard a {
+        position: relative;
+        display: inline-block;
+        font-size: 22px;
+        line-height: 24px;
+        height: 24px;
+        font-weight: 600;
+        /* color: white; */
+        text-decoration: none;
+        }
+        
+        .productcard a::after {
+        content: '';
+        position: absolute;
+        display: block;
+        bottom: 0;
+        left: 0%;
+        width: 0;
+        height: 2px;
+        border-style: solid;
+        border-width: 0px;
+        border-bottom-width: 4px;
+        
+        /* border-bottom-color:red; */
+        }
+        
+        .productcard a, a::after {
+        transition: all 0.4s linear;
+        }
+        
+        .productcard:hover a {
+        /* color: rgb(255, 0, 0); */
+        }
+        
+        .productcard:hover a::after {
+        left: 0;
+        width: 100%;
+        }
+    
+        .productcard:hover{
+            transform: scale(1.1);
+            transition: 0.3s;
+    
+        }

package/src-aya/styles/cards/categorycard.module.css

@@ -0,0 +1,85 @@
+.img{
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: all .4s ease;
+  overflow: hidden !important;
+}
+.container:hover .img{
+  transform: scale(1.2);
+  overflow: hidden;
+}
+.buttons_container {
+  position: absolute;
+  left: 0;
+  bottom: 20px;
+  opacity:  0;
+  width: 100%;
+  text-align: start;
+  transition: all, 0.3s;
+    -webkit-transition: all, 0.3s;
+    -moz-transition: all, 0.3s;
+    -ms-transition: all, 0.3s;
+    -o-transition: all, 0.3s;
+}
+.buttons_container li {
+  list-style: none;
+  display: inline-block;
+  position: relative;
+  transition: all 0.4s ease 0.1s;
+    -webkit-transition: all 0.4s ease 0.1s;
+    -o-transition: all 0.4s ease 0.1s;
+}
+.buttons_container li span {
+  display: block;
+  transition: all, 0.3s;
+    -webkit-transition: all, 0.3s;
+    -moz-transition: all, 0.3s;
+    -ms-transition: all, 0.3s;
+    -o-transition: all, 0.3s;
+}
+.container:hover .buttons_container {
+    bottom: 40px !important;
+    opacity: 1;
+}
+.text {
+  position: absolute;
+  bottom: 60px;
+  opacity:  1;
+  width: 100%;
+  text-align: start;
+  -webkit-transition: all, 0.3s;
+  -moz-transition: all, 0.3s;
+  -ms-transition: all, 0.3s;
+  -o-transition: all, 0.3s;
+  transition: all, 0.3s;
+}
+.text li {
+  list-style: none;
+  display: inline-block;
+  position: relative;
+  -webkit-transition: all 0.4s ease 0.1s;
+  -o-transition: all 0.4s ease 0.1s;
+  transition: all 0.4s ease 0.1s;
+}
+.text li span {
+  display: block;
+  -webkit-transition: all, 0.3s;
+  -moz-transition: all, 0.3s;
+  -ms-transition: all, 0.3s;
+  -o-transition: all, 0.3s;
+  transition: all, 0.3s;
+}
+.text li span i {
+  position: relative;
+  transform: rotate(0);
+  -webkit-transition: all, 0.2s;
+  -moz-transition: all, 0.2s;
+  -ms-transition: all, 0.2s;
+  -o-transition: all, 0.2s;
+  transition: all, 0.2s;
+}
+.container:hover .text {
+  bottom: 80px !important;
+  opacity: 1;
+}

package/src-aya/styles/cards/categorycard3.module.css

@@ -0,0 +1,50 @@
+.categoryCard {
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    transition: 0.3s;
+}
+.categoryCard figcaption {
+    width: 100%;
+    height: 100%;
+}
+.categoryCard figcaption::before {
+    position: absolute;
+    top: 50%;
+    right: 30px;
+    bottom: 50%;
+    left: 30px;
+    content: '';
+    opacity: 0;
+    -webkit-transition: all 0.4s;
+    transition: all 0.4s;
+    -webkit-transition-delay: 0.3s;
+    transition-delay: 0.3s;
+}
+.categoryCard button {
+    position: absolute;
+    left: 0;
+    /* bottom: 30px; */
+    position: relative;
+    /* top: 100px; */
+    /* opacity: 0; */
+    display: inline-block;
+    vertical-align: middle;
+    transition: 0.15s ease-in-out;
+    -webkit-transition: all 0.4s ease 0.1s;
+    -o-transition: all 0.4s ease 0.1s;
+    transition: all 0.4s ease 0.1s;
+}
+.categoryCard:hover figcaption button {
+    opacity: 1;
+    top: 0;
+}
+.categoryCard:hover figcaption::before {
+    background: rgba(0, 0, 0, 0.1);
+    top: 30px;
+    bottom: 30px;
+    opacity: 1;
+}

package/src-aya/styles/cards/productcard_animatedbuttons.module.css

@@ -0,0 +1,127 @@
+.buttons_container1 {
+    position: absolute;
+    left: 0;
+    bottom: 60px;
+    opacity:  0;
+    width: 100%;
+    text-align: center;
+    -webkit-transition: all, 0.3s;
+    -moz-transition: all, 0.3s;
+    -ms-transition: all, 0.3s;
+    -o-transition: all, 0.3s;
+    transition: all, 0.3s;
+}
+.buttons_container1 li {
+    list-style: none;
+    display: inline-block;
+    position: relative;
+    -webkit-transition: all 0.4s ease 0.1s;
+    -o-transition: all 0.4s ease 0.1s;
+    transition: all 0.4s ease 0.1s;
+}
+.buttons_container1 li span {
+    display: block;
+    -webkit-transition: all, 0.3s;
+    -moz-transition: all, 0.3s;
+    -ms-transition: all, 0.3s;
+    -o-transition: all, 0.3s;
+    transition: all, 0.3s;
+}
+.buttons_container1 li span i {
+    position: relative;
+    transform: rotate(0);
+    -webkit-transition: all, 0.2s;
+    -moz-transition: all, 0.2s;
+    -ms-transition: all, 0.2s;
+    -o-transition: all, 0.2s;
+    transition: all, 0.2s;
+}
+.productcard:hover .image_container .buttons_container1 {
+    bottom: 40% !important;
+    opacity: 1;
+}
+.buttons_container1 li:hover span i {
+    transform: rotate(360deg);
+}
+@media screen and (max-width: 800px) {
+    .productcard .image_container .buttons_container1 {
+        bottom: 20px !important;
+        opacity: 1;
+    }
+    .buttons_container{
+        bottom: 20px !important;
+        opacity: 1;
+    }
+    .buttons_container1{
+        top: 50% !important;
+        opacity: 1;
+    }
+}
+@media screen and (max-width: 500px) {
+    .productcard .image_container .buttons_container1 {
+        bottom: 20px !important;
+        opacity: 1;
+    }
+    .buttons_container{
+        bottom: 20px !important;
+    opacity: 1;
+    }
+    .buttons_container1{
+        top: 50% !important;
+        opacity: 1;
+    }
+}
+
+.buttons_container {
+    position: absolute;
+    left: 0;
+    bottom: -30px;
+    opacity:  0;
+    width: 100%;
+    text-align: center;
+    -webkit-transition: all, 0.3s;
+    -moz-transition: all, 0.3s;
+    -ms-transition: all, 0.3s;
+    -o-transition: all, 0.3s;
+    transition: all, 0.3s;
+}
+.buttons_container li {
+    list-style: none;
+    display: inline-block;
+    /* margin-right: 10px; */
+    position: relative;
+    -webkit-transition: all 0.4s ease 0.1s;
+    -o-transition: all 0.4s ease 0.1s;
+    transition: all 0.4s ease 0.1s;
+}
+.buttons_container li span {
+    display: block;
+    -webkit-transition: all, 0.3s;
+    -moz-transition: all, 0.3s;
+    -ms-transition: all, 0.3s;
+    -o-transition: all, 0.3s;
+    transition: all, 0.3s;
+}
+.buttons_container li span i {
+    position: relative;
+    transform: rotate(0);
+    -webkit-transition: all, 0.2s;
+    -moz-transition: all, 0.2s;
+    -ms-transition: all, 0.2s;
+    -o-transition: all, 0.2s;
+    transition: all, 0.2s;
+}
+.productcard:hover .image_container .buttons_container {
+    bottom: 20px !important;
+    opacity: 1;
+}
+.buttons_container li:hover span i {
+    transform: rotate(360deg);
+}
+@media screen and (max-width: 800px) {
+    .productcard .image_container .buttons_container {
+        bottom: 20px !important;
+        opacity: 1;
+    }
+}
+