Spill AMP Page

Developer
Ashepherd1
Size
6,179 Kb
Views
22,264
  1. Spill AMP Page Previews
  2. Spill AMP Page HTML Codes
  3. Spill AMP Page CSS Codes
  4. Spill AMP Page JS Codes

How do I make an spill amp page?

What is a spill amp page? How do you make a spill amp page? This script and codes were developed by Ashepherd1 on 30 November 2022, Wednesday.

Spill AMP Page Previews
IQ Test

Spill AMP Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spill AMP Page</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap"> <div class="header"> <div class="hdrL"> <div class="menu-toggle" tabindex="0"> <span></span> <span></span> <span></span> <p>MENU</p> </div> <i class="search"></i> </div> <div class="hdrM logo" tabindex="0"><img src="//images.crateandbarrel.com/is/image/Crate/WebsiteHeaderLogo/fmt=png-alpha/170813043835/WebsiteHeaderLogo.jpg" alt="Crate and Barrel"></div> <div class="hdrR cart" tabindex="0"> <i class="favs"></i> <img src="//images.crateandbarrel.com/is/image/Crate/icon-cart?fmt=png-alpha"><span>0</span> </div>
<div class="navigation"> <span class="nav" tabindex="0"> <ul> <li> <a href="/furniture/">Furniture</a> </li> <li> <a href="/outdoor-furniture/">Outdoor</a> </li> <li> <a href="/dining-and-entertaining/">Tabletop &amp; Bar</a> </li> <li> <a href="/kitchen-and-food/">Kitchen</a> </li> <li> <a href="/decorating-and-accessories/">Decor</a> </li> <li> <a href="/rugs/">Rugs</a> </li> <li> <a href="/lighting/">Lighting</a> </li> <li> <a href="/bed-and-bath/">Bed &amp; Bath</a> </li> <li> <a class="sale" href="/sale/">Sale</a> </li> <li> <a href="/holiday/">Holiday</a> </li>	<li>	<a href="/thanksgiving/">Thanksgiving</a>	</li>	<li> <a href="/halloween/">Halloween</a> </li> <li> <a href="/shop-by-room/">Rooms We Love</a> </li> <li> <a href="/artists-and-designers/">Designers</a> </li> <li> <a href="/business-sales/">B2B</a> </li> <li> <a href="https://www.crateandbarrel.com/blog/">Blog</a> </li> <li> <a href="/ideas-and-advice">Ideas &amp; Advice</a> </li> <li> <a href="/whats-new/">What&#39;s New</a> </li> <li> <a href="/rewards">Rewards</a> </li> <li> <a href="/gift-registry/">Wedding Registry</a> </li> <li> <a href="/gift-ideas/">Gifts</a> </li> <li> <a href="/gift-cards/">Gift Cards</a> </li> <li> <a href="/Account/OrderTracking">Track Your Order</a> </li> <li > <a href="/account/">My Account</a> </li> <li > <a href="/stores/">Find a Store</a> </li> </ul> </span>
</div> </div>
<div class="content-overlay hidden"></div> <div class="spill"> <h1>New Furniture</h1> <div class="col"> <img src="//images.crateandbarrel.com/is/image/Crate/Yukon80inDiningTableSHF17_1x1/$web_spill_xs$/170322104711/yukon-80-dining-table.jpg" alt="Yukon 80&quot; Dining Table"> <span class="product-name">Yukon 80" Dining Table</span> <span class="reg"><span class="regPrice">$1,499.00</span></span> </div> <div class="col"> <img src="//images.crateandbarrel.com/is/image/Crate/Yukon92inDiningTableSHF17_1x1/$web_spill_xs$/170420125355/yukon-92-dining-table.jpg" alt="Yukon 92&quot; Dining Table"> <span class="product-name">Yukon 80" Dining Table</span> <span class="reg"><span class="regPrice">$1,499.00</span></span> </div> <div class="col"> <img src="//images.crateandbarrel.com/is/image/Crate/Yukon102inDiningTableSHF17_1x1/$web_spill_xs$/170322100718/yukon-102-dining-table.jpg" alt="Yukon 102&quot; Dining Table"> <span class="product-name">Yukon 80" Dining Table</span> <span class="reg"><span class="regPrice">$1,499.00</span></span> </div> <div class="col"> <img src="//images.crateandbarrel.com/is/image/Crate/LivoniArmChairSHF17_1x1/$web_spill_xs$/170707161232/livoni-dining-arm-chair.jpg" alt="Livoni Dining Arm Chair"> <span class="product-name">Yukon 80" Dining Table</span> <span class="reg"><span class="regPrice">$1,499.00</span></span> </div> <div class="col"> <img src="//images.crateandbarrel.com/is/image/Crate/HeritageDiningTableSHF17_1x1/$web_spill_xs$/170424101247/heritage-dining-table.jpg" alt="Heritage Dining Table"> <span class="product-name">Yukon 80" Dining Table</span> <span class="reg"><span class="regPrice">$1,499.00</span></span> </div> <div class="col"> <img src="//images.crateandbarrel.com/is/image/Crate/HeritageSideboardSHF17_1x1/$web_spill_xs$/170424101245/heritage-sideboard.jpg" alt="Heritage Sideboard"> <span class="product-name">Yukon 80" Dining Table</span> <span class="reg"><span class="regPrice">$1,499.00</span></span> </div> <div class="load-more"> <button class="btn-load">View 100 More Products</button> </div> </div> <a href="#" class="back-to-top js-scroll-top"> Back to Top
</a> <footer> <a class="top-links" href="/account/" rel="nofollow">Your Account</a> <a class="top-links" href="/stores/">Find a Store</a> <a class="top-links" target="_blank" href="https://secure.opinionlab.com/ccc01/o.asp?referer=https%3a%2f%2fm.crateandbarrel.com%2f&amp;id=eHIMglrS&amp;custom_var=me01mPUXKk-cvvWSGJIL4Q">Feedback</a> <a class="phone-number" href="tel:+1.(800) 967-6696"> (800) 967-6696 </a> <div class="cols"> <a href="/careers/">Careers</a> <a href="/customer-service/">Customer Service</a> <a href="/design-trade-program/">Design Trade Program</a> </div> <div class="cols"> <a href="https://www.cb2.com" target="_blank"> <img class="cb2-logo" src="//images.crateandbarrel.com/is/image/Crate/cb2-mobile-logo-sm/fmt=png-alpha/170817042544/cb2-mobile-logo-sm.jpg" alt="CB2"> </a> <a href="https://www.landofnod.com" target="_blank"> <img class="lon-logo" src="//images.crateandbarrel.com/is/image/Crate/logo-sm-lon/fmt=png-alpha/170817042544/logo-sm-lon.jpg" alt="Land of Nod"> </a> </div> <p> <a href="/customer-service/terms-of-use">Terms of Use</a> | <a href="/customer-service/privacy-policy">Privacy Policy</a> </p> <p>©2017 Crate and Barrel.All rights reserved.</p> </footer>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Spill AMP Page - Script Codes CSS Codes

