<!--IN PROGRESS-->
<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/11475869-Fode-Food-App-UI-Kit-I" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
<p class="dev">Developed with ❤ by <a href="https://codepen.io/designfenix/" target="_blank">Fernando Cohen</a> </p>
<div class="container">
  <div class="row justify-content-center">
    <div class="col-lg-4 col-md-6 col-sm-8 col-12">
      <div class="module my-5">
        <div class="notify">
          <img src="https://lh3.googleusercontent.com/wj0UmT0er4pBCR5wZPm5R8KDbt_3IKwasUnrx7baja-Fjj7tac2OEKDdtXAumQwlxI2souiZPQBCkA0raqUUaIU8tx_83EBsW5ODx17m3mfjEsS7Jv7h3fcAkHuyQbO-8HzmkJKDdruOmrseZvqZHV20DLmeocjRxxOjxIuMFuFM95R-XIXaKS1ojNy8B3gLKOzl06Cr6lDg3osz90zeeXpEeQtu0iiba3a1XKO2zh1lplMDxU_UChKRyzgHeaMdgQ5OoH9Snfp9otHoFhm1TjnHc28qsXPsw3gu6wUPecADXYC3cRJby9OB4xqH6uk4TeLQBz5p6wWqN52gAFb6eZLp-EPJqywQwGBO27SRqgdFqev4yw1nGrU7of8ew3LKlp94yJ2ZVzcdNPxEkOjC3TF7W256nX0BGkpnvTkg3TgCeoAodP0V8jO7V_HYwR4tpJEut3rTTprq1Qy9V1ZHfvBFULt2Hpi5ZseM_SJvNOITDb5I2C3QSIn7GKdU8dZqS7Ympt95Zoy3K5R-9fFuqkTW96_X1NCRHl00wQNY-d_PBxGHiwTZUwMlnIRduAIAnDrdi1VP01k74-bOfqieL4Rn2NSKM9yo5OfLAswvlPpZuqKdOBcGWLp6dNLdUAE0Y_uBXNBZNmYr-aCZAOYI9I_KBQmDfT0yV_qPoAPnm4w0yUe-ZBZReiOK9v5fZgC5LDLA=w1366-h625-ft" alt="">
        </div>
        <div class="heading">
          <h2>Food</h2>
          <h3>Special For You</h3> 
        </div>
        <div class="tabs">
          <span class="slide-line"></span> 
          <ul> 
            <li data-filter="1">Popular</li>
            <li data-filter="2">Pizzas</li>
            <li>Top</li> 
            <li>All Menu</li>  
          </ul> 
        </div> 
        <div class="products-wrapper">
          <div class="slider " data-filter="1"> 
            <div class="card ">
              <div class="calories">
                <span class="icon">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
                    <path style="fill:#FF8A33;" d="M87.587,416.017c-13.192-26.693-22.815-61.115-22.105-104.379  c0.649-39.55,10.54-78.385,27.242-114.241c7.938-17.041,36.632-80.932,37.886-83.676c1.342-2.937,6.147-13.988,6.902-24.242  c0.296-4.018,4.787-6.254,8.096-3.957c14.304,9.93,40.876,32.787,42.126,66.219c0.172,4.593,5.785,6.71,8.931,3.358  c19.53-20.813,59.656-75.053,33.154-148.181c-1.531-4.226,2.75-8.251,6.888-6.496c30.249,12.827,110.531,58.011,96.261,172.172  c0,0-2.524,15.774-5.716,27.843c-1.181,4.465,3.627,8.094,7.621,5.775c13.117-7.618,32.576-25.753,28.897-65.423  c-0.417-4.501,4.694-7.343,8.293-4.606c26.101,19.854,93.208,84.549,69.509,211.577c0,0-25.461,156.356-185.379,163.479  c-0.119,0.005-0.234,0.015-0.352,0.03c-1.012,0.129-6.773,0.805-15.936,0.725C175.131,511.434,116.287,474.087,87.587,416.017z"/>
                    <path style="fill:#ED7829;" d="M441.57,347.759c0,0-25.481,156.477-185.571,163.486c0,0-9.329,1.305-24.435,0.487  c-6.274-0.342-12.497-1.035-18.627-2.05c143.38-17.819,166.842-161.923,166.842-161.923c13.74-73.616-3.023-126.296-24.642-161.447  c6.309-10.501,10.508-25.17,8.628-45.503c-0.417-4.512,4.689-7.367,8.295-4.624C398.165,156.042,465.272,220.738,441.57,347.759z"/>
                    <path style="fill:#FFD15C;" d="M170.677,415.435c-6.79-13.602-11.767-31.195-11.403-53.357c0.33-20.079,5.351-39.796,13.831-58  c4.03-8.652,18.598-41.089,19.235-42.482c0.524-1.146,2.086-4.726,2.955-8.686c0.818-3.726,5.274-5.335,8.251-2.949  c6.508,5.216,14.915,14.011,17.215,25.883c0.831,4.292,6.336,5.597,9.088,2.2c9.803-12.1,23.135-35.307,14.571-65.383  c-1.235-4.337,3.339-8.035,7.355-5.983c17.79,9.091,49.789,32.911,43.302,84.807c0,0-0.532,3.324-1.344,7.327  c-1.022,5.042,5.19,8.402,8.749,4.688c4.415-4.607,8.364-11.817,8.461-22.895c0.039-4.43,5.266-6.752,8.59-3.824  c15.085,13.292,41.491,45.689,30.68,103.635c0,0-12.918,79.328-94.034,82.995c-0.108,0.005-0.214,0.013-0.321,0.026  c-0.689,0.085-3.871,0.437-8.818,0.351C214.603,463.222,185.167,444.462,170.677,415.435z"/>
                    <path style="fill:#E8B44D;" d="M350.209,380.415c0,0-12.932,79.445-94.209,83.006c0,0-4.742,0.663-12.404,0.238  c-4.121-0.228-8.19-0.745-12.176-1.532c69.619-10.954,81.132-81.712,81.132-81.712c6.388-34.199-0.207-59.503-9.784-77.229  c4.297-4.614,8.074-11.737,8.178-22.55c0.043-4.445,5.261-6.79,8.596-3.851C334.625,290.08,361.021,322.477,350.209,380.415z"/>
                  </svg>
                </span>
                <span class="text">
                  144 Calories
                </span>
              </div>
              <span class="loved">
                <svg data-active="false" width="24" height="24" viewBox="0 0 24 24"> <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" /> </svg>
              </span>
              <img class="card-img-top pizza" src="https://drive.google.com/u/0/uc?id=1C4O5AVyOH4BVPDMd4bhjrb_pnjUZdZqm&export=download" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">Clasico</h5>
                <p class="card-text">Mixed Pizza with cheese</p>
                <p class="card-price">$7,99</p>
                <a href="#" class="btn">+</a>
              </div>
            </div>
            <div class="card ">
              <div class="calories">
                <span class="icon">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
                    <path style="fill:#FF8A33;" d="M87.587,416.017c-13.192-26.693-22.815-61.115-22.105-104.379  c0.649-39.55,10.54-78.385,27.242-114.241c7.938-17.041,36.632-80.932,37.886-83.676c1.342-2.937,6.147-13.988,6.902-24.242  c0.296-4.018,4.787-6.254,8.096-3.957c14.304,9.93,40.876,32.787,42.126,66.219c0.172,4.593,5.785,6.71,8.931,3.358  c19.53-20.813,59.656-75.053,33.154-148.181c-1.531-4.226,2.75-8.251,6.888-6.496c30.249,12.827,110.531,58.011,96.261,172.172  c0,0-2.524,15.774-5.716,27.843c-1.181,4.465,3.627,8.094,7.621,5.775c13.117-7.618,32.576-25.753,28.897-65.423  c-0.417-4.501,4.694-7.343,8.293-4.606c26.101,19.854,93.208,84.549,69.509,211.577c0,0-25.461,156.356-185.379,163.479  c-0.119,0.005-0.234,0.015-0.352,0.03c-1.012,0.129-6.773,0.805-15.936,0.725C175.131,511.434,116.287,474.087,87.587,416.017z"/>
                    <path style="fill:#ED7829;" d="M441.57,347.759c0,0-25.481,156.477-185.571,163.486c0,0-9.329,1.305-24.435,0.487  c-6.274-0.342-12.497-1.035-18.627-2.05c143.38-17.819,166.842-161.923,166.842-161.923c13.74-73.616-3.023-126.296-24.642-161.447  c6.309-10.501,10.508-25.17,8.628-45.503c-0.417-4.512,4.689-7.367,8.295-4.624C398.165,156.042,465.272,220.738,441.57,347.759z"/>
                    <path style="fill:#FFD15C;" d="M170.677,415.435c-6.79-13.602-11.767-31.195-11.403-53.357c0.33-20.079,5.351-39.796,13.831-58  c4.03-8.652,18.598-41.089,19.235-42.482c0.524-1.146,2.086-4.726,2.955-8.686c0.818-3.726,5.274-5.335,8.251-2.949  c6.508,5.216,14.915,14.011,17.215,25.883c0.831,4.292,6.336,5.597,9.088,2.2c9.803-12.1,23.135-35.307,14.571-65.383  c-1.235-4.337,3.339-8.035,7.355-5.983c17.79,9.091,49.789,32.911,43.302,84.807c0,0-0.532,3.324-1.344,7.327  c-1.022,5.042,5.19,8.402,8.749,4.688c4.415-4.607,8.364-11.817,8.461-22.895c0.039-4.43,5.266-6.752,8.59-3.824  c15.085,13.292,41.491,45.689,30.68,103.635c0,0-12.918,79.328-94.034,82.995c-0.108,0.005-0.214,0.013-0.321,0.026  c-0.689,0.085-3.871,0.437-8.818,0.351C214.603,463.222,185.167,444.462,170.677,415.435z"/>
                    <path style="fill:#E8B44D;" d="M350.209,380.415c0,0-12.932,79.445-94.209,83.006c0,0-4.742,0.663-12.404,0.238  c-4.121-0.228-8.19-0.745-12.176-1.532c69.619-10.954,81.132-81.712,81.132-81.712c6.388-34.199-0.207-59.503-9.784-77.229  c4.297-4.614,8.074-11.737,8.178-22.55c0.043-4.445,5.261-6.79,8.596-3.851C334.625,290.08,361.021,322.477,350.209,380.415z"/>
                  </svg>
                </span>
                <span class="text">
                  264 Calories
                </span>
              </div>
              <span class="loved">
                <svg data-active="false" width="24" height="24" viewBox="0 0 24 24"> <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" /> </svg>
              </span>
              <img class="card-img-top pizza" src="https://drive.google.com/u/0/uc?id=1ZAjDdaTtouB_jSZFabaGQlwwPq1ODw3G&export=download" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">Mexico</h5>
                <p class="card-text">Mixed Pizza with</p>
                <p class="card-price">$15,99</p>
                <a href="#" class="btn">+</a>
              </div>
            </div>
            <div class="card ">
              <div class="calories">
                <span class="icon">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
                    <path style="fill:#FF8A33;" d="M87.587,416.017c-13.192-26.693-22.815-61.115-22.105-104.379  c0.649-39.55,10.54-78.385,27.242-114.241c7.938-17.041,36.632-80.932,37.886-83.676c1.342-2.937,6.147-13.988,6.902-24.242  c0.296-4.018,4.787-6.254,8.096-3.957c14.304,9.93,40.876,32.787,42.126,66.219c0.172,4.593,5.785,6.71,8.931,3.358  c19.53-20.813,59.656-75.053,33.154-148.181c-1.531-4.226,2.75-8.251,6.888-6.496c30.249,12.827,110.531,58.011,96.261,172.172  c0,0-2.524,15.774-5.716,27.843c-1.181,4.465,3.627,8.094,7.621,5.775c13.117-7.618,32.576-25.753,28.897-65.423  c-0.417-4.501,4.694-7.343,8.293-4.606c26.101,19.854,93.208,84.549,69.509,211.577c0,0-25.461,156.356-185.379,163.479  c-0.119,0.005-0.234,0.015-0.352,0.03c-1.012,0.129-6.773,0.805-15.936,0.725C175.131,511.434,116.287,474.087,87.587,416.017z"/>
                    <path style="fill:#ED7829;" d="M441.57,347.759c0,0-25.481,156.477-185.571,163.486c0,0-9.329,1.305-24.435,0.487  c-6.274-0.342-12.497-1.035-18.627-2.05c143.38-17.819,166.842-161.923,166.842-161.923c13.74-73.616-3.023-126.296-24.642-161.447  c6.309-10.501,10.508-25.17,8.628-45.503c-0.417-4.512,4.689-7.367,8.295-4.624C398.165,156.042,465.272,220.738,441.57,347.759z"/>
                    <path style="fill:#FFD15C;" d="M170.677,415.435c-6.79-13.602-11.767-31.195-11.403-53.357c0.33-20.079,5.351-39.796,13.831-58  c4.03-8.652,18.598-41.089,19.235-42.482c0.524-1.146,2.086-4.726,2.955-8.686c0.818-3.726,5.274-5.335,8.251-2.949  c6.508,5.216,14.915,14.011,17.215,25.883c0.831,4.292,6.336,5.597,9.088,2.2c9.803-12.1,23.135-35.307,14.571-65.383  c-1.235-4.337,3.339-8.035,7.355-5.983c17.79,9.091,49.789,32.911,43.302,84.807c0,0-0.532,3.324-1.344,7.327  c-1.022,5.042,5.19,8.402,8.749,4.688c4.415-4.607,8.364-11.817,8.461-22.895c0.039-4.43,5.266-6.752,8.59-3.824  c15.085,13.292,41.491,45.689,30.68,103.635c0,0-12.918,79.328-94.034,82.995c-0.108,0.005-0.214,0.013-0.321,0.026  c-0.689,0.085-3.871,0.437-8.818,0.351C214.603,463.222,185.167,444.462,170.677,415.435z"/>
                    <path style="fill:#E8B44D;" d="M350.209,380.415c0,0-12.932,79.445-94.209,83.006c0,0-4.742,0.663-12.404,0.238  c-4.121-0.228-8.19-0.745-12.176-1.532c69.619-10.954,81.132-81.712,81.132-81.712c6.388-34.199-0.207-59.503-9.784-77.229  c4.297-4.614,8.074-11.737,8.178-22.55c0.043-4.445,5.261-6.79,8.596-3.851C334.625,290.08,361.021,322.477,350.209,380.415z"/>
                  </svg>
                </span>
                <span class="text">
                  144 Calories
                </span>
              </div>
              <span class="loved">
                <svg data-active="false" width="24" height="24" viewBox="0 0 24 24"> <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" /> </svg>
              </span>
              <img class="card-img-top pizza" src="https://drive.google.com/u/0/uc?id=1C4O5AVyOH4BVPDMd4bhjrb_pnjUZdZqm&export=download" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">Clasico</h5>
                <p class="card-text">Mixed Pizza with cheese</p>
                <p class="card-price">$7,99</p>
                <a href="#" class="btn">+</a>
              </div>
            </div>
          </div>
          <div class="slider " data-filter="2"> 
            <div class="card ">
              <div class="calories">
                <span class="icon">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
                    <path style="fill:#FF8A33;" d="M87.587,416.017c-13.192-26.693-22.815-61.115-22.105-104.379  c0.649-39.55,10.54-78.385,27.242-114.241c7.938-17.041,36.632-80.932,37.886-83.676c1.342-2.937,6.147-13.988,6.902-24.242  c0.296-4.018,4.787-6.254,8.096-3.957c14.304,9.93,40.876,32.787,42.126,66.219c0.172,4.593,5.785,6.71,8.931,3.358  c19.53-20.813,59.656-75.053,33.154-148.181c-1.531-4.226,2.75-8.251,6.888-6.496c30.249,12.827,110.531,58.011,96.261,172.172  c0,0-2.524,15.774-5.716,27.843c-1.181,4.465,3.627,8.094,7.621,5.775c13.117-7.618,32.576-25.753,28.897-65.423  c-0.417-4.501,4.694-7.343,8.293-4.606c26.101,19.854,93.208,84.549,69.509,211.577c0,0-25.461,156.356-185.379,163.479  c-0.119,0.005-0.234,0.015-0.352,0.03c-1.012,0.129-6.773,0.805-15.936,0.725C175.131,511.434,116.287,474.087,87.587,416.017z"/>
                    <path style="fill:#ED7829;" d="M441.57,347.759c0,0-25.481,156.477-185.571,163.486c0,0-9.329,1.305-24.435,0.487  c-6.274-0.342-12.497-1.035-18.627-2.05c143.38-17.819,166.842-161.923,166.842-161.923c13.74-73.616-3.023-126.296-24.642-161.447  c6.309-10.501,10.508-25.17,8.628-45.503c-0.417-4.512,4.689-7.367,8.295-4.624C398.165,156.042,465.272,220.738,441.57,347.759z"/>
                    <path style="fill:#FFD15C;" d="M170.677,415.435c-6.79-13.602-11.767-31.195-11.403-53.357c0.33-20.079,5.351-39.796,13.831-58  c4.03-8.652,18.598-41.089,19.235-42.482c0.524-1.146,2.086-4.726,2.955-8.686c0.818-3.726,5.274-5.335,8.251-2.949  c6.508,5.216,14.915,14.011,17.215,25.883c0.831,4.292,6.336,5.597,9.088,2.2c9.803-12.1,23.135-35.307,14.571-65.383  c-1.235-4.337,3.339-8.035,7.355-5.983c17.79,9.091,49.789,32.911,43.302,84.807c0,0-0.532,3.324-1.344,7.327  c-1.022,5.042,5.19,8.402,8.749,4.688c4.415-4.607,8.364-11.817,8.461-22.895c0.039-4.43,5.266-6.752,8.59-3.824  c15.085,13.292,41.491,45.689,30.68,103.635c0,0-12.918,79.328-94.034,82.995c-0.108,0.005-0.214,0.013-0.321,0.026  c-0.689,0.085-3.871,0.437-8.818,0.351C214.603,463.222,185.167,444.462,170.677,415.435z"/>
                    <path style="fill:#E8B44D;" d="M350.209,380.415c0,0-12.932,79.445-94.209,83.006c0,0-4.742,0.663-12.404,0.238  c-4.121-0.228-8.19-0.745-12.176-1.532c69.619-10.954,81.132-81.712,81.132-81.712c6.388-34.199-0.207-59.503-9.784-77.229  c4.297-4.614,8.074-11.737,8.178-22.55c0.043-4.445,5.261-6.79,8.596-3.851C334.625,290.08,361.021,322.477,350.209,380.415z"/>
                  </svg>
                </span>
                <span class="text">
                  144 Calories
                </span>
              </div>
              <span class="loved">
                <svg data-active="false" width="24" height="24" viewBox="0 0 24 24"> <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" /> </svg>
              </span>
              <img class="card-img-top pizza" src="https://drive.google.com/u/0/uc?id=1ZAjDdaTtouB_jSZFabaGQlwwPq1ODw3G&export=download" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">Mexico</h5>
                <p class="card-text">Mixed Pizza with</p>
                <p class="card-price">$15,99</p>
                <a href="#" class="btn">+</a>
              </div>
            </div>
            <div class="card ">
              <div class="calories">
                <span class="icon">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
                    <path style="fill:#FF8A33;" d="M87.587,416.017c-13.192-26.693-22.815-61.115-22.105-104.379  c0.649-39.55,10.54-78.385,27.242-114.241c7.938-17.041,36.632-80.932,37.886-83.676c1.342-2.937,6.147-13.988,6.902-24.242  c0.296-4.018,4.787-6.254,8.096-3.957c14.304,9.93,40.876,32.787,42.126,66.219c0.172,4.593,5.785,6.71,8.931,3.358  c19.53-20.813,59.656-75.053,33.154-148.181c-1.531-4.226,2.75-8.251,6.888-6.496c30.249,12.827,110.531,58.011,96.261,172.172  c0,0-2.524,15.774-5.716,27.843c-1.181,4.465,3.627,8.094,7.621,5.775c13.117-7.618,32.576-25.753,28.897-65.423  c-0.417-4.501,4.694-7.343,8.293-4.606c26.101,19.854,93.208,84.549,69.509,211.577c0,0-25.461,156.356-185.379,163.479  c-0.119,0.005-0.234,0.015-0.352,0.03c-1.012,0.129-6.773,0.805-15.936,0.725C175.131,511.434,116.287,474.087,87.587,416.017z"/>
                    <path style="fill:#ED7829;" d="M441.57,347.759c0,0-25.481,156.477-185.571,163.486c0,0-9.329,1.305-24.435,0.487  c-6.274-0.342-12.497-1.035-18.627-2.05c143.38-17.819,166.842-161.923,166.842-161.923c13.74-73.616-3.023-126.296-24.642-161.447  c6.309-10.501,10.508-25.17,8.628-45.503c-0.417-4.512,4.689-7.367,8.295-4.624C398.165,156.042,465.272,220.738,441.57,347.759z"/>
                    <path style="fill:#FFD15C;" d="M170.677,415.435c-6.79-13.602-11.767-31.195-11.403-53.357c0.33-20.079,5.351-39.796,13.831-58  c4.03-8.652,18.598-41.089,19.235-42.482c0.524-1.146,2.086-4.726,2.955-8.686c0.818-3.726,5.274-5.335,8.251-2.949  c6.508,5.216,14.915,14.011,17.215,25.883c0.831,4.292,6.336,5.597,9.088,2.2c9.803-12.1,23.135-35.307,14.571-65.383  c-1.235-4.337,3.339-8.035,7.355-5.983c17.79,9.091,49.789,32.911,43.302,84.807c0,0-0.532,3.324-1.344,7.327  c-1.022,5.042,5.19,8.402,8.749,4.688c4.415-4.607,8.364-11.817,8.461-22.895c0.039-4.43,5.266-6.752,8.59-3.824  c15.085,13.292,41.491,45.689,30.68,103.635c0,0-12.918,79.328-94.034,82.995c-0.108,0.005-0.214,0.013-0.321,0.026  c-0.689,0.085-3.871,0.437-8.818,0.351C214.603,463.222,185.167,444.462,170.677,415.435z"/>
                    <path style="fill:#E8B44D;" d="M350.209,380.415c0,0-12.932,79.445-94.209,83.006c0,0-4.742,0.663-12.404,0.238  c-4.121-0.228-8.19-0.745-12.176-1.532c69.619-10.954,81.132-81.712,81.132-81.712c6.388-34.199-0.207-59.503-9.784-77.229  c4.297-4.614,8.074-11.737,8.178-22.55c0.043-4.445,5.261-6.79,8.596-3.851C334.625,290.08,361.021,322.477,350.209,380.415z"/>
                  </svg>
                </span>
                <span class="text">
                  305 Calories
                </span>
              </div>
              <span class="loved">
                <svg data-active="false" width="24" height="24" viewBox="0 0 24 24"> <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" /> </svg>
              </span>
              <img class="card-img-top pizza" src="https://drive.google.com/u/0/uc?id=1C4O5AVyOH4BVPDMd4bhjrb_pnjUZdZqm&export=download" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">Clasico</h5>
                <p class="card-text">Mixed Pizza with cheese</p>
                <p class="card-price">$7,99</p>
                <a href="#" class="btn">+</a>
              </div>
            </div>
            <div class="card ">
              <div class="calories">
                <span class="icon">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
                    <path style="fill:#FF8A33;" d="M87.587,416.017c-13.192-26.693-22.815-61.115-22.105-104.379  c0.649-39.55,10.54-78.385,27.242-114.241c7.938-17.041,36.632-80.932,37.886-83.676c1.342-2.937,6.147-13.988,6.902-24.242  c0.296-4.018,4.787-6.254,8.096-3.957c14.304,9.93,40.876,32.787,42.126,66.219c0.172,4.593,5.785,6.71,8.931,3.358  c19.53-20.813,59.656-75.053,33.154-148.181c-1.531-4.226,2.75-8.251,6.888-6.496c30.249,12.827,110.531,58.011,96.261,172.172  c0,0-2.524,15.774-5.716,27.843c-1.181,4.465,3.627,8.094,7.621,5.775c13.117-7.618,32.576-25.753,28.897-65.423  c-0.417-4.501,4.694-7.343,8.293-4.606c26.101,19.854,93.208,84.549,69.509,211.577c0,0-25.461,156.356-185.379,163.479  c-0.119,0.005-0.234,0.015-0.352,0.03c-1.012,0.129-6.773,0.805-15.936,0.725C175.131,511.434,116.287,474.087,87.587,416.017z"/>
                    <path style="fill:#ED7829;" d="M441.57,347.759c0,0-25.481,156.477-185.571,163.486c0,0-9.329,1.305-24.435,0.487  c-6.274-0.342-12.497-1.035-18.627-2.05c143.38-17.819,166.842-161.923,166.842-161.923c13.74-73.616-3.023-126.296-24.642-161.447  c6.309-10.501,10.508-25.17,8.628-45.503c-0.417-4.512,4.689-7.367,8.295-4.624C398.165,156.042,465.272,220.738,441.57,347.759z"/>
                    <path style="fill:#FFD15C;" d="M170.677,415.435c-6.79-13.602-11.767-31.195-11.403-53.357c0.33-20.079,5.351-39.796,13.831-58  c4.03-8.652,18.598-41.089,19.235-42.482c0.524-1.146,2.086-4.726,2.955-8.686c0.818-3.726,5.274-5.335,8.251-2.949  c6.508,5.216,14.915,14.011,17.215,25.883c0.831,4.292,6.336,5.597,9.088,2.2c9.803-12.1,23.135-35.307,14.571-65.383  c-1.235-4.337,3.339-8.035,7.355-5.983c17.79,9.091,49.789,32.911,43.302,84.807c0,0-0.532,3.324-1.344,7.327  c-1.022,5.042,5.19,8.402,8.749,4.688c4.415-4.607,8.364-11.817,8.461-22.895c0.039-4.43,5.266-6.752,8.59-3.824  c15.085,13.292,41.491,45.689,30.68,103.635c0,0-12.918,79.328-94.034,82.995c-0.108,0.005-0.214,0.013-0.321,0.026  c-0.689,0.085-3.871,0.437-8.818,0.351C214.603,463.222,185.167,444.462,170.677,415.435z"/>
                    <path style="fill:#E8B44D;" d="M350.209,380.415c0,0-12.932,79.445-94.209,83.006c0,0-4.742,0.663-12.404,0.238  c-4.121-0.228-8.19-0.745-12.176-1.532c69.619-10.954,81.132-81.712,81.132-81.712c6.388-34.199-0.207-59.503-9.784-77.229  c4.297-4.614,8.074-11.737,8.178-22.55c0.043-4.445,5.261-6.79,8.596-3.851C334.625,290.08,361.021,322.477,350.209,380.415z"/>
                  </svg>
                </span>
                <span class="text">
                  144 Calories
                </span>
              </div>
              <span class="loved">
                <svg data-active="false" width="24" height="24" viewBox="0 0 24 24"> <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" /> </svg>
              </span>
              <img class="card-img-top pizza" src="https://drive.google.com/u/0/uc?id=1ZAjDdaTtouB_jSZFabaGQlwwPq1ODw3G&export=download" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">Mexico</h5>
                <p class="card-text">Mixed Pizza with</p>
                <p class="card-price">$15,99</p>
                <a href="#" class="btn">+</a>
              </div>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</div>

