<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Introduction</title>
<!-- External CSS -->
<link rel="stylesheet" href="index.css">
<!-- Internal CSS -->
<style>
h1 {
color: blue !important;
}
</style>
</head>
<body>
<nav class="top">
<a href="#home">Zuitt</a>
<div>
<a href="#landing">Courses</a>
<a href="#offerings">Courses</a>
</div>
</nav>
<!-- Inline Styling -->
<h1 style="color: red;">Hello World</h1>
<!-- Section start landing -->
<section id="landing">
<h2>Welcome To Zuitt!</h2>
<h3 id="zuitt-motto">Opportunities for everyone, everywhere!</h3>
<img src="https://place-puppy.com/450x450" alt="">
<ol id="bootcamp-learning-list">
<li class="offering-item">Day classes</li>
<li class="offering-item">Night classes</li>
<li class="offering-item">Short courses</li>
</ol>
<a href="#Top">Back to Top</a>
<!-- Section start Offerings -->
</section>
<section id="offerings">
<h2>Courses</h2>
<h3 class="modules">Frontend Development</h3>
<ol>
<li>Git</li>
<li>HTML</li>
<li>CSS</li>
</ol>
<h3 class="modules">Backend Development</h3>
<ol>
<li>JavaScript</li>
<li>MongoDB</li>
<li>Node.js</li>
<li>Express.js</li>
</ol>
<h3 class="modules">Full-Stack Development</h3>
<ol>
<li>MongoDB</li>
<li>Express.js</li>
<li>React.js</li>
<li>Node.js</li>
</ol>
<a href="#top">Back to Top</a>
</section>
</body>
</html>