CB - Decor Super

Developer
Ashley Sullivan
Size
5,900 Kb
Views
14,168
  1. CB - Decor Super Previews
  2. CB - Decor Super HTML Codes
  3. CB - Decor Super CSS Codes
  4. CB - Decor Super JS Codes

How do I make an cb - decor super?

What is a cb - decor super? How do you make a cb - decor super? This script and codes were developed by Ashley Sullivan on 12 November 2022, Saturday.

CB - Decor Super Previews
IQ Test

CB - Decor Super - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CB - Decor Super</title> <link rel='stylesheet prefetch' href='https://www.crateandbarrel.com/Fonts/webfonts_16061904025624.css'>
<link rel='stylesheet prefetch' href='https://www.crateandbarrel.com/css/Browse_16061904025624.css'>
<link rel='stylesheet prefetch' href='https://www.crateandbarrel.com/css/Common_16061904014510.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- BLUE -->
<div class="section">	<a href="/blue-furniture-and-decor"><img class="fullWidth" id="OmniTagTheme:decor-blue" src="https://images.crateandbarrel.com/is/image/Crate/spr_20160524_DCRBlue?wid=1920&qlt=60,0&fmt=jpg" alt="Blue pillows and throws in a basket"></a>	<div class="blueCopy">	<h2 class="crate-helvetica-bold SPHeadline-big cmsWhite">We&rsquo;re Seeing<br>a Pattern Here</h2>	<p class="crate-helvetica-light SPSubhead cmsWhite">We&rsquo;ve woven in inspiration<br>from Navajo kilims, East Indian<br>architecture and archival<br>museum textiles.</p>	<a href="/blue-furniture-and-decor" class="crate-helvetica-bold SPSubhead noHover cmsWhite">Shop Blue Trend<span class="cmsArrowR" style="border-left-color: #FFFFFF; border-width: .45vw;"></span></a>	</div>
</div>
<!-- BOPS -->
<div class="section">	<a href="/Popup/Store-Pickup-FAQ.aspx?width=700&height=500" class="thickbox dB"><img class="fullWidth" id="OmniTagTheme:decor-BOPS" src="https://images.crateandbarrel.com/is/image/Crate/spr_20160516_BOPS?wid=1920&qlt=60,0&fmt=jpg" alt="Crate&amp;Barrel Store"></a>	<div class="bopsCopy">	<h3 class="SPHeadline-small crate-helvetica-bold" style="color: #40a363;">Fast and Free Store Pickup</h3>	<p class="cmsBlack crate-helvetica-roman SPBody-big" style="margin-top: 1%;">Save on shipping, get it sooner. Choose the Store Pickup option at checkout.</p>	<a href="/Popup/Store-Pickup-FAQ.aspx?width=700&height=500" class="thickbox cmsBlack crate-helvetica-bold SPBody-big noHover" style="margin-top: 1%;">Learn More<span class="cmsArrowR" style="border-left-color: #222;"></span></a>	</div>
</div>
<!-- WHITE & WOOD -->
<div class="section">	<a href="/white-and-wood-furniture"><img class="fullWidth" src="//images.crateandbarrel.com/is/image/Crate/spr_20160524_DCRWWW?wid=1920&qlt=50" alt="Vignette of white and wood products"></a>	<div class="wwwCopy">	<img class="wwwLogo" src="//images.crateandbarrel.com/is/image/Crate/spr_20160523_WWWLogo?fmt=png-alpha" alt="White Wood Warm">	<p class="crate-utopia-italic cmsWhite SPSubhead mT15 tC">The world&rsquo;s most<br>modern color warms<br>up to the earth&rsquo;s most<br>beautiful resource.</p>	<a href="/white-and-wood-furniture" class="crate-helvetica-bold cmsWhite SPSubhead mT15 tC dB noHover">Shop Now<span class="cmsArrowR" style="border-left-color: #FFFFFF; border-width: .45vw;"></span></a>	</div>
</div>
<!-- NEW DECOR & ACCESSORIES -->
<div class="section">	<a class="newIMGLink" href="/kasbah-teardrop-brass-wall-mirror/f69006">	<img class="newIMG fullWidth" src="//images.crateandbarrel.com/is/image/Crate/spr_20160524_DCRKasbahMrrrLrg?wid=1920&qlt=60,0&fmt=jpg" id="OmniTagTheme:decor-newMirror" alt="Kasbah Teardrop Brass Wall Mirror">	</a>	<div class="tableBox">	<div class="newTab">	<a href="/kasbah-teardrop-brass-wall-mirror/s660494"><img id="mirror" class='tabIMG mirrorBorder' src="//images.crateandbarrel.com/is/image/Crate/spr_20160524_DCRKasbahMrrr?wid=71&qlt=60,0&fmt=jpg" alt="Thumbnail for Kasbah Teardrop Mirror"></a>	</div>	<div class="newTab">	<a href="/brenner-rust-18x12-pillow-with-feather-down-insert/s123124"><img id="pillows" class="tabIMG" src="//images.crateandbarrel.com/is/image/Crate/spr_20160524_DCRBrnnrPllws?wid=71&qlt=60,0&fmt=jpg" alt="Thumbnail for Brenner Pillows"></a>	</div>	<div class="newTab">	<a href="/chimes-metal-wall-sculpture/s660737"><img id="wallArt" class="tabIMG" src="//images.crateandbarrel.com/is/image/Crate/spr_20160524_DCRChmsWllArt?wid=71&qlt=60,0&fmt=jpg" alt="Thumbnail for Chimes Wall Art"></a>	</div>	<div class="newTab">	<a href="/surita-wall-tea-light-candle-holder/s661496"><img id="throws" class='tabIMG' src="//images.crateandbarrel.com/is/image/Crate/d_SC_DCR_NewThmbSrta_160614?wid=71&qlt=60,0&fmt=jpg" alt="Thumbnail for Surita Wall Tea Light Candle Holder"></a>	</div>	<h2 class="crate-helvetica-bold SPHeadline-big cmsBlack fL" style="margin: 1% 0 3% 0;">Check Out What&rsquo;s New</h2>	<p class="crate-helvetica-light SPSubhead cmsBlack cL">It&rsquo;s shaping up to be<br>a beautiful season.</p>	<a href="/whats-new/new-accessories/1" class="crate-helvetica-bold fL noHover cmsBlack SPSubhead">Shop New Decor<span class="cmsArrowR" style="border-left-color: #222222;"></span></a>	</a>	</div>
</div>
<!-- PILLOW TRENDS -->
<div class="section">	<a href="/special-features/natural-pillows/1" style="width: 33%; margin-right: 0.5%;" class="fL pR">	<img src="//images.crateandbarrel.com/is/image/Crate/spr_20160524_DCRNtrlPllws?wid=640&qlt=60,0&fmt=jpg" alt="pile of pillows made of natural materials" id="OmniTagTheme:decor-rusticPillows" class="fullWidth">	<span class="SPHeadline-small cmsWhite crate-helvetica-light pA" style="bottom: 5%; left: 4%; text-decoration: none; letter-spacing: -2px;">Naturals</span>	</a>	<a href="/special-features/jewel-tone-pillows/1" style="width: 33%; margin-right: 0.5%;" class="fL pR">	<img src="//images.crateandbarrel.com/is/image/Crate/spr_20160524_DCRJwlPllws-2?wid=640&qlt=60,0&fmt=jpg" alt="pile of jewel toned pillows" id="OmniTagTheme:decor-jewelPillows" class="fullWidth">	<span class="SPHeadline-small cmsWhite crate-helvetica-light pA" style="bottom: 5%; left: 4%; text-decoration: none; letter-spacing: -2px;">Color Rich</span>	</a>	<a href="/special-features/metallic-pillows/1" style="width: 33%;" class="fL pR">	<img src="//images.crateandbarrel.com/is/image/Crate/spr_20160524_DCRMtllcPllws?wid=640&qlt=60,0&fmt=jpg" alt="pile of pillows featuring metallic accents" id="OmniTagTheme:decor-glamPillows" class="fullWidth">	<span class="SPHeadline-small cmsWhite crate-helvetica-light pA" style="bottom: 5%; left: 4%; text-decoration: none; letter-spacing: -2px;">Metallics</span>	</a>	<div class="trendCopy">	<h2 class="crate-helvetica-bold SPHeadline-big cmsWhite">3 Pillow Trends We Love</h2>	<p class="crate-helvetica-light SPSubhead cmsWhite">Still the quickest way to refresh a room. What&rsquo;s your style?</p>	<a href="/pillow-trends" class="crate-helvetica-bold tC SPSubhead noHover cmsWhite">Shop Pillow Trends<span class="cmsArrowR" style="border-width: .45vw; border-left-color: #FFFFFF;"></span></a>	<a href="/decorating-and-accessories/decorative-pillows/1" class="crate-helvetica-bold tC SPSubhead noHover cmsWhite mL15">Shop Decorative Pillows<span class="cmsArrowR" style="border-width: .45vw; border-left-color: #FFFFFF;"></span></a>	</div>
</div>
<!-- FRAMES -->
<div class="section">	<a href="/decorating-and-accessories/frames/1"><img class="fullWidth" id="OmniTagTheme:decor-frames" src="//images.crateandbarrel.com/is/image/Crate/spr_20160524_DCRFrames?wid=1920&qlt=60,0&fmt=jpg" alt="Brushed Silver Wall Frames displayed on a wall"></a>	<div class="framesCopy">	<p class="crate-helvetica-roman SPEyebrow">Design Tip</p>	<h2 class="crate-helvetica-bold SPHeadline-big" style="color: #364996;">These Are<br>the Moments</h2>	<p class="crate-helvetica-light SPSubhead cmsBlack">So many memories, one sleek<br>frame. It&rsquo;s the modern way to<br>do a gallery wall.</p>	<a href="/decorating-and-accessories/frames/1" class="crate-helvetica-bold SPSubhead noHover cmsBlack">Shop Picture Frames<span class="cmsArrowR" style="border-width: .45vw; border-left-color: #222222;"></span></a>	</div>
</div>
<!-- ROOMS WE LOVE -->
<div class="section">	<a href="/shop-by-room/lounge-family-room/1"><img class="fullWidth" id="OmniTagTheme:decor-rwl" src="//images.crateandbarrel.com/is/image/Crate/spr_20160524_DCRRWL?wid=1920&qlt=60,0&fmt=jpg" alt="Living Room featuring Lounge sofa collection"></a>	<div class="rwlCopy">	<p class="crate-helvetica-roman SPEyebrow cmsBlack">Rooms We Love</p>	<h2 class="crate-helvetica-bold SPHeadline-big cmsBlack" style="margin-top: 1.5%; letter-spacing: -2px;">Family Time</h2>	<p class="crate-helvetica-light SPSubhead cmsBlack" style="letter-spacing: -1px; margin-top: 1%;">Where the modern family<br>gathers, unwinds and<br>entertains.</p>	<a href="/shop-by-room/lounge-family-room/1" class="crate-helvetica-bold SPSubhead noHover cmsBlack">Shop This Room<span class="cmsArrowR" style="border-width: .45vw; border-left-color: #222222;"></span></a>	</div>
</div>
<!-- CRATESTYLE -->
<div class="section" style="margin-top: 4%; margin-bottom: 5%;">	<div class="cratestyleDiv">	<div class="fL" style="width:60%">	<a href="/adra-vase/s527610"><img src="//images.crateandbarrel.com/is/image/Crate/spr_20160524_DCRInstagram?wid=513&qlt=60,0&fmt=jpg" alt="Adra Vase" class="fullWidth" /></a>	<p class="SPBody-small crate-helvetica-roman" style="line-height:3;"><img style="display:inline-block; margin-right:.5vw;" src="//images.crateandbarrel.com/is/image/Crate/instagram_icon_21x20?fmt=gif" alt="instagram logo" />follow us on instagram <strong style="margin-right:2vw;">@crateandbarrel</strong> <a class="noHover cmsBlack" href="/Cratestyle">view more <strong>#cratestyle</strong><span class="cmsArrowR" style="border-left-color: #222; border-width: .35vw;"></span></a></p>	</div>	<div class="fR" style="width:37%">	<p class="SPSubhead crate-helvetica-bold" style="margin-top:33%;">#cratestyle</p>	<p class="SPHeadline-big crate-helvetica-bold">Love This.</p>	<p class="SPBody-small crate-helvetica-roman">Our handmade <a href="/adra-vase/s527610" class="noHover cmsBlack crate-helvetica-bold">Adra Vase</a> gives classic<br>chevron a fresh new way to zig and zag.</p>	</div>	</div>	<div class="instaLine"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