//IN PROGRESS

/* Please ❤ this if you like it! */
/* Follow Me https://codepen.io/designfenix */
@import url("https://fonts.googleapis.com/css?family=Poppins:wght@100,200;400;700");
$black: #212121;
$gray: #aaa;
$white: #fafbfd;
$primary: #efc352;
body{
  background: #f9fbfc;
  height:100%;
}
.module{
  background: white;
  font-family: Poppins, sans-serif;
  border-radius: 25px;
  padding: 20px;
  box-shadow: 3px 3px 15px rgba(0,0,0,.1);
  height: 680px;
  .notify{
    margin-bottom: 20px;
    img{
      width: 100%;
    }
  }
  .heading{
    h2{
      font-weight: 100;
      font-size: 30px;
      margin-bottom: 10px;
      color: $gray;
    }
    h3{
      font-weight: 700;
      font-size: 32px;
      color: $black;
    }
  }
  .tabs{
    margin: 30px 0;
    position: relative;
    @media (max-width:768px){
      margin-bottom:0;
    }
    .slide-line{
      display: block;
      padding:0;
      margin:0;
      background: none $primary;
      position: absolute;
      height: 4px; 
      border-radius: 5px;
      z-index: 0;
      left: 43px;
      width: 8px;
      top: 21px;
    }
    ul{
      display: flex;
      justify-content:space-around;
      margin: 10px 0;
      li{
        display: block;
        transition: ease all .3s;
        color:$gray;
        cursor: pointer;
        font-size: 14px;
        &.active{
          transform: scale(1.3);
          color:$black;
          font-weight: bold;
        }
      }
    }
  }
  .products-wrapper{
    width: calc(100% + 40px);
    margin-left: -20px;
    position: relative;
    height: 100%;
    .slider{
      left:0;
      top:0;
      right:0;
      width: 100%;
      position: absolute;
      overflow: hidden;
      padding: 30px 0;
      .slick-list{padding:0 30% 0 0;}
      .card{
        z-index:2;
        //opacity:0;
        display: inline-block;
        background-color: $white;
        border-radius: 20px;
        border: none;
        transition: ease all .3s;
        margin: 0 15px;
        position: relative;
        &:focus{
          box-shadow: none;
          border: none;
          outline: none;
        }
        .calories{
          position: absolute;
          left: 15px;
          top: 15px;
          cursor: pointer;
          
          vertical-align:middle;
          .icon{
            vertical-align:middle;
            svg{
              width: 20px;
              height: 20px;
            }
          }
          .text{
            font-size: 12px;
            color: $gray;
            line-height: 20px;
            vertical-align:middle;
          }
        }
        .loved{
          position: absolute;
          right: 15px;
          top: 15px;
          cursor: pointer;
          svg{
            fill:$gray;
          }
        }
        .card-img-top{
          pointer-events: none;
          width: 150px;
          height: 150px;
          margin: 30px auto;
          margin-top: 60px;
          display: block;
          border-radius: 100%;
          overflow: hidden;
          border:8px solid white;
          box-shadow: 0 5px 20px rgba(0,0,0,.1),5px 3px 15px #f7e3ce;
        }
        .card-body{
          padding: 0 10px;
          .card-title{
            color: $black;
            font-weight: 200;
            font-size: 22px;
            margin:0;
          }
          .card-text{
            margin-top: 5px;
            color: $gray;
            font-size: 13px;
            font-weight: 200;
          }
          .card-price{
            margin-top: 5px;
            color: $black;
            font-size: 23px;
            font-weight: 400;
            margin-top: 20px;
          }
          .btn{
            float: right;
            padding:0;
            height: 40px;
            width: 40px;
            line-height: 40px;
            border-radius: 100%;
            box-shadow: 3px 5px 20px rgba(0,0,0,.1);
          }
        }
      }
    }
  }
}

