<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<style>
/* Reset some default styles */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* Navigation Bar */
nav {
background-color: #333;
color: #fff;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
/* Main Content */
.container {
max-width: 800px;
margin: 40px auto;
padding: 20px;
background-color: #f9f9f9;
}
h1 {
font-size: 32px;
margin-bottom: 20px;
}
p {
font-size: 18px;
line-height: 1.5;
}
/* Programming Courses */
.course-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.course-card {
width: 30%;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.course-title {
font-size: 24px;
margin-bottom: 10px;
}
.course-description {
font-size: 16px;
line-height: 1.5;
}
/* Footer */
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="container">
<h1>Welcome to Our Landing Page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor ipsum a aliquam ullamcorper. Nam vitae felis vitae diam finibus finibus. Sed a ullamcorper felis. Nullam pellentesque rutrum elit id viverra.</p>
<p>Sed eleifend elit ut tellus consectetur, vitae viverra eros dignissim. Integer at aliquet metus. Sed laoreet erat sit amet erat efficitur tempor. Morbi ullamcorper turpis eget dui dictum, at fermentum nisl iaculis.</p>
<h2>Programming Courses</h2>
<div class="course-container">
<div class="course-card">
<h3 class="course-title">Python Programming</h3>
<p class="course-description">Learn the fundamentals of Python programming language and its applications.</p>
</div>
<div class="course-card">
<h3 class="course-title">JavaScript Basics</h3>
<p class="course-description">Get started with JavaScript and understand the core concepts of web development.</p>
</div>
<div class="course-card">
<h3 class="course-title">Java for Beginners</h3>
<p class="course-description">An introductory course to Java programming for beginners.</p>
</div>
<div class="course-card">
<h3 class="course-title">C# Fundamentals</h3>
<p class="course-description">Learn the basics of C# programming language and build your first applications.</p>
</div>
<div class="course-card">
<h3 class="course-title">HTML & CSS Mastery</h3>
<p class="course-description">Master the essential skills of building websites using HTML and CSS.</p>
</div>
<div class="course-card">
<h3 class="course-title">Data Structures in C++</h3>
<p class="course-description">Explore various data structures and algorithms using C++ programming language.</p>
</div>
</div>
</div>
<footer>
<p>© 2023 Educational Web. All rights reserved.</p>
</footer>
</body>
</html>