| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>What I Can Do For You</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| :root { |
| --primary: #4361ee; |
| --secondary: #3f37c9; |
| --accent: #4895ef; |
| --light: #f8f9fa; |
| --dark: #212529; |
| --success: #4cc9f0; |
| --warning: #f72585; |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| } |
| |
| body { |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| padding: 2rem; |
| color: var(--dark); |
| } |
| |
| header { |
| text-align: center; |
| margin-bottom: 3rem; |
| animation: fadeIn 1s ease; |
| } |
| |
| h1 { |
| font-size: 2.5rem; |
| margin-bottom: 1rem; |
| color: var(--secondary); |
| position: relative; |
| display: inline-block; |
| } |
| |
| h1::after { |
| content: ''; |
| position: absolute; |
| bottom: -10px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 50%; |
| height: 4px; |
| background: var(--warning); |
| border-radius: 2px; |
| } |
| |
| .subtitle { |
| font-size: 1.2rem; |
| color: var(--dark); |
| max-width: 700px; |
| margin: 0 auto; |
| line-height: 1.6; |
| } |
| |
| .cards-container { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| gap: 2rem; |
| width: 100%; |
| max-width: 1200px; |
| } |
| |
| .card { |
| perspective: 1000px; |
| height: 400px; |
| } |
| |
| .card-inner { |
| position: relative; |
| width: 100%; |
| height: 100%; |
| transition: transform 0.8s; |
| transform-style: preserve-3d; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); |
| border-radius: 15px; |
| cursor: pointer; |
| } |
| |
| .card:hover .card-inner { |
| transform: rotateY(180deg); |
| } |
| |
| .card-front, .card-back { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| backface-visibility: hidden; |
| border-radius: 15px; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| padding: 2rem; |
| text-align: center; |
| } |
| |
| .card-front { |
| background: white; |
| color: var(--dark); |
| } |
| |
| .card-back { |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); |
| color: white; |
| transform: rotateY(180deg); |
| } |
| |
| .icon { |
| font-size: 3rem; |
| margin-bottom: 1.5rem; |
| color: var(--primary); |
| } |
| |
| .card-back .icon { |
| color: white; |
| } |
| |
| .card-title { |
| font-size: 1.5rem; |
| margin-bottom: 1rem; |
| font-weight: 600; |
| } |
| |
| .card-desc { |
| font-size: 1rem; |
| line-height: 1.6; |
| color: #666; |
| } |
| |
| .card-back .card-desc { |
| color: rgba(255, 255, 255, 0.9); |
| } |
| |
| .card:nth-child(1) .card-front { |
| background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); |
| } |
| |
| .card:nth-child(2) .card-front { |
| background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); |
| } |
| |
| .card:nth-child(3) .card-front { |
| background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); |
| } |
| |
| .card:nth-child(4) .card-front { |
| background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); |
| } |
| |
| .card:nth-child(5) .card-front { |
| background: linear-gradient(135deg, #a6c1ee 0%, #fbc2eb 100%); |
| } |
| |
| .card:nth-child(6) .card-front { |
| background: linear-gradient(135deg, #fdcbf1 0%, #e6dee9 100%); |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(-20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| @media (max-width: 768px) { |
| .cards-container { |
| grid-template-columns: 1fr; |
| } |
| |
| h1 { |
| font-size: 2rem; |
| } |
| |
| .subtitle { |
| font-size: 1rem; |
| } |
| } |
| |
| .floating-btn { |
| position: fixed; |
| bottom: 2rem; |
| right: 2rem; |
| width: 60px; |
| height: 60px; |
| background: var(--warning); |
| color: white; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.5rem; |
| box-shadow: 0 5px 20px rgba(247, 37, 133, 0.4); |
| cursor: pointer; |
| transition: all 0.3s; |
| z-index: 100; |
| } |
| |
| .floating-btn:hover { |
| transform: scale(1.1); |
| box-shadow: 0 8px 25px rgba(247, 37, 133, 0.6); |
| } |
| </style> |
| </head> |
| <body> |
| <header> |
| <h1>What I Can Do For You</h1> |
| <p class="subtitle"> |
| I specialize in creating beautiful, functional, and responsive web interfaces using only HTML, CSS, and JavaScript. |
| Here's a showcase of my capabilities - hover over each card to discover more! |
| </p> |
| </header> |
| |
| <div class="cards-container"> |
| <div class="card"> |
| <div class="card-inner"> |
| <div class="card-front"> |
| <div class="icon"> |
| <i class="fas fa-laptop-code"></i> |
| </div> |
| <h3 class="card-title">Responsive Web Design</h3> |
| <p class="card-desc">Create websites that look perfect on any device</p> |
| </div> |
| <div class="card-back"> |
| <div class="icon"> |
| <i class="fas fa-mobile-alt"></i> |
| </div> |
| <h3 class="card-title">Mobile-First Approach</h3> |
| <p class="card-desc"> |
| I build with mobile users in mind first, then scale up to larger screens using |
| flexible grids, media queries, and responsive images. |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="card"> |
| <div class="card-inner"> |
| <div class="card-front"> |
| <div class="icon"> |
| <i class="fas fa-paint-brush"></i> |
| </div> |
| <h3 class="card-title">UI/UX Design</h3> |
| <p class="card-desc">Crafting intuitive and beautiful user interfaces</p> |
| </div> |
| <div class="card-back"> |
| <div class="icon"> |
| <i class="fas fa-user-friends"></i> |
| </div> |
| <h3 class="card-title">User-Centered Design</h3> |
| <p class="card-desc"> |
| I focus on creating interfaces that are not just visually appealing but also |
| intuitive and accessible to all users, with thoughtful information architecture |
| and smooth interactions. |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="card"> |
| <div class="card-inner"> |
| <div class="card-front"> |
| <div class="icon"> |
| <i class="fas fa-bolt"></i> |
| </div> |
| <h3 class="card-title">Interactive Elements</h3> |
| <p class="card-desc">Engaging animations and micro-interactions</p> |
| </div> |
| <div class="card-back"> |
| <div class="icon"> |
| <i class="fas fa-magic"></i> |
| </div> |
| <h3 class="card-title">Dynamic Experiences</h3> |
| <p class="card-desc"> |
| From subtle hover effects to complex animations, I can bring your website to life |
| with JavaScript and CSS animations that enhance user engagement without |
| compromising performance. |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="card"> |
| <div class="card-inner"> |
| <div class="card-front"> |
| <div class="icon"> |
| <i class="fas fa-shopping-cart"></i> |
| </div> |
| <h3 class="card-title">E-Commerce Features</h3> |
| <p class="card-desc">Build online stores with cart functionality</p> |
| </div> |
| <div class="card-back"> |
| <div class="icon"> |
| <i class="fas fa-credit-card"></i> |
| </div> |
| <h3 class="card-title">Shopping Experiences</h3> |
| <p class="card-desc"> |
| I can implement product galleries, shopping carts, checkout flows, and inventory |
| management systems using pure JavaScript, creating seamless shopping experiences. |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="card"> |
| <div class="card-inner"> |
| <div class="card-front"> |
| <div class="icon"> |
| <i class="fas fa-chart-line"></i> |
| </div> |
| <h3 class="card-title">Data Visualization</h3> |
| <p class="card-desc">Present data in beautiful, interactive charts</p> |
| </div> |
| <div class="card-back"> |
| <div class="icon"> |
| <i class="fas fa-chart-pie"></i> |
| </div> |
| <h3 class="card-title">Interactive Charts</h3> |
| <p class="card-desc"> |
| Using JavaScript libraries or custom SVG solutions, I can create dynamic charts, |
| graphs, and data visualizations that make complex information easily digestible |
| and interactive. |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="card"> |
| <div class="card-inner"> |
| <div class="card-front"> |
| <div class="icon"> |
| <i class="fas fa-gamepad"></i> |
| </div> |
| <h3 class="card-title">Browser Games</h3> |
| <p class="card-desc">Create fun, interactive games for the web</p> |
| </div> |
| <div class="card-back"> |
| <div class="icon"> |
| <i class="fas fa-dice"></i> |
| </div> |
| <h3 class="card-title">Interactive Games</h3> |
| <p class="card-desc"> |
| From simple puzzle games to more complex interactive experiences, I can build |
| engaging browser-based games using HTML5 Canvas and JavaScript game loops. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="floating-btn" onclick="alert('Let\\'s build something amazing together!')"> |
| <i class="fas fa-rocket"></i> |
| </div> |
| |
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const cards = document.querySelectorAll('.card'); |
| |
| cards.forEach((card, index) => { |
| |
| card.style.animation = `fadeIn 0.5s ease ${index * 0.1}s forwards`; |
| card.style.opacity = 0; |
| |
| |
| card.addEventListener('click', function() { |
| this.querySelector('.card-inner').classList.toggle('flipped'); |
| }); |
| }); |
| |
| |
| window.addEventListener('scroll', function() { |
| const scrollPosition = window.scrollY; |
| const floatingBtn = document.querySelector('.floating-btn'); |
| |
| floatingBtn.style.transform = `translateY(${scrollPosition * 0.1}px)`; |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
| </html> |