.dribbble {
    position: fixed;
    display: block;
    right: 20px;
    bottom: 20px;
    img {
        display: block;
        height: 28px;
    }
}
.dev{
  position: fixed;
  top:0;
  left:0;
  padding: 1em;
  background-color: white;
}

//IN PROGRESS

/* Please ❤ this if you like it! */
/* Follow Me https://codepen.io/designfenix */
var pizzaApp = {
  $filterElement : $('.tabs li'),
  $slider : $('.slider'),
  $loved: $('.card .loved'),
  showSliderFilter: function(){
    var $this = $(this),
      offset = $this.offset(),
      timeLineTab = new TimelineMax(),
      timeLineSlider = new TimelineMax(),
      filter = $this.attr('data-filter'),
      offsetBody = $('.tabs').offset();
    if(!$(this).hasClass('active')){
          $('.tabs li').removeClass('active');
          $this.addClass('active');
          timeLineSlider.to($('.slider .card'),0, {
            rotateY: '90deg',
            zIndex:-1,
            ease:Power3.easeInOut
          },'hide').to($('.slider'), .2, {
            zIndex:-1,
            ease:Power3.easeInOut
          },'hide').to($('.slider[data-filter="'+filter+'"] .card'), .2, {
            rotateY: 0,
            zIndex:1,
            ease:Power3.easeInOut
          },'show').to($('.slider[data-filter="'+filter+'"]'), .2, {
            zIndex:1,
            ease:Power3.easeInOut
          },'show');
      
      
          timeLineTab.to($('.tabs .slide-line'), .3, {
            width: '15px',
            left: ($this.position().left+($this.width()/2)-5)+'px',
            ease:Power3.easeInOut
          }).to($('.tabs .slide-line'), .1, {
            width: '8px',
            ease:Power3.easeInOut
          });
          return false;
      }
  },
  setSliders: function(){
    this.$slider.slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      infinite: false,
      arrows: false,
      slide: '.card'
    });
    this.sliderAnimation();
  },
  loveAnimation: function(){
    var svg = $('.card .loved svg');
    if(!svg.hasClass('active')){
      TweenMax.to( svg , .2, {
        fill: '#F44336',
        ease: Power3.easeOut
      });
      svg.addClass('active');
    }else{
      TweenMax.to( svg , .2, {
        fill: '#aaa',
        ease: Power3.easeOut
      });
      svg.removeClass('active');
    }
  },
  sliderAnimation: function(){
    this.$slider.on('swipe', function(event, slick, direction){
      var timeLinePizza = new TimelineMax(),
          rotationGrad = (direction=='left'?'-=40':'+=40');
        console.log(slick);
      timeLinePizza.to($('.card .pizza'), .5, {rotation: rotationGrad, ease:Power1.easeInOut});
    });
  },
  bindEvents: function(){
    var _this = this;
    _this.$filterElement.on('click',_this.showSliderFilter);
    _this.$filterElement.eq(0).click();
    _this.$loved.on('click',_this.loveAnimation);
  },
  init: function(){
    this.bindEvents();
    this.setSliders();
  },
};
$(document).ready(function(){
  pizzaApp.init();
});
$('.slider .card').mousedown(function() {
  TweenMax.to( $(this) , .2, {
    scale: .95,
    ease: Power3.easeInOut,
  });
});
$('.slider .card').mouseup(function() {
  TweenMax.to( $(this) , .2, {
    scale: 1,
    ease: Power3.easeInOut,
  });
});
document.addEventListener("DOMContentLoaded", function(event) { 
    $('.slider .card').on("touchstart", function(){
      TweenMax.to( $(this) , .2, {
        scale: .95,
        ease: Power3.easeInOut,
      });
    });
    $('.slider .card').on("touchend", function(){
      TweenMax.to( $(this) , .2, {
        scale: 1,
        ease: Power3.easeInOut,
      });
    });
});