Tayp Food - Food Feature Slider GSAP
Tue Mar 15 2022 03:23:44 GMT+0000 (Coordinated Universal Time)
Saved by @alyssietayp
<section id="foodfeature-slider" class="sldie-scrollContainer"> <div class="horizontal_slider"> <div class="horizontal_slider_list"> <div class="horizontal_slider_item"> <div class="ff-item container"> <div class="row"> <div class="col-xs-12 col-md-5 p0"> <h2>Everything you will ever need?<br>to deliver food to your customers.</h2> <img src="/wp-content/uploads/2022/02/Macbook-1.png" alt="item" class="ff-img-mobile"> <h3>Your<br>Brand.</h3> <p>1. It’s your website, so you control it: from content, to design, right down to where your Twitter icon sits.</p> </div> <img src="/wp-content/uploads/2022/02/Macbook-1.png" alt="item" class="absolute-right-img"> </div> </div> </div> <div class="horizontal_slider_item"> <div class="ff-item container"> <div class="row"> <div class="col-xs-12 col-md-5 p0"> <h2>Everything you will ever need?<br>to deliver food to your customers.</h2> <img src="/wp-content/uploads/2022/01/daily-reports.png" alt="item" class="ff-img-mobile"> <h3>Manage<br>Realtime.</h3> <p>1. It’s your website, so you control it: from content, to design, right down to where your Twitter icon sits.</p> </div> <img src="/wp-content/uploads/2022/01/daily-reports.png" alt="item" class="absolute-right-img"> </div> </div> </div> <div class="horizontal_slider_item"> <div class="ff-item container"> <div class="row"> <div class="col-xs-12 col-md-5 p0"> <h2>Everything you will ever need?<br>to deliver food to your customers.</h2> <img src="/wp-content/uploads/2022/01/personalized-website.png" alt="item" class="ff-img-mobile"> <h3>Direct<br>Payments.</h3> <p>1. It’s your website, so you control it: from content, to design, right down to where your Twitter icon sits.</p> </div> <img src="/wp-content/uploads/2022/01/personalized-website.png" alt="item" class="absolute-right-img"> </div> </div> </div> <div class="horizontal_slider_item"> <div class="ff-item container"> <div class="row"> <div class="col-xs-12 col-md-5 p0"> <h2>Everything you will ever need?<br>to deliver food to your customers.</h2> <img src="/wp-content/uploads/2022/01/personalized-website.png" alt="item" class="ff-img-mobile"> <h3>Direct<br>Payments.</h3> <p>1. It’s your website, so you control it: from content, to design, right down to where your Twitter icon sits.</p> </div> <img src="/wp-content/uploads/2022/01/personalized-website.png" alt="item" class="absolute-right-img"> </div> </div> </div> <div class="horizontal_slider_item"> <div class="ff-item container"> <div class="row"> <div class="col-xs-12 col-md-5 p0"> <h2>Everything you will ever need?<br>to deliver food to your customers.</h2> <img src="/wp-content/uploads/2022/01/personalized-website.png" alt="item" class="ff-img-mobile"> <h3>Direct<br>Payments.</h3> <p>1. It’s your website, so you control it: from content, to design, right down to where your Twitter icon sits.</p> </div> <img src="/wp-content/uploads/2022/01/personalized-website.png" alt="item" class="absolute-right-img"> </div> </div> </div> </div> </div> </section> /*** Food Features Slider GSAP***/ #foodfeature-slider{ background: #091A8D; min-height: 100vh; position: relative; padding: 0; overflow: hidden; } #foodfeature-slider h2{ font-family: 'Styrene A Bold', sans-serif; font-size: 22px; text-transform: none; font-weight: 700; margin: 0; color: #EFF7FE; margin-bottom: 20px; z-index: 2; position: relative; } #foodfeature-slider h3{ color: #EFF7FE; font-size: 56px; font-family: 'Styrene A Bold', sans-serif; margin-bottom: 57px; text-transform: unset; } #foodfeature-slider p { padding-top: 0px; margin-top: 15px; width: 200px; color: #EFF7FE; line-height: 2.5; font-family: 'Styrene A Web', sans-serif; } .horizontal_slider_list{ width: 100%; display: flex; padding: 0; } .horizontal_slider_item{ flex: 0 0 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background: #091a8d; position: relative; } .scroll-slider{ overflow: hidden; } .absolute-right-img { position: absolute; right: 0; max-height: 80vh; max-width: 60vw; } .ff-img-mobile{ display: none; }
Comments