The Cubing Hub Profile Card
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body, html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background-color: #000;
}.profile-card {
width: 100vw;
min-height: 100vh;
position: relative;
color: white;
overflow: hidden;
}.bg-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://thecubinghub.com/wp-content/uploads/2025/03/photo-1604076850742-4c7221f3101b.avif') no-repeat center center;
background-size: cover;
filter: brightness(2.5);
z-index: -2;
}.bg-overlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0,0,0,0.7), rgba(0,0,0,0.4));
z-index: -1;
}.profile-content {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
z-index: 1;
min-height: 100vh;
justify-content: center;
}.profile-name {
font-size: 36px;
font-weight: 800;
background: linear-gradient(90deg, #ffffff, #f8e267);
-webkit-background-clip: text;
color: white;
position: relative;
display: inline-block;
}.profile-image {
width: 140px;
height: 140px;
border-radius: 50%;
overflow: hidden;
background-color: white;
padding: 5px;
margin-bottom: 30px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
position: relative;
}.profile-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}.contact-us-container {
width: 100%;
max-width: 400px;
margin-bottom: 20px;
}.contact-us-button {
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #ff416c, #ff4b2b);
color: white;
padding: 18px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 800;
font-size: 18px;
letter-spacing: 2px;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(255, 65, 108, 0.5);
position: relative;
overflow: hidden;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}.contact-us-button:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(255, 65, 108, 0.7);
}/* Glowing Holiday Club Button */
.holiday-club-button {
display: inline-block;
background: linear-gradient(45deg, #f8e267, #ffe600);
color: #000;
font-weight: 900;
padding: 18px 36px;
border-radius: 50px;
text-decoration: none;
font-size: 18px;
letter-spacing: 1.5px;
margin-top: 15px;
box-shadow: 0 0 12px rgba(255, 230, 0, 0.7);
animation: glowPulse 1.5s infinite ease-in-out;
}@keyframes glowPulse {
0% {
box-shadow: 0 0 12px rgba(255, 230, 0, 0.7);
}
50% {
box-shadow: 0 0 25px rgba(255, 230, 0, 1);
}
100% {
box-shadow: 0 0 12px rgba(255, 230, 0, 0.7);
}
}/* Responsive */
@media (max-width: 768px) {
.profile-name {
font-size: 28px;
}
.contact-us-button, .holiday-club-button {
font-size: 16px;
padding: 14px 24px;
}
}
Â
