126 lines
4.6 KiB
HTML
126 lines
4.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>Campus DevOps Meetup</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
</head>
|
||
<body class="bg-slate-950 text-slate-100">
|
||
|
||
<!-- Navbar -->
|
||
<nav class="flex items-center justify-between p-6 max-w-6xl mx-auto">
|
||
<h1 class="text-xl font-bold text-cyan-400">Campus DevOps</h1>
|
||
<a href="#register" class="px-4 py-2 rounded-lg bg-cyan-500 hover:bg-cyan-400 text-black font-semibold">
|
||
Register
|
||
</a>
|
||
</nav>
|
||
|
||
<!-- Hero -->
|
||
<section class="max-w-6xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-12 items-center">
|
||
<div>
|
||
<h2 class="text-4xl md:text-5xl font-extrabold leading-tight">
|
||
Learn DevOps.<br />
|
||
Build Faster.<br />
|
||
Ship Better.
|
||
</h2>
|
||
<p class="mt-6 text-slate-300 text-lg">
|
||
A hands-on DevOps meetup for campus CS students. Learn CI/CD, Docker, cloud basics,
|
||
and how real teams ship software.
|
||
</p>
|
||
<div class="mt-8 flex gap-4">
|
||
<a href="#register" class="px-6 py-3 rounded-lg bg-cyan-500 hover:bg-cyan-400 text-black font-semibold">
|
||
Join the Meetup
|
||
</a>
|
||
<a href="#agenda" class="px-6 py-3 rounded-lg border border-slate-700 hover:border-cyan-400">
|
||
View Agenda
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-slate-900 rounded-2xl p-6 shadow-lg">
|
||
<pre class="text-sm text-green-400 overflow-x-auto">
|
||
$ git clone campus-devops-meetup
|
||
$ docker build -t hello-devops .
|
||
$ kubectl apply -f deployment.yaml
|
||
🚀 Deployed successfully!
|
||
</pre>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features -->
|
||
<section class="bg-slate-900 py-20">
|
||
<div class="max-w-6xl mx-auto px-6">
|
||
<h3 class="text-3xl font-bold mb-12 text-center">What You’ll Learn</h3>
|
||
<div class="grid md:grid-cols-3 gap-8">
|
||
<div class="bg-slate-800 p-6 rounded-xl">
|
||
<h4 class="text-xl font-semibold text-cyan-400 mb-2">CI/CD Pipelines</h4>
|
||
<p class="text-slate-300">
|
||
Build automated pipelines using GitHub Actions and learn how real teams ship code.
|
||
</p>
|
||
</div>
|
||
<div class="bg-slate-800 p-6 rounded-xl">
|
||
<h4 class="text-xl font-semibold text-cyan-400 mb-2">Docker & Containers</h4>
|
||
<p class="text-slate-300">
|
||
Package your apps with Docker and run them anywhere.
|
||
</p>
|
||
</div>
|
||
<div class="bg-slate-800 p-6 rounded-xl">
|
||
<h4 class="text-xl font-semibold text-cyan-400 mb-2">Cloud & Kubernetes</h4>
|
||
<p class="text-slate-300">
|
||
Learn how apps scale in the cloud with Kubernetes basics.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Agenda -->
|
||
<section id="agenda" class="py-20 max-w-5xl mx-auto px-6">
|
||
<h3 class="text-3xl font-bold mb-8 text-center">Meetup Agenda</h3>
|
||
<div class="space-y-4">
|
||
<div class="flex justify-between bg-slate-900 p-4 rounded-lg">
|
||
<span>🎤 Intro to DevOps</span>
|
||
<span class="text-slate-400">15 min</span>
|
||
</div>
|
||
<div class="flex justify-between bg-slate-900 p-4 rounded-lg">
|
||
<span>⚙️ CI/CD Demo</span>
|
||
<span class="text-slate-400">30 min</span>
|
||
</div>
|
||
<div class="flex justify-between bg-slate-900 p-4 rounded-lg">
|
||
<span>🐳 Docker Hands-on</span>
|
||
<span class="text-slate-400">30 min</span>
|
||
</div>
|
||
<div class="flex justify-between bg-slate-900 p-4 rounded-lg">
|
||
<span>☁️ Cloud Q&A + Networking</span>
|
||
<span class="text-slate-400">30 min</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Registration -->
|
||
<section id="register" class="bg-cyan-500 py-20 text-black">
|
||
<div class="max-w-4xl mx-auto px-6 text-center">
|
||
<h3 class="text-3xl font-bold mb-4">Join the DevOps Meetup</h3>
|
||
<p class="mb-8">
|
||
Free for campus CS students. Limited seats. Register now.
|
||
</p>
|
||
|
||
<form class="max-w-md mx-auto grid gap-4">
|
||
<input type="text" placeholder="Full Name" class="p-3 rounded-lg border" required />
|
||
<input type="email" placeholder="Email" class="p-3 rounded-lg border" required />
|
||
<input type="text" placeholder="University / College" class="p-3 rounded-lg border" />
|
||
<button class="bg-black text-white py-3 rounded-lg font-semibold hover:bg-slate-900">
|
||
Reserve My Spot
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="py-10 text-center text-slate-500">
|
||
<p>© 2026 Campus DevOps Meetup • Built by CS students for CS students</p>
|
||
</footer>
|
||
|
||
</body>
|
||
</html> |