Fall blends lander
How do I make an fall blends lander?
What is a fall blends lander? How do you make a fall blends lander? This script and codes were developed by Lahvjal on 24 December 2022, Saturday.
Fall blends lander - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>fall blends lander</title>
</head>
<body> <style> .headzo { width: 100%; height: auto; padding: 80px 0; background-color: grey; display: flex; justify-content: center; background-image: url(https://cdn.rockymountainoils.com/media/wysiwyg/fallblends_land_headerBG.jpg); background-size: cover; position: relative; } .containzz { width: 1200px; height: 100%; /* background-color: rgba(0,0,0,0.2); */ display: flex; align-items: center; justify-content: center; flex-direction: column; } .titlecont { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; /* background: pink; */ } .titlecont > img {width: 100%; margin-left: -86px;} .headsubzo { text-align: center; font-size: 38px; width: 500px; font-weight: 100; margin-top: -80px; } .intro_paraz { width: 60%; text-align: center; font-size: 20px; line-height: 34px; margin-top: 20px; } .contentbodyoz1 { height: auto; width: 100%; background: linear-gradient(#253447, #253447, #253447, #253447, #253447, transparent); padding-top: 60px; padding-bottom: 190px; position: relative; z-index: 1; } .sectorz { width: 100%; height: 400px; display: flex; } .prod_sect { width: 60%; height: 100%; background-image: url(https://cdn.rockymountainoils.com/media/wysiwyg/fallblends_redPaint1.png); background-position: right; background-repeat: no-repeat; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; } .xtra_inf { width: 370px; margin-left: 50px; margin-right: 50px; color: rgba(255, 255, 255, 0.5); line-height: 30px; font-size: 16px; font-style: italic; } .prod_desczz { text-align: right; font-size: 20px; line-height: 30px; color: white; width: 400px; } .prod_titlez { font-size: 40px; color: white; font-weight: 900; line-height: 55px; } .sectorz2 { width: 100%; height: 400px; display: flex; justify-content: flex-end; position: relative; } .prod_sect2 { width: 60%; height: 100%; background-image: url(https://cdn.rockymountainoils.com/media/wysiwyg/fallblends_greenPaint.png); background-position: left; background-repeat: no-repeat; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .xtra_inf2 { width: 370px; text-align: center; margin-left: 50px; margin-right: 50px; color: rgba(255, 255, 255, 0.5); line-height: 30px; font-size: 16px; font-style: italic; } .prod_desczz2 { text-align: left; font-size: 20px; line-height: 30px; color: white; width: 400px; } .prod_titlez1 { font-size: 40px; color: white; font-weight: 300; line-height: 55px; position: relative; text-align: center; } .prod_titlez1 > img {position: absolute; right: -129px; top: 22px; height: 150px;} .contentbodyoz { width: 100%; height: 1000px; background-color: #253447; margin-top: -241px; /** -webkit-mask-image: -webkit-gradient(linear, left 15%, left top, from(rgba(37,52,71,1)), to(rgba(37,52,71,0))); **/ background-image: url(https://cdn.rockymountainoils.com/media/wysiwyg/fallblends_land_bodyBG.jpg); background-size: cover; background-repeat: no-repeat; background-position: bottom; padding-top: 195px; display: flex; align-items: center; flex-direction: column; position: relative; z-index: 0; } button.btn-cart.btn-pill { background-color: white; color: #333 !important; border-radius: 11px !important; padding: 14px 20px !important; font-size: 15px; width: 100%; min-width: 300px; text-transform: none; font-weight: normal; margin: auto; margin-left: 0px; transition: all ease 300ms; } button.btn-cart.btn-pill:hover { text-decoration: none !important; background-color: #BB85B9 !important; color: white !important; border: solid 0px #BB85B9; } button.bt-left { margin: inherit !important; } .buy_buttonzo { text-decoration: none; background-color: white; color: #333; line-height: 90px; padding: 15px 40px; border-radius: 10px; } #product-add-to-cart-706 { margin-top: 50px; } @media screen and (max-width: 1024px) and (min-width: 769px) { .coffeeez, .leafzo2, .pumpkinzzo, .leafzo1 {display: none;} .headsubzo {margin-top: -40px; width: 80%; text-align: left;} .headzo {background-position-x: 78%;} .intro_paraz {text-align: left;} .titlecont {align-items: left; padding-left: 70px;} .titlecont > img {margin-left: -62px;} .sectorz {height: auto; flex-direction: column;} .prod_sect {width: 100%; flex-direction: column; justify-content: center;} .prod_sect > img {order: -1;} .prod_desczz, .prod_desczz2 {text-align: center; width: auto;} .sectorz2 {height: auto; flex-direction: column-reverse;} .prod_sect2 {flex-direction: column; width: 100%; margin-top: 100px;} .xtra_inf {text-align: center;} .prod_titlez1 > img {right: 2px; top: 47px; height: 98px;} } @media screen and (max-width: 768px) and (min-width: 426px) { .coffeeez, .leafzo2, .pumpkinzzo, .leafzo1 {display: none;} .headsubzo {margin-top: -40px; width: 80%; text-align: left;} .headzo {background-position-x: 78%;} .intro_paraz {text-align: left;} .titlecont {align-items: left; padding-left: 70px;} .titlecont > img {margin-left: -62px;} .sectorz {height: auto; flex-direction: column;} .prod_sect {width: 100%; flex-direction: column; justify-content: center;height: auto;} .prod_sect > img {order: -1;} .prod_desczz, .prod_desczz2 {text-align: center; width: auto;} .sectorz2 {height: auto; flex-direction: column-reverse;} .prod_sect2 {flex-direction: column; width: 100%; margin-top: 100px;height: auto;} .xtra_inf, .xtra_inf2 {text-align: center; width: 100%; margin: 0; padding: 0 7px;} .prod_titlez1 > img {display: none;} .prod_titlez {text-align: center;} .contentbodyoz {padding-top: 250px;} #product-add-to-cart-706 {width: 100%;} .contentbodyoz1 {background: linear-gradient(#253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, transparent); padding-bottom: 20px;} } @media screen and (max-width: 425px) and (min-width: 320px) { .coffeeez, .leafzo2, .pumpkinzzo, .leafzo1 {display: none;} .headsubzo {margin-top: -10px; width: 100%; text-align: center;} .headzo {background-position-x: 68%; padding: 40px 0;} .intro_paraz {text-align: center; width: 100%;} .titlecont {align-items: left; padding-left: 0px;} .titlecont > img {margin-left: 0px;} .sectorz {height: auto; flex-direction: column;} .prod_sect {width: 100%; flex-direction: column; justify-content: center; height: auto;} .prod_sect > img {order: -1;} .prod_desczz, .prod_desczz2 {text-align: center; width: auto; padding: 0 10px;} .sectorz2 {height: auto; flex-direction: column-reverse;} .prod_sect2 {flex-direction: column; width: 100%; margin-top: 100px; height: auto;} .xtra_inf, .xtra_inf2 {text-align: center; width: 100%; margin: 0; padding: 0 7px;} .prod_titlez1 > img {display: none;} .prod_titlez {text-align: center;} .contentbodyoz {padding-top: 100px; margin-top: -100px;} #product-add-to-cart-706 {width: 100%;} .contentbodyoz1 {background: linear-gradient(#253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, #253447, transparent); padding-bottom: 20px;} }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script>jQuery.noConflict();</script>
<div class="headzo"> <img src="https://cdn.rockymountainoils.com/media/wysiwyg/fallblends_coffee.png" alt="" class="coffeeez" style="position: absolute; left: 0px; top: 1834px; z-index: 500; -webkit-filter: blur(6px); -moz-filter: blur(6px); -o-filter: blur(6px); -ms-filter: blur(6px); filter: blur(6px);"> <img src="https://cdn.rockymountainoils.com/media/wysiwyg/fallblends_topLeaves.png" alt="" class="leafzo2" style="position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 0px; height: 100px; z-index: 300; -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px);"> <img src="https://cdn.rockymountainoils.com/media/wysiwyg/fallblends_Pumpkin.png" alt="" class="pumpkinzzo" style="position: absolute; left: -20px; top: 300px; height: 200px; z-index: 300; -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px);"> <img src="https://cdn.rockymountainoils.com/media/wysiwyg/fallblends_yellowLeaf_turn.png" alt="" class="pumpkinzzo" style="position: absolute; right: 0px; top: 0px; height: 300px; z-index: 300; -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px);"> <img src="https://cdn.rockymountainoils.com/media/wysiwyg/fallblends_Pumpkinhalf.png" alt="" class="leafzo1" style="position: absolute; right: 0px; top: 500px; height: 400px; z-index: 300; -webkit-filter: blur(6px); -moz-filter: blur(6px); -o-filter: blur(6px); -ms-filter: blur(6px); filter: blur(6px);"> <img src="https://cdn.rockymountainoils.com/media/wysiwyg/fallblends_redLeaf.png" alt="" class="leafzo1" style="position: absolute; left: -40px; top: 900px; height: 400px; z-index: 300; -webkit-filter: blur(6px); -moz-filter: blur(6px); -o-filter: blur(6px); -ms-filter: blur(6px); filter: blur(6px);"> <div class="container containzz"> <div class="titlecont"> <img src="https://cdn.rockymountainoils.com/media/wysiwyg/fallblends_land_title.png"> <span class="headsubzo">Fall In Love with these Limited Time Autumn Blends</span> <p class="intro_paraz">Immerse yourself in the enticing aromas of our yummy fall blends, available for a limited time only. Imagine fall leaves under your feet, the cool crisp air, being wrapped in a blanket and drinking a warm, spicy latte. Our exclusive blends evoke feelings of Fall in a whole new way.</p> </div> </div>
</div>
<div class="contentbodyoz1"> <div class="pumpkinz sectorz"> <div class="prod_sect"> <div class="desc_btnz"> <p class="prod_desczz"><span class="prod_titlez">Pumpkin Spice Latte</span><br>Pumpkin Spice Latte blend includes an inviting combination of Coffee, Cinnamon Bark, Orange, Clove Bud, Vanilla, Balsam of Peru to offer a warm, spicy aroma.<br><span class="prod_titlez">$24.95</span></p> <form action="{{block type='core/template' template='add_to_cart_generator/output.phtml' product_id='695'}}" method="post" id="product-add-to-cart-695" style="justify-content: flex-end; display: flex;"> <input type="hidden" name="qty" value="1" tabindex="0"> <button type="button" href="#" style="align-items: flex-end;" class="btn btn-primary btn-block btn-cart btn-pill click-through" data-loading-text="<i class='mdi mdi-rotate-left mdi-spin'></i> Adding... " onclick="Cart.addLight(this, this.form, null, '#product-img-695', true)" tabindex="0" style=""> <span class="visible-sm visible-xs">Add To Cart</span> <span class="hidden-sm hidden-xs">Add To Cart</span> </button> </form> </div> <img src="https://cdn.rockymountainoils.com/media/wysiwyg/fallblends_pumpkinSpice_prod.png" style="height: 315px; margin-left: 20px;"> </div> <div class="xtra_inf"> <p class="xtra_inf_graph"><img src="https://cdn.rockymountainoils.com/media/wysiwyg/fallblends_vanillaBean.png" style="height: 70px; margin-bottom: 10px; margin-top: 30px;"><br>Did you know Vanilla essential oil has become increasingly difficult to source? Rocky Mountain Oils is proud to offer premium Vanilla essential oil in our Pumpkin Spice Latte blend. </p> </div> </div> <div class="pumpkinz sectorz2"> <div class="xtra_inf2"><br><br> <p class="xtra_inf_graph">A smooth cup of coffee warms the soul and awakens the mind. Our Peppermint Mocha essential oil blend is like coffee in a bottle! Diffuse the rich aroma of mocha and peppermint in your home or office and create your own coffee shop experience.</p> </div> <div class="prod_sect2"> <img src="https://cdn.rockymountainoils.com/media/wysiwyg/fallblends_PepMocha_prod.png" style="height: 315px; margin-right: 20px;"> <div class="desc_btnz"> <p class="prod_desczz2"><span class="prod_titlez">Peppermint Mocha</span><br>Reminiscent of a favorite holiday drink, Peppermint Mocha blend brings together Peppermint, Balsam of Peru and Coffee to delight the senses. Offering a minty, slightly chocolate scent with hints of coffee.<br><span class="prod_titlez">$19.95</span></p> <form action="{{block type='core/template' template='add_to_cart_generator/output.phtml' product_id='693'}}" method="post" id="product-add-to-cart-693"> <input type="hidden" name="qty" value="1" tabindex="0"> <button type="button" href="#" class="btn btn-primary btn-block btn-cart btn-pill click-through" data-loading-text="<i class='mdi mdi-rotate-left mdi-spin'></i> Adding... " onclick="Cart.addLight(this, this.form, null, '#product-img-693', true)" tabindex="0" style=""> <span class="visible-sm visible-xs">Add To Cart</span> <span class="hidden-sm hidden-xs">Add To Cart</span> </button> </form> </div> </div> </div>
</div>
<div class="contentbodyoz"> <span class="prod_titlez">TWO is BETTER than ONE!</span><br> <span class="prod_titlez1">Buy both of our Fall Blends for <a style="color: white; text-decoration: line-through; text-decoration-color: red; ">$44.90</a> <a style="font-size: 45px; font-weight: 900; color: white;">$35.95</a><img src="https://cdn.rockymountainoils.com/media/wysiwyg/fallblends_saveBadge.png" style=""></span> <form action="{{block type='core/template' template='add_to_cart_generator/output.phtml' product_id='706'}}" method="post" style="" id="product-add-to-cart-706"> <input type="hidden" name="qty" value="1" tabindex="0"> <button type="button" href="#" class="btn btn-primary btn-block btn-cart btn-pill click-through" data-loading-text="<i class='mdi mdi-rotate-left mdi-spin'></i> Adding... " onclick="Cart.addLight(this, this.form, null, '#product-img-706', true)" tabindex="0" style=""> <span class="visible-sm visible-xs">Add To Cart</span> <span class="hidden-sm hidden-xs">Add To Cart</span> </button> </form>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> <script type="text/javascript"> jQuery(window).scroll(function(){ var wScroll = jQuery(this).scrollTop(); jQuery('.coffeeez').css({ 'transform' : 'translate(0px, -'+ wScroll /15 +'%)' }); jQuery('.pumpkinzzo').css({ 'transform' : 'translate(0px, -'+ wScroll /13 +'%)' }); jQuery('.leafzo1').css({ 'transform' : 'translate(0px, -'+ wScroll /4 +'%)' }); jQuery('.leafzo2').css({ 'transform' : 'translate(0px, '+ wScroll /3 +'%)' }); }); </script>
</body>
</html>
![Fall blends lander - Script Codes](http://shots.codepen.io/lahvjal/pen/vJqgbb-512.jpg)
Developer | Lahvjal |
Username | lahvjal |
Uploaded | December 24, 2022 |
Rating | 3 |
Size | 4,583 Kb |
Views | 8,096 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
PNT Page | 4,697 Kb |
Affiliate Page | 0 Kb |
Paragraphs - RMO | 2,099 Kb |
Run script before page load | 1,453 Kb |
RMO-UI | 6,539 Kb |
Club Oilty Lander | 4,283 Kb |
Heart button | 2,336 Kb |
RMO Live Style Guide | 22,749 Kb |
Product-Carousel items | 3,595 Kb |
Portfolio layout 1 No-Slick | 3,235 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
3D Text in Sass | Bookcasey | 2,766 Kb |
Subtle site navigation with description | Necks | 3,206 Kb |
Gears | Synvox | 3,278 Kb |
Degree Picker | Idered | 4,307 Kb |
Map Controls | Iliadraznin | 3,721 Kb |
RRC wrapSwitch | Pshrmn | 2,922 Kb |
Mandelbrot Fractal | _Billy_Brown | 2,706 Kb |
Electric worm | Jeffibacache | 2,377 Kb |
CSS Bot Confusion | Jpod | 3,456 Kb |
Using Flickr API | MoyArt | 6,761 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!