<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Kartičky</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
min-height: 100vh;
background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #0f2027 100%);
font-family: "Segoe UI", system-ui, sans-serif;
padding: 2rem;
}
h1 {
text-align: center;
font-size: 2.5rem;
background: linear-gradient(to right, #00d4aa, #7b68ee, #ff6b9d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.5rem;
}
.subtitle {
text-align: center;
color: #6b7280;
margin-bottom: 3rem;
font-size: 1.1rem;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
padding: 2rem;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
}
.card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
border-radius: 20px 20px 0 0;
transition: height 0.4s;
}
.card:nth-child(1)::before { background: linear-gradient(to right, #00d4aa, #00b4d8); }
.card:nth-child(2)::before { background: linear-gradient(to right, #7b68ee, #a78bfa); }
.card:nth-child(3)::before { background: linear-gradient(to right, #ff6b9d, #ffa07a); }
.card:nth-child(4)::before { background: linear-gradient(to right, #f59e0b, #ef4444); }
.card:nth-child(5)::before { background: linear-gradient(to right, #10b981, #3b82f6); }
.card:nth-child(6)::before { background: linear-gradient(to right, #ec4899, #8b5cf6); }
.card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border-color: rgba(255, 255, 255, 0.15);
}
.card:hover::before { height: 4px; }
.card-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
display: block;
}
.card h3 {
color: #f0f0f0;
font-size: 1.3rem;
margin-bottom: 0.8rem;
}
.card p {
color: #8892a4;
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 1.5rem;
}
.card-tag {
display: inline-block;
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.card:nth-child(1) .card-tag { background: rgba(0,212,170,0.15); color: #00d4aa; }
.card:nth-child(2) .card-tag { background: rgba(123,104,238,0.15); color: #a78bfa; }
.card:nth-child(3) .card-tag { background: rgba(255,107,157,0.15); color: #ff6b9d; }
.card:nth-child(4) .card-tag { background: rgba(245,158,11,0.15); color: #f59e0b; }
.card:nth-child(5) .card-tag { background: rgba(16,185,129,0.15); color: #10b981; }
.card:nth-child(6) .card-tag { background: rgba(236,72,153,0.15); color: #ec4899; }
@media (max-width: 600px) {
h1 { font-size: 1.8rem; }
.grid { grid-template-columns: 1fr; }
body { padding: 1rem; }
}
</style>
</head>
<body>
<h1>CSS Kartičky</h1>
<p class="subtitle">Najeď myší na kartičku a sleduj efekt</p>
<div class="grid">
<div class="card">
<span class="card-icon">🚀</span>
<h3>Rychlý start</h3>
<p>Začni programovat během pár minut. Žádná instalace, žádná konfigurace. Stačí nápad a AI.</p>
<span class="card-tag">Začátečníci</span>
</div>
<div class="card">
<span class="card-icon">🎨</span>
<h3>Krásný design</h3>
<p>Gradienty, stíny, animace - vše, co dělá web moderní a atraktivní.</p>
<span class="card-tag">CSS</span>
</div>
<div class="card">
<span class="card-icon">⚡</span>
<h3>Interaktivita</h3>
<p>Tlačítka, formuláře, animace - stránka, která reaguje na uživatele.</p>
<span class="card-tag">JavaScript</span>
</div>
<div class="card">
<span class="card-icon">🖥️</span>
<h3>Serverová logika</h3>
<p>PHP zpracuje data na serveru. Formuláře, databáze, dynamický obsah.</p>
<span class="card-tag">PHP</span>
</div>
<div class="card">
<span class="card-icon">🤖</span>
<h3>AI asistent</h3>
<p>Řekni AI co chceš a ono napíše kód za tebe. Takhle funguje vibe coding!</p>
<span class="card-tag">AI</span>
</div>
<div class="card">
<span class="card-icon">🌍</span>
<h3>Online za sekundu</h3>
<p>Deploy na Vibmy a tvoje stránka je na internetu. S vlastní adresou.</p>
<span class="card-tag">Vibmy</span>
</div>
</div>
</body>
</html>