<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Glass Cards</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(135deg, #101010, #1f1f1f);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: Arial, sans-serif;
}
.neon-shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.circle, .triangle, .rectangle {
position: absolute;
opacity: 0.8;
filter: blur(2px);
}
.circle {
width: 200px;
height: 200px;
background: rgba(0, 255, 255, 0.8);
border-radius: 50%;
top: 20%;
left: 15%;
}
.triangle {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid rgba(255, 0, 255, 0.8);
top: 50%;
left: 70%;
}
.rectangle {
width: 220px;
height: 180px;
background: rgba(255, 255, 0, 0.8);
top: 70%;
left: 30%;
}
.card-container {
display: flex;
gap: 20px;
position: relative;
z-index: 1;
}
.card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
width: 230px;
height: 320px;
border-radius: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 20px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card img {
width: 100px;
height: 100px;
border-radius: 50%;
transition: transform 0.3s, box-shadow 0.3s;
}
.card h3 {
color: white;
font-family: 'Lucida Sans', 'Lucida Sans Regular', Geneva, Verdana, sans-serif;
}
.author {
color: white;
font-size: 14px;
margin-top: -10px;
}
.follow-btn {
background: rgba(0, 255, 127, 0.7);
border: none;
padding: 15px 25px;
border-radius: 20px;
color: white;
font-size: 18px;
cursor: pointer;
text-transform: uppercase;
animation: neon-flicker 2s infinite;
transition: background 0.3s;
}
.follow-btn:hover {
background: rgba(0, 255, 127, 1);
}
@keyframes neon-flicker {
0%, 100% {
box-shadow: 0 0 10px rgba(0, 255, 127, 0.8), 0 0 30px rgba(0, 255, 127, 0.8), 0 0 50px rgba(0, 255, 127, 0.8);
}
50% {
box-shadow: 0 0 20px rgba(0, 255, 127, 1), 0 0 40px rgba(0, 255, 127, 1), 0 0 60px rgba(0, 255, 127, 1);
}
}
.card:hover {
transform: scale(1.1);
box-shadow: 0 8px 50px rgba(0, 255, 127, 0.8);
}
.card img {
width: 100px;
height: 100px;
border-radius: 50%;
transition: transform 0.3s ease, filter 0.3s ease;
}
.card:hover img {
transform: translateY(-10px);
}
.card img.active {
transform: translateY(-30px) scale(1.2);
filter: drop-shadow(0 0 20px rgba(255, 255, 0, 1));
}
</style>
</head>
<body>
<div class="neon-shapes">
<div class="circle"></div>
<div class="triangle"></div>
<div class="rectangle"></div>
</div>
<div class="card-container">
<div class="card" onclick="cardClickEffect(this)">
<img src="./removebg.png" alt="Profile Pic">
<h3>webstreet_code</h3>
<div class="author">Author: Alexa</div>
<button class="follow-btn">Follow Us</button>
</div>
<div class="card" onclick="cardClickEffect(this)">
<img src="./jerry.png" alt="Profile Pic">
<h3>webstreet_code</h3>
<div class="author">Author: Jerry</div>
<button class="follow-btn">Follow Us</button>
</div>
<div class="card" onclick="cardClickEffect(this)">
<img src="./tom.png" alt="Profile Pic">
<h3>webstreet_code</h3>
<div class="author">Author: Tom</div>
<button class="follow-btn">Follow Us</button>
</div>
</div>
<script>
function cardClickEffect(card) {
const img = card.querySelector('img');
img.classList.add('active');
setTimeout(() => {
img.classList.remove('active');
}, 3000); // 3 seconds for the effect duration
// const img = card.querySelector('img');
img.style.transform = 'translateY(-20px) scale(1.5)';
// img.style.boxShadow = '0 10px 60px rgba(255, 255, 0, 1)';
card.style.transform = 'scale(1.2)';
card.style.boxShadow = '0 10px 60px rgba(255, 255, 0, 1)';
setTimeout(() => {
img.style.transform = 'translateY(0) scale(1)';
img.style.boxShadow = 'none';
card.style.transform = 'scale(1)';
card.style.boxShadow = '0 4px 30px rgba(0, 0, 0, 0.5)';
}, 3000);
}
</script>
</body>
</html>
Build apps, not infrastructure.
Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)