.header { width: 100%; float: left; border-bottom: 1px solid #DFDFDF; height: 50px; float: left; postion: relative;
}
.header .hdrL, .header .hdrR { width: 25%; padding: 0 15px; float: left;
}
.header .hdrM { width: 50%; float: left;
}
.header .menu-toggle { float: left; padding: 12px 15px 15px; height: 50px; margin-left: -15px; width: 57px; text-align: center; float: left; position: relative; z-index: 60; background: white; border-bottom: 1px solid #DFDFDF; cursor: pointer;
}
.header .menu-toggle span { width: 27px; height: 3px; background-color: #000; margin-bottom: 3px; float: left; transition: all 145ms ease; transform-origin: center center;
}
.header .menu-toggle p { margin: -2px -1px 0; padding: 0; float: left; font-size: 10px;
}
.header .menu-toggle.menu-active { border-bottom: 1px solid #EFEFEF; background: #EFEFEF;
}
.header .menu-toggle.menu-active span { width: 26px;
}
.header .menu-toggle.menu-active span:nth-of-type(1) { transform: translate(0, 10px) rotate(45deg);
}
.header .menu-toggle.menu-active span:nth-of-type(2) { background: #efefef;
}
.header .menu-toggle.menu-active span:nth-of-type(3) { transform: translate(0, -2px) rotate(-45deg);
}
.header .menu-toggle.menu-active p { display: none;
}
.header .search { width: 21px; height: 24px; display: block; background: url(//images.crateandbarrel.com//is/image/Crate/Mood_board_Sprite?fmt=png-alpha) no-repeat -87px -66px; float: right; margin: 12px -10px 0 0;
}
.header .navigation { position: relative; width: 92%; margin-left: -92%; transition: all 0.5s ease; top: 0; left: 0; z-index: 99; background: white; max-height: 800px; overflow: hidden;
}
.header .navigation.navigation-active { margin-left: 0; height: auto;
}
.header .navigation .nav { background: white; float: left;
}
.header .navigation .nav ul { margin: 0; padding: 0;
}
.header .navigation .nav ul li { width: 100%; border-bottom: 2px solid #E0E0E0; border-left: 2px solid #E0E0E0; border-right: 2px solid #E0E0E0; list-style: none; float: left;
}
.header .navigation .nav ul li a { width: 100%; padding: 12px 17px 14px; float: left; color: #222; font-size: 17px;
}
.header .navigation .nav ul li a.sale { color: #b00;
}
.header .logo { text-align: center; float: left;
}
.header .logo img { width: 100%; max-width: 131px; margin: 14px 0;
}
.header .favs { width: 21px; height: 21px; display: block; background: url(//images.crateandbarrel.com//is/image/Crate/Mood_board_Sprite?fmt=png-alpha) no-repeat -52px -10px; float: left; margin: 12px 0 0 -22px;
}
.header .cart { width: 25%; float: right; text-align: right; height: 50px;
}
.header .cart img { width: 27px; margin: 14px 4px 0 0;
}
.header .cart span { margin: 14px 3px 0; font-size: 15px; float: right;
}
.spill { padding: 16px; float: left; width: 100%;
}
.spill h1 { font-weight: 300; font-size: 23px; margin-top: 7px; margin-bottom: 34px;
}
.col { width: 50%; float: left; border-bottom: 2px solid #E7E7E7; padding: 13px 0 21px;
}
.col img { width: 100%; padding: 0 0 8px;
}
.col:nth-child(even) { padding-right: 18px;
}
.col:nth-child(odd) { padding-left: 18px;
}
.col img { display: block;
}
.col .product-name { width: 80%; font-size: 14px; line-height: 15px; margin-bottom: 1px; display: block;
}
.col .reg { display: block; font-size: 11px; margin-top: 4px;
}
.content-overlay { background-color: #000; opacity: .4; width: 100vw; height: 100vh; position: relative; top: 0; left: 0; z-index: 50; cursor: pointer;
}
html { padding: 30px 0;
}
html body { background: #FAFAFA;
}
html .wrap { width: 375px; margin: auto; background: white; overflow-x: hidden;
}
.load-more { text-align: center; background: white; margin-top: -2px; float: left; width: 100%;
}
.load-more .btn-load { color: #fff; background-color: #000; background-image: linear-gradient(to bottom, #000, #000); border-color: #000; font-size: 16px; padding: 5px 40px; margin: 35px 0 25px; border-radius: 2px;
}
.back-to-top { width: 100%; float: left; border-top: 1px solid #d8d8d8; padding: 15px; text-align: center; font-size: 16px; color: #222; cursor: pointer;
}
footer { float: left; width: 100%; padding: 21px 16px; background: #F7F7F7; color: #717171; font-size: 12px;
}
footer .top-links { width: 33%; color: #1f74bf; font-size: 14px; float: left; margin-bottom: 40px;
}
footer .top-links:nth-of-type(2) { text-align: center;
}
footer .top-links:nth-of-type(3) { text-align: right;
}
footer .phone-number { float: left; width: 100%; font-size: 15px; margin-bottom: 10px;
}
footer .cols { border: none; width: 50%; float: left;
}
footer .cols a { font-size: 13px; display: block; color: #222; margin-bottom: 12px;
}
footer .cols a img { float: right; clear: both;
}
footer .cols a img.cb2-logo { margin: 5px 0; width: 56px;
}
footer .cols a img.lon-logo { margin: 5px 0 30px; width: 133px;
}
footer p { color: #717171; float: left; width: 100%; font-size: 13px; margin-bottom: 6px;
}
footer p a { color: #717171;
}

Spill AMP Page - Script Codes JS Codes

$(".menu-toggle").click(function() { $(".navigation").toggleClass("navigation-active"); $(".menu-toggle").toggleClass("menu-active"); $(".content-overlay").toggleClass("hidden");
});
$(".back-to-top").click(function() { $("html, body").animate({ scrollTop: 0 }, 500);
});
Spill AMP Page - Script Codes
Spill AMP Page - Script Codes
Home Page Home
Developer Ashepherd1
Username ashepherd1
Uploaded November 30, 2022
Rating 3
Size 6,179 Kb
Views 22,264
Do you need developer help for Spill AMP Page?

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!

Ashepherd1 (ashepherd1) Script Codes
Name
Partially Responsive Content Layout
Fade Show Reveal by height
Lazy Sizes
Responsive Navigation
Menu Toggle
Lazy image swap fade on hover.
A Pen by ashepherd1
GR TYM
MatchMedia JS Listener
Multiple modals from top at variable heights
Create amazing blog posts with AI!

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!