sultanbek_askaruly/english-easy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hogwarts redesign: dark theme, gold accents, parchment, stars, house cards

Browse Source
This commit is contained in:
sultanbek_askaruly 2026-06-19 06:38:22 +00:00
parent 3d72d7d590
commit acc7fbb111
12 changed files with 542 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.git-credentials
View File

@ -1,2 +0,0 @@
http://sultanbek_askaruly:ccaf3980723058bd093e312780c167c82b9a54e6@172.18.0.1%3a3300
https://sultanbek_askaruly:ccaf3980723058bd093e312780c167c82b9a54e6@git.vibe42.kz

4
contact.html
View File

@ -4,9 +4,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Contact — English Easy</title> <title>Contact — 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"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<div class="stars-bg" id="stars-bg"></div>
<header> <header>
<div class="header-inner"> <div class="header-inner">
<a href="index.html" class="logo">English <span>Easy</span></a> <a href="index.html" class="logo">English <span>Easy</span></a>

775
css/style.css
View File

File diff suppressed because it is too large Load Diff

4
exercises.html
View File

@ -4,9 +4,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Exercises — English Easy</title> <title>Exercises — 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"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<div class="stars-bg" id="stars-bg"></div>
<header> <header>
<div class="header-inner"> <div class="header-inner">
<a href="index.html" class="logo">English <span>Easy</span></a> <a href="index.html" class="logo">English <span>Easy</span></a>

4
grammar.html
View File

@ -4,9 +4,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Grammar — English Easy</title> <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"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<div class="stars-bg" id="stars-bg"></div>
<header> <header>
<div class="header-inner"> <div class="header-inner">
<a href="index.html" class="logo">English <span>Easy</span></a> <a href="index.html" class="logo">English <span>Easy</span></a>

57
index.html
View File

@ -4,9 +4,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>English Easy — Learn English Step by Step</title> <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"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<div class="stars-bg" id="stars-bg"></div>
<header> <header>
<div class="header-inner"> <div class="header-inner">
<a href="index.html" class="logo">English <span>Easy</span></a> <a href="index.html" class="logo">English <span>Easy</span></a>
@ -29,20 +33,20 @@
<section class="hero"> <section class="hero">
<div class="container"> <div class="container">
<div class="hero-badge">Start your journey</div> <div class="hero-badge">⚡ Welcome to Hogwarts School of English</div>
<h1>Learn English with <span class="highlight">Easy</span> Steps</h1> <h1>Master the <span class="highlight">Magic</span> of English</h1>
<p>Vocabulary, grammar, exercises, reading texts, and tests — everything you need to start speaking English with confidence.</p> <p>Discover vocabulary, grammar, exercises, reading, and tests — your magical journey to speaking English begins now.</p>
<div class="hero-buttons"> <div class="hero-buttons">
<a href="vocabulary.html" class="btn">Start Learning</a> <a href="vocabulary.html" class="btn">🔮 Begin Your Journey</a>
<a href="exercises.html" class="btn btn-outline">Try Exercises</a> <a href="exercises.html" class="btn btn-outline">✨ Try a Spell (Exercise)</a>
</div> </div>
</div> </div>
</section> </section>
<section class="section"> <section class="section">
<div class="container"> <div class="container">
<h2 class="section-title">What You'll <span>Learn</span></h2> <h2 class="section-title">Your <span>Magical</span> Subjects</h2>
<p class="section-subtitle">We make learning English simple and fun with clear explanations and interactive exercises.</p> <p class="section-subtitle">Like a wizard at Hogwarts, master every branch of English magic.</p>
<div class="cards-grid"> <div class="cards-grid">
<div class="card"> <div class="card">
<div class="card-icon">📖</div> <div class="card-icon">📖</div>
@ -93,31 +97,36 @@
<section class="section motivation-banner" style="padding:0;background:none;"> <section class="section motivation-banner" style="padding:0;background:none;">
<div class="container"> <div class="container">
<div class="motivation-banner"> <div class="motivation-banner">
<h3>Ready to Start?</h3> <h3>✨ The Chamber of Progress Awaits</h3>
<p>Every expert was once a beginner. Take the first step today!</p> <p>Every great wizard started with their first spell. Begin your English magic today!</p>
</div> </div>
</div> </div>
</section> </section>
<section class="section section-alt"> <section class="section section-alt">
<div class="container"> <div class="container">
<h2 class="section-title">How It <span>Works</span></h2> <h2 class="section-title">The Four <span>Houses</span></h2>
<p class="section-subtitle">Three simple steps to start learning English.</p> <p class="section-subtitle">Choose your path — every house has its own strength in learning English.</p>
<div class="steps"> <div class="houses-grid">
<div class="step"> <div class="card house-card house-gryffindor">
<div class="step-number">1</div> <div class="house-crest">🦁</div>
<h3>Learn New Words</h3> <h3>Gryffindor</h3>
<p>Start with the Vocabulary section to build your word base with common English words.</p> <p>Brave and bold — take risks with new words and speak English without fear. Perfect for conversation practice!</p>
</div> </div>
<div class="step"> <div class="card house-card house-slytherin">
<div class="step-number">2</div> <div class="house-crest">🐍</div>
<h3>Study Grammar</h3> <h3>Slytherin</h3>
<p>Understand how sentences work with simple grammar explanations and examples.</p> <p>Ambitious and determined — master grammar rules and achieve high scores on every test.</p>
</div> </div>
<div class="step"> <div class="card house-card house-ravenclaw">
<div class="step-number">3</div> <div class="house-crest">🦅</div>
<h3>Practice & Test</h3> <h3>Ravenclaw</h3>
<p>Use exercises and tests to check your progress and see how much you've learned!</p> <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> </div>
</div> </div>