CB - Decor Super - Script Codes CSS Codes

/* TURNING H1 AND BREADCRUMBS WHITE */
.SuperCategoryHeader, #SiteMapPath span, #SiteMapPath a {color: #FFFFFF !important;}
/* FIX FOR SEO COPY */
.categoryCopy {	width: 1008px !important;	margin: 0 auto;	float: none !important;
}
/* OVERRIDING STYLES */
.SuperCategoryHeader {letter-spacing: -1px;}
.smallWrapper, .center1008 {	width: 1008px;	margin: 0 auto;
}
#normalFooter {	margin: 0 auto;	float: none;
}
.content {	width:100%;	float:none;
}
.fullWidthWrapTop {border-top: 2px solid black;}
#topNavWrap {background: transparent;}
#bodyWrap {padding: 0;}
/* 100% STYLES */
#pageWrap, .fullWidth, .table {width: 100%;}
/* ====== TYPE SIZES ====== */
.SPHeadline-big {font-size: 3.9vw; line-height: 1; letter-spacing: -.1vw; clear: both;}
.SPHeadline-small {font-size: 2.73vw; line-height: 1; letter-spacing: -.1vw; clear: both;}
.SPSubhead {font-size: 1.75vw; letter-spacing: -.05vw; line-height: 1.2; clear:both;}
.SPBody-big {font-size: 1.36vw; letter-spacing: -.05vw; line-height: 1.2; clear:both;}
.SPBody-small {font-size: 1.17vw; letter-spacing: -.5px; line-height: 1.2; clear:both;}
.SPEyebrow {font-size: 1vw; text-transform: uppercase; line-height: 1; letter-spacing: normal;}
/* ====== CURALATE ====== */
.cratestyleDiv{	width:65.45vw;	margin:0 auto;	margin-top:4%;
}
.instaLine {	position: absolute;	bottom: 40%;	right: 17%;	width: 41.10vw;	border-bottom: 2px solid #6a87b0;
}
/* ====== DECOR STYLES ====== */
.section {	width: 100%;	position: relative;	overflow: hidden;
}
.noHover:hover {text-decoration: none;}
.cmsArrowR {	border: solid .45vw transparent;	margin-left: 4px;
}
/* BLUE */
.blueCopy {	background-color: rgba(12,21,66,0.86);	position: absolute;	right: 7%;	top: 22%;	width: 27%;	padding: 10% 2% 3% 2%;
}
/* BOPS */
.bopsCopy {	position: absolute;	top: 25%;	right: 4%;
}
/* WWW */
.wwwCopy {	width: 25vw;	right: 0;	bottom: 15%;	position: absolute;
}
.wwwLogo {	left: 0;	right: 0;	margin: auto;	top: 0;	bottom: 0;	width: 70%;
}
/* NEW */
.tableBox {	position:absolute;	left: 11%;	top: 30%;	width: 25%;	padding: 10% 2% 3% 2%;	background:linear-gradient(rgba(255,255,255,.65) 0%, rgba(255,255,255,1) 65%);
}
.newTab {	width:3.9vw;	display:inline-block;	margin-right:1vw;	cursor:pointer;
}
.tabIMG {	width:100%;	border-radius:50%;	border:.45vw solid transparent;
}
.borderColor {	border-color:#fff;
}
.mirrorBorder {	border-color:#935916;
}
.pillowsBorder{	border-color:#a21444;
}
.wallArtBorder{	border-color:#5d4128;
}
.throwsBorder{	border-color:#81633C;
}
/* TRENDS */
.trendCopy {	background-color: rgba(0,0,0,0.7);	position: absolute;	left: 0;	right: 0;	margin: auto;	top: 0;	bottom: 0;	width: 70%;	height: 18%;	text-align: center;	padding: 3%;
}
/* FRAMES */
.framesCopy {	position: absolute;	width: 30%;	top: 28%;	right: 16%;
}
/* ROOMS WE LOVE */
.rwlCopy {	background-color: rgba(255,255,255,0.85);	position: absolute;	width: 25%;	top: 0;	left: 2%;	padding: 9% 2% 3% 2%;
}
/* ====== MEDIA QUERIES ====== */
@media only screen and (max-width: 1024px) {	.SPHeadline-big {font-size: 40px;}	.SPHeadline-small {font-size: 28px;}	.SPSubhead {font-size: 18px;}	.SPBody-big {font-size: 15px;}	.SPBody-small {font-size: 12px;}	.SPEyebrow {font-size: 10px;}	.bopsContent, .ccContent{left: 235.5px;}
}

