Last active
October 29, 2019 20:17
-
-
Save nishapanFFF/f804924717f0ba00e04c219e799257c6 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <meta name="viewport" content="initial-scale=1, maximum-scale=1"> | |
| <style> | |
| #main-container{width:100%;overflow-x:hidden;} | |
| #section1{width:100%;height:fit-content;background-color:#FEDAC9;text-align:center;margin:auto;} | |
| #section2 {width:100%;height:fit-content;background-color: #FFF;display:flex; padding:30px 40px;} | |
| #section3 {width:100%; background-color: #FEDAC9;margin:auto;text-align:center;padding-bottom:45px;} | |
| #section4 {width:100%;background-color: #fff;display:flex;} | |
| #section1 #edit-banner-img {width:550px;margin:-40px;} | |
| #section1 #edit-banner-title{color: #000000;font-family: Montserrat;font-size: 22px; | |
| font-weight: 600;padding-top:40px;line-height: 26px;} | |
| #section1 #edit-banner-title2{color: #000000;font-family: Montserrat;font-size: 19px;padding-bottom:20px;letter-spacing: 1px;} | |
| .edit-banner-upgrade-btn { background-color: #000000;color: #FFFFFF;font-family: Montserrat;font-size: 14px;font-weight: 500;margin: auto; | |
| padding: 10px 24px;margin-bottom:40px;display: inline-block;cursor: pointer;cursor: hand;} | |
| #section2 #what-is-edit-sale-img {padding:20px;-webkit-flex: 0.8;-ms-flex: 0.8; flex: 0.8;} | |
| #section2 #what-is-edit-sale-img img {padding-right:50px;} | |
| #section2 #what-is-edit-sale {display:block;text-align:left;padding-top:80px;-webkit-flex: 1;-ms-flex: 1; flex: 1;} | |
| #section2 #what-is-edit-sale-title {font-family: Montserrat;font-size: 30px;font-weight:500; padding:30px 0px 15px 0px;} | |
| #section2 #what-is-edit-sale-description {font-family: Muli;font-size: 14px; | |
| font-weight: 400;line-height: 24px;padding-right:150px} | |
| #section2 #what-is-edit-sale-btn{margin: inherit;margin-top: 20px;} | |
| #section3 #upgrade-select-items {display:flex;} | |
| #section3 #upgrade-select-title {font-family: Montserrat;font-size: 30px;font-weight: 500;line-height: 36px;padding-top:50px;padding-bottom:20px;} | |
| #section3 .select-item {display:block;text-align:center;margin:auto} | |
| #section3 .select-item img{ width:140px;} | |
| #section3 .img-customize {margin-top:-11px;} | |
| #section3 .select-item .select-item-title {font-family: Montserrat;font-size: 17px;font-weight: 400;letter-spacing: 0.53px;line-height: 27px;padding:0px 64px;margin-top:-23px;} | |
| #section4 #upgrade-today {display:block;text-align:center;margin:auto; width:50%;font-family: Montserrat;} | |
| #section4 #upgrade-today #upgrade-today-title-bg {font-size: 60px; | |
| font-weight: 600;line-height: 65px;padding:0px 31px 7px 31px;} | |
| #section4 #upgrade-today #upgrade-today-title-sm {font-size: 22px; | |
| line-height: 26px;padding:20px;} | |
| #section4 #upgrade-today #upgrade-today-note {font-family: Muli;font-size: 12px;font-style: italic;font-weight: 400;line-height: 14px; padding:20px 92px;} | |
| #section4 #upgrade-today .upgrade-today-btn {margin-bottom:5px;} | |
| #section4 #upgrade-today .upgrade-today-btn a{color:#fff; text-decoration:none;border-bottom:0px;} | |
| #section4 #upgrade-today-img img {width:571px;} | |
| @media screen and (max-width:970px) { | |
| #section1 #edit-banner-img {width:500px} | |
| #section2 #what-is-edit-sale-img {-webkit-flex: 1;-ms-flex: 1; flex: 1;} | |
| #section3 .select-item img {width:125px;} | |
| #section2 #what-is-edit-sale-title {padding-top:4px} | |
| #section3 .select-item .select-item-title {font-size:15px;padding: 0px 45px;} | |
| #section2 #what-is-edit-sale-description {padding-right:90px;} | |
| #section4 #upgrade-today-img img{width:476px} | |
| #section4 #upgrade-today #upgrade-today-title-bg {font-size:50px;} | |
| #section4 #upgrade-today #upgrade-today-note{padding:20px 50px;} | |
| } | |
| @media screen and (max-width:750px) { | |
| #section1 #edit-banner-img {width:400px} | |
| #section2 #what-is-edit-sale-description {padding-right:54px} | |
| #section2 #what-is-edit-sale-title {font-size:24px;} | |
| #section3 #upgrade-select-title {font-size:24px;} | |
| #section3 .select-item .select-item-title {padding: 0px 18px;} | |
| #section4 #upgrade-today #upgrade-today-title-bg {font-size:48px;} | |
| #section4 #upgrade-today #upgrade-today-title-sm {font-size:18px;} | |
| } | |
| @media screen and (max-width:480px) { | |
| #section1 #edit-banner-title2{font-size:14px;} | |
| #section1 #edit-banner-img {margin: -16px;width:300px} | |
| #section2 {display:block;padding:0px 0px 45px 0px;} | |
| #section2 #what-is-edit-sale-img img {width:100%; padding-top:20px} | |
| #section2 #what-is-edit-sale {text-align:center;padding-top: 10px} | |
| #section2 #what-is-edit-sale-description {padding:0px 20px;} | |
| #section2 #what-is-edit-sale-title {font-size:24px;} | |
| #section3 #upgrade-select-title {font-size:24px;} | |
| #section3 #upgrade-select-items{display:block;} | |
| #section3 .select-item {width:auto} | |
| #section3 #upgrade-select-title {padding:40px 20px 0px 20px;} | |
| #section4 {display:block;} | |
| #section4 #upgrade-today {width:100%;padding:20px 0px} | |
| #section4 #upgrade-today #upgrade-today-title-bg {font-size:48px;padding-top:24px;line-height: 46px;} | |
| #section4 #upgrade-today #upgrade-today-title-sm {font-size:18px;padding-top:6px;padding-bottom:20px;} | |
| #section4 #upgrade-today-img {display:none} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="main-container"> | |
| <div id="section1"> | |
| <div id="edit-banner-title">READY... SET...</div> | |
| <img id="edit-banner-img" src="https://static.fabfitfun.com/wp-content/uploads/2018/04/EDIT-Logo.png"></img> | |
| <div id="edit-banner-title2">Shop the sale before everyone else. </div> | |
| <div id="upgrade_addonsPage" class="edit-banner-upgrade-btn scrolltoUpgrade ">UPGRADE TO SELECT</div> | |
| </div> | |
| <div id="section2"> | |
| <div id="what-is-edit-sale-img"> | |
| <img src="https://static.fabfitfun.com/wp-content/uploads/2018/04/What-is-The-Edit-Sale.png"></img> | |
| </div> | |
| <div id="what-is-edit-sale"> | |
| <div id="what-is-edit-sale-title">What is the Edit Sale?</div> | |
| <div id="what-is-edit-sale-description">It's like Add-Ons, but available right now! Shop a curated mix of our all-time favorites and brands available for the first time at FabFitFun. Upgrade to "Select" membership for early access!</div> | |
| <div id="what-is-edit-sale-btn" class="edit-banner-upgrade-btn scrolltoUpgrade ">UPGRADE TO SELECT</div> | |
| </div> | |
| </div> | |
| <div id="section3"> | |
| <div id="upgrade-select-title">Why Upgrade to Select?</div> | |
| <div id="upgrade-select-items"> | |
| <div class="select-item"> | |
| <img src="https://static.fabfitfun.com/wp-content/uploads/2018/04/box.png"></img> | |
| <div class="select-item-title">More Box Customization</div> | |
| </div> | |
| <div class="select-item"> | |
| <img src="https://static.fabfitfun.com/wp-content/uploads/2018/04/shipping.png"></img> | |
| <div class="select-item-title">Priority Shipping</div> | |
| </div> | |
| <div class="select-item"> | |
| <img class="img-customize" src="https://static.fabfitfun.com/wp-content/uploads/2018/04/crown.png"></img> | |
| <div class="select-item-title">Early Access to Exclusive Sales</div> | |
| </div> | |
| <div class="select-item"> | |
| <img class="img-customize"src="https://static.fabfitfun.com/wp-content/uploads/2018/04/dollor.png"></img> | |
| <div class="select-item-title">Instant Savings</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="section4"> | |
| <div id="upgrade-today"> | |
| <div id ="upgrade-today-title-bg">UPGRADE TODAY</div> | |
| <div id ="upgrade-today-title-sm">4 boxes for just $179.99</div> | |
| <!--<div id ="upgrade_addonsPage" class="edit-banner-upgrade-btn upgrade-today-btn">UPGRADE TO SELECT</div>--> | |
| <a id="upgradeSelectBtn" class="edit-banner-upgrade-btn upgrade-today-btn">UPGRADE TO SELECT</a> | |
| <div id="upgrade-today-note">By clicking above, you will be charged $179.99 for a year of boxes. Auto renew annually, cancel anytime. Additional $8/box shipping for Canada, Hawaii, Alaska and Puerto Rico; $10/box shipping for United Kingdom.. Sales tax will apply where applicable.</div> | |
| </div> | |
| <div id="upgrade-today-img"> | |
| <img src="https://static.fabfitfun.com/wp-content/uploads/2018/04/upgrade-today.png"></img> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="text/javascript" src="/wp-content/themes/fabfitfun/assets/js/upgrade.js"></script> | |
| <script> | |
| var list = document.getElementsByClassName("scrolltoUpgrade"); | |
| for( var i =0; i<list.length;i++){ | |
| list[i].addEventListener("click",function(e){ | |
| document.getElementById("section4").scrollIntoView({behavior:"smooth"}); | |
| }); | |
| } | |
| </script> | |
| <script type="text/javascript" src="/wp-content/themes/fabfitfun/assets/js/user-upgrade.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment