cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              	<html>
    <body>
        <div class="p-cn">
            <div class="p-cn__container">
            	<ul class="p-textile-links u-clearfix">
            		<li id="textileLink03" class="p-textile-link p-textile-link--03">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>無彩キュービック</h3>
            					<h4>Monochrome Cubic</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #988f84"></div><div class="p-textile-link__detail--color" style="background-color: #1a2013"></div><div class="p-textile-link__detail--color" style="background-color: #585449"></div><div class="p-textile-link__detail--color" style="background-color: #64645c"></div><div class="p-textile-link__detail--color" style="background-color: #6c6c64"></div><div class="p-textile-link__detail--color" style="background-color: #74645c"></div><div class="p-textile-link__detail--color" style="background-color: #444c3c"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#03<i> </i>2006</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink08" class="p-textile-link p-textile-link--08">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>無彩</h3>
            					<h4>Monochrome</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #202424"></div><div class="p-textile-link__detail--color" style="background-color: #c5beb3"></div><div class="p-textile-link__detail--color" style="background-color: #74736c"></div><div class="p-textile-link__detail--color" style="background-color: #66625a"></div><div class="p-textile-link__detail--color" style="background-color: #6d6c64"></div><div class="p-textile-link__detail--color" style="background-color: #92857d"></div><div class="p-textile-link__detail--color" style="background-color: #141812"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#08<i> </i>2006</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink29" class="p-textile-link p-textile-link--29">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>黒万筋</h3>
            					<h4>Myriad of<i> </i>Black Stripes</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #242428"></div><div class="p-textile-link__detail--color" style="background-color: #24243a"></div><div class="p-textile-link__detail--color" style="background-color: #1c1c24"></div><div class="p-textile-link__detail--color" style="background-color: #1c2424"></div><div class="p-textile-link__detail--color" style="background-color: #1c1c1c"></div><div class="p-textile-link__detail--color" style="background-color: #1c1c2c"></div><div class="p-textile-link__detail--color" style="background-color: #282c24"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#29<i> </i>2010</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink41" class="p-textile-link p-textile-link--41">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>宵の水</h3>
            					<h4>Water Flowers<i> </i>in the Evening</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #948b84"></div><div class="p-textile-link__detail--color" style="background-color: #101614"></div><div class="p-textile-link__detail--color" style="background-color: #5c564f"></div><div class="p-textile-link__detail--color" style="background-color: #6c7485"></div><div class="p-textile-link__detail--color" style="background-color: #74645c"></div><div class="p-textile-link__detail--color" style="background-color: #5e627a"></div><div class="p-textile-link__detail--color" style="background-color: #343424"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#41<i> </i>2011</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink42" class="p-textile-link p-textile-link--42">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>ワイドキュービック</h3>
            					<h4>Wide Dimension</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #1a1b13"></div><div class="p-textile-link__detail--color" style="background-color: #a1978a"></div><div class="p-textile-link__detail--color" style="background-color: #6c6357"></div><div class="p-textile-link__detail--color" style="background-color: #847468"></div><div class="p-textile-link__detail--color" style="background-color: #7c7c6c"></div><div class="p-textile-link__detail--color" style="background-color: #7c746c"></div><div class="p-textile-link__detail--color" style="background-color: #4c4c44"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#42<i> </i>2011</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink44" class="p-textile-link p-textile-link--44">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>夜</h3>
            					<h4>Night</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #141314"></div><div class="p-textile-link__detail--color" style="background-color: #0c143c"></div><div class="p-textile-link__detail--color" style="background-color: #04223e"></div><div class="p-textile-link__detail--color" style="background-color: #0c142c"></div><div class="p-textile-link__detail--color" style="background-color: #1c1c14"></div><div class="p-textile-link__detail--color" style="background-color: #040c1e"></div><div class="p-textile-link__detail--color" style="background-color: #1c1018"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#44<i> </i>2012</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink54" class="p-textile-link p-textile-link--54">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>無彩律</h3>
            					<h4>Rhythm of<i> </i>Monochrome</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #cdc1b0"></div><div class="p-textile-link__detail--color" style="background-color: #71685e"></div><div class="p-textile-link__detail--color" style="background-color: #68544c"></div><div class="p-textile-link__detail--color" style="background-color: #040404"></div><div class="p-textile-link__detail--color" style="background-color: #6b5c4c"></div><div class="p-textile-link__detail--color" style="background-color: #948475"></div><div class="p-textile-link__detail--color" style="background-color: #307870"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#54<i> </i>2013</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink58" class="p-textile-link p-textile-link--58">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>黒万筋 2013</h3>
            					<h4>Myriad of<i> </i>Black Stripes</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #1c1c14"></div><div class="p-textile-link__detail--color" style="background-color: #1c2433"></div><div class="p-textile-link__detail--color" style="background-color: #24241c"></div><div class="p-textile-link__detail--color" style="background-color: #241c1c"></div><div class="p-textile-link__detail--color" style="background-color: #2c241c"></div><div class="p-textile-link__detail--color" style="background-color: #1c2124"></div><div class="p-textile-link__detail--color" style="background-color: #1c2418"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#58<i> </i>2013</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink59" class="p-textile-link p-textile-link--59">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>碧夜</h3>
            					<h4>Jade Night</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #2c302c"></div><div class="p-textile-link__detail--color" style="background-color: #222124"></div><div class="p-textile-link__detail--color" style="background-color: #1c1c1c"></div><div class="p-textile-link__detail--color" style="background-color: #242c27"></div><div class="p-textile-link__detail--color" style="background-color: #2c1c24"></div><div class="p-textile-link__detail--color" style="background-color: #241c1c"></div><div class="p-textile-link__detail--color" style="background-color: #1c241c"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#59<i> </i>2013</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink60" class="p-textile-link p-textile-link--60">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>無彩流</h3>
            					<h4>Stream in Monochrome</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #23231e"></div><div class="p-textile-link__detail--color" style="background-color: #b9b0a7"></div><div class="p-textile-link__detail--color" style="background-color: #7e746c"></div><div class="p-textile-link__detail--color" style="background-color: #70635a"></div><div class="p-textile-link__detail--color" style="background-color: #9c8c7f"></div><div class="p-textile-link__detail--color" style="background-color: #625a51"></div><div class="p-textile-link__detail--color" style="background-color: #948c7c"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#60<i> </i>2014</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink61" class="p-textile-link p-textile-link--61">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>白多彩</h3>
            					<h4>Feast of Colors<i> </i>on White</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #866334"></div><div class="p-textile-link__detail--color" style="background-color: #cdc6a7"></div><div class="p-textile-link__detail--color" style="background-color: #a67167"></div><div class="p-textile-link__detail--color" style="background-color: #343c5c"></div><div class="p-textile-link__detail--color" style="background-color: #ebeae4"></div><div class="p-textile-link__detail--color" style="background-color: #8c8c5c"></div><div class="p-textile-link__detail--color" style="background-color: #be7c66"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#61<i> </i>2014</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink62" class="p-textile-link p-textile-link--62">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>黒多彩</h3>
            					<h4>Feast of Colors<i> </i>on Black</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #958468"></div><div class="p-textile-link__detail--color" style="background-color: #1e1a1e"></div><div class="p-textile-link__detail--color" style="background-color: #6d704f"></div><div class="p-textile-link__detail--color" style="background-color: #514c34"></div><div class="p-textile-link__detail--color" style="background-color: #625870"></div><div class="p-textile-link__detail--color" style="background-color: #414647"></div><div class="p-textile-link__detail--color" style="background-color: #7c4424"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#62<i> </i>2014</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink63" class="p-textile-link p-textile-link--63">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>香色</h3>
            					<h4>Scent of Tint</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #907570"></div><div class="p-textile-link__detail--color" style="background-color: #d5cebe"></div><div class="p-textile-link__detail--color" style="background-color: #3b382f"></div><div class="p-textile-link__detail--color" style="background-color: #7c7642"></div><div class="p-textile-link__detail--color" style="background-color: #bdafac"></div><div class="p-textile-link__detail--color" style="background-color: #bc9e8a"></div><div class="p-textile-link__detail--color" style="background-color: #5c445c"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#63<i> </i>2014</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink64" class="p-textile-link p-textile-link--64">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>紫万筋</h3>
            					<h4>Myriad of<i> </i>Purple Stripes</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #453344"></div><div class="p-textile-link__detail--color" style="background-color: #342d3c"></div><div class="p-textile-link__detail--color" style="background-color: #25282b"></div><div class="p-textile-link__detail--color" style="background-color: #141414"></div><div class="p-textile-link__detail--color" style="background-color: #14140c"></div><div class="p-textile-link__detail--color" style="background-color: #0c0c0c"></div><div class="p-textile-link__detail--color" style="background-color: #342c34"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#64<i> </i>2014</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink67" class="p-textile-link p-textile-link--67">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>うす紅</h3>
            					<h4>Scent of Pink</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #ab9f93"></div><div class="p-textile-link__detail--color" style="background-color: #6b392e"></div><div class="p-textile-link__detail--color" style="background-color: #422929"></div><div class="p-textile-link__detail--color" style="background-color: #807168"></div><div class="p-textile-link__detail--color" style="background-color: #685d4c"></div><div class="p-textile-link__detail--color" style="background-color: #937e67"></div><div class="p-textile-link__detail--color" style="background-color: #6f695c"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#67<i> </i>2015</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink68" class="p-textile-link p-textile-link--68">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>紫流</h3>
            					<h4>Purple Stream</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #272d22"></div><div class="p-textile-link__detail--color" style="background-color: #82707c"></div><div class="p-textile-link__detail--color" style="background-color: #6c5a64"></div><div class="p-textile-link__detail--color" style="background-color: #574b53"></div><div class="p-textile-link__detail--color" style="background-color: #5e5c5c"></div><div class="p-textile-link__detail--color" style="background-color: #604b64"></div><div class="p-textile-link__detail--color" style="background-color: #444044"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#68<i> </i>2015</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink69" class="p-textile-link p-textile-link--69">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>藍万筋</h3>
            					<h4>Myriad of<i> </i>Indigo Stripes</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #0c130c"></div><div class="p-textile-link__detail--color" style="background-color: #141c24"></div><div class="p-textile-link__detail--color" style="background-color: #1c2434"></div><div class="p-textile-link__detail--color" style="background-color: #14141c"></div><div class="p-textile-link__detail--color" style="background-color: #1c232c"></div><div class="p-textile-link__detail--color" style="background-color: #141c1c"></div><div class="p-textile-link__detail--color" style="background-color: #1c2c34"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#69<i> </i>2015</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink71" class="p-textile-link p-textile-link--71">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>草草</h3>
            					<h4>Grasses</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #8a8a50"></div><div class="p-textile-link__detail--color" style="background-color: #beb290"></div><div class="p-textile-link__detail--color" style="background-color: #c5a949"></div><div class="p-textile-link__detail--color" style="background-color: #b4a246"></div><div class="p-textile-link__detail--color" style="background-color: #bbb44d"></div><div class="p-textile-link__detail--color" style="background-color: #a19070"></div><div class="p-textile-link__detail--color" style="background-color: #7b6b4b"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#71<i> </i>2015</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink73" class="p-textile-link p-textile-link--73">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>翠風</h3>
            					<h4>Jade Winds</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #7f7754"></div><div class="p-textile-link__detail--color" style="background-color: #54603c"></div><div class="p-textile-link__detail--color" style="background-color: #1c1c2b"></div><div class="p-textile-link__detail--color" style="background-color: #6f5c48"></div><div class="p-textile-link__detail--color" style="background-color: #4e4031"></div><div class="p-textile-link__detail--color" style="background-color: #5c4c44"></div><div class="p-textile-link__detail--color" style="background-color: #3c4424"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#73<i> </i>2015</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink74" class="p-textile-link p-textile-link--74">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>紫夜</h3>
            					<h4>Purple Night</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #24242b"></div><div class="p-textile-link__detail--color" style="background-color: #2e2430"></div><div class="p-textile-link__detail--color" style="background-color: #1c151c"></div><div class="p-textile-link__detail--color" style="background-color: #331c2d"></div><div class="p-textile-link__detail--color" style="background-color: #1c1b24"></div><div class="p-textile-link__detail--color" style="background-color: #14141c"></div><div class="p-textile-link__detail--color" style="background-color: #2f2b24"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#74<i> </i>2015</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink75" class="p-textile-link p-textile-link--75">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>薄暮</h3>
            					<h4>Twilight</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #766a5a"></div><div class="p-textile-link__detail--color" style="background-color: #908579"></div><div class="p-textile-link__detail--color" style="background-color: #8c7c6c"></div><div class="p-textile-link__detail--color" style="background-color: #4c4034"></div><div class="p-textile-link__detail--color" style="background-color: #847c6c"></div><div class="p-textile-link__detail--color" style="background-color: #645449"></div><div class="p-textile-link__detail--color" style="background-color: #645c44"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#75<i> </i>2015</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink76" class="p-textile-link p-textile-link--76">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>梅薫</h3>
            					<h4>Noble Plum</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #af9280"></div><div class="p-textile-link__detail--color" style="background-color: #403d48"></div><div class="p-textile-link__detail--color" style="background-color: #c9c3af"></div><div class="p-textile-link__detail--color" style="background-color: #736054"></div><div class="p-textile-link__detail--color" style="background-color: #747278"></div><div class="p-textile-link__detail--color" style="background-color: #64544c"></div><div class="p-textile-link__detail--color" style="background-color: #c3b4a4"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#76<i> </i>2016</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink77" class="p-textile-link p-textile-link--77">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>異風</h3>
            					<h4>Exotic Red</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #682b24"></div><div class="p-textile-link__detail--color" style="background-color: #411f22"></div><div class="p-textile-link__detail--color" style="background-color: #0f120f"></div><div class="p-textile-link__detail--color" style="background-color: #4c1c24"></div><div class="p-textile-link__detail--color" style="background-color: #742e24"></div><div class="p-textile-link__detail--color" style="background-color: #814e2c"></div><div class="p-textile-link__detail--color" style="background-color: #5c302c"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#77<i> </i>2016</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink78" class="p-textile-link p-textile-link--78">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>黒万筋 2016</h3>
            					<h4>Myriad of<i> </i>Black Stripes</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #1c1c14"></div><div class="p-textile-link__detail--color" style="background-color: #141414"></div><div class="p-textile-link__detail--color" style="background-color: #241c14"></div><div class="p-textile-link__detail--color" style="background-color: #14140c"></div><div class="p-textile-link__detail--color" style="background-color: #1c1414"></div><div class="p-textile-link__detail--color" style="background-color: #141c14"></div><div class="p-textile-link__detail--color" style="background-color: #1c1c18"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#78<i> </i>2016</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink79" class="p-textile-link p-textile-link--79">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>藍輪舞</h3>
            					<h4>Indigo Rondo</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #1c2316"></div><div class="p-textile-link__detail--color" style="background-color: #8b8c8d"></div><div class="p-textile-link__detail--color" style="background-color: #50586a"></div><div class="p-textile-link__detail--color" style="background-color: #373f51"></div><div class="p-textile-link__detail--color" style="background-color: #494b5a"></div><div class="p-textile-link__detail--color" style="background-color: #63645c"></div><div class="p-textile-link__detail--color" style="background-color: #6c6c76"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#79<i> </i>2016</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink80" class="p-textile-link p-textile-link--80">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>藍彩</h3>
            					<h4>Monochrome Indigo</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #c0bcb4"></div><div class="p-textile-link__detail--color" style="background-color: #252631"></div><div class="p-textile-link__detail--color" style="background-color: #46454b"></div><div class="p-textile-link__detail--color" style="background-color: #85827f"></div><div class="p-textile-link__detail--color" style="background-color: #7b7875"></div><div class="p-textile-link__detail--color" style="background-color: #3c4464"></div><div class="p-textile-link__detail--color" style="background-color: #74746c"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#80<i> </i>2016</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink81" class="p-textile-link p-textile-link--81">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>水紫</h3>
            					<h4>Purple Stripes<i> </i>on Black</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #988688"></div><div class="p-textile-link__detail--color" style="background-color: #201d1b"></div><div class="p-textile-link__detail--color" style="background-color: #705a6c"></div><div class="p-textile-link__detail--color" style="background-color: #5b4c50"></div><div class="p-textile-link__detail--color" style="background-color: #746c63"></div><div class="p-textile-link__detail--color" style="background-color: #7c544e"></div><div class="p-textile-link__detail--color" style="background-color: #44443c"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#81<i> </i>2016</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink900" class="p-textile-link p-textile-link--900">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>霜降小倉 白×黒</h3>
            					<h4>Pepper and Salt<i> </i>White × Black</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #606061"></div><div class="p-textile-link__detail--color" style="background-color: #161616"></div><div class="p-textile-link__detail--color" style="background-color: #acacaf"></div><div class="p-textile-link__detail--color" style="background-color: #949495"></div><div class="p-textile-link__detail--color" style="background-color: #9c9c9c"></div><div class="p-textile-link__detail--color" style="background-color: #2c2c2c"></div><div class="p-textile-link__detail--color" style="background-color: #343434"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#900<i> </i>2006</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink901" class="p-textile-link p-textile-link--901">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>霜降小倉 緑×黒</h3>
            					<h4>Pepper and Salt<i> </i>Green × Black</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #3e4f2f"></div><div class="p-textile-link__detail--color" style="background-color: #232c1b"></div><div class="p-textile-link__detail--color" style="background-color: #161a11"></div><div class="p-textile-link__detail--color" style="background-color: #34442c"></div><div class="p-textile-link__detail--color" style="background-color: #3c442c"></div><div class="p-textile-link__detail--color" style="background-color: #2c3c24"></div><div class="p-textile-link__detail--color" style="background-color: #343d24"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#901<i> </i>2014</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink902" class="p-textile-link p-textile-link--902">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>霜降小倉 紺×黒</h3>
            					<h4>Pepper and Salt<i> </i>Navy × Black</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #1f2834"></div><div class="p-textile-link__detail--color" style="background-color: #344156"></div><div class="p-textile-link__detail--color" style="background-color: #2c3c4c"></div><div class="p-textile-link__detail--color" style="background-color: #161c25"></div><div class="p-textile-link__detail--color" style="background-color: #2c3445"></div><div class="p-textile-link__detail--color" style="background-color: #10131a"></div><div class="p-textile-link__detail--color" style="background-color: #243444"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#902<i> </i>2014</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            		<li id="textileLink903" class="p-textile-link p-textile-link--903">
            			<a href="#">
            				<div class="p-textile-link__figure"></div>
            				<div class="p-textile-link__container">
            					<h3>縞霜降小倉</h3>
            					<h4>Stripes in<i> </i>Pepper and Salt</h4>
            					<ul class="p-textile-link__details">
            						<li class="p-textile-link__detail p-textile-link__detail--colors"><div class="p-textile-link__detail--color" style="background-color: #373737"></div><div class="p-textile-link__detail--color" style="background-color: #b4b4b5"></div><div class="p-textile-link__detail--color" style="background-color: #838383"></div><div class="p-textile-link__detail--color" style="background-color: #9c9c9d"></div><div class="p-textile-link__detail--color" style="background-color: #939394"></div><div class="p-textile-link__detail--color" style="background-color: #747474"></div><div class="p-textile-link__detail--color" style="background-color: #6b6b6c"></div></li><!--
            						--><li class="p-textile-link__detail p-textile-link__detail--meta"><div class="p-textile-link__detail--meta__container">#903<i> </i>2014</div></li>
            					</ul>
            				</div>
            			</a>
            		</li>
            	</ul>
            </div>
        </div>
    </body>
</html>
            
          
!
            
              .p-cn {
    position: relative;
    overflow: hidden;
    width: 100%;

    .p-cn__container {
        overflow: scroll;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
        width: 100%;
        -webkit-transform: rotate(180deg) translateZ(0);
        -ms-transform: rotate(180deg) translateZ(0);
        transform: rotate(180deg) translateZ(0);

        -webkit-scroll-snap-type: mandatory;
        -webkit-scroll-snap-destination: 95px 0;
        -webkit-scroll-snap-points-x: repeat(95px);

				-ms-overflow-style: none;

				&::-webkit-scrollbar {
            display: none
        }
				
        .p-textile-links {
            box-sizing: border-box;
            padding-left: 15px;
            width: 2960px;
            height: 300px;

            .p-textile-link {
                position: relative;
                float: left;
                overflow: hidden;
                margin-top: 15px;
                margin-right: 15px;
                width: 80px;
                height: 270px;
                -webkit-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                transform: rotate(180deg);

                a {
                    display: block;
                    width: 80px;
                    height: 270px;
                }
            }
        }
    }
}
            
          
!
999px
Loading ..................

Console