<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Theory</title>
<style>
body{margin:0;font-family:Poppins,Arial,sans-serif;background:linear-gradient(135deg,#e8f5e9,#c8e6c9);color:#1b5e20;}
header{background:#2e7d32;color:white;text-align:center;padding:60px 20px;}
nav{text-align:center;background:#1b5e20;padding:15px;}
nav a{color:#a5d6a7;margin:0 20px;text-decoration:none;font-weight:600;}
nav a:hover{color:white;}
section{padding:50px 20px;text-align:center;}
h2{color:#2e7d32;font-size:2rem;margin-bottom:20px;}
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:25px;}
.card{background:white;padding:25px;width:260px;border-radius:12px;box-shadow:0 5px 20px rgba(0,0,0,.15);}
.card h3{color:#2e7d32;}
footer{background:#1b5e20;color:white;text-align:center;padding:25px;font-size:22px;}
footer a{color:#a5d6a7;text-decoration:none;font-weight:bold;}
</style>
</head>
<body>
<header>
<h1>🎵 Music Theory</h1>
<p>🎶 Understanding the language of sound</p>
</header>
<nav>
<a href="#basics">🎼 Basics</a>
<a href="#elements">🎶 Elements</a>
<a href="#impact">💖 Power of Music</a>
</nav>
<section id="basics">
<h2>🎼 What is Music Theory?</h2>
<p>Music theory is the study of how music works — it explores melody, harmony, rhythm, and structure. It’s the grammar of the language of sound.</p>
</section>
<section id="elements">
<h2>🎶 Core Elements</h2>
<div class="cards">
<div class="card"><h3>🎵 Melody</h3><p>A sequence of notes that form a recognizable tune.</p></div>
<div class="card"><h3>🥁 Rhythm</h3><p>The pattern of beats that gives music its timing and flow.</p></div>
<div class="card"><h3>🎹 Harmony</h3><p>Combining notes to create depth and emotion in sound.</p></div>
</div>
</section>
<section id="impact">
<h2>💖 The Power of Music</h2>
<p>Music has the ability to heal, inspire, and connect people across cultures. It truly is a universal language that touches the soul.</p>
</section>
<footer>
© 2025 <a href="https://freecodesforwebsites.blogspot.com/" target="_blank">Free Codes for Websites</a> | All rights reserved.
</footer>
</body>
</html>
Comments
Post a Comment