144 lines
6.1 KiB
HTML
144 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>English Easy — Learn English Step by Step</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="stars-bg" id="stars-bg"></div>
|
|
<header>
|
|
<div class="header-inner">
|
|
<a href="index.html" class="logo">English <span>Easy</span></a>
|
|
<button class="menu-toggle" aria-label="Menu">☰</button>
|
|
<nav>
|
|
<ul class="nav-list">
|
|
<li><a href="index.html">Home</a></li>
|
|
<li><a href="vocabulary.html">Vocabulary</a></li>
|
|
<li><a href="grammar.html">Grammar</a></li>
|
|
<li><a href="pronunciation.html">Pronunciation</a></li>
|
|
<li><a href="exercises.html">Exercises</a></li>
|
|
<li><a href="tests.html">Tests</a></li>
|
|
<li><a href="reading.html">Reading</a></li>
|
|
<li><a href="progress.html">Progress</a></li>
|
|
<li><a href="contact.html">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<div class="container">
|
|
<div class="hero-badge">⚡ Welcome to Hogwarts School of English</div>
|
|
<h1>Master the <span class="highlight">Magic</span> of English</h1>
|
|
<p>Discover vocabulary, grammar, exercises, reading, and tests — your magical journey to speaking English begins now.</p>
|
|
<div class="hero-buttons">
|
|
<a href="vocabulary.html" class="btn">🔮 Begin Your Journey</a>
|
|
<a href="exercises.html" class="btn btn-outline">✨ Try a Spell (Exercise)</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<h2 class="section-title">Your <span>Magical</span> Subjects</h2>
|
|
<p class="section-subtitle">Like a wizard at Hogwarts, master every branch of English magic.</p>
|
|
<div class="cards-grid">
|
|
<div class="card">
|
|
<div class="card-icon">📖</div>
|
|
<h3>Vocabulary</h3>
|
|
<p>Learn new words with translations and example sentences. Over 20 words to start with!</p>
|
|
<a href="vocabulary.html" class="btn btn-primary">Explore Words</a>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">📝</div>
|
|
<h3>Grammar</h3>
|
|
<p>Simple explanations of English grammar with formulas and examples. Present Simple, Past Simple, and more.</p>
|
|
<a href="grammar.html" class="btn btn-primary">Study Grammar</a>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">💪</div>
|
|
<h3>Exercises</h3>
|
|
<p>Practice what you learn with fun exercises. Choose answers, fill gaps, and translate sentences.</p>
|
|
<a href="exercises.html" class="btn btn-primary">Practice Now</a>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">📊</div>
|
|
<h3>Tests</h3>
|
|
<p>Check your knowledge with a full test. 10 questions to test your vocabulary, grammar, and reading.</p>
|
|
<a href="tests.html" class="btn btn-primary">Take a Test</a>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">📚</div>
|
|
<h3>Reading</h3>
|
|
<p>Read short and simple texts in English. Each text has questions to check your understanding.</p>
|
|
<a href="reading.html" class="btn btn-primary">Start Reading</a>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">🗣️</div>
|
|
<h3>Pronunciation</h3>
|
|
<p>Listen to words and phrases spoken aloud. Practice your pronunciation and improve your speaking skills.</p>
|
|
<a href="pronunciation.html" class="btn btn-primary">Start Speaking</a>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">📊</div>
|
|
<h3>My Progress</h3>
|
|
<p>Track your XP, level, and completed activities. Watch yourself improve from Beginner to Advanced!</p>
|
|
<a href="progress.html" class="btn btn-primary">View Progress</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section motivation-banner" style="padding:0;background:none;">
|
|
<div class="container">
|
|
<div class="motivation-banner">
|
|
<h3>✨ The Chamber of Progress Awaits</h3>
|
|
<p>Every great wizard started with their first spell. Begin your English magic today!</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section section-alt">
|
|
<div class="container">
|
|
<h2 class="section-title">The Four <span>Houses</span></h2>
|
|
<p class="section-subtitle">Choose your path — every house has its own strength in learning English.</p>
|
|
<div class="houses-grid">
|
|
<div class="card house-card house-gryffindor">
|
|
<div class="house-crest">🦁</div>
|
|
<h3>Gryffindor</h3>
|
|
<p>Brave and bold — take risks with new words and speak English without fear. Perfect for conversation practice!</p>
|
|
</div>
|
|
<div class="card house-card house-slytherin">
|
|
<div class="house-crest">🐍</div>
|
|
<h3>Slytherin</h3>
|
|
<p>Ambitious and determined — master grammar rules and achieve high scores on every test.</p>
|
|
</div>
|
|
<div class="card house-card house-ravenclaw">
|
|
<div class="house-crest">🦅</div>
|
|
<h3>Ravenclaw</h3>
|
|
<p>Wise and curious — dive deep into reading texts and expand your vocabulary with every lesson.</p>
|
|
</div>
|
|
<div class="card house-card house-hufflepuff">
|
|
<div class="house-crest">🦡</div>
|
|
<h3>Hufflepuff</h3>
|
|
<p>Loyal and patient — practice daily, build your streak, and grow step by step.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/script.js"></script>
|
|
</body>
|
|
</html>
|