WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Product Card UI Design
2767
Andev.web
Open In Editor
Publish Your Code
Recommended
29 August 2024
Calculator UI -Neumorphism -Drak
28 October 2024
Profile card design
22 July 2025
Card 3D
HTML
Copy
Andev Web
Air Jordan 1 Retro High Off-White
Men's Shoe
Product Details
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla ducimus iusto.
Size
36
38
40
42
44
$
4,999
.99
Buy Now
CSS
Copy
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { display: flex; justify-content: center; align-items: center; background: linear-gradient(#4ba9e9 0, #4ba9e9 50%, #fff 50%, #fff 100%); min-height: 100vh; } .card { position: relative; width: 300px; height: 380px; background: #0000; display: flex; box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1); overflow: hidden; transition: 0.5s ease-in-out; } .card:hover { width: 600px; } .card .imgBx { position: relative; min-width: 300px; height: 100%; background: #fff; display: flex; justify-content: center; align-items: center; z-index: 10; } .card .imgBx img { max-width: 250px; transition: 0.5s ease-in-out; } .card:hover .imgBx img { transform: rotate(-35deg) translateX(-20px); } .card .details { position: absolute; left: 0; width: 300px; height: 100%; background: #4ba9e9; display: flex; justify-content: center; padding: 20px; flex-direction: column; transition: 0.5s ease-in-out; } .card:hover .details { left: 300px; } .card .details::before { content: ''; position: absolute; left: 0px; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #fff; z-index: 1; } .card .details h3 { color: #fff; text-transform: uppercase; font-weight: 600; font-size: 1.5em; line-height: 1em; } .card .details h3 span { font-size: 0.65em; font-weight: 300; opacity: 0.85; text-transform: none; } .card .details h4 { color: #fff; text-transform: uppercase; font-weight: 600; font-size: 0.9em; line-height: 1em; margin-top: 20px; margin-bottom: 10px; } p { color: #fff; font-size: 0.8em; opacity: 0.85; } .size { display: flex; gap: 10px; } .size li { list-style: none; color: #fff; font-size: 0.9em; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border: 2px solid #fff; cursor: pointer; font-weight: 500; opacity: 0.5; } .size li:hover { background: #fff; color: #4ba9e9; opacity: 1; } .group { position: relative; display: flex; justify-content: space-between; margin-top: 20px; align-items: center; } .card .details h2 { color: #fff; text-transform: uppercase; font-weight: 600; font-size: 2em; } .card .details h2 sup { font-weight: 300; } .card .details h2 small { font-size: 0.75em; } .card .details a { display: inline-flex; padding: 10px 25px; background: #fff; font-weight: 500; text-decoration: none; text-transform: uppercase; font-weight: 600; color: #4ba9e9; }
JS
Copy