CB - Decor Super - Script Codes JS Codes

var $mirror = "//images.crateandbarrel.com/is/image/Crate/spr_20160524_DCRKasbahMrrrLrg?qty=60,0&wid=1920&fmt=jpg",	$mirrorLink = "/kasbah-teardrop-brass-wall-mirror/f69006",	$pillows = "//images.crateandbarrel.com/is/image/Crate/spr_20160524_DCRBrnnrPllwsLrg?qty=60,0&wid=1920&fmt=jpg",	$pillowsLink = "/brenner-beet-red-18x12-velvet-pillow/f69443",	$wallArt = "//images.crateandbarrel.com/is/image/Crate/spr_20160524_DCRChmsWllArtLrg?qty=60,0&wid=1920&fmt=jpg",	$wallArtLink = "/chimes-metal-wall-sculpture/f69855",	$throws = "//images.crateandbarrel.com/is/image/Crate/d_SC_DCR_NewSurita_160614?qty=60,0&wid=1920&fmt=jpg",	$throwsLink = "/surita-wall-tea-light-candle-holder/f69009";
$('.tabIMG').hover(function(){	$clickedID = this.id;	if ($clickedID == 'mirror'){	$('.newIMG').attr('src', $mirror);	$('.newIMG').attr('id', 'OmniTagTheme:decor-newMirror');	$('.newIMG').attr('alt', 'Kasbah Teardrop Mirror');	$('.newIMGLink').attr('href', $mirrorLink);	$('.tabIMG').removeClass('pillowsBorder');	$('.tabIMG').removeClass('wallArtBorder');	$('.tabIMG').removeClass('throwsBorder');	$(this).addClass('mirrorBorder');	} if ($clickedID == 'pillows'){	$('.newIMG').attr('src', $pillows);	$('.newIMG').attr('id', 'OmniTagTheme:decor-newPillows');	$('.newIMG').attr('alt', 'Brenner Pillows');	$('.newIMGLink').attr('href', $pillowsLink);	$('.tabIMG').removeClass('mirrorBorder');	$('.tabIMG').removeClass('wallArtBorder');	$('.tabIMG').removeClass('throwsBorder');	$(this).addClass('pillowsBorder');	} if ($clickedID == 'wallArt'){	$('.newIMG').attr('src', $wallArt);	$('.newIMG').attr('id', 'OmniTagTheme:decor-newWallart');	$('.newIMG').attr('alt', 'Chimes Wall Art');	$('.newIMGLink').attr('href', $wallArtLink);	$('.tabIMG').removeClass('mirrorBorder');	$('.tabIMG').removeClass('pillowsBorder');	$('.tabIMG').removeClass('throwsBorder');	$(this).addClass('wallArtBorder');	} if ($clickedID == 'throws'){	$('.newIMG').attr('src', $throws);	$('.newIMG').attr('id', 'OmniTagTheme:decor-newCandleHolder');	$('.newIMG').attr('alt', 'Surita Wall Tea Light Candle Holder');	$('.newIMGLink').attr('href', $throwsLink);	$('.tabIMG').removeClass('mirrorBorder');	$('.tabIMG').removeClass('pillowsBorder');	$('.tabIMG').removeClass('wallArtBorder');	$(this).addClass('throwsBorder');	}
})
CB - Decor Super - Script Codes
CB - Decor Super - Script Codes
Home Page Home
Developer Ashley Sullivan
Username anSullivan12
Uploaded November 12, 2022
Rating 3
Size 5,900 Kb
Views 14,168
Do you need developer help for CB - Decor Super?

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!

Ashley Sullivan (anSullivan12) Script Codes
Name
CB - Organization Super
Multiple Borders
Inner rounding
Phone svg
Transparent Borders
Mail icon
Polka dot background
Playing with SVG
A Pen by Ashley Sullivan
Facebook svg
Create amazing Facebook ads 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!