Web Dev

/* Reset & Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #0a1a0a 0%, #052105 100%); color: #fff; overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; position: relative; text-align: center; } /* Technology Background */ .tech-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; background: radial-gradient(circle at 20% 30%, rgba(0, 255, 100, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(0, 200, 80, 0.05) 0%, transparent 50%); } .binary-code { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(90deg, transparent 95%, rgba(0, 255, 100, 0.1) 100%), linear-gradient(0deg, transparent 95%, rgba(0, 255, 100, 0.1) 100%); background-size: 50px 50px; animation: binary-move 20s linear infinite; } .circuit-board { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; background-image: radial-gradient(circle at 30% 40%, rgba(0, 255, 100, 0.1) 0%, transparent 10%), radial-gradient(circle at 70% 60%, rgba(0, 255, 100, 0.1) 0%, transparent 10%); border: 1px solid rgba(0, 255, 100, 0.2); border-radius: 10px; } .server-rack { position: absolute; bottom: 10%; right: 10%; width: 200px; height: 150px; background: repeating-linear-gradient( 0deg, transparent, transparent 10px, rgba(0, 255, 100, 0.1) 10px, rgba(0, 255, 100, 0.1) 20px ); border: 2px solid rgba(0, 255, 100, 0.3); } .code-window { position: absolute; top: 20%; left: 5%; width: 250px; height: 150px; background: rgba(0, 20, 10, 0.5); border: 1px solid rgba(0, 255, 100, 0.3); border-radius: 5px; overflow: hidden; } .code-window::before { content: ""; position: absolute; top: 10px; left: 10px; color: rgba(0, 255, 100, 0.7); font-family: monospace; font-size: 12px; animation: code-typing 8s linear infinite; } .processor-chip { position: absolute; top: 60%; left: 15%; width: 100px; height: 100px; background: linear-gradient(45deg, transparent 48%, rgba(0, 255, 100, 0.3) 50%, transparent 52%), linear-gradient(-45deg, transparent 48%, rgba(0, 255, 100, 0.3) 50%, transparent 52%); animation: rotate-chip 15s linear infinite; } .database-icon { position: absolute; bottom: 20%; left: 20%; width: 80px; height: 120px; background: repeating-linear-gradient( to bottom, transparent, transparent 15px, rgba(0, 255, 100, 0.3) 15px, rgba(0, 255, 100, 0.3) 20px ); border-radius: 10px 10px 0 0; border: 2px solid rgba(0, 255, 100, 0.4); } /* Coding Tags */ .html-tag, .css-tag, .js-tag { position: absolute; color: rgba(0, 255, 100, 0.6); font-family: monospace; font-weight: bold; font-size: 14px; padding: 5px 10px; background: rgba(0, 20, 10, 0.3); border-radius: 3px; animation: float-tags 15s linear infinite; } .html-tag { content: ""; top: 15%; right: 15%; animation-delay: 0s; } .css-tag { content: "{CSS}"; top: 70%; right: 20%; animation-delay: 5s; } .js-tag { content: "JS()"; bottom: 25%; left: 10%; animation-delay: 10s; } .glowing-dots { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .glowing-dots span { position: absolute; width: 4px; height: 4px; background: #00ff64; border-radius: 50%; box-shadow: 0 0 10px #00ff64; animation: glowing-dots 3s infinite; } .glowing-dots span:nth-child(1) { top: 15%; left: 20%; animation-delay: 0s; } .glowing-dots span:nth-child(2) { top: 40%; left: 70%; animation-delay: 0.5s; } .glowing-dots span:nth-child(3) { top: 70%; left: 30%; animation-delay: 1s; } .glowing-dots span:nth-child(4) { top: 30%; left: 80%; animation-delay: 1.5s; } .glowing-dots span:nth-child(5) { top: 80%; left: 60%; animation-delay: 2s; } /* Main Container */ .main-container { max-width: 1200px; width: 100%; text-align: center; z-index: 10; padding: 20px; } /* Logo Animation Area */ .logo-animation-area { min-height: 700px; /* Fixed minimum height */ position: relative; margin-bottom: 60px; overflow: visible; /* Changed from hidden to visible */ display: flex; flex-direction: column; align-items: center; justify-content: center; } /* Wheel/Tire Rolling Logo Animation */ .logo-wheel-container { position: relative; /* Changed from absolute to relative */ width: 200px; height: 200px; margin: 0 auto 40px; /* Center and add space below */ animation: wheel-enter 2.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, wheel-drop 0.8s ease-out 2.5s forwards, wheel-bounce 0.6s ease-out 3.3s forwards; z-index: 20; } /* Logo Stops Rotating at the End */ .rolling-logo { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; background: white; padding: 15px; border: 5px solid #00ff64; box-shadow: 0 0 30px rgba(0, 255, 100, 0.8), inset 0 0 20px rgba(0, 255, 100, 0.3); /* Wheel rotation animation - STOPS after animation */ animation: wheel-rotate 2s linear 0s 1, /* Only rotates during initial movement */ logo-appear 0.5s ease-out 3.3s forwards; } .wheel-shadow { position: absolute; bottom: -20px; left: 10%; width: 80%; height: 30px; background: rgba(0, 0, 0, 0.4); border-radius: 50%; filter: blur(10px); opacity: 0; animation: shadow-appear 0.5s ease-out 2.5s forwards; } .tire-mark { position: absolute; bottom: 0; left: -200px; width: 400px; height: 3px; background: linear-gradient(90deg, transparent 0%, #00ff64 20%, #00ff64 80%, transparent 100%); opacity: 0.5; animation: tire-mark 2.5s linear forwards; } /* Brand Name Below Logo - RED COLOR - FIXED */ .brand-name-below { width: 100%; max-width: 900px; opacity: 0; animation: brand-appear 1s ease-out 4s forwards; text-align: center; margin: 20px 0 40px 0; /* Space above and below */ padding: 25px; background: rgba(0, 0, 0, 0.4); /* Slightly darker background for better contrast */ border-radius: 15px; backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1); border: 1px solid rgba(0, 255, 100, 0.2); position: relative; z-index: 15; overflow: visible !important; /* Force visible overflow */ } .brand-name-below::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #ff0000, transparent); } .brand-name-below h1 { font-size: 56px; font-weight: 800; color: #ff0000; /* RED COLOR */ margin-bottom: 5px; text-transform: uppercase; letter-spacing: 3px; text-shadow: 0 0 25px rgba(255, 0, 0, 1), 0 0 35px rgba(255, 0, 0, 0.8), 0 0 45px rgba(255, 0, 0, 0.5); line-height: 1.1; padding: 5px 0; position: relative; overflow: visible !important; white-space: nowrap; } .brand-name-below h2 { font-size: 42px; font-weight: 700; color: #ff3333; /* Lighter red */ letter-spacing: 2px; text-transform: uppercase; margin-top: 0; text-shadow: 0 0 20px rgba(255, 51, 51, 1), 0 0 30px rgba(255, 51, 51, 0.7), 0 0 40px rgba(255, 51, 51, 0.4); line-height: 1.1; padding: 5px 0; position: relative; overflow: visible !important; white-space: nowrap; } /* Contact Information Section */ .contact-info-section { width: 100%; max-width: 700px; opacity: 0; animation: contact-appear 1s ease-out 5s forwards; display: flex; flex-direction: column; gap: 20px; align-items: center; margin-top: 30px; } .contact-item { display: flex; align-items: center; gap: 20px; padding: 18px 40px; background: rgba(255, 255, 255, 0.08); border-radius: 50px; border: 1px solid rgba(0, 255, 100, 0.3); backdrop-filter: blur(10px); transition: all 0.3s ease; width: 100%; justify-content: flex-start; max-width: 500px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .contact-item:hover { background: rgba(255, 255, 255, 0.12); border-color: #00ff64; transform: translateY(-5px) scale(1.02); box-shadow: 0 10px 25px rgba(0, 255, 100, 0.2); } .contact-item i { color: #00ff64; font-size: 24px; width: 40px; text-align: center; } .contact-item span { font-size: 20px; color: #fff; font-weight: 500; letter-spacing: 0.5px; } /* Footer */ .footer { margin-top: 60px; padding: 25px; text-align: center; border-top: 1px solid rgba(0, 255, 100, 0.2); width: 100%; opacity: 0; animation: fade-in 1s ease-out 6s forwards; background: rgba(0, 20, 10, 0.3); backdrop-filter: blur(5px); } .footer p { color: rgba(255, 255, 255, 0.7); font-size: 16px; max-width: 800px; margin: 0 auto; line-height: 1.6; } /* Animation Keyframes */ @keyframes wheel-enter { 0% { transform: translateX(-1000px) rotate(0deg); } 70% { transform: translateX(0) rotate(720deg); } 100% { transform: translateX(0) rotate(720deg); } } @keyframes wheel-drop { 0% { transform: translateY(0) rotate(720deg); } 70% { transform: translateY(150px) rotate(720deg); } 100% { transform: translateY(100px) rotate(720deg); } } @keyframes wheel-bounce { 0%, 100% { transform: translateY(100px) rotate(720deg); } 50% { transform: translateY(80px) rotate(720deg); } } /* Logo rotation stops after animation completes */ @keyframes wheel-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(720deg); } } @keyframes logo-appear { 0% { opacity: 1; transform: rotate(720deg); } 100% { opacity: 1; transform: rotate(720deg); } } @keyframes tire-mark { 0% { left: -200px; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: calc(50% + 100px); opacity: 0; } } @keyframes shadow-appear { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } @keyframes brand-appear { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes contact-appear { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes binary-move { 0% { background-position: 0 0; } 100% { background-position: 100px 100px; } } @keyframes code-typing { 0% { content: ""; } 25% { content: ""; } 50% { content: "Web Dev"; } 75% { content: ""; } 100% { content: ""; } } @keyframes rotate-chip { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes float-tags { 0% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-20px) rotate(5deg); } 50% { transform: translateY(0) rotate(0deg); } 75% { transform: translateY(20px) rotate(-5deg); } 100% { transform: translateY(0) rotate(0deg); } } @keyframes glowing-dots { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* Responsive Design */ @media (max-width: 992px) { .brand-name-below h1 { font-size: 48px; letter-spacing: 2px; } .brand-name-below h2 { font-size: 36px; letter-spacing: 1.5px; } .contact-item { padding: 16px 35px; } .contact-item span { font-size: 18px; } } @media (max-width: 768px) { .logo-animation-area { min-height: 650px; } .logo-wheel-container { width: 180px; height: 180px; } .brand-name-below { width: 95%; padding: 20px 15px; } .brand-name-below h1 { font-size: 40px; letter-spacing: 1.5px; white-space: normal; } .brand-name-below h2 { font-size: 32px; letter-spacing: 1px; white-space: normal; } .contact-info-section { width: 95%; } .contact-item { padding: 14px 25px; gap: 15px; } .contact-item span { font-size: 16px; } .contact-item i { font-size: 20px; } } @media (max-width: 576px) { .logo-wheel-container { width: 150px; height: 150px; } .brand-name-below h1 { font-size: 32px; letter-spacing: 1px; line-height: 1.2; } .brand-name-below h2 { font-size: 26px; letter-spacing: 0.8px; line-height: 1.2; } .contact-item { padding: 12px 20px; flex-direction: column; text-align: center; gap: 10px; border-radius: 25px; } .contact-item i { width: auto; } .contact-item span { font-size: 15px; } } @media (max-width: 400px) { .brand-name-below h1 { font-size: 28px; } .brand-name-below h2 { font-size: 22px; } .contact-item { padding: 10px 15px; } .contact-item span { font-size: 14px; } }