Scribd
Upload
9 views2 pages

Sds

The document is an HTML template for an educational website, featuring a header with navigation links, a hero section welcoming users, and a footer. It includes CSS for styling the layout, ensuring a responsive design with a clean and modern aesthetic. The website aims to provide a platform for learning through various courses.

Uploaded by

pawixey394
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views2 pages

Sds

The document is an HTML template for an educational website, featuring a header with navigation links, a hero section welcoming users, and a footer. It includes CSS for styling the layout, ensuring a responsive design with a clean and modern aesthetic. The website aims to provide a platform for learning through various courses.

Uploaded by

pawixey394
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Educational Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<h1>Educational Website</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>

<section class="hero">
<div class="container">
<h2>Welcome to Our Educational Platform</h2>
<p>Learn and grow with our wide range of courses.</p>
</div>
</section>

<footer>
<div class="container">
<p>&copy; 2024 Educational Website</p>
</div>
</footer>

<script src="script.js"></script>
</body>
</html>

/* Reset CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header {
background-color: #333;
color: #fff;
padding: 20px 0;
}

header h1 {
margin: 0;
}

nav ul {
list-style-type: none;
}

nav ul li {
display: inline;
margin-right: 20px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

.hero {
padding: 100px 0;
text-align: center;
}

.hero h2 {
font-size: 36px;
margin-bottom: 20px;
}

.hero p {
font-size: 18px;
color: #666;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}

You might also like