WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2787
Andev.web
Abrir no Editor
Publique Seu Código
Recomendado
30 July 2025
Modelo HTML de página de pagamento do cartão Visa
18 November 2025
Metehan
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