18
js/script.js
View File

@ -453,6 +453,24 @@ function markWordListened() {
}); });
})(); })();
// --- Twinkling Stars ---
(function() {
var bg = document.getElementById('stars-bg');
if (!bg) return;
var count = window.innerWidth < 600 ? 40 : 80;
for (var i = 0; i < count; i++) {
var star = document.createElement('div');
star.className = 'star';
star.style.left = Math.random() * 100 + '%';
star.style.top = Math.random() * 100 + '%';
star.style.width = (Math.random() * 3 + 1) + 'px';
star.style.height = star.style.width;
star.style.animationDelay = (Math.random() * 5) + 's';
star.style.animationDuration = (Math.random() * 3 + 2) + 's';
bg.appendChild(star);
}
})();
// --- Vocabulary filter --- // --- Vocabulary filter ---
function filterVocab(category, btn) { function filterVocab(category, btn) {
const rows = document.querySelectorAll('.vocab-row'); const rows = document.querySelectorAll('.vocab-row');

4
progress.html
View File

@ -4,9 +4,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>My Progress — English Easy</title> <title>My Progress — 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"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<div class="stars-bg" id="stars-bg"></div>
<header> <header>
<div class="header-inner"> <div class="header-inner">
<a href="index.html" class="logo"><span class="logo-icon">E</span>English <span>Easy</span></a> <a href="index.html" class="logo"><span class="logo-icon">E</span>English <span>Easy</span></a>

4
pronunciation.html
View File

@ -4,6 +4,9 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Pronunciation — English Easy</title> <title>Pronunciation — 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"> <link rel="stylesheet" href="css/style.css">
<style> <style>
.pron-card { .pron-card {
@ -104,6 +107,7 @@
</style> </style>
</head> </head>
<body> <body>
<div class="stars-bg" id="stars-bg"></div>
<header> <header>
<div class="header-inner"> <div class="header-inner">
<a href="index.html" class="logo"><span class="logo-icon">E</span>English <span>Easy</span></a> <a href="index.html" class="logo"><span class="logo-icon">E</span>English <span>Easy</span></a>

4
reading.html
View File

@ -4,9 +4,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Reading — English Easy</title> <title>Reading — 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"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<div class="stars-bg" id="stars-bg"></div>
<header> <header>
<div class="header-inner"> <div class="header-inner">
<a href="index.html" class="logo">English <span>Easy</span></a> <a href="index.html" class="logo">English <span>Easy</span></a>

4
tests.html
View File

@ -4,9 +4,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Tests — English Easy</title> <title>Tests — 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"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<div class="stars-bg" id="stars-bg"></div>
<header> <header>
<div class="header-inner"> <div class="header-inner">
<a href="index.html" class="logo">English <span>Easy</span></a> <a href="index.html" class="logo">English <span>Easy</span></a>

4
vocabulary.html
View File

@ -4,9 +4,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Vocabulary — English Easy</title> <title>Vocabulary — 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"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<div class="stars-bg" id="stars-bg"></div>
<header> <header>
<div class="header-inner"> <div class="header-inner">
<a href="index.html" class="logo">English <span>Easy</span></a> <a href="index.html" class="logo">English <span>Easy</span></a>