The Cubing Hub Profile Card@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: 'Montserrat', sans-serif;
background-color: #000;
}/* Card Container - Full Width */
.profile-card {
width: 100vw;
min-height: 100vh;
position: relative;
color: white;
font-family: 'Montserrat', sans-serif;
overflow: hidden;
}/* Background Image and Overlay */
.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) 0%, rgba(0,0,0,0.4) 100%);
z-index: -1;
}/* Header Section */
.profile-header {
padding: 20px;
text-align: right;
position: relative;
z-index: 2;
}.options-button {
display: inline-block;
cursor: pointer;
transition: transform 0.3s ease;
}.options-button:hover {
transform: rotate(90deg);
}.options-button span {
display: block;
width: 5px;
height: 5px;
background-color: white;
border-radius: 50%;
margin: 3px;
transition: all 0.3s ease;
}.options-button:hover span {
background-color: #f8e267;
}/* Profile Content */
.profile-content {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
z-index: 1;
min-height: calc(100vh - 60px);
justify-content: center;
}/* Profile Image */
.profile-image-container {
margin-bottom: 30px;
animation: zoomInFade 1.5s ease-out;
}.profile-image {
width: 140px;
height: 140px;
border-radius: 50%;
overflow: hidden;
background-color: white;
padding: 5px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
transition: all 0.5s ease;
position: relative;
}.profile-image::after {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.6);
animation: pulse 2.5s infinite;
}.profile-image:hover {
transform: scale(1.08);
}.profile-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
transition: transform 0.5s ease;
}.profile-image:hover img {
transform: scale(1.1);
}/* Profile Info */
.profile-info {
margin-bottom: 40px;
}.profile-name {
font-size: 36px;
font-weight: 800;
margin: 0 0 15px 0;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
letter-spacing: 1px;
animation: slideInFromRight 1s ease-out;
background: linear-gradient(90deg, #ffffff, #f8e267);
-webkit-background-clip: text;
background-clip: text;
color: white;
position: relative;
display: inline-block;
}.profile-name::after {
content: '';
position: absolute;
width: 50%;
height: 3px;
background: linear-gradient(90deg, transparent, #f8e267, transparent);
bottom: -5px;
left: 25%;
animation: fadeIn 2s ease-out;
}.profile-tagline {
font-size: 18px;
font-weight: 600;
margin: 0;
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
opacity: 0;
animation: fadeInSlideUp 1.2s ease-out forwards;
animation-delay: 0.5s;
letter-spacing: 0.5px;
}/* Contact Us Button - New Style */
.contact-us-container {
width: 100%;
max-width: 400px;
margin-bottom: 30px;
animation: bounceIn 1.5s ease;
position: relative;
}.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;
transform: translateY(0);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}.contact-us-button i {
margin-right: 12px;
font-size: 22px;
}.contact-us-button:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(255, 65, 108, 0.7);
letter-spacing: 2.5px;
}.contact-us-button:active {
transform: translateY(2px);
}.contact-us-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: all 0.5s ease;
}.contact-us-button:hover::before {
left: 100%;
}.pulse-effect {
animation: pulse-button 2s infinite;
}.contact-tagline {
font-size: 14px;
color: #f8e267;
margin-top: 10px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
animation: fadeIn 2s ease;
}@keyframes pulse-button {
0% {
box-shadow: 0 0 0 0 rgba(255, 65, 108, 0.7);
}
70% {
box-shadow: 0 0 0 15px rgba(255, 65, 108, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 65, 108, 0);
}
}@keyframes bounceIn {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-15px);}
60% {transform: translateY(-7px);}
}/* Action Buttons */
.profile-actions {
width: 100%;
max-width: 400px;
margin-bottom: 40px;
animation: fadeInUp 1.4s ease-out;
}.action-button {
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba(255, 255, 255, 0.95);
color: #333;
padding: 14px 24px;
margin-bottom: 15px;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 15px;
letter-spacing: 1.5px;
transition: all 0.3s ease;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
transform: translateY(0);
}.action-button:active {
transform: translateY(3px);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}.action-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: all 0.5s ease;
}.action-button:hover::before {
left: 100%;
}.action-button i {
margin-right: 12px;
font-size: 18px;
}.whatsapp-btn:hover {
background-color: #25D366;
color: white;
}.instagram-btn:hover {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
color: white;
}.facebook-btn:hover {
background-color: #3b5998;
color: white;
}.internship-btn:hover {
background-color: #f8e267;
color: #333;
}.button-options {
color: #999;
transition: all 0.3s ease;
}.action-button:hover .button-options {
color: rgba(255,255,255,0.8);
}/* Social Links */
.social-links {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 20px;
animation: fadeIn 1.6s ease-out;
}.social-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
font-size: 22px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
backdrop-filter: blur(5px);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}.social-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255,255,255,0.1);
transform: scale(0);
transition: all 0.5s ease;
}.social-icon:hover::before {
transform: scale(1.5);
}.social-icon i {
position: relative;
z-index: 1;
transition: all 0.3s ease;
}.social-icon:hover i {
transform: scale(1.2);
}.social-icon.facebook:hover {
background-color: #3b5998;
box-shadow: 0 0 20px rgba(59, 89, 152, 0.7);
}.social-icon.instagram:hover {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
box-shadow: 0 0 20px rgba(220, 39, 67, 0.7);
}.social-icon.youtube:hover {
background-color: #FF0000;
box-shadow: 0 0 20px rgba(255, 0, 0, 0.7);
}/* Modal Styles for Contact Form */
.modal {
display: none;
position: fixed;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.8);
backdrop-filter: blur(5px);
transition: all 0.3s ease;
opacity: 0;
}.modal.show {
display: block;
opacity: 1;
}.modal-content {
background-color: #222;
margin: 5% auto;
padding: 30px;
border-radius: 15px;
width: 90%;
max-width: 600px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
position: relative;
animation: modalFadeIn 0.5s ease-out;
border: 1px solid rgba(255,255,255,0.1);
}.close-modal {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
position: absolute;
top: 10px;
right: 20px;
transition: all 0.3s ease;
}.close-modal:hover,
.close-modal:focus {
color: #f8e267;
text-decoration: none;
cursor: pointer;
}.modal-content h3 {
margin: 0 0 15px 0;
color: #fff;
font-size: 24px;
text-align: center;
font-weight: 700;
}.modal-content p {
margin-bottom: 20px;
color: #ddd;
text-align: center;
font-size: 16px;
}/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-30px); }
to { opacity: 1; transform: translateY(0); }
}@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}@keyframes fadeInSlideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
70% { box-shadow: 0 0 0 15px rgba(255,255,255,0); }
100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}@keyframes zoomInFade {
from { opacity: 0; transform: scale(0.7); }
to { opacity: 1; transform: scale(1); }
}@keyframes slideInFromRight {
from { opacity: 0; transform: translateX(50px); }
to { opacity: 1; transform: translateX(0); }
}@keyframes modalFadeIn {
from { opacity: 0; transform: translateY(-50px); }
to { opacity: 1; transform: translateY(0); }
}/* Responsive Adjustments */
@media (max-width: 600px) {
.profile-name { font-size: 30px; }
.profile-tagline { font-size: 16px; }
.profile-image { width: 120px; height: 120px; }
.action-button { padding: 12px 20px; font-size: 14px; }
.contact-us-button { padding: 16px 24px; font-size: 16px; }
.social-icon { width: 45px; height: 45px; font-size: 20px; }
.modal-content { margin: 15% auto; padding: 20px; }
}/* Attention Animation for Contact Button */
.attention {
animation: attentionPulse 1s ease-in-out;
}@keyframes attentionPulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(255, 65, 108, 0.8); }
100% { transform: scale(1); }
}
The Cubing Hub
Born Average Destined For Greatness
// Modal functionality
document.addEventListener('DOMContentLoaded', function() {
// Contact Us Modal
const contactModal = document.getElementById('contactUsModal');
const contactBtn = document.getElementById('contactUsBtn');
const contactCloseBtn = document.querySelector('.contact-close');contactBtn.addEventListener('click', function(e) {
e.preventDefault();
contactModal.classList.add('show');
document.body.style.overflow = 'hidden'; // Prevent scrolling
});contactCloseBtn.addEventListener('click', function() {
contactModal.classList.remove('show');
document.body.style.overflow = ''; // Restore scrolling
});// Close contact modal when clicking outside
window.addEventListener('click', function(event) {
if (event.target == contactModal) {
contactModal.classList.remove('show');
document.body.style.overflow = ''; // Restore scrolling
}
});// Add special attention animation for contact button
setInterval(function() {
const contactButton = document.querySelector('.contact-us-button');
contactButton.classList.add('attention');
setTimeout(function() {
contactButton.classList.remove('attention');
}, 1000);
}, 8000);
});
