💻 Full Working Code
📁 layout.html
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi Page Layout - Faulink</title>
<style>
body { font-family: Arial; margin: 0; background: #f5f5f5; }
header, footer { background: #007bff; color: white; text-align: center; padding: 20px; }
nav { background: #333; display: flex; justify-content: center; flex-wrap: wrap; }
nav a { color: white; padding: 10px 15px; text-decoration: none; }
nav a:hover { background: #555; }
section { padding: 20px; text-align: center; }
@media(max-width:600px) {
nav { flex-direction: column; }
}
</style>
</head>
<body>
<header><h1>Faulink Responsive Website</h1></header>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="services.html">Services</a>
<a href="contact.html">Contact</a>
</nav>
<section>
<h2>Responsive Layout</h2>
<p>Hii layout inajirekebisha kulingana na ukubwa wa skrini (desktop, tablet, au simu).</p>
</section>
<footer>
<p>© 2025 Faulink</p>
</footer>
</body>
</html>
________________________________________
🎥 YouTube Description
Somo hili linaonyesha jinsi ya kutengeneza multi-page responsive layout inayofaa kwa desktop na simu.
Tunatumia media queries na flexbox ili kubadilisha mpangilio kiotomatiki kulingana na screen size.
🔔 Jiunge na Faulink Channel kwa tutorials zaidi za HTML, CSS, na PHP.
________________________________________
🏷️ Hashtags
#ResponsiveDesign #HTML #CSS #Faulink #WebDevelopment #Flexbox #MediaQueries