english-easy/grammar.html

123 lines
5.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Grammar — English Easy</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="page-header">
<div class="container">
<h1 data-i18n="page-grammar-title">Grammar</h1>
<p data-i18n="page-grammar-desc">Simple explanations of English grammar with formulas and examples.</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="grammar-grid">
<div class="grammar-card">
<h3 data-i18n="grammar-present-simple">Present Simple</h3>
<p data-i18n="grammar-present-simple-desc">Present Simple is used for habits, routines, and general facts.</p>
<div class="formula">Subject + V / V+s (he/she/it)</div>
<ul class="examples">
<li>I study English every day.</li>
<li>She likes music.</li>
<li>They play football on Sundays.</li>
</ul>
</div>
<div class="grammar-card">
<h3 data-i18n="grammar-past-simple">Past Simple</h3>
<p data-i18n="grammar-past-simple-desc">Past Simple is used for completed actions in the past.</p>
<div class="formula">Subject + V-ed (regular) / V2 (irregular)</div>
<ul class="examples">
<li>I visited my grandmother yesterday.</li>
<li>She watched a film last night.</li>
<li>They went to the park.</li>
</ul>
</div>
<div class="grammar-card">
<h3 data-i18n="grammar-future-simple">Future Simple (will)</h3>
<p data-i18n="grammar-future-simple-desc">Future Simple is used for predictions, promises, and spontaneous decisions.</p>
<div class="formula">Subject + will + V</div>
<ul class="examples">
<li>I will call you tomorrow.</li>
<li>She will buy a new phone.</li>
<li>It will rain in the evening.</li>
</ul>
</div>
<div class="grammar-card">
<h3 data-i18n="grammar-articles">Articles: a / an / the</h3>
<p data-i18n="grammar-articles-desc">Use <strong>a</strong> before consonant sounds, <strong>an</strong> before vowel sounds, and <strong>the</strong> for specific things.</p>
<div class="formula">a + consonant sound &nbsp;|&nbsp; an + vowel sound &nbsp;|&nbsp; the + specific</div>
<ul class="examples">
<li>I have <strong>a</strong> book.</li>
<li>She eats <strong>an</strong> apple.</li>
<li><strong>The</strong> sun is bright today.</li>
</ul>
</div>
<div class="grammar-card">
<h3 data-i18n="grammar-pronouns">Pronouns</h3>
<p data-i18n="grammar-pronouns-desc">Pronouns replace nouns. They can be subject or object pronouns.</p>
<div class="formula">I / you / he / she / it / we / they (subject)</div>
<ul class="examples">
<li><strong>She</strong> is a student.</li>
<li><strong>We</strong> like ice cream.</li>
<li>I see <strong>them</strong> every day.</li>
</ul>
</div>
<div class="grammar-card">
<h3 data-i18n="grammar-prepositions">Prepositions</h3>
<p data-i18n="grammar-prepositions-desc">Prepositions show relationships of time, place, and direction.</p>
<div class="formula">in / on / at / under / next to / between</div>
<ul class="examples">
<li>The book is <strong>on</strong> the table.</li>
<li>She is <strong>at</strong> school.</li>
<li>I wake up <strong>at</strong> 7 o'clock.</li>
</ul>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<p>&copy; 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>