169 lines
6.6 KiB
HTML
169 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MyWeb1 - AI Model Differences</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: 'Inter', sans-serif; background: #111; color: #fff; }
|
|
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
background: radial-gradient(ellipse at 50% 30%, #1a2a6c 0%, #111 70%);
|
|
}
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 6px 18px;
|
|
border: 1px solid #333;
|
|
border-radius: 30px;
|
|
font-size: 0.85rem;
|
|
color: #aaa;
|
|
margin-bottom: 30px;
|
|
}
|
|
.badge span { color: #22d3ee; }
|
|
.hero h1 { font-size: 4rem; font-weight: 800; line-height: 1.1; margin-bottom: 20px; max-width: 700px; }
|
|
.hero h1 span { background: linear-gradient(90deg, #22d3ee, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
|
.hero p { font-size: 1.15rem; color: #777; max-width: 550px; line-height: 1.7; margin-bottom: 40px; }
|
|
.hero-buttons { display: flex; gap: 16px; }
|
|
.btn-primary { padding: 14px 32px; background: #22d3ee; color: #000; border: none; border-radius: 8px; font-weight: 600; font-size: 1rem; cursor: pointer; }
|
|
.btn-secondary { padding: 14px 32px; background: transparent; color: #fff; border: 1px solid #444; border-radius: 8px; font-size: 1rem; cursor: pointer; }
|
|
.btn-secondary:hover { border-color: #22d3ee; color: #22d3ee; }
|
|
|
|
.grid-section {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 80px 20px;
|
|
}
|
|
.section-header { text-align: center; margin-bottom: 60px; }
|
|
.section-header h2 { font-size: 2.2rem; margin-bottom: 12px; }
|
|
.section-header p { color: #666; font-size: 1.05rem; }
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
}
|
|
.grid-item {
|
|
background: #1a1a1a;
|
|
border: 1px solid #222;
|
|
border-radius: 16px;
|
|
padding: 36px 28px;
|
|
transition: border-color 0.3s, transform 0.3s;
|
|
}
|
|
.grid-item:hover { border-color: #22d3ee; transform: translateY(-4px); }
|
|
.grid-item .icon {
|
|
width: 50px; height: 50px;
|
|
background: #22d3ee15;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
margin-bottom: 20px;
|
|
}
|
|
.grid-item h3 { font-size: 1.15rem; margin-bottom: 10px; }
|
|
.grid-item p { color: #777; line-height: 1.6; font-size: 0.95rem; }
|
|
|
|
.stats {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 80px;
|
|
padding: 80px 20px;
|
|
border-top: 1px solid #1a1a1a;
|
|
border-bottom: 1px solid #1a1a1a;
|
|
}
|
|
.stat { text-align: center; }
|
|
.stat .num { font-size: 3rem; font-weight: 800; background: linear-gradient(90deg, #22d3ee, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
|
.stat .label { color: #666; margin-top: 8px; font-size: 0.95rem; }
|
|
|
|
.cta {
|
|
text-align: center;
|
|
padding: 100px 20px;
|
|
}
|
|
.cta h2 { font-size: 2.5rem; margin-bottom: 16px; }
|
|
.cta p { color: #666; margin-bottom: 30px; font-size: 1.1rem; }
|
|
|
|
footer { text-align: center; padding: 30px; color: #444; font-size: 0.85rem; border-top: 1px solid #1a1a1a; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<section class="hero">
|
|
<div class="badge">AI Research · <span>Updated 2026</span></div>
|
|
<h1>The Differences Behind <span>AI Models</span></h1>
|
|
<p>An interactive guide to understanding how AI models differ in design, training, and output.</p>
|
|
<div class="hero-buttons">
|
|
<button class="btn-primary">Explore Models</button>
|
|
<button class="btn-secondary">View Comparisons</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="grid-section">
|
|
<div class="section-header">
|
|
<h2>What You'll Learn</h2>
|
|
<p>Key areas where AI models differ from each other</p>
|
|
</div>
|
|
<div class="grid">
|
|
<div class="grid-item">
|
|
<div class="icon">🏗️</div>
|
|
<h3>Model Architecture</h3>
|
|
<p>Transformers, diffusion models, GANs, and more — how each processes data internally.</p>
|
|
</div>
|
|
<div class="grid-item">
|
|
<div class="icon">📊</div>
|
|
<h3>Training Data</h3>
|
|
<p>How dataset size, quality, and diversity shape model behavior and bias.</p>
|
|
</div>
|
|
<div class="grid-item">
|
|
<div class="icon">🔧</div>
|
|
<h3>Fine-Tuning</h3>
|
|
<p>RLHF, LoRA, and prompt engineering — adapting models to specific tasks.</p>
|
|
</div>
|
|
<div class="grid-item">
|
|
<div class="icon">📈</div>
|
|
<h3>Benchmarks</h3>
|
|
<p>Standardized tests that reveal strengths and weaknesses across models.</p>
|
|
</div>
|
|
<div class="grid-item">
|
|
<div class="icon">💰</div>
|
|
<h3>Cost & Access</h3>
|
|
<p>Open-source vs proprietary, pricing, and API limitations compared.</p>
|
|
</div>
|
|
<div class="grid-item">
|
|
<div class="icon">🔮</div>
|
|
<h3>Future Trends</h3>
|
|
<p>Emerging architectures and where the AI field is heading next.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="stats">
|
|
<div class="stat">
|
|
<div class="num">50+</div>
|
|
<div class="label">Models Compared</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="num">12</div>
|
|
<div class="label">Categories</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="num">100+</div>
|
|
<div class="label">Benchmarks Tracked</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="cta">
|
|
<h2>Start Comparing</h2>
|
|
<p>Dive into detailed model breakdowns and find the right AI for your needs.</p>
|
|
<button class="btn-primary">Get Started</button>
|
|
</section>
|
|
|
|
<footer>MyWeb1 © 2026</footer>
|
|
</body>
|
|
</html>
|