135 lines
5.3 KiB
HTML
135 lines
5.3 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="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<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">Start your journey</div>
|
|
<h1>Learn English with <span class="highlight">Easy</span> Steps</h1>
|
|
<p>Vocabulary, grammar, exercises, reading texts, and tests — everything you need to start speaking English with confidence.</p>
|
|
<div class="hero-buttons">
|
|
<a href="vocabulary.html" class="btn">Start Learning</a>
|
|
<a href="exercises.html" class="btn btn-outline">Try Exercises</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<h2 class="section-title">What You'll <span>Learn</span></h2>
|
|
<p class="section-subtitle">We make learning English simple and fun with clear explanations and interactive exercises.</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>Ready to Start?</h3>
|
|
<p>Every expert was once a beginner. Take the first step today!</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section section-alt">
|
|
<div class="container">
|
|
<h2 class="section-title">How It <span>Works</span></h2>
|
|
<p class="section-subtitle">Three simple steps to start learning English.</p>
|
|
<div class="steps">
|
|
<div class="step">
|
|
<div class="step-number">1</div>
|
|
<h3>Learn New Words</h3>
|
|
<p>Start with the Vocabulary section to build your word base with common English words.</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">2</div>
|
|
<h3>Study Grammar</h3>
|
|
<p>Understand how sentences work with simple grammar explanations and examples.</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">3</div>
|
|
<h3>Practice & Test</h3>
|
|
<p>Use exercises and tests to check your progress and see how much you've learned!</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>
|