|
|
<!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> |
