Product list
How do I make an product list?
What is a product list? How do you make a product list? This script and codes were developed by Adem Ilter on 11 June 2022, Saturday.
Product list Previews
Product list - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>product list</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { font: normal 15px/1.4 Arial;
}
.width { width: 1010px; margin: 30px auto;
}
ul { margin: 1px 0 0 1px;
}
li { z-index: 1; position: relative; float: left; border: 1px solid #ddd; margin: -1px 0 0 -1px;
}
li .li { width: 200px; height: 280px;
}
li:before,
li:after,
li .li:before,
li .li:after { content: ""; position: absolute; width: 30px; height: 30px; border: 1px solid #fff; transition: border-color .3s;
}
li:before { top: -1px; left: -1px; border-width: 1px 0 0 1px;
}
li:after { top: -1px; right: -1px; border-width: 1px 1px 0 0;
}
li .li:before { bottom: -1px; left: -1px; border-width: 0 0 1px 1px;
}
li .li:after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0;
}
/* li:hover */
li:hover { z-index: 2;
}
li:hover:before,
li:hover:after,
li:hover .li:before,
li:hover .li:after { border-color: #333;
}
/* Preview */
.preview { opacity: 0; position: absolute; left: 40px; right: 40px; top: 0; height: 30px; line-height: 32px; background-color: #fe3; text-align: center; text-decoration: none; color: #000; transition: .2s;
}
li:hover .preview { opacity: 1; top: 80px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='width'> <ul> <li> <div class='li'> <a class='preview' href='#'>PREVIEW</a> </div> </li> <li> <div class='li'> <a class='preview' href='#'>PREVIEW</a> </div> </li> <li> <div class='li'> <a class='preview' href='#'>PREVIEW</a> </div> </li> <li> <div class='li'> <a class='preview' href='#'>PREVIEW</a> </div> </li> <li> <div class='li'> <a class='preview' href='#'>PREVIEW</a> </div> </li> <li> <div class='li'> <a class='preview' href='#'>PREVIEW</a> </div> </li> <li> <div class='li'> <a class='preview' href='#'>PREVIEW</a> </div> </li> <li> <div class='li'> <a class='preview' href='#'>PREVIEW</a> </div> </li> <li> <div class='li'> <a class='preview' href='#'>PREVIEW</a> </div> </li> <li> <div class='li'> <a class='preview' href='#'>PREVIEW</a> </div> </li> </ul>
</div>
</body>
</html>
Product list - Script Codes CSS Codes
body { font: normal 15px/1.4 Arial;
}
.width { width: 1010px; margin: 30px auto;
}
ul { margin: 1px 0 0 1px;
}
li { z-index: 1; position: relative; float: left; border: 1px solid #ddd; margin: -1px 0 0 -1px;
}
li .li { width: 200px; height: 280px;
}
li:before,
li:after,
li .li:before,
li .li:after { content: ""; position: absolute; width: 30px; height: 30px; border: 1px solid #fff; transition: border-color .3s;
}
li:before { top: -1px; left: -1px; border-width: 1px 0 0 1px;
}
li:after { top: -1px; right: -1px; border-width: 1px 1px 0 0;
}
li .li:before { bottom: -1px; left: -1px; border-width: 0 0 1px 1px;
}
li .li:after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0;
}
/* li:hover */
li:hover { z-index: 2;
}
li:hover:before,
li:hover:after,
li:hover .li:before,
li:hover .li:after { border-color: #333;
}
/* Preview */
.preview { opacity: 0; position: absolute; left: 40px; right: 40px; top: 0; height: 30px; line-height: 32px; background-color: #fe3; text-align: center; text-decoration: none; color: #000; transition: .2s;
}
li:hover .preview { opacity: 1; top: 80px;
}
| Developer | Adem Ilter |
| Username | ademilter |
| Uploaded | June 11, 2022 |
| Rating | 3 |
| Size | 3,211 Kb |
| Views | 109,296 |
Do you need developer help for Product list?
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!
Adem Ilter (ademilter) Script Codes
| Name | Size |
| Fake loading | 1,952 Kb |
| Css color for svg | 2,392 Kb |
| Lunar eclipse | 2,056 Kb |
| Countdown Clock | 4,715 Kb |
| Chrome logo effect | 1,965 Kb |
| Circle loading | 2,932 Kb |
| Pure CSS3 iPad Clock | 6,546 Kb |
| Border box arrow | 2,700 Kb |
| Responsive table | 2,426 Kb |
| Prayer times layout | 5,245 Kb |
Create amazing love letters 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!
Similar Scripts & Codes
| Name | Username | Size |
| Tab Menus | Zephyr | 3,180 Kb |
| Header | Er40 | 1,542 Kb |
| Disable JavaScript execution from console | Ludviglindblom | 2,534 Kb |
| CSS Parent Selector | Tomhodgins | 2,143 Kb |
| Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
| Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
| A Bouncy Menu Toggle | Billyysea | 4,563 Kb |
| CSS Heart Loaders | Nourabusoud | 2,161 Kb |
| Responsive Pricing Table | Jeremycaris | 2,690 Kb |
| UI Challenge - Budget Selector | AgentRR007 | 3,547 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!