v1
This commit is contained in:
parent
86fa5c0c76
commit
0e300ae898
173
AGENTS.md
Normal file
173
AGENTS.md
Normal file
@ -0,0 +1,173 @@
|
||||
<!-- vibe42-agents-version: v3-guided-2026-06-01 -->
|
||||
# Vibe42 — учебная песочница для лендингов
|
||||
|
||||
Workspace юзера `sultanbek_askaruly`. Это **учебная среда**, где обычные люди (не разработчики) пробуют сделать свой первый сайт.
|
||||
|
||||
---
|
||||
|
||||
## 🎯 ТВОЯ РОЛЬ
|
||||
|
||||
Ты — **гид и помощник**, а не слепой исполнитель. Цель сессии — чтобы юзер вышел с:
|
||||
1. **рабочим лендингом**, опубликованным по адресу `https://pages.git.vibe42.kz/sultanbek_askaruly/<repo>/`,
|
||||
2. ощущением «это было легко» — без серверов, БД, токенов, конфигов.
|
||||
|
||||
Юзер не разработчик. Ему важен **результат, который видно в браузере**, а не код.
|
||||
|
||||
---
|
||||
|
||||
## 🗺 СЦЕНАРИЙ ПЕРВОГО ЗАХОДА (юзер только зашёл, ещё ничего нет)
|
||||
|
||||
1. Поздоровайся коротко: «Привет! Тут за 10 минут собираем лендинг и публикуем его в интернете. О чём хочешь сделать?»
|
||||
2. Если он не знает — предложи **4 конкретных идеи** (выбирай близкие к нему, не абстрактные):
|
||||
- Промо хобби (фотография / музыка / спорт)
|
||||
- Резюме / personal page с контактами
|
||||
- Афиша мероприятия (концерт, день рождения, мастер-класс)
|
||||
- Меню заведения / прайс услуг
|
||||
- Лендинг продукта или будущего проекта (waitlist)
|
||||
3. Уточни **2 короткие детали**: стиль (тёмный/светлый/яркий) и главную цель (рассказать / собрать заявку / показать работы).
|
||||
4. Сразу делай `./new-project <name>` и собирай страницу. Не спрашивай разрешения на каждый шаг.
|
||||
|
||||
---
|
||||
|
||||
## 💬 ЕСЛИ ЮЗЕР ОТВЕЧАЕТ РАСПЛЫВЧАТО
|
||||
|
||||
Юзер говорит «сделай что-нибудь» / «ну хз» / «сюрприз» → **не делай ничего абстрактного**.
|
||||
|
||||
Скажи: «Давай определимся, я задам 3 коротких вопроса:
|
||||
1. Это для тебя лично, для проекта/бизнеса, или для события?
|
||||
2. Главная цель — рассказать о чём-то / собрать заявку / показать портфолио?
|
||||
3. Любимое настроение — строгое тёмное, лёгкое светлое, яркое цветное?»
|
||||
|
||||
После ответов **сразу** предложи 2 конкретных варианта названия+структуры. Дай выбрать и иди делать.
|
||||
|
||||
---
|
||||
|
||||
## 🚫 ЕСЛИ ЮЗЕР ХОЧЕТ СЛОЖНОЕ — ПЕРЕФОРМУЛИРУЙ В ЛЕНДИНГ
|
||||
|
||||
| Запрос | Что делаем вместо |
|
||||
|--------|-------------------|
|
||||
| «магазин с корзиной» | лендинг с товарами + кнопка «купить» = ссылка на WhatsApp / Telegram |
|
||||
| «соцсеть» | лендинг будущего проекта + waitlist-форма (Formspree / Getform) |
|
||||
| «блог с админкой» | personal-page + ссылки на статьи в Telegram/Medium |
|
||||
| «приложение для записи» | лендинг услуги + ссылка на Calendly / WhatsApp |
|
||||
| «сайт с входом юзеров» | публичный лендинг без логина (нам логин не нужен) |
|
||||
| «бот в Telegram» | лендинг с описанием бота + кнопка `t.me/...` |
|
||||
|
||||
**Не говори «это невозможно».** Скажи: «У нас песочница только для статических сайтов. Давай сделаем лендинг, который покажет твою идею — а кнопки/формы свяжем с готовыми сервисами (WhatsApp, Telegram, Formspree)». Юзер счастлив, результат за 15 минут.
|
||||
|
||||
---
|
||||
|
||||
## 📐 ШАБЛОНЫ СТРАНИЦ (выбирай под идею юзера)
|
||||
|
||||
### A — Промо продукта/услуги
|
||||
**Секции:** Hero (заголовок + подзаголовок + CTA-кнопка) → 3-4 преимущества (иконка emoji + текст) → социальное доказательство (отзыв или цифра) → CTA (кнопка/телефон/мессенджер).
|
||||
|
||||
### B — Personal / резюме
|
||||
**Секции:** Hero (фото-аватарка + имя + одна фраза «кто я») → О себе (1-2 абзаца) → 3-5 карточек проектов/опыта → Контакты (email, telegram, github как ссылки-кнопки).
|
||||
|
||||
### C — Афиша мероприятия
|
||||
**Секции:** Hero (название + дата + место крупно) → Программа (список с временем) → Локация (картинка-placeholder + адрес) → Регистрация (форма Formspree или контакт).
|
||||
|
||||
### D — Меню / прайс
|
||||
**Секции:** Hero (название + слоган) → Меню/прайс (категории с ценами) → Контакты (телефон, адрес, часы работы, карта-картинка).
|
||||
|
||||
### E — Waitlist для будущего проекта
|
||||
**Секции:** Hero (название проекта + одна фраза + email-форма) → 3 фичи «что будет» → FAQ (3 пункта) → CTA (та же email-форма).
|
||||
|
||||
Все шаблоны — **одна страница, прокрутка вниз**. Никаких роутов, ничего динамического.
|
||||
|
||||
---
|
||||
|
||||
## ⚡ РИТУАЛ ПОСЛЕ ПЕРВОГО ЗАПУСКА
|
||||
|
||||
Как только готов первый рабочий вариант (даже грубый):
|
||||
|
||||
1. **Сразу запушь:**
|
||||
```bash
|
||||
git add -A
|
||||
git commit -m "v1"
|
||||
git push origin HEAD:pages
|
||||
```
|
||||
2. **ОБЯЗАТЕЛЬНО** дай юзеру ссылку **жирно**:
|
||||
> 🎉 Готово! Твой лендинг здесь: **https://pages.git.vibe42.kz/sultanbek_askaruly/<repo>/**
|
||||
3. Скажи: «Открой в новой вкладке, посмотри. Что хочешь поменять?»
|
||||
4. Дальше короткие итерации: правка → push → новый URL-показ. Каждые 2-3 правки — push.
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ ЖЕЛЕЗНЫЕ ПРАВИЛА (НЕ нарушать никогда)
|
||||
|
||||
1. **Только статика — HTML + CSS + JS в браузере.**
|
||||
2. **Никакого бэкенда.** Никаких Node/Express/FastAPI/Django/PHP/Go-серверов. Никаких БД. Никакого Redis.
|
||||
3. **Никакой аутентификации / OAuth / JWT.**
|
||||
4. **Никакого Docker, nginx, sudo, системных настроек.**
|
||||
5. **Никаких тяжёлых сборщиков** (`npm install` дерево на 500МБ). Tailwind — только через CDN.
|
||||
6. **НИКОГДА `git init` в workspace root (`/workspaces/sultanbek_askaruly`)** — это папка-контейнер юзера, не репозиторий.
|
||||
|
||||
---
|
||||
|
||||
## ✅ ВСЕГДА работай через `./new-project`
|
||||
|
||||
Если юзер сказал «сделай сайт NAME» / «создай проект NAME»:
|
||||
|
||||
```bash
|
||||
cd /workspaces/sultanbek_askaruly
|
||||
./new-project NAME # создаёт repo в Gitea + клонит локально в ./NAME/
|
||||
cd NAME
|
||||
# теперь создавай index.html / style.css / script.js внутри ./NAME
|
||||
```
|
||||
|
||||
`./new-project` сам создаёт repo, клонит, и копирует туда `AGENTS.md` + `design.md`.
|
||||
|
||||
---
|
||||
|
||||
## 🌐 Git и публикация
|
||||
|
||||
**НЕТ GitHub.** Self-hosted git: **https://git.vibe42.kz**
|
||||
|
||||
- Профиль юзера: https://git.vibe42.kz/sultanbek_askaruly
|
||||
- Pages (живые лендинги): https://pages.git.vibe42.kz/sultanbek_askaruly/<repo>/
|
||||
- Креды уже в `/workspaces/sultanbek_askaruly/.git-credentials` — git push/clone работают без пароля
|
||||
- **НЕ спрашивай юзера про GitHub URL / токен** — их не нужно
|
||||
|
||||
### Опубликовать лендинг
|
||||
|
||||
```bash
|
||||
git add -A
|
||||
git commit -m "site"
|
||||
git push origin HEAD:pages
|
||||
```
|
||||
|
||||
Ветка **`pages`** (Caddy её обслуживает; `gh-pages` тоже работает как fallback). Push → лендинг доступен мгновенно.
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Когда что-то идёт не так
|
||||
|
||||
- **Pages 404** → запушь ветку `pages` снова: `git push origin HEAD:pages -f`
|
||||
- **Не дёргай Gitea API типа `/repos/.../pages`, `/settings/pages`, `/deploy_keys`** — их нет
|
||||
- **Не пытайся «настроить Pages через UI Gitea»** — Pages у нас работают только через push в ветку `pages`
|
||||
- Запуталось — сделай новый чистый проект через `./new-project NAME-v2`, перенеси туда работающий index.html
|
||||
|
||||
---
|
||||
|
||||
## ❌ Чего НЕ делать НИКОГДА
|
||||
|
||||
- ❌ `git init` в workspace root
|
||||
- ❌ `npm install` с прод-зависимостями (express/mongoose/pg/prisma/next/nuxt)
|
||||
- ❌ Создавать `server.js` / `app.py` / `main.go` как backend
|
||||
- ❌ Использовать `gh` CLI или GitHub API
|
||||
- ❌ Вызывать Gitea Pages-API (его нет)
|
||||
- ❌ Долгое отлаживание Pages — почти всегда решение «push HEAD:pages»
|
||||
- ❌ Просить юзера ввести токен/URL/пароль — всё уже настроено
|
||||
- ❌ Задавать юзеру 10 вопросов подряд (максимум 2-3 за раз)
|
||||
- ❌ Показывать юзеру голый код больше 1 раза — ему важен результат, а не как написано
|
||||
- ❌ Предлагать «давай сначала дизайн в Figma» — мы делаем сразу в HTML
|
||||
- ❌ Говорить «это сложно» — переформулируй в простое
|
||||
- ❌ Зависать в обсуждениях — сделай первый вариант грубо, потом итерируй
|
||||
|
||||
---
|
||||
|
||||
## 🎨 design.md
|
||||
|
||||
Рядом лежит `design.md` с готовой палитрой, типографикой и стартер-шаблоном `index.html`. **Начинай с него.** Не выдумывай новые цвета — модифицируй существующие.
|
||||
64
contact.html
Normal file
64
contact.html
Normal file
@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Contact — English Easy</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="exercises.html">Exercises</a></li>
|
||||
<li><a href="tests.html">Tests</a></li>
|
||||
<li><a href="reading.html">Reading</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>Contact Us</h1>
|
||||
<p>Have a question or suggestion? Send us a message!</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<form class="contact-form" id="contact-form" onsubmit="submitForm(event)">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" id="name" name="name" placeholder="Your name" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" name="email" placeholder="your@email.com" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="message">Message</label>
|
||||
<textarea id="message" name="message" placeholder="Write your message here..." required></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Send Message</button>
|
||||
<div class="form-message" id="form-message">Thank you! Your message has been received.</div>
|
||||
</form>
|
||||
</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>
|
||||
794
css/style.css
Normal file
794
css/style.css
Normal file
@ -0,0 +1,794 @@
|
||||
:root {
|
||||
--ink: #0F1218;
|
||||
--cyan: #00E5FF;
|
||||
--cyan-50: #E8FCFF;
|
||||
--white: #FFFFFF;
|
||||
--gray-500: #5B6573;
|
||||
--gray-100: #F2F4F7;
|
||||
--blue: #4A90D9;
|
||||
--blue-light: #E8F4FD;
|
||||
--blue-dark: #2C6FAC;
|
||||
--shadow: 0 2px 12px rgba(0,0,0,0.08);
|
||||
--shadow-hover: 0 4px 20px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
|
||||
color: var(--ink);
|
||||
background: var(--white);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
/* Header & Navigation */
|
||||
header {
|
||||
background: var(--white);
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 24px;
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.logo span {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-list a {
|
||||
text-decoration: none;
|
||||
color: var(--gray-500);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
padding: 8px 14px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-list a:hover,
|
||||
.nav-list a.active {
|
||||
color: var(--ink);
|
||||
background: var(--gray-100);
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 28px;
|
||||
cursor: pointer;
|
||||
color: var(--ink);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background: var(--ink);
|
||||
color: var(--gray-500);
|
||||
text-align: center;
|
||||
padding: 32px 24px;
|
||||
margin-top: auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--cyan);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
background: linear-gradient(135deg, var(--ink) 0%, #1a2332 100%);
|
||||
color: var(--white);
|
||||
padding: 100px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 56px;
|
||||
font-weight: 800;
|
||||
line-height: 1.05;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.hero h1 span {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 20px;
|
||||
color: #9aa3b2;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 32px;
|
||||
}
|
||||
|
||||
.hero .btn {
|
||||
font-size: 18px;
|
||||
padding: 16px 36px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
background: var(--cyan);
|
||||
color: var(--ink);
|
||||
padding: 14px 28px;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
transition: all 0.25s;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 14px rgba(0, 229, 255, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--blue);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--blue-dark);
|
||||
box-shadow: 0 4px 14px rgba(74, 144, 217, 0.4);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--white);
|
||||
border: 2px solid var(--white);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: var(--white);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* Section */
|
||||
.section {
|
||||
padding: 80px 24px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 18px;
|
||||
color: var(--gray-500);
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--white);
|
||||
border: 1px solid var(--gray-100);
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
transition: all 0.25s;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-hover);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 36px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card p {
|
||||
color: var(--gray-500);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card .btn {
|
||||
font-size: 14px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
/* How it works */
|
||||
.how-it-works {
|
||||
background: var(--gray-100);
|
||||
}
|
||||
|
||||
.steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--cyan);
|
||||
color: var(--ink);
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 16px;
|
||||
}
|
||||
|
||||
.step h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.step p {
|
||||
color: var(--gray-500);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* Vocabulary page */
|
||||
.vocab-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: var(--white);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.vocab-table th {
|
||||
background: var(--blue);
|
||||
color: var(--white);
|
||||
padding: 14px 18px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.vocab-table td {
|
||||
padding: 12px 18px;
|
||||
border-bottom: 1px solid var(--gray-100);
|
||||
}
|
||||
|
||||
.vocab-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.vocab-table tr:hover td {
|
||||
background: var(--blue-light);
|
||||
}
|
||||
|
||||
.vocab-categories {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.category-btn {
|
||||
padding: 8px 18px;
|
||||
border-radius: 20px;
|
||||
border: 2px solid var(--gray-100);
|
||||
background: var(--white);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.category-btn:hover,
|
||||
.category-btn.active {
|
||||
background: var(--blue);
|
||||
color: var(--white);
|
||||
border-color: var(--blue);
|
||||
}
|
||||
|
||||
/* Grammar page */
|
||||
.grammar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.grammar-card {
|
||||
background: var(--white);
|
||||
border: 1px solid var(--gray-100);
|
||||
border-radius: 16px;
|
||||
padding: 28px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.grammar-card h3 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.grammar-card .formula {
|
||||
background: var(--cyan-50);
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
font-family: monospace;
|
||||
font-size: 16px;
|
||||
margin: 12px 0;
|
||||
border-left: 3px solid var(--cyan);
|
||||
}
|
||||
|
||||
.grammar-card .examples {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.grammar-card .examples li {
|
||||
list-style: none;
|
||||
padding: 6px 0;
|
||||
color: var(--gray-500);
|
||||
}
|
||||
|
||||
.grammar-card .examples li::before {
|
||||
content: "→ ";
|
||||
color: var(--blue);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Exercises page */
|
||||
.exercise {
|
||||
background: var(--white);
|
||||
border: 1px solid var(--gray-100);
|
||||
border-radius: 16px;
|
||||
padding: 28px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.exercise h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.exercise .question {
|
||||
font-size: 17px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.exercise .options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.exercise .option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 16px;
|
||||
border: 2px solid var(--gray-100);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.exercise .option:hover {
|
||||
border-color: var(--blue);
|
||||
background: var(--blue-light);
|
||||
}
|
||||
|
||||
.exercise .option input[type="radio"] {
|
||||
accent-color: var(--blue);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.exercise .option.correct {
|
||||
border-color: #28a745;
|
||||
background: #e8f5e9;
|
||||
}
|
||||
|
||||
.exercise .option.wrong {
|
||||
border-color: #dc3545;
|
||||
background: #fce4ec;
|
||||
}
|
||||
|
||||
.exercise .feedback {
|
||||
margin-top: 12px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.exercise .feedback.correct {
|
||||
display: block;
|
||||
background: #e8f5e9;
|
||||
color: #28a745;
|
||||
}
|
||||
|
||||
.exercise .feedback.wrong {
|
||||
display: block;
|
||||
background: #fce4ec;
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.fill-input {
|
||||
padding: 8px 12px;
|
||||
border: 2px solid var(--gray-100);
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
width: 200px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.fill-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--blue);
|
||||
}
|
||||
|
||||
.fill-input.correct {
|
||||
border-color: #28a745;
|
||||
background: #e8f5e9;
|
||||
}
|
||||
|
||||
.fill-input.wrong {
|
||||
border-color: #dc3545;
|
||||
background: #fce4ec;
|
||||
}
|
||||
|
||||
/* Tests page */
|
||||
.test-question {
|
||||
background: var(--white);
|
||||
border: 1px solid var(--gray-100);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.test-question h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.test-question .options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.test-question .option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 14px;
|
||||
border: 2px solid var(--gray-100);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.test-question .option:hover {
|
||||
border-color: var(--blue);
|
||||
}
|
||||
|
||||
.test-question .option input[type="radio"] {
|
||||
accent-color: var(--blue);
|
||||
}
|
||||
|
||||
.result-box {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: var(--blue-light);
|
||||
border-radius: 16px;
|
||||
margin-top: 24px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.result-box.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.result-box .score {
|
||||
font-size: 48px;
|
||||
font-weight: 800;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.result-box p {
|
||||
font-size: 18px;
|
||||
color: var(--gray-500);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Reading page */
|
||||
.reading-text {
|
||||
background: var(--white);
|
||||
border: 1px solid var(--gray-100);
|
||||
border-radius: 16px;
|
||||
padding: 28px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.reading-text h3 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.reading-text .text-content {
|
||||
line-height: 1.8;
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.reading-text .questions h4 {
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.reading-text .questions ol {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.reading-text .questions li {
|
||||
margin-bottom: 8px;
|
||||
color: var(--gray-500);
|
||||
}
|
||||
|
||||
/* Contact page */
|
||||
.contact-form {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background: var(--white);
|
||||
border: 1px solid var(--gray-100);
|
||||
border-radius: 16px;
|
||||
padding: 40px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 2px solid var(--gray-100);
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--blue);
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
min-height: 120px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.contact-form .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-message {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background: #e8f5e9;
|
||||
color: #28a745;
|
||||
border-radius: 12px;
|
||||
margin-top: 16px;
|
||||
font-weight: 600;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-message.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Page header */
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
|
||||
color: var(--white);
|
||||
padding: 60px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 42px;
|
||||
font-weight: 800;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
font-size: 18px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 768px) {
|
||||
.menu-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--white);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
padding: 8px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.nav-list.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-list a {
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 48px 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grammar-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.steps {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.vocab-table {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.vocab-table th,
|
||||
.vocab-table td {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.fill-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.header-inner {
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 60px 16px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
110
design.md
Normal file
110
design.md
Normal file
@ -0,0 +1,110 @@
|
||||
<!-- vibe42-design-version: v1-2026-06-01 -->
|
||||
# Design system — Vibe42 песочница
|
||||
|
||||
Базовые цвета и типографика для лендингов. Можно отклоняться, но начинай с этого.
|
||||
|
||||
## Палитра
|
||||
|
||||
| Token | Hex | Использование |
|
||||
|-------|-----|---------------|
|
||||
| `--ink` | `#0F1218` | Тёмный фон / основной текст |
|
||||
| `--cyan` | `#00E5FF` | Основной акцент (кнопки, лого) |
|
||||
| `--cyan-50` | `#E8FCFF` | Светлая подложка для акцентов |
|
||||
| `--white` | `#FFFFFF` | Основной фон |
|
||||
| `--gray-500` | `#5B6573` | Вторичный текст |
|
||||
| `--gray-100` | `#F2F4F7` | Сепараторы / тонкие фоны |
|
||||
|
||||
## Типографика
|
||||
|
||||
```css
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
|
||||
```
|
||||
|
||||
| Уровень | Размер | Вес | line-height |
|
||||
|---------|--------|-----|-------------|
|
||||
| h1 (hero) | 56px | 800 | 1.05 |
|
||||
| h2 (section) | 36px | 700 | 1.15 |
|
||||
| h3 | 22px | 700 | 1.3 |
|
||||
| body | 17px | 400 | 1.6 |
|
||||
| small | 14px | 400 | 1.5 |
|
||||
|
||||
На мобиле — h1 уменьши до 36px, h2 до 28px.
|
||||
|
||||
## Лейаут
|
||||
|
||||
- max-width контента: **1140px** (контейнер с padding по бокам)
|
||||
- секция: `padding: 80px 24px` (мобила: `48px 20px`)
|
||||
- gap между блоками внутри секции: `24-32px`
|
||||
- border-radius: `8px` (кнопки, карточки), `16px` (большие карточки)
|
||||
|
||||
## Кнопки
|
||||
|
||||
```css
|
||||
.btn-primary {
|
||||
background: var(--cyan); color: var(--ink);
|
||||
padding: 14px 28px; border-radius: 8px;
|
||||
font-weight: 700; text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
.btn-secondary {
|
||||
background: transparent; color: var(--ink);
|
||||
border: 2px solid var(--ink);
|
||||
padding: 12px 26px; border-radius: 8px;
|
||||
}
|
||||
```
|
||||
|
||||
## Стартер `index.html`
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Мой проект</title>
|
||||
<style>
|
||||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7}
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||||
.hero{background:var(--ink);color:var(--white)}
|
||||
.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
|
||||
.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin-bottom:32px}
|
||||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none}
|
||||
.btn:hover{background:#1be5ff}
|
||||
.section h2{font-size:36px;font-weight:700;margin-bottom:24px}
|
||||
.card{background:var(--gray-100);border-radius:16px;padding:32px;margin-bottom:16px}
|
||||
@media (max-width:640px){.hero h1{font-size:36px}.section h2{font-size:28px}.container{padding:48px 20px}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<h1>Заголовок проекта</h1>
|
||||
<p>Подзаголовок — пара предложений о чём это.</p>
|
||||
<a class="btn" href="#section">Начать</a>
|
||||
</div>
|
||||
</section>
|
||||
<section id="section" class="section">
|
||||
<div class="container">
|
||||
<h2>Секция</h2>
|
||||
<div class="card">Контент карточки.</div>
|
||||
<div class="card">Контент карточки.</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Чем НЕ пользоваться
|
||||
|
||||
- Bootstrap, Material UI, Chakra, Ant Design — слишком тяжело и не нужно для лендинга
|
||||
- Font Awesome — используй emoji (🚀 ⚡ ✨) или inline SVG
|
||||
- jQuery — vanilla JS более чем достаточно
|
||||
|
||||
## Чем МОЖНО (если очень надо)
|
||||
|
||||
- **Tailwind через CDN**: `<script src="https://cdn.tailwindcss.com"></script>` — для прототипа OK
|
||||
- **Lottie animations через CDN**
|
||||
- **Placeholder картинки**: `https://picsum.photos/800/600`, `https://placehold.co/600x400`
|
||||
- **Шрифты Google Fonts через `<link>`** в head
|
||||
174
exercises.html
Normal file
174
exercises.html
Normal file
@ -0,0 +1,174 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Exercises — English Easy</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="exercises.html">Exercises</a></li>
|
||||
<li><a href="tests.html">Tests</a></li>
|
||||
<li><a href="reading.html">Reading</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>Exercises</h1>
|
||||
<p>Practice your English with these fun exercises.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<!-- Exercise 1: Choose the correct answer -->
|
||||
<div class="exercise">
|
||||
<h3>1. Choose the correct answer</h3>
|
||||
<p class="question">I ___ English every day.</p>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="ex1" value="true"> study</label>
|
||||
<label class="option"><input type="radio" name="ex1" value="false"> studies</label>
|
||||
<label class="option"><input type="radio" name="ex1" value="false"> studied</label>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="checkExercise(this)">Check</button>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
<!-- Exercise 2: Choose the correct answer -->
|
||||
<div class="exercise">
|
||||
<h3>2. Choose the correct answer</h3>
|
||||
<p class="question">She ___ a student.</p>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="ex2" value="false"> am</label>
|
||||
<label class="option"><input type="radio" name="ex2" value="true"> is</label>
|
||||
<label class="option"><input type="radio" name="ex2" value="false"> are</label>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="checkExercise(this)">Check</button>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
<!-- Exercise 3: Choose the correct answer -->
|
||||
<div class="exercise">
|
||||
<h3>3. Choose the correct answer</h3>
|
||||
<p class="question">They ___ football yesterday.</p>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="ex3" value="false"> play</label>
|
||||
<label class="option"><input type="radio" name="ex3" value="true"> played</label>
|
||||
<label class="option"><input type="radio" name="ex3" value="false"> playing</label>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="checkExercise(this)">Check</button>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
<!-- Exercise 4: Fill in the gap -->
|
||||
<div class="exercise">
|
||||
<h3>4. Fill in the gap</h3>
|
||||
<p class="question">I ___ a book every day. (read / reads)</p>
|
||||
<div>
|
||||
<input type="text" class="fill-input" data-answer="read" placeholder="Type your answer">
|
||||
</div>
|
||||
<br>
|
||||
<button class="btn btn-primary" onclick="checkFill(this.previousElementSibling.previousElementSibling.querySelector('input'))">Check</button>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
<!-- Exercise 5: Fill in the gap -->
|
||||
<div class="exercise">
|
||||
<h3>5. Fill in the gap</h3>
|
||||
<p class="question">She ___ to school every day. (go / goes)</p>
|
||||
<div>
|
||||
<input type="text" class="fill-input" data-answer="goes" placeholder="Type your answer">
|
||||
</div>
|
||||
<br>
|
||||
<button class="btn btn-primary" onclick="checkFill(this.previousElementSibling.previousElementSibling.querySelector('input'))">Check</button>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
<!-- Exercise 6: Fill in the gap -->
|
||||
<div class="exercise">
|
||||
<h3>6. Fill in the gap</h3>
|
||||
<p class="question">They ___ visiting their grandmother yesterday. (was / were)</p>
|
||||
<div>
|
||||
<input type="text" class="fill-input" data-answer="were" placeholder="Type your answer">
|
||||
</div>
|
||||
<br>
|
||||
<button class="btn btn-primary" onclick="checkFill(this.previousElementSibling.previousElementSibling.querySelector('input'))">Check</button>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
<!-- Exercise 7: Translate -->
|
||||
<div class="exercise">
|
||||
<h3>7. Translate the sentence</h3>
|
||||
<p class="question">Translate: «Я люблю музыку.»</p>
|
||||
<div>
|
||||
<input type="text" class="fill-input" data-answer="i like music" placeholder="Type your translation">
|
||||
</div>
|
||||
<br>
|
||||
<button class="btn btn-primary" onclick="checkTranslate(this)">Check</button>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
<!-- Exercise 8: Translate -->
|
||||
<div class="exercise">
|
||||
<h3>8. Translate the sentence</h3>
|
||||
<p class="question">Translate: «Он мой друг.»</p>
|
||||
<div>
|
||||
<input type="text" class="fill-input" data-answer="he is my friend" placeholder="Type your translation">
|
||||
</div>
|
||||
<br>
|
||||
<button class="btn btn-primary" onclick="checkTranslate(this)">Check</button>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
<!-- Exercise 9: Match words -->
|
||||
<div class="exercise">
|
||||
<h3>9. Match words with translations</h3>
|
||||
<p class="question">Write the translation for each word:</p>
|
||||
<div style="display:flex;flex-direction:column;gap:10px;margin-bottom:12px;">
|
||||
<div>Book → <input type="text" class="fill-input" data-answer="книга" style="width:120px;"></div>
|
||||
<div>School → <input type="text" class="fill-input" data-answer="школа" style="width:120px;"></div>
|
||||
<div>Friend → <input type="text" class="fill-input" data-answer="друг" style="width:120px;"></div>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="checkMatch(this)">Check All</button>
|
||||
<div class="feedback"></div>
|
||||
</div>
|
||||
|
||||
<!-- Exercise 10: Fill in the gap (article) -->
|
||||
<div class="exercise">
|
||||
<h3>10. Choose the correct answer</h3>
|
||||
<p class="question">I have ___ apple.</p>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="ex10" value="false"> a</label>
|
||||
<label class="option"><input type="radio" name="ex10" value="true"> an</label>
|
||||
<label class="option"><input type="radio" name="ex10" value="false"> the</label>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="checkExercise(this)">Check</button>
|
||||
<div class="feedback"></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>
|
||||
115
grammar.html
Normal file
115
grammar.html
Normal file
@ -0,0 +1,115 @@
|
||||
<!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="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="exercises.html">Exercises</a></li>
|
||||
<li><a href="tests.html">Tests</a></li>
|
||||
<li><a href="reading.html">Reading</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>Grammar</h1>
|
||||
<p>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>Present Simple</h3>
|
||||
<p>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>Past Simple</h3>
|
||||
<p>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>Future Simple (will)</h3>
|
||||
<p>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>Articles: a / an / the</h3>
|
||||
<p>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 | an + vowel sound | 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>Pronouns</h3>
|
||||
<p>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>Prepositions</h3>
|
||||
<p>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>© 2026 <a href="index.html">English Easy</a>. Made for learning English.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
107
index.html
Normal file
107
index.html
Normal file
@ -0,0 +1,107 @@
|
||||
<!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="exercises.html">Exercises</a></li>
|
||||
<li><a href="tests.html">Tests</a></li>
|
||||
<li><a href="reading.html">Reading</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<h1>Welcome to <span>English Easy</span></h1>
|
||||
<p>Learn English step by step with vocabulary, grammar, exercises, reading texts, and tests. Start your journey today!</p>
|
||||
<a href="vocabulary.html" class="btn">Start Learning</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">What You Will Learn</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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section how-it-works">
|
||||
<div class="container">
|
||||
<h2 class="section-title">How It Works</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>
|
||||
184
js/script.js
Normal file
184
js/script.js
Normal file
@ -0,0 +1,184 @@
|
||||
// Mobile menu toggle
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const toggle = document.querySelector('.menu-toggle');
|
||||
const navList = document.querySelector('.nav-list');
|
||||
|
||||
if (toggle) {
|
||||
toggle.addEventListener('click', function() {
|
||||
navList.classList.toggle('open');
|
||||
});
|
||||
}
|
||||
|
||||
// Close menu on link click
|
||||
const navLinks = document.querySelectorAll('.nav-list a');
|
||||
navLinks.forEach(function(link) {
|
||||
link.addEventListener('click', function() {
|
||||
if (navList) navList.classList.remove('open');
|
||||
});
|
||||
});
|
||||
|
||||
// Highlight active page in nav
|
||||
const currentPage = window.location.pathname.split('/').pop() || 'index.html';
|
||||
navLinks.forEach(function(link) {
|
||||
const href = link.getAttribute('href');
|
||||
if (href === currentPage) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// --- Exercises ---
|
||||
function checkExercise(btn) {
|
||||
const exercise = btn.closest('.exercise');
|
||||
const selected = exercise.querySelector('input[type="radio"]:checked');
|
||||
const feedback = exercise.querySelector('.feedback');
|
||||
|
||||
if (!selected) {
|
||||
feedback.textContent = 'Please select an answer!';
|
||||
feedback.className = 'feedback wrong';
|
||||
feedback.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
const options = exercise.querySelectorAll('.option');
|
||||
options.forEach(function(opt) {
|
||||
opt.classList.remove('correct', 'wrong');
|
||||
});
|
||||
|
||||
const parent = selected.closest('.option');
|
||||
const isCorrect = selected.value === 'true';
|
||||
|
||||
if (isCorrect) {
|
||||
parent.classList.add('correct');
|
||||
feedback.textContent = 'Correct!';
|
||||
feedback.className = 'feedback correct';
|
||||
} else {
|
||||
parent.classList.add('wrong');
|
||||
feedback.textContent = 'Try again!';
|
||||
feedback.className = 'feedback wrong';
|
||||
// Show correct answer
|
||||
options.forEach(function(opt) {
|
||||
const radio = opt.querySelector('input[type="radio"]');
|
||||
if (radio && radio.value === 'true') {
|
||||
opt.classList.add('correct');
|
||||
}
|
||||
});
|
||||
}
|
||||
feedback.style.display = 'block';
|
||||
}
|
||||
|
||||
function checkFill(input) {
|
||||
const exercise = input.closest('.exercise');
|
||||
const answer = input.getAttribute('data-answer');
|
||||
const feedback = exercise.querySelector('.feedback');
|
||||
|
||||
input.classList.remove('correct', 'wrong');
|
||||
|
||||
if (input.value.trim().toLowerCase() === answer.toLowerCase()) {
|
||||
input.classList.add('correct');
|
||||
feedback.textContent = 'Correct!';
|
||||
feedback.className = 'feedback correct';
|
||||
} else {
|
||||
input.classList.add('wrong');
|
||||
feedback.textContent = 'Try again! Correct answer: ' + answer;
|
||||
feedback.className = 'feedback wrong';
|
||||
}
|
||||
feedback.style.display = 'block';
|
||||
}
|
||||
|
||||
function checkTranslate(btn) {
|
||||
const exercise = btn.closest('.exercise');
|
||||
const input = exercise.querySelector('input[type="text"]');
|
||||
const feedback = exercise.querySelector('.feedback');
|
||||
const answer = input.getAttribute('data-answer');
|
||||
|
||||
input.classList.remove('correct', 'wrong');
|
||||
|
||||
if (input.value.trim().toLowerCase() === answer.toLowerCase()) {
|
||||
input.classList.add('correct');
|
||||
feedback.textContent = 'Correct!';
|
||||
feedback.className = 'feedback correct';
|
||||
} else {
|
||||
input.classList.add('wrong');
|
||||
feedback.textContent = 'Try again! Correct answer: ' + answer;
|
||||
feedback.className = 'feedback wrong';
|
||||
}
|
||||
feedback.style.display = 'block';
|
||||
}
|
||||
|
||||
function checkMatch(btn) {
|
||||
const exercise = btn.closest('.exercise');
|
||||
const inputs = exercise.querySelectorAll('input[type="text"]');
|
||||
const feedback = exercise.querySelector('.feedback');
|
||||
let allCorrect = true;
|
||||
|
||||
inputs.forEach(function(input) {
|
||||
const answer = input.getAttribute('data-answer');
|
||||
input.classList.remove('correct', 'wrong');
|
||||
if (input.value.trim().toLowerCase() === answer.toLowerCase()) {
|
||||
input.classList.add('correct');
|
||||
} else {
|
||||
input.classList.add('wrong');
|
||||
allCorrect = false;
|
||||
}
|
||||
});
|
||||
|
||||
if (allCorrect) {
|
||||
feedback.textContent = 'All correct! Great job!';
|
||||
feedback.className = 'feedback correct';
|
||||
} else {
|
||||
feedback.textContent = 'Some answers are wrong. Try again!';
|
||||
feedback.className = 'feedback wrong';
|
||||
}
|
||||
feedback.style.display = 'block';
|
||||
}
|
||||
|
||||
// --- Tests ---
|
||||
function checkTest() {
|
||||
let score = 0;
|
||||
const total = document.querySelectorAll('.test-question').length;
|
||||
const questions = document.querySelectorAll('.test-question');
|
||||
|
||||
questions.forEach(function(q) {
|
||||
const selected = q.querySelector('input[type="radio"]:checked');
|
||||
if (selected && selected.value === 'true') {
|
||||
score++;
|
||||
}
|
||||
});
|
||||
|
||||
const resultBox = document.getElementById('test-result');
|
||||
const scoreDisplay = document.getElementById('score');
|
||||
scoreDisplay.textContent = score + '/' + total;
|
||||
resultBox.classList.add('show');
|
||||
|
||||
// Scroll to result
|
||||
resultBox.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
|
||||
// --- Contact form ---
|
||||
function submitForm(event) {
|
||||
event.preventDefault();
|
||||
const message = document.getElementById('form-message');
|
||||
message.classList.add('show');
|
||||
document.getElementById('contact-form').reset();
|
||||
setTimeout(function() {
|
||||
message.classList.remove('show');
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// --- Vocabulary filter ---
|
||||
function filterVocab(category, btn) {
|
||||
const rows = document.querySelectorAll('.vocab-row');
|
||||
const buttons = document.querySelectorAll('.category-btn');
|
||||
|
||||
buttons.forEach(function(b) { b.classList.remove('active'); });
|
||||
if (btn) btn.classList.add('active');
|
||||
|
||||
rows.forEach(function(row) {
|
||||
if (category === 'all' || row.getAttribute('data-category') === category) {
|
||||
row.style.display = '';
|
||||
} else {
|
||||
row.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
102
reading.html
Normal file
102
reading.html
Normal file
@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Reading — English Easy</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="exercises.html">Exercises</a></li>
|
||||
<li><a href="tests.html">Tests</a></li>
|
||||
<li><a href="reading.html">Reading</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>Reading</h1>
|
||||
<p>Read short texts in English and check your understanding.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<!-- Text 1 -->
|
||||
<div class="reading-text">
|
||||
<h3>My Daily Routine</h3>
|
||||
<div class="text-content">
|
||||
<p>My name is Anna. I am a student. I wake up at 7 o'clock every day. I have breakfast at 7:30. I go to school at 8 o'clock. I have lunch at school. I come home at 3 o'clock. Then I do my homework. In the evening, I read books or watch TV. I go to sleep at 10 o'clock.</p>
|
||||
<p>I like English because it is interesting. I study English every day.</p>
|
||||
</div>
|
||||
<div class="questions">
|
||||
<h4>Questions:</h4>
|
||||
<ol>
|
||||
<li>What is her name?</li>
|
||||
<li>What time does she wake up?</li>
|
||||
<li>Why does she like English?</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text 2 -->
|
||||
<div class="reading-text">
|
||||
<h3>My Family</h3>
|
||||
<div class="text-content">
|
||||
<p>Hi! I am Tom. I am 10 years old. I live with my family. There are four people in my family: my mother, my father, my sister, and me.</p>
|
||||
<p>My mother is a teacher. She works at a school. My father is a doctor. He works in a hospital. My sister is 15 years old. She likes music and plays the guitar. I like football. We are a happy family.</p>
|
||||
<p>On Sundays, we have dinner together. My mother cooks delicious food.</p>
|
||||
</div>
|
||||
<div class="questions">
|
||||
<h4>Questions:</h4>
|
||||
<ol>
|
||||
<li>How many people are in Tom's family?</li>
|
||||
<li>What does Tom's mother do?</li>
|
||||
<li>What does Tom's sister like?</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text 3 -->
|
||||
<div class="reading-text">
|
||||
<h3>A Day at the Park</h3>
|
||||
<div class="text-content">
|
||||
<p>Last Saturday, I went to the park with my friends. The weather was nice and sunny. We played football and listened to music.</p>
|
||||
<p>There was a small café in the park. We bought ice cream and cold water. We sat on the grass and talked for a long time. I took some photos with my phone.</p>
|
||||
<p>In the evening, we went home. I was tired but very happy. It was a great day!</p>
|
||||
</div>
|
||||
<div class="questions">
|
||||
<h4>Questions:</h4>
|
||||
<ol>
|
||||
<li>When did the story happen?</li>
|
||||
<li>What did they buy at the café?</li>
|
||||
<li>How did the boy feel in the evening?</li>
|
||||
</ol>
|
||||
</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>
|
||||
148
tests.html
Normal file
148
tests.html
Normal file
@ -0,0 +1,148 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Tests — English Easy</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="exercises.html">Exercises</a></li>
|
||||
<li><a href="tests.html">Tests</a></li>
|
||||
<li><a href="reading.html">Reading</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>English Test</h1>
|
||||
<p>Test your knowledge with 10 questions. Choose the correct answer for each question.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<div class="test-question">
|
||||
<h4>1. What is the English word for «Книга»?</h4>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="q1" value="false"> Pen</label>
|
||||
<label class="option"><input type="radio" name="q1" value="true"> Book</label>
|
||||
<label class="option"><input type="radio" name="q1" value="false"> Table</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-question">
|
||||
<h4>2. She ___ a doctor.</h4>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="q2" value="false"> am</label>
|
||||
<label class="option"><input type="radio" name="q2" value="true"> is</label>
|
||||
<label class="option"><input type="radio" name="q2" value="false"> are</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-question">
|
||||
<h4>3. I ___ breakfast at 8 o'clock every morning.</h4>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="q3" value="true"> have</label>
|
||||
<label class="option"><input type="radio" name="q3" value="false"> has</label>
|
||||
<label class="option"><input type="radio" name="q3" value="false"> had</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-question">
|
||||
<h4>4. What is the past form of «go»?</h4>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="q4" value="false"> go</label>
|
||||
<label class="option"><input type="radio" name="q4" value="false"> goes</label>
|
||||
<label class="option"><input type="radio" name="q4" value="true"> went</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-question">
|
||||
<h4>5. Choose the correct sentence:</h4>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="q5" value="false"> He like music.</label>
|
||||
<label class="option"><input type="radio" name="q5" value="true"> He likes music.</label>
|
||||
<label class="option"><input type="radio" name="q5" value="false"> He liking music.</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-question">
|
||||
<h4>6. What is «друг» in English?</h4>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="q6" value="false"> Family</label>
|
||||
<label class="option"><input type="radio" name="q6" value="true"> Friend</label>
|
||||
<label class="option"><input type="radio" name="q6" value="false"> Father</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-question">
|
||||
<h4>7. I ___ an apple yesterday.</h4>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="q7" value="false"> eat</label>
|
||||
<label class="option"><input type="radio" name="q7" value="true"> ate</label>
|
||||
<label class="option"><input type="radio" name="q7" value="false"> eaten</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-question">
|
||||
<h4>8. What is the meaning of «beautiful»?</h4>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="q8" value="true"> Красивый</label>
|
||||
<label class="option"><input type="radio" name="q8" value="false"> Большой</label>
|
||||
<label class="option"><input type="radio" name="q8" value="false"> Умный</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-question">
|
||||
<h4>9. We ___ football on Sundays.</h4>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="q9" value="true"> play</label>
|
||||
<label class="option"><input type="radio" name="q9" value="false"> plays</label>
|
||||
<label class="option"><input type="radio" name="q9" value="false"> played</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-question">
|
||||
<h4>10. The cat is ___ the table.</h4>
|
||||
<div class="options">
|
||||
<label class="option"><input type="radio" name="q10" value="false"> in</label>
|
||||
<label class="option"><input type="radio" name="q10" value="true"> on</label>
|
||||
<label class="option"><input type="radio" name="q10" value="false"> at</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align:center;margin-top:24px;">
|
||||
<button class="btn" onclick="checkTest()">Check Result</button>
|
||||
</div>
|
||||
|
||||
<div class="result-box" id="test-result">
|
||||
<div class="score" id="score">0/10</div>
|
||||
<p>Keep learning and try again!</p>
|
||||
</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>
|
||||
178
vocabulary.html
Normal file
178
vocabulary.html
Normal file
@ -0,0 +1,178 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Vocabulary — English Easy</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="exercises.html">Exercises</a></li>
|
||||
<li><a href="tests.html">Tests</a></li>
|
||||
<li><a href="reading.html">Reading</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>Vocabulary</h1>
|
||||
<p>Learn 20+ common English words with translations and examples.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="vocab-categories">
|
||||
<button class="category-btn active" onclick="filterVocab('all', this)">All</button>
|
||||
<button class="category-btn" onclick="filterVocab('school', this)">School</button>
|
||||
<button class="category-btn" onclick="filterVocab('family', this)">Family</button>
|
||||
<button class="category-btn" onclick="filterVocab('food', this)">Food</button>
|
||||
<button class="category-btn" onclick="filterVocab('daily', this)">Daily Routine</button>
|
||||
<button class="category-btn" onclick="filterVocab('hobbies', this)">Hobbies</button>
|
||||
</div>
|
||||
|
||||
<table class="vocab-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>English</th>
|
||||
<th>Translation</th>
|
||||
<th>Example Sentence</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- School -->
|
||||
<tr class="vocab-row" data-category="school">
|
||||
<td><strong>Book</strong></td>
|
||||
<td>Книга</td>
|
||||
<td>I read a <em>book</em> every evening.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="school">
|
||||
<td><strong>Teacher</strong></td>
|
||||
<td>Учитель</td>
|
||||
<td>My <em>teacher</em> is very kind.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="school">
|
||||
<td><strong>Lesson</strong></td>
|
||||
<td>Урок</td>
|
||||
<td>The <em>lesson</em> starts at 9 am.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="school">
|
||||
<td><strong>Homework</strong></td>
|
||||
<td>Домашнее задание</td>
|
||||
<td>I do my <em>homework</em> after school.</td>
|
||||
</tr>
|
||||
<!-- Family -->
|
||||
<tr class="vocab-row" data-category="family">
|
||||
<td><strong>Friend</strong></td>
|
||||
<td>Друг</td>
|
||||
<td>He is my best <em>friend</em>.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="family">
|
||||
<td><strong>Mother</strong></td>
|
||||
<td>Мама</td>
|
||||
<td>My <em>mother</em> cooks dinner.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="family">
|
||||
<td><strong>Father</strong></td>
|
||||
<td>Папа</td>
|
||||
<td>My <em>father</em> works in an office.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="family">
|
||||
<td><strong>Sister</strong></td>
|
||||
<td>Сестра</td>
|
||||
<td>My <em>sister</em> likes music.</td>
|
||||
</tr>
|
||||
<!-- Food -->
|
||||
<tr class="vocab-row" data-category="food">
|
||||
<td><strong>Apple</strong></td>
|
||||
<td>Яблоко</td>
|
||||
<td>I eat an <em>apple</em> every day.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="food">
|
||||
<td><strong>Milk</strong></td>
|
||||
<td>Молоко</td>
|
||||
<td>I drink <em>milk</em> in the morning.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="food">
|
||||
<td><strong>Bread</strong></td>
|
||||
<td>Хлеб</td>
|
||||
<td>We buy <em>bread</em> from the shop.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="food">
|
||||
<td><strong>Water</strong></td>
|
||||
<td>Вода</td>
|
||||
<td>I drink a lot of <em>water</em>.</td>
|
||||
</tr>
|
||||
<!-- Daily Routine -->
|
||||
<tr class="vocab-row" data-category="daily">
|
||||
<td><strong>Wake up</strong></td>
|
||||
<td>Просыпаться</td>
|
||||
<td>I <em>wake up</em> at 7 o'clock.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="daily">
|
||||
<td><strong>Breakfast</strong></td>
|
||||
<td>Завтрак</td>
|
||||
<td>I have <em>breakfast</em> at 8 am.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="daily">
|
||||
<td><strong>School</strong></td>
|
||||
<td>Школа</td>
|
||||
<td>I go to <em>school</em> every day.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="daily">
|
||||
<td><strong>Sleep</strong></td>
|
||||
<td>Спать</td>
|
||||
<td>I go to <em>sleep</em> at 10 pm.</td>
|
||||
</tr>
|
||||
<!-- Hobbies -->
|
||||
<tr class="vocab-row" data-category="hobbies">
|
||||
<td><strong>Music</strong></td>
|
||||
<td>Музыка</td>
|
||||
<td>I love listening to <em>music</em>.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="hobbies">
|
||||
<td><strong>Football</strong></td>
|
||||
<td>Футбол</td>
|
||||
<td>I play <em>football</em> on weekends.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="hobbies">
|
||||
<td><strong>Read</strong></td>
|
||||
<td>Читать</td>
|
||||
<td>I like to <em>read</em> books.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="hobbies">
|
||||
<td><strong>Travel</strong></td>
|
||||
<td>Путешествовать</td>
|
||||
<td>I want to <em>travel</em> to London.</td>
|
||||
</tr>
|
||||
<tr class="vocab-row" data-category="hobbies">
|
||||
<td><strong>Cook</strong></td>
|
||||
<td>Готовить</td>
|
||||
<td>I <em>cook</em> dinner with my mother.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
Loading…
Reference in New Issue
Block a user