A11y Product Tile

Developer
Kendrick Arnett
Size
4,484 Kb
Views
26,312
  1. A11y Product Tile Previews
  2. A11y Product Tile HTML Codes
  3. A11y Product Tile CSS Codes

How do I make an a11y product tile?

What is a a11y product tile? How do you make a a11y product tile? This script and codes were developed by Kendrick Arnett on 05 November 2022, Saturday.

A11y Product Tile Previews
IQ Test

A11y Product Tile - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>a11y Product Tile</title> <style>
@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600';
body { font-family: 'Open Sans';
}
</style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/rlgxqp.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul class="tiles"> <li class="tile"><a class="tile-product-link" href="http://www.pier1.com/chas-blue-%26-white-seersucker-armchair/2443389.html" aria-label="Chas Blue &amp; White Seersucker Armchair. From $299.99. 4.9 stars, 12 ratings. This product is: New, Clearance."><img class="tile-image" src="http://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/dwb3143d96/images/2443389/2443389_1.jpg?sw=200&amp;sh=200" alt=" "/> <div class="tile-text"> <div class="tile-stickers"> <div class="tile-sticker">new </div> <div class="tile-sticker">clearance</div> </div> <div class="tile-product-link tile-product-name"><span class="tile-collection-name">Chas</span> Blue &amp; White Seersucker Armchair</div> <div class="tile-price">from $299.99</div> <div class="tile-rnr"> <div class="tile-stars" aria-label="4.9 stars">⭐️⭐️⭐️⭐️⭐️</div> <div class="tile-ratings" aria-label="12 ratings">(12)</div> </div> <button class="tile-add-to-cart" aria-label="Add Blue &amp; White Seersucker Armchair to basket">Add to Basket</button> </div></a></li> <li class="tile"><a class="tile-product-link" href="http://www.pier1.com/colette-silver-sage-crushed-velvet-armchair/2987352.html" aria-label="Colette Silver Sage Crushed Velvet Armchair. $549.95. 4.1 stars, 5 ratings. This product is: New"><img class="tile-image" src="http://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/dw87841b5e/images/2987352/2987352_10A.jpg?sw=200&amp;sh=200" alt=" "/> <div class="tile-text"> <div class="tile-stickers"> <div class="tile-sticker">new </div> </div> <div class="tile-product-link tile-product-name"><span class="tile-collection-name">Colette</span> Silver Sage Crushed Velvet Armchair</div> <div class="tile-price">$549.95</div> <div class="tile-rnr"> <div class="tile-stars" aria-label="4.7 stars">⭐️⭐️⭐️⭐️</div> <div class="tile-ratings" aria-label="20 ratings">(20)</div> </div> <button class="tile-add-to-cart" aria-label="Add Blue &amp; White Seersucker Armchair to basket">Add to Basket</button> </div></a></li> <li class="tile"><a class="tile-product-link" href="http://www.pier1.com/eliza-cream-upholstered-armchair/3103071.html" aria-label="Eliza Cream Upholstered Armchair. $549.95. 4.9 stars, 12 ratings. This product is: New"><img class="tile-image" src="http://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/dw02ab62c4/images/3103071/3103071_1.jpg?sw=200&amp;sh=200" alt=" "/> <div class="tile-text"> <div class="tile-stickers"> <div class="tile-sticker">new </div> </div> <div class="tile-product-link tile-product-name"><span class="tile-collection-name">Eliza</span> Cream Upholstered Armchair</div> <div class="tile-price">$549.95</div> <div class="tile-rnr"> <div class="tile-stars" aria-label="4.9 stars">⭐️⭐️⭐️⭐️</div> <div class="tile-ratings" aria-label="12 ratings">(5)</div> </div> <button class="tile-add-to-cart" aria-label="Add Blue &amp; White Seersucker Armchair to basket">Add to Basket</button> </div></a></li>
</ul>
</body>
</html>

A11y Product Tile - Script Codes CSS Codes

body,
html { height: 100%;
}
:focus { outline: thin dotted;
}
body { font-family: 'Open Sans'; display: -webkit-box; display: -ms-flexbox; display: flex; background: #faf9f9; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.tiles { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.tile-product-link { color: #555; text-decoration: none;
}
.tile { background: white; margin: 1rem; width: 200px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0px 8px rgba(0, 0, 0, 0.1); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.tile .tile-image { display: block; margin-bottom: 0.25rem;
}
.tile .tile-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0.5rem;
}
.tile .tile-collection-name { display: block; font-size: 0.75rem; line-height: 1.5;
}
.tile .tile-product-name { display: block;
}
.tile .tile-product-price { -ms-flex-item-align: end; align-self: flex-end;
}
.tile .tile-sticker { display: inline-block; text-transform: uppercase; font-size: 0.66rem; line-height: 1; background: #efefef; padding: 0.2rem; vertical-align: middle;
}
.tile .tile-stars,
.tile .tile-ratings { display: inline-block;
}
.tile .tile-add-to-cart { font-family: Open Sans; margin: 0.5rem 0.25rem 0.25rem 0.25rem; padding: 0.25rem; border: 0; background: #fffefe; color: #1492d9; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
}
.tile .visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden;
}
A11y Product Tile - Script Codes
A11y Product Tile - Script Codes
Home Page Home
Developer Kendrick Arnett
Username kendrick
Uploaded November 05, 2022
Rating 3
Size 4,484 Kb
Views 26,312
Do you need developer help for A11y Product Tile?

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!

Kendrick Arnett (kendrick) Script Codes
Name
Duotone Fixed Backgrounds
Linkish Buttons
SVG Social Icons
Postfix Badge Button
Chunky Toggles
Flexbox Resume Challenge
SVG Button
Pulse for Skeleton Screens
Lazy Image Loading via ScrollMagic
A Pen by Kendrick Arnett
Create amazing SEO content 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!