145 lines
7.6 KiB
HTML
145 lines
7.6 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" data-i18n="nav-home">Home</a></li>
|
|
<li><a href="vocabulary.html" data-i18n="nav-vocabulary">Vocabulary</a></li>
|
|
<li><a href="grammar.html" data-i18n="nav-grammar">Grammar</a></li>
|
|
<li><a href="pronunciation.html" data-i18n="nav-pronunciation">Pronunciation</a></li>
|
|
<li><a href="exercises.html" data-i18n="nav-exercises">Exercises</a></li>
|
|
<li><a href="tests.html" data-i18n="nav-tests">Tests</a></li>
|
|
<li><a href="reading.html" data-i18n="nav-reading">Reading</a></li>
|
|
<li><a href="progress.html" data-i18n="nav-progress">Progress</a></li>
|
|
<li><a href="contact.html" data-i18n="nav-contact">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<div class="container">
|
|
<div class="hero-badge" data-i18n="hero-badge">⚡ Welcome to Hogwarts School of English</div>
|
|
<h1 data-i18n="hero-title">Master the <span class="highlight">Magic</span> of English</h1>
|
|
<p data-i18n="hero-subtitle">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" data-i18n="btn-begin">🔮 Begin Your Journey</a>
|
|
<a href="exercises.html" class="btn btn-outline" data-i18n="btn-try">✨ Try a Spell (Exercise)</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<h2 class="section-title" data-i18n="section-subjects-title">Your <span>Magical</span> Subjects</h2>
|
|
<p class="section-subtitle" data-i18n="section-subjects-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 data-i18n="card-vocab-title">Vocabulary</h3>
|
|
<p data-i18n="card-vocab-desc">Learn new words with translations and example sentences. Over 20 words to start with!</p>
|
|
<a href="vocabulary.html" class="btn btn-primary" data-i18n="card-vocab-btn">Explore Words</a>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">📝</div>
|
|
<h3 data-i18n="card-grammar-title">Grammar</h3>
|
|
<p data-i18n="card-grammar-desc">Simple explanations of English grammar with formulas and examples. Present Simple, Past Simple, and more.</p>
|
|
<a href="grammar.html" class="btn btn-primary" data-i18n="card-grammar-btn">Study Grammar</a>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">💪</div>
|
|
<h3 data-i18n="card-exercises-title">Exercises</h3>
|
|
<p data-i18n="card-exercises-desc">Practice what you learn with fun exercises. Choose answers, fill gaps, and translate sentences.</p>
|
|
<a href="exercises.html" class="btn btn-primary" data-i18n="card-exercises-btn">Practice Now</a>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">📊</div>
|
|
<h3 data-i18n="card-tests-title">Tests</h3>
|
|
<p data-i18n="card-tests-desc">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" data-i18n="card-tests-btn">Take a Test</a>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">📚</div>
|
|
<h3 data-i18n="card-reading-title">Reading</h3>
|
|
<p data-i18n="card-reading-desc">Read short and simple texts in English. Each text has questions to check your understanding.</p>
|
|
<a href="reading.html" class="btn btn-primary" data-i18n="card-reading-btn">Start Reading</a>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">🗣️</div>
|
|
<h3 data-i18n="card-pronunciation-title">Pronunciation</h3>
|
|
<p data-i18n="card-pronunciation-desc">Listen to words and phrases spoken aloud. Practice your pronunciation and improve your speaking skills.</p>
|
|
<a href="pronunciation.html" class="btn btn-primary" data-i18n="card-pronunciation-btn">Start Speaking</a>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">📊</div>
|
|
<h3 data-i18n="card-progress-title">My Progress</h3>
|
|
<p data-i18n="card-progress-desc">Track your XP, level, and completed activities. Watch yourself improve from Beginner to Advanced!</p>
|
|
<a href="progress.html" class="btn btn-primary" data-i18n="card-progress-btn">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 data-i18n="motivation-title">✨ The Chamber of Progress Awaits</h3>
|
|
<p data-i18n="motivation-desc">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" data-i18n="section-houses-title">The Four <span>Houses</span></h2>
|
|
<p class="section-subtitle" data-i18n="section-houses-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 data-i18n="house-gryffindor-title">Gryffindor</h3>
|
|
<p data-i18n="house-gryffindor-desc">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 data-i18n="house-slytherin-title">Slytherin</h3>
|
|
<p data-i18n="house-slytherin-desc">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 data-i18n="house-ravenclaw-title">Ravenclaw</h3>
|
|
<p data-i18n="house-ravenclaw-desc">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 data-i18n="house-hufflepuff-title">Hufflepuff</h3>
|
|
<p data-i18n="house-hufflepuff-desc">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" data-i18n="footer-by">English Easy</a>. <span data-i18n="footer-text">Made for learning English.</span></p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/lang.js"></script>
|
|
<script src="js/script.js"></script>
|
|
</body>
|
|
</html>
|