-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (135 loc) · 4.28 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home | SC</title>
<link rel="stylesheet" href="css/index.css" />
<link
rel="shortcut icon"
href="favicon/apple-touch-icon.png"
type="image/x-icon"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
</head>
<body>
<!-- Navbar -->
<nav>
<div id="logo">
<h1>Speaking <span class="transparent">Club</span></h1>
</div>
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="menu-icon">
<i class="fas fa-bars"></i>
</label>
<ul class="nav-links">
<li><a href="test.html">Take Test</a></li>
</ul>
</nav>
<!-- Hero Section -->
<section id="hero">
<div class="hero-content">
<h1>Unlock Your Potential with Our Speaking Tests</h1>
<p>
Practice and prepare for your multilevel speaking exams with ease and
confidence.
</p>
<a href="test.html" class="button">Start Test</a>
</div>
</section>
<!-- Why Practice Section -->
<section id="why-practice">
<div class="why-content">
<h2>Why Practice on This Platform!</h2>
<div class="stats">
<div class="stat">
<h3><span class="counter" data-target="99">0</span>%</h3>
<p>Actual Speaking Test Conditions</p>
</div>
<div class="stat">
<h3>+<span class="counter" data-target="50">0</span></h3>
<p>Group Members</p>
</div>
<div class="stat">
<h3>+<span class="counter" data-target="5">0</span></h3>
<p>Full Mock Speaking Tests</p>
</div>
</div>
</div>
</section>
<!-- Telegram Invite Section -->
<section id="join-telegram">
<div class="telegram-content">
<h2>Join Our Speaking Club Telegram Group</h2>
<p>
Talk with us and improve your speaking skills in a community
environment.
</p>
<a
href="https://t.me/+FdHJN5UWETxjYTYy"
target="_blank"
class="telegram-link"
>
<i class="fab fa-telegram-plane"></i> Join Now
</a>
</div>
</section>
<!-- About Section -->
<section id="about">
<div class="about-content">
<h2>About the Project</h2>
<p>
This platform provides speaking tests designed to help you practice
for language exams. Our goal is to help students build their
confidence and improve their speaking skills in a real-world test
environment.
</p>
<h3>Our Team</h3>
<p>
<b>Zohidjon Ma'rufov</b> - Developer. Here is link to GitHub page for
<a
href="https://github.com/zohidjondev/speaking-club"
style="color: aliceblue"
>source</a
>
</p>
</div>
</section>
<!-- Footer -->
<footer>
<div class="footer-links">
<a href="https://github.com/zohidjondev/speaking-club" target="_blank"
><i class="fa-brands fa-github"></i
></a>
<a href="https://t.me/+FdHJN5UWETxjYTYy" target="_blank"
><i class="fab fa-telegram-plane"></i
></a>
</div>
<p>© 2024 Speaking Club. Uzbekistan, Fergana, Besharyk.</p>
</footer>
<script src="app.js"></script>
<script>
// Counter animation script
document.addEventListener("DOMContentLoaded", () => {
const counters = document.querySelectorAll(".counter");
counters.forEach((counter) => {
const updateCount = () => {
const target = +counter.getAttribute("data-target");
const count = +counter.innerText;
const increment = target / 500; // Adjust speed by changing the divisor
if (count < target) {
counter.innerText = Math.ceil(count + increment);
setTimeout(updateCount, 10); // Update every 10ms
} else {
counter.innerText = target;
}
};
updateCount();
});
});
</script>
</body>
</html>