Our Team - VexaX
Run Code
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Our Team</title> <style> body { font-family: 'Arial', sans-serif; background: #f7f9fc; margin: 0; padding: 0; overflow-x: hidden; } .team-section { text-align: center; padding: 100px 20px; background: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); position: relative; } .team-section h1 { font-size: 2.5em; color: #333; margin-bottom: 20px; animation: bounceIn 1s ease-out; } .team-section p { font-size: 1.1em; color: #555; line-height: 1.6; max-width: 800px; margin: 0 auto; animation: bounceIn 1s ease-out; } .team-section .icons { margin-top: 30px; animation: fadeIn 1s ease-out; } .team-section .icons i { font-size: 2em; color: #007bff; margin: 0 10px; transition: transform 0.3s; } .team-section .icons i:hover { transform: scale(1.2); } @keyframes bounceIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animated-background { content: ''; background: linear-gradient(135deg, #f093fb 10%, #f5576c 100%); height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: -1; animation: gradientBG 5s ease infinite; background-size: 400% 400%; } @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } </style> <script src="https://kit.fontawesome.com/a076d05399.js"></script> </head> <body> <section class="team-section"> <div class="animated-background"></div> <h1>Our Team</h1> <p>Meet the dedicated and passionate team that drives our success. We are a diverse group of professionals committed to achieving excellence and delivering outstanding results. 🙌</p> <div class="icons"> <i class="fas fa-users"></i> <i class="fas fa-user-tie"></i> <i class="fas fa-laptop-code"></i> </div> </section> </body> </html>