WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
सोशल मीडिया लिंक कार्ड HTML उदाहरण
21
yahya.arbe.sexy
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
1 October 2025
व्यक्तिगत पोर्टफोलियो HTML टेम्पलेट
2 September 2025
YouTube एम्बेड और ग्लिच प्रभाव के साथ HTML टीवी स्क्रीन
11 August 2025
P5.js और CSS के साथ HTML टेम्पलेट
HTML
Copy
Andev Web
Instagram
Followers:
33K
Follow me
GitHub
Followers:
330
Follow me
Linkedin
Followers:
550
Follow me
CSS
Copy
/* Replace with your CSS Code mport url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"); *, *::after, *::before { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Poppins", sans-serif; min-height: 100vh; background-color: #060606; display: grid; place-items: center; color: white; } #cards { width: 70%; padding-inline: 20px; display: flex; flex-wrap: wrap; gap: 30px; } .card { min-width: 200px; height: 350px; flex: 1 1 250px; background-color: rgba(255, 255, 255, 0.12); border-radius: 12px; position: relative; } #cards:hover > .card { background: radial-gradient( 400px circle at var(--mouse-x) var(--mouse-y), hsl(var(--color) / 1), rgba(255, 255, 255, 0.12) 40% ); } .card-content { position: absolute; inset: 1px; background-color: #131315; border-radius: inherit; } .card:nth-child(1) { --color: 348 80% 60%; } .card:nth-child(2) { --color: 0 0% 100%; } .card:nth-child(3) { --color: 220 100% 35%; } .card::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: radial-gradient( 500px circle at var(--mouse-x) var(--mouse-y), hsl(var(--color) / 0.35), transparent 40% ); border-radius: inherit; opacity: 0; z-index: 2; } #cards:hover > .card::before { opacity: 1; } a { all: unset; cursor: pointer; } .card-content { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 18px; align-items: center; } .card-content > i { font-size: 10rem; color: rgba(255, 255, 255, 0.5); } .card-content > p { color: rgba(255, 255, 255, 0.5); } .card-content > a { width: 90%; padding-block: 0.8rem; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; display: flex; justify-content: center; align-items: center; gap: 8px; z-index: 10; } .card-content > a:hover { background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); } (Leave empty if not needed) */
JS
Copy
/* Replace with your JS Code onst cards = Array.from(document.querySelectorAll(".card")); const cardsContainer = document.querySelector("#cards"); cardsContainer.addEventListener("mousemove", (e) => { for (const card of cards) { const rect = card.getBoundingClientRect(); x = e.clientX - rect.left; y = e.clientY - rect.top; card.style.setProperty("--mouse-x", `${x}px`); card.style.setProperty("--mouse-y", `${y}px`); } }); (Leave empty if not needed) */