WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="fr-FR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Portfolio de Angelo | Developpeur Full Stack</title> <link rel="website icon" type="jpg" href="icone.jpg"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <link rel="stylesheet" href="style.css"> </head> <body class="text-white h-full"> <section class="bg-[#161616] text-white py-24 px-6 rounded-[50px] max-w-7xl mx-auto relative overflow-hidden"> <div class="absolute -top-40 -left-40 w-[500px] h-[500px] bg-red-600/20 blur-[160px] rounded-full"></div> <div class="flex flex-col md:flex-row justify-between gap-6 relative z-10"> <h2 class="text-5xl font-semibold tracking-tight"> Mes <span class="text-red-500">services</span> </h2> <p class="text-gray-400 max-w-md leading-relaxed text-lg"> Des solutions modernes, performantes et pensées pour transformer vos idées en expériences digitales puissantes. </p> </div> <div class="border-t border-gray-800 my-14"></div> <div class="grid md:grid-cols-3 gap-10 relative z-10"> <div class="card group bg-[#1f1f1f] p-7 rounded-[35px] relative overflow-hidden"> <h3 class="text-2xl font-semibold mb-10">Site Vitrine</h3> <div class="relative h-56"> <img src="https://picsum.photos/400/300?1" class="absolute rounded-2xl shadow-2xl rotate-[-8deg] transition duration-700 group-hover:rotate-[-3deg]"> <img src="https://picsum.photos/400/300?2" class="absolute rounded-2xl shadow-2xl rotate-[6deg] transition duration-700 group-hover:rotate-[1deg]"> </div> <div class="arrow">↗</div> </div> <div class="card group bg-red-600 p-7 rounded-[35px] relative overflow-hidden"> <h3 class="text-2xl font-semibold mb-10">Boutique en ligne</h3> <div class="relative h-56"> <img src="https://picsum.photos/400/300?3" class="absolute rounded-2xl shadow-2xl rotate-[-8deg] transition duration-700 group-hover:rotate-[-3deg]"> <img src="https://picsum.photos/400/300?4" class="absolute rounded-2xl shadow-2xl rotate-[6deg] transition duration-700 group-hover:rotate-[1deg]"> </div> <div class="arrow dark">↗</div> </div> <div class="card group bg-[#1f1f1f] p-7 rounded-[35px] relative overflow-hidden"> <h3 class="text-2xl font-semibold mb-10">Application Web</h3> <div class="relative h-56"> <img src="https://picsum.photos/400/300?5" class="absolute rounded-2xl shadow-2xl rotate-[-8deg] transition duration-700 group-hover:rotate-[-3deg]"> <img src="https://picsum.photos/400/300?6" class="absolute rounded-2xl shadow-2xl rotate-[6deg] transition duration-700 group-hover:rotate-[1deg]"> </div> <div class="arrow">↗</div> </div> </div> </section> <script src="script.js"></script> </body> </html>
.card { transition: all .5s ease; transform-style: preserve-3d; } .card:hover { transform: translateY(-15px) scale(1.02); box-shadow: 0 40px 80px rgba(0,0,0,.6); } .arrow { position: absolute; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; font-size: 22px; color: white; transition: all .4s ease; } .card:hover .arrow { transform: scale(1.2) rotate(15deg); background: #ef4444; box-shadow: 0 0 25px rgba(239,68,68,.6); } .arrow.dark { background: rgba(0,0,0,.3); }
document.querySelectorAll(".card").forEach(card => { card.addEventListener("mousemove", e => { let rect = card.getBoundingClientRect(); let x = e.clientX - rect.left; let y = e.clientY - rect.top; let rotateX = (y / rect.height - 0.5) * 10; let rotateY = (x / rect.width - 0.5) * -10; card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-10px)`; }); card.addEventListener("mouseleave", () => { card.style.transform = "rotateX(0) rotateY(0)"; }); });
Preview
Open Advanced Editor
HTML
CSS
JS
<!DOCTYPE html> <html lang="fr-FR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Portfolio de Angelo | Developpeur Full Stack</title> <link rel="website icon" type="jpg" href="icone.jpg"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <link rel="stylesheet" href="style.css"> </head> <body class="text-white h-full"> <section class="bg-[#161616] text-white py-24 px-6 rounded-[50px] max-w-7xl mx-auto relative overflow-hidden"> <div class="absolute -top-40 -left-40 w-[500px] h-[500px] bg-red-600/20 blur-[160px] rounded-full"></div> <div class="flex flex-col md:flex-row justify-between gap-6 relative z-10"> <h2 class="text-5xl font-semibold tracking-tight"> Mes <span class="text-red-500">services</span> </h2> <p class="text-gray-400 max-w-md leading-relaxed text-lg"> Des solutions modernes, performantes et pensées pour transformer vos idées en expériences digitales puissantes. </p> </div> <div class="border-t border-gray-800 my-14"></div> <div class="grid md:grid-cols-3 gap-10 relative z-10"> <div class="card group bg-[#1f1f1f] p-7 rounded-[35px] relative overflow-hidden"> <h3 class="text-2xl font-semibold mb-10">Site Vitrine</h3> <div class="relative h-56"> <img src="https://picsum.photos/400/300?1" class="absolute rounded-2xl shadow-2xl rotate-[-8deg] transition duration-700 group-hover:rotate-[-3deg]"> <img src="https://picsum.photos/400/300?2" class="absolute rounded-2xl shadow-2xl rotate-[6deg] transition duration-700 group-hover:rotate-[1deg]"> </div> <div class="arrow">↗</div> </div> <div class="card group bg-red-600 p-7 rounded-[35px] relative overflow-hidden"> <h3 class="text-2xl font-semibold mb-10">Boutique en ligne</h3> <div class="relative h-56"> <img src="https://picsum.photos/400/300?3" class="absolute rounded-2xl shadow-2xl rotate-[-8deg] transition duration-700 group-hover:rotate-[-3deg]"> <img src="https://picsum.photos/400/300?4" class="absolute rounded-2xl shadow-2xl rotate-[6deg] transition duration-700 group-hover:rotate-[1deg]"> </div> <div class="arrow dark">↗</div> </div> <div class="card group bg-[#1f1f1f] p-7 rounded-[35px] relative overflow-hidden"> <h3 class="text-2xl font-semibold mb-10">Application Web</h3> <div class="relative h-56"> <img src="https://picsum.photos/400/300?5" class="absolute rounded-2xl shadow-2xl rotate-[-8deg] transition duration-700 group-hover:rotate-[-3deg]"> <img src="https://picsum.photos/400/300?6" class="absolute rounded-2xl shadow-2xl rotate-[6deg] transition duration-700 group-hover:rotate-[1deg]"> </div> <div class="arrow">↗</div> </div> </div> </section> <script src="script.js"></script> </body> </html>
.card { transition: all .5s ease; transform-style: preserve-3d; } .card:hover { transform: translateY(-15px) scale(1.02); box-shadow: 0 40px 80px rgba(0,0,0,.6); } .arrow { position: absolute; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; font-size: 22px; color: white; transition: all .4s ease; } .card:hover .arrow { transform: scale(1.2) rotate(15deg); background: #ef4444; box-shadow: 0 0 25px rgba(239,68,68,.6); } .arrow.dark { background: rgba(0,0,0,.3); }
document.querySelectorAll(".card").forEach(card => { card.addEventListener("mousemove", e => { let rect = card.getBoundingClientRect(); let x = e.clientX - rect.left; let y = e.clientY - rect.top; let rotateX = (y / rect.height - 0.5) * 10; let rotateY = (x / rect.width - 0.5) * -10; card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-10px)`; }); card.addEventListener("mouseleave", () => { card.style.transform = "rotateX(0) rotateY(0)"; }); });
Preview
Validating your code, please wait...