165 lines
6.3 KiB
HTML
165 lines
6.3 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: 'Helvetica Neue', sans-serif; background: #fafafa; color: #1a1a1a; }
|
|
|
|
nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 60px;
|
|
background: #fff;
|
|
border-bottom: 1px solid #eee;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
nav .logo { font-size: 1.5rem; font-weight: 700; color: #2563eb; }
|
|
nav ul { list-style: none; display: flex; gap: 30px; }
|
|
nav a { text-decoration: none; color: #555; font-weight: 500; }
|
|
nav a:hover { color: #2563eb; }
|
|
|
|
.hero {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 80px 60px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
.hero-text h1 { font-size: 3.2rem; line-height: 1.2; margin-bottom: 20px; }
|
|
.hero-text h1 span { color: #2563eb; }
|
|
.hero-text p { font-size: 1.1rem; color: #666; max-width: 480px; margin-bottom: 30px; line-height: 1.7; }
|
|
.hero-text .btn {
|
|
display: inline-block;
|
|
padding: 14px 36px;
|
|
background: #2563eb;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
.hero-visual {
|
|
width: 400px; height: 400px;
|
|
background: linear-gradient(135deg, #2563eb, #7c3aed);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 8rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.features {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 40px;
|
|
padding: 80px 60px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
.feature { padding: 10px; }
|
|
.feature-num { font-size: 3rem; font-weight: 800; color: #2563eb; margin-bottom: 10px; }
|
|
.feature h3 { font-size: 1.3rem; margin-bottom: 10px; }
|
|
.feature p { color: #666; line-height: 1.7; }
|
|
|
|
.compare {
|
|
background: #fff;
|
|
padding: 80px 60px;
|
|
border-top: 1px solid #eee;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.compare-inner { max-width: 1000px; margin: 0 auto; }
|
|
.compare h2 { font-size: 2rem; margin-bottom: 40px; }
|
|
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
|
|
.compare-card {
|
|
border: 1px solid #eee;
|
|
border-radius: 12px;
|
|
padding: 30px;
|
|
transition: box-shadow 0.3s;
|
|
}
|
|
.compare-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
|
|
.compare-card h4 { font-size: 1.2rem; margin-bottom: 8px; color: #2563eb; }
|
|
.compare-card .tag { display: inline-block; background: #eff6ff; color: #2563eb; padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; margin-bottom: 12px; }
|
|
.compare-card p { color: #666; line-height: 1.6; }
|
|
|
|
footer { text-align: center; padding: 40px; color: #999; font-size: 0.9rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<div class="logo">MyWeb1</div>
|
|
<ul>
|
|
<li><a href="#">Home</a></li>
|
|
<li><a href="#">Models</a></li>
|
|
<li><a href="#">Compare</a></li>
|
|
<li><a href="#">About</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<section class="hero">
|
|
<div class="hero-text">
|
|
<h1>Understanding<br><span>AI Models</span></h1>
|
|
<p>A deep dive into the differences between AI architectures, training methods, and real-world performance benchmarks.</p>
|
|
<a href="#" class="btn">Start Exploring</a>
|
|
</div>
|
|
<div class="hero-visual">🤖</div>
|
|
</section>
|
|
|
|
<section class="features">
|
|
<div class="feature">
|
|
<div class="feature-num">01</div>
|
|
<h3>Architecture Breakdown</h3>
|
|
<p>From transformers to CNNs, learn what makes each model type unique and how they process information differently.</p>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="feature-num">02</div>
|
|
<h3>Benchmark Data</h3>
|
|
<p>Side-by-side performance metrics on standard benchmarks like MMLU, HumanEval, and ImageNet.</p>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="feature-num">03</div>
|
|
<h3>Practical Insights</h3>
|
|
<p>Real-world guidance on choosing the right model for your specific application and budget.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="compare">
|
|
<div class="compare-inner">
|
|
<h2>Model Comparisons</h2>
|
|
<div class="compare-grid">
|
|
<div class="compare-card">
|
|
<span class="tag">Language</span>
|
|
<h4>GPT-4 vs Claude 3</h4>
|
|
<p>Both are frontier LLMs, but differ in context window size, reasoning style, and safety alignment approaches.</p>
|
|
</div>
|
|
<div class="compare-card">
|
|
<span class="tag">Vision</span>
|
|
<h4>GPT-4V vs Gemini</h4>
|
|
<p>Multi-modal models compared on image understanding, document parsing, and visual reasoning tasks.</p>
|
|
</div>
|
|
<div class="compare-card">
|
|
<span class="tag">Generation</span>
|
|
<h4>DALL-E vs Midjourney</h4>
|
|
<p>Image generation models compared on prompt adherence, artistic quality, and photorealism.</p>
|
|
</div>
|
|
<div class="compare-card">
|
|
<span class="tag">Open Source</span>
|
|
<h4>Llama 3 vs Mistral</h4>
|
|
<p>Open-weight models compared on efficiency, fine-tuning flexibility, and community support.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>MyWeb1 © 2026</footer>
|
|
</body>
|
|
</html>
|