Tayp Food - July 13, 2022
Wed Jul 13 2022 12:22:12 GMT+0000 (Coordinated Universal Time)
Saved by @alyssietayp
<?php
/*
Template Name: Food
*/
?>
<?php get_header(); ?>
<style>
.bgdesignmain.custom-html-container {
display: block !important;
}
</style>
<section id="food-header">
<div class="container">
<div class="food-header">
<div class="text-content">
<div class="">
<img src="/wp-content/uploads/2022/01/food-logo.png" alt="Tayp Food" class="taypfood-logo">
<h1>Make your food <br>business operate <br>smooth and fast online.</h1>
<a href="/get-started" class="page-scroll btn btn-xl get-started">Get Started</a>
</div>
</div>
</div>
</div>
<img src="/wp-content/uploads/2022/01/food-hero.png" class="header-img">
</section>
<section id="food-features">
<div class="container">
<div class="food-features wow fadeInUp">
<h2>Everything you will ever need?<br>to deliver food to your customers.</h2>
</div>
<div class="ff-imageslider hide-indicator">
<ul id="foodFeaturesSlider3" class="cs-hidden">
<li>
<div class="ff-item">
<img src="/wp-content/uploads/2022/02/Macbook-1.png" alt="item">
</div>
</li>
<li>
<div class="ff-item">
<img src="/wp-content/uploads/2022/01/daily-reports.png" alt="item">
</div>
</li>
<li>
<div class="ff-item">
<img src="/wp-content/uploads/2022/01/personalized-website.png" alt="item">
</div>
</li>
<li>
<div class="ff-item">
<img src="/wp-content/uploads/2022/01/recieve-payment.png" alt="item">
</div>
</li>
<li>
<div class="ff-item">
<img src="/wp-content/uploads/2022/01/digitalmenu.png" alt="item">
</div>
</li>
</ul>
</div>
<div class="ff-slider wow fadeInRight">
<ul id="foodFeaturesSlider" class="cs-hidden">
<li>
<div class="ff-item">
<h3>Your<br>Brand.</h3>
</div>
</li>
<li>
<div class="ff-item">
<h3>Manage<br>Realtime.</h3>
</div>
</li>
<li>
<div class="ff-item">
<h3>Direct<br>Payments.</h3>
</div>
</li>
<li>
<div class="ff-item">
<h3>Your<br>Brand.</h3>
</div>
</li>
<li>
<div class="ff-item">
<h3>Manage<br>Realtime.</h3>
</div>
</li>
</ul>
</div>
<div class="textslider hide-indicator wow fadeInRight">
<ul id="foodFeaturesSlider2" class="cs-hidden">
<li>
<div class="ff-item">
<p>1. It’s your website, so you control it: from content, to design, right down to where your Twitter icon sits.</p>
</div>
</li>
<li>
<div class="ff-item">
<p>2. It’s your website, so you control it: from content, to design, right down to where your Twitter icon sits. It’s your website, so you control it: from content, to design, right down to where your Twitter icon sits.</p>
</div>
</li>
<li>
<div class="ff-item">
<p>3. It’s your website, so you control it: from content, to design, right down to where your Twitter icon sits.</p>
</div>
</li>
<li>
<div class="ff-item">
<p>4. It’s your website, so you control it: from content, to design, right down to where your Twitter icon sits.</p>
</div>
</li>
<li>
<div class="ff-item">
<p>5. It’s your website, so you control it: from content, to design, right down to where your Twitter icon sits.</p>
</div>
</li>
</ul>
</div>
</div>
</section>
<section id="food-payment">
<div class="container">
<div class="food-payment">
<div class="row">
<div class="col-sm-12 col-md-4 payment-title">
<h2>Seamlessly Integrated</h2>
</div>
<div class="col-sm-12 col-md-4 payment-container">
<p>with the hottest payment options</p>
<div class="row payment-row wow fadeInRight">
<div class="col-xs-4 col-md-4">
<img src="/wp-content/uploads/2022/03/visa.png">
</div>
<div class="col-xs-4 col-md-4">
<img src="/wp-content/uploads/2022/03/mastercard.png">
</div>
<div class="col-xs-4 col-md-4">
<img src="/wp-content/uploads/2022/03/americanexpress.png">
</div>
<div class="col-xs-4 col-md-4">
<img src="/wp-content/uploads/2022/03/gcash.png">
</div>
<div class="col-xs-4 col-md-4">
<img src="/wp-content/uploads/2022/03/paymaya.png">
</div>
<div class="col-xs-4 col-md-4">
<img src="/wp-content/uploads/2022/03/grabpay.png">
</div>
</div>
</div>
<div class="col-sm-12 col-md-4 payment-container">
<p>with instant delivery partners</p>
<div class="row payment-row wow fadeInRight">
<div class="col-xs-4 col-md-4">
<img src="/wp-content/uploads/2022/03/grab.png">
</div>
</div>
<div class="row payment-row wow fadeInRight">
<div class="col-xs-4 col-md-4">
<img src="/wp-content/uploads/2022/03/lalamove.png">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="food-package">
<div class="container">
<div class="food-package">
<div class="row">
<div class="col-xs-12 col-md-4 wow fadeInRight">
<h2>A <span>Win-Win</span><br>Situation</h2>
</div>
<div class="col-xs-12 col-md-8 wow fadeInLeft">
<div class="row">
<div class="col-xs-6 col-sm-3 px">
<div class="foodpackage-item">
<h3>Zero<br><span>Fees</span></h3>
<hr>
<p>More room to grow.</p>
</div>
</div>
<div class="col-xs-6 col-sm-3 px">
<div class="foodpackage-item">
<h3>100%<br><span>Control</span></h3>
<hr>
<p>Your rules only.</p>
</div>
</div>
<div class="col-xs-6 col-sm-3 px">
<div class="foodpackage-item">
<h3>No<br><span>Competition</span></h3>
<hr>
<p>It's all about you.</p>
</div>
</div>
<div class="col-xs-6 col-sm-3 px">
<div class="foodpackage-item">
<h3>+10~<br><span>Integrations</span></h3>
<hr>
<p>Delivery in payment.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="food-inquiry">
<div class="container">
<div class="food-inquiry">
<div class="food-inquiry-item wow fadeInRight">
<p>Haven't made up your mind?</p>
</div>
<div class="food-inquiry-item wow fadeInLeft">
<a href="/get-started" class="page-scroll btn btn-xl get-started">
<img src="/wp-content/uploads/2022/01/email-letter-inbox-send.png" class="food-envelop">
Send inquiry
</a>
</div>
</div>
</div>
</section>
<section id="food-howitwork">
<div id="foodHowitworkCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="food-howitwork-bg wow fadeInUp">
<div class="container">
<div class="food-howitwork">
<div class="food-howitwork-title">
<h2>How does it all work?</h2>
<p>all readily made to serve you and your customers.</p>
</div>
</div>
</div>
<div class="howitworks-scroll">
<div class="container">
<div class="food-howitwork">
<div class="row">
<div class="col-sm-12 col-md-5">
<div class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li class="ci-item active" data-target="#foodHowitworkCarousel" data-slide-to="0">
<h3>Personalized website</h3>
<p class="ci-desc">real-time data, fast & secure transactions
made truly better at all times. keep working as normal
even on peak hours, let Tayp Food take care of the payments.</p>
</li>
<li class="ci-item" data-target="#foodHowitworkCarousel" data-slide-to="1">
<h3>Receive payment immediately</h3>
<p class="ci-desc">real-time data, fast & secure transactions
made truly better at all times. keep working as normal
even on peak hours, let Tayp Food take care of the payments.</p>
</li>
<li class="ci-item" data-target="#foodHowitworkCarousel" data-slide-to="2">
<h3>Delivery app integration</h3>
<p class="ci-desc">real-time data, fast & secure transactions
made truly better at all times. keep working as normal
even on peak hours, let Tayp Food take care of the payments.</p>
</li>
<li class="ci-item" data-target="#foodHowitworkCarousel" data-slide-to="3">
<h3>Complementary PoS</h3>
<p class="ci-desc">real-time data, fast & secure transactions
made truly better at all times. keep working as normal
even on peak hours, let Tayp Food take care of the payments.</p>
</li>
<li class="ci-item" data-target="#foodHowitworkCarousel" data-slide-to="4">
<h3>Reward staff with tips</h3>
<p class="ci-desc">real-time data, fast & secure transactions
made truly better at all times. keep working as normal
even on peak hours, let Tayp Food take care of the payments.</p>
</li>
<li class="ci-item" data-target="#foodHowitworkCarousel" data-slide-to="5">
<h3>Dining in digital menu</h3>
<p class="ci-desc">real-time data, fast & secure transactions
made truly better at all times. keep working as normal
even on peak hours, let Tayp Food take care of the payments.</p>
</li>
<li class="ci-item" data-target="#foodHowitworkCarousel" data-slide-to="6">
<h3>Easily manage</h3>
<p class="ci-desc">real-time data, fast & secure transactions
made truly better at all times. keep working as normal
even on peak hours, let Tayp Food take care of the payments.</p>
</li>
<li class="ci-item" data-target="#foodHowitworkCarousel" data-slide-to="7">
<h3>Daily reports</h3>
<p class="ci-desc">real-time data, fast & secure transactions
made truly better at all times. keep working as normal
even on peak hours, let Tayp Food take care of the payments.</p>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hdiaw-images">
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2022/01/personalized-website.png" alt="personalized-website" class="img-responsive">
</div>
<div class="item">
<img src="/wp-content/uploads/2022/01/recieve-payment.png" alt="recieve-payment" class="img-responsive">
</div>
<div class="item">
<img src="/wp-content/uploads/2022/01/deliveryapp.png" alt="deliveryapp" class="img-responsive">
</div>
<div class="item">
<img src="/wp-content/uploads/2022/01/pos.png" alt="pos" class="img-responsive">
</div>
<div class="item">
<img src="/wp-content/uploads/2022/01/reward-staff.png" alt="reward-staff" class="img-responsive">
</div>
<div class="item">
<img src="/wp-content/uploads/2022/01/digitalmenu.png" alt="digitalmenu" class="img-responsive">
</div>
<div class="item">
<img src="/wp-content/uploads/2022/01/easily-manage.png" alt="easily-manage" class="img-responsive">
</div>
<div class="item">
<img src="/wp-content/uploads/2022/01/daily-reports.png" alt="daily-reports" class="img-responsive">
</div>
</div>
</div>
</div>
</section>
<style>
.howitworks-scroll {
height: 70vh;
overflow-y: auto;
overflow-x: hidden;
position: relative;
z-index: 1;
margin: 50px 0;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.howitworks-scroll::-webkit-scrollbar {
display: none;
}
#food-howitwork{
background-image: url('/wp-content/themes/Flex%20V4/img/dot-box.png');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-color: #091A8D;
padding: 0;
}
.food-howitwork-bg{
background-image: linear-gradient(#091A8D 50%, transparent);
padding: 50px 0;
}
#food-howitwork .hdiaw-images{
position: absolute;
top: 100px;
right: 0;
width: 50%;
z-index: 0;
}
#food-howitwork .food-howitwork{
padding: 0 50px;
}
#food-howitwork h2{
font-family: 'Styrene A Bold', sans-serif;
font-size: 56px;
text-transform: none;
margin: 0;
}
#food-howitwork h3{
font-family: 'Styrene A Web', sans-serif;
font-size: 22px;
text-transform: none;
font-weight: 400;
margin: 0;
}
#food-howitwork .food-howitwork-title p{
margin: 10px 0 0 0;
font-size: 12px;
}
#food-howitwork .food-howitwork-title{
align-items: center;
color: #EFF7FE;
margin: 25px 0 0 0;
}
#foodHowitworkCarousel .row{
display: flex;
flex-wrap: wrap;
align-items: center;
}
#foodHowitworkCarousel .ci-item{
background: transparent;
color: #EFF7FE;
border: 0;
border-left: 3px solid #23329a;
}
#foodHowitworkCarousel .carousel-indicators {
position: relative;
bottom: unset !important;
left: unset;
z-index: unset;
width: unset;
padding-left: 0;
margin-left: unset;
text-align: center;
list-style: none;
padding-top: 100px;
}
#foodHowitworkCarousel .carousel-indicators li {
border-radius: 0;
display: block;
width: unset;
height: unset;
margin: unset;
text-indent: unset;
text-align: left;
cursor: pointer;
background: transparent;
padding: 50px 0 40px 35px;
color: #23329a;
}
#foodHowitworkCarousel .carousel-indicators li p{
margin: 0;
}
#foodHowitworkCarousel .carousel-indicators li .ci-desc{
display: none;
font-family: 'Styrene A Web', sans-serif;
}
#foodHowitworkCarousel .carousel-indicators li.active{
border-left: 3px solid #EFF7FE;
background: transparent;
/* padding: 0 0 0 35px; */
color: #EFF7FE;
}
#foodHowitworkCarousel .carousel-indicators li.active .ci-desc{
display: block;
line-height: 2.5;
margin-top: 20px;
}
@media(max-width:767.98px){
#food-howitwork .food-howitwork-title {
display: block;
margin: 0 0 30px 0;
}
#food-howitwork h2 {
font-size: 36px;
margin: 0 0 15px 0;
}
#foodHowitworkCarousel .carousel-indicators li {
padding: 0px 0 10px 15px;
}
#food-howitwork h3 {
font-size: 16px;
}
#foodHowitworkCarousel .carousel-indicators li.active {
padding: 10px 25px 15px 15px;
}
#foodHowitworkCarousel .carousel-indicators li.active .ci-desc {
font-size: 12px;
line-height: 1.3;
margin-top: 10px;
}
#food-howitwork .food-howitwork {
padding: 0 25px;
}
#food-howitwork .hdiaw-images{
position: relative;
top: auto;
right: 0;
width: 80%;
left: 0;
z-index: 9;
margin: auto;
}
#foodHowitworkCarousel .carousel-indicators{
padding-top: 0;
}
.howitworks-scroll {
height: auto;
margin: 0px 0;
}
#food-package .foodpackage-item {
margin: 10px 5px;
}
#food-inquiry .food-inquiry-item {
padding: 0 10px;
}
}
</style>
<style>
.carousel-fade .carousel-inner .item {
opacity: 0;
transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
}
.carousel-fade .carousel-inner .item { ...; transition-duration: 0.3s}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
</style>
<script>
$(window).scroll(function(event){
var st = $(this).scrollTop();
$('.howitworks-scroll').bind('mousewheel', function(e) {
if(e.originalEvent.wheelDelta /120 > 0) {
if( $("#foodHowitworkCarousel .ci-item:first").hasClass("active") ) {
$('#foodHowitworkCarousel').off('mousewheel');
}else{
$("#foodHowitworkCarousel").carousel('prev');
}
}else {
if( $("#foodHowitworkCarousel .ci-item:last").hasClass("active") ) {
$('#foodHowitworkCarousel').off('mousewheel');
}else{
$("#foodHowitworkCarousel").carousel('next');
}
}
});
});
$('#foodHowitworkCarousel').carousel({
interval: 5000,
wrap: false
});
// Slider Scroll Trigger for "How it works"
// var lastScrollTop = 0;
// $(window).scroll(function(event){
// var st = $(this).scrollTop();
// $('#foodHowitworkCarousel').on('mousewheel', function(e) {
// if ( $(window).scrollTop() >= $('#foodHowitworkCarousel').offset().top - 170) {
// if(e.originalEvent.wheelDelta /120 > 0) {
//
//
// //$(this).carousel('prev');
// }else if ($("#foodHowitworkCarousel .ci-item:last").hasClass("active")) {
// e.stopPropagation();
// $('#foodHowitworkCarousel').off('mousewheel');
// }else {
// e.preventDefault();
// $(this).carousel('next');
// }
// }
// });
// });
</script>
<section id="food-build">
<div class="food-build wow fadeInUp">
<p class="">Looking to build a food delivery app?</p>
<a href="/get-started" class="page-scroll btn btn-xl get-started">
Schedule a meeting
</a>
</div>
</section>
<section id="food-inclussions">
<div class="overlay-bg">
<div class="inverted-blue-bg-overlay">
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="tab-title fadeInRight wow">
What's really<br>included?
</div>
<div class="tab-description fadeInRight wow">
Fill up our form and let's get down<br>to the nitty gritty.
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="fadeInUp wow fadeInLeft">
<a href="/get-started" class="page-scroll btn btn-xl get-started">Get Started</a>
</div>
</div>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>
<script>
$('#foodHowitworkCarousel').on('slid.bs.carousel', function (e) {
e.preventDefault();
var offTop = $(".ci-item.active").position().top - 100
$('.howitworks-scroll').scrollTop(offTop);
})
if ($(window).width() <= 767) {
$("#foodHowitworkCarousel .carousel-indicators").css('height', 'auto');
}else{
var howItWorkMenuHeight = $("#foodHowitworkCarousel .carousel-indicators").height() * 1.5;
$("#foodHowitworkCarousel .carousel-indicators").css('height', howItWorkMenuHeight);
}
$(window).resize(function() {
if ($(window).width() <= 767) {
$("#foodHowitworkCarousel .carousel-indicators").css('height', 'auto');
}
});
$('#foodHowitworkCarousel').carousel({
interval: false,
});
</script>
Comments