Skip to content

Commit 5ce9eae

Browse files
nulltuxanulltuxa
authored
Create index.html
1 parent ceb325b commit 5ce9eae

File tree

1 file changed

+194
-0
lines changed

1 file changed

+194
-0
lines changed

‎index.html‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<!DOCTYPE html>
2+
<html lang="fa" dir="rtl">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>آکادمی متال‌کد</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet" type="text/css" />
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10+
<script>
11+
function toggleMobileMenu() {
12+
const mobileMenu = document.getElementById('mobileMenu');
13+
mobileMenu.classList.toggle('hidden');
14+
}
15+
</script>
16+
17+
</head>
18+
<body class="bg-gray-900 text-white font-['Vazirmatn']">
19+
<nav class="fixed w-full bg-gray-800/90 backdrop-blur-sm shadow-lg z-50">
20+
<div class="container mx-auto px-6 py-4">
21+
<div class="flex items-center justify-between">
22+
<div class="flex items-center gap-2">
23+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="32px" width="32px" version="1.1" id="Layer_1" viewBox="0 0 512 512" xml:space="preserve" data-aos="fade-right">
24+
<g>
25+
<path style="fill:#32BEA6;" d="M0,260.908l174.648-81.136v38.568l-132.08,57.848v0.728l132.08,57.848v38.568L0,292.204V260.908z"/>
26+
<path style="fill:#32BEA6;" d="M201.616,387.9l77.864-263.8h36.752l-77.864,263.8H201.616z"/>
27+
<path style="fill:#32BEA6;" d="M512,293.284L337.352,373.34v-38.568l134.992-57.848v-0.728l-134.992-57.848V179.78L512,259.82 V293.284z"/>
28+
</g>
29+
</svg>
30+
<div class="text-2xl font-bold text-purple-500" data-aos="fade-right">متال‌کد</div>
31+
</div>
32+
<div class="hidden md:flex items-center space-x-8" data-aos="fade-left">
33+
<div class="flex items-center space-x-reverse space-x-8">
34+
<a href="#home" class="hover:text-purple-500 transition-colors">خانه</a>
35+
<a href="#courses" class="hover:text-purple-500 transition-colors">دوره‌ها</a>
36+
<a href="#about" class="hover:text-purple-500 transition-colors">درباره ما</a>
37+
<a href="#contact" class="hover:text-purple-500 transition-colors">تماس با ما</a>
38+
</div>
39+
<div class="flex items-center space-x-reverse space-x-4 mr-8 border-r pr-8 border-gray-700">
40+
<a href="/login" class="px-4 py-2 text-purple-500 hover:text-purple-400 transition-colors">ورود</a>
41+
<a href="/register" class="px-4 py-2 bg-purple-500 hover:bg-purple-600 rounded-lg transition-colors">ثبت نام</a>
42+
</div>
43+
</div>
44+
<button class="md:hidden text-2xl" onclick="toggleMobileMenu()">
45+
<i class="fas fa-bars"></i>
46+
</button>
47+
</div>
48+
</div>
49+
<div id="mobileMenu" class="hidden md:hidden bg-gray-800 p-4">
50+
<div class="flex flex-col space-y-4">
51+
<a href="#home" class="hover:text-purple-500 transition-colors">خانه</a>
52+
<a href="#courses" class="hover:text-purple-500 transition-colors">دوره‌ها</a>
53+
<a href="#about" class="hover:text-purple-500 transition-colors">درباره ما</a>
54+
<a href="#contact" class="hover:text-purple-500 transition-colors">تماس با ما</a>
55+
<div class="pt-4 border-t border-gray-700">
56+
<a href="/login" class="block mb-2 text-purple-500 hover:text-purple-400 transition-colors">ورود</a>
57+
<a href="/register" class="block px-4 py-2 bg-purple-500 hover:bg-purple-600 rounded-lg transition-colors text-center">ثبت نام</a>
58+
</div>
59+
</div>
60+
</div>
61+
</nav>
62+
63+
<section id="home" class="h-screen flex items-center justify-center">
64+
<div class="text-center">
65+
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6" data-aos="zoom-in">به آکادمی متال‌کد خوش آمدید</h1>
66+
<p class="text-lg md:text-xl text-gray-400 mb-8" data-aos="fade-up" data-aos-delay="200">هنر برنامه‌نویسی را با ما بیاموزید</p>
67+
<button class="bg-purple-600 hover:bg-purple-700 px-8 py-3 rounded-full transition-colors" data-aos="flip-up" data-aos-delay="400">
68+
شروع کنید
69+
</button>
70+
</div>
71+
</section>
72+
73+
<section id="courses" class="py-20 bg-gray-800">
74+
<div class="container mx-auto px-6">
75+
<h2 class="text-4xl font-bold text-center mb-16" data-aos="fade-up">دوره‌های ما</h2>
76+
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
77+
<div class="bg-gray-900 rounded-lg p-6 shadow-lg" data-aos="flip-left" data-aos-delay="100">
78+
<div class="text-purple-500 text-4xl mb-4">
79+
<i class="fab fa-python"></i>
80+
</div>
81+
<h3 class="text-xl font-bold mb-4">برنامه‌نویسی پایتون</h3>
82+
<p class="text-gray-400">تسلط بر پایتون از مبتدی تا پیشرفته</p>
83+
</div>
84+
<div class="bg-gray-900 rounded-lg p-6 shadow-lg" data-aos="flip-left" data-aos-delay="200">
85+
<div class="text-purple-500 text-4xl mb-4">
86+
<i class="fab fa-php"></i>
87+
</div>
88+
<h3 class="text-xl font-bold mb-4">توسعه PHP</h3>
89+
<p class="text-gray-400">ساخت وب‌سایت‌های پویا با PHP</p>
90+
</div>
91+
<div class="bg-gray-900 rounded-lg p-6 shadow-lg" data-aos="flip-left" data-aos-delay="300">
92+
<div class="text-purple-500 text-4xl mb-4">
93+
<i class="fab fa-linux"></i>
94+
</div>
95+
<h3 class="text-xl font-bold mb-4">مدیریت لینوکس</h3>
96+
<p class="text-gray-400">یادگیری مدیریت سیستم لینوکس</p>
97+
</div>
98+
<div class="bg-gray-900 rounded-lg p-6 shadow-lg" data-aos="flip-left" data-aos-delay="400">
99+
<div class="text-purple-500 text-4xl mb-4">
100+
<i class="fab fa-html5"></i>
101+
</div>
102+
<h3 class="text-xl font-bold mb-4">HTML و CSS</h3>
103+
<p class="text-gray-400">ایجاد وب‌سایت‌های واکنش‌گرای زیبا</p>
104+
</div>
105+
</div>
106+
</div>
107+
</section>
108+
109+
<section class="py-20">
110+
<div class="container mx-auto px-6">
111+
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
112+
<div data-aos="fade-right" data-aos-duration="1500">
113+
<h2 class="text-4xl font-bold mb-6">چرا متال‌کد را انتخاب کنید؟</h2>
114+
<ul class="space-y-4">
115+
<li class="flex items-center" data-aos="zoom-in" data-aos-delay="100">
116+
<svg class="w-6 h-6 text-purple-500 ml-2" fill="currentColor" viewBox="0 0 20 20">
117+
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
118+
</svg>
119+
اساتید متخصص
120+
</li>
121+
<li class="flex items-center" data-aos="zoom-in" data-aos-delay="200">
122+
<svg class="w-6 h-6 text-purple-500 ml-2" fill="currentColor" viewBox="0 0 20 20">
123+
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
124+
</svg>
125+
پروژه‌های عملی
126+
</li>
127+
<li class="flex items-center" data-aos="zoom-in" data-aos-delay="300">
128+
<svg class="w-6 h-6 text-purple-500 ml-2" fill="currentColor" viewBox="0 0 20 20">
129+
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
130+
</svg>
131+
پشتیبانی ۲۴ ساعته
132+
</li>
133+
</ul>
134+
</div>
135+
<div data-aos="fade-left" data-aos-duration="1500">
136+
<img src="https://via.placeholder.com/500x300" alt="ویژگی‌ها" class="rounded-lg shadow-lg">
137+
</div>
138+
</div>
139+
</div>
140+
</section>
141+
142+
<section id="contact" class="py-20 bg-gray-800">
143+
<div class="max-w-lg mx-auto px-4 sm:px-6">
144+
<h2 class="text-4xl font-bold text-center mb-16" data-aos="fade-down">تماس با ما</h2>
145+
<div class="max-w-lg mx-auto">
146+
<form class="space-y-6" data-aos="zoom-in-up" data-aos-duration="1200">
147+
<div>
148+
<label class="block text-sm font-medium mb-2">نام</label>
149+
<input type="text" class="w-full px-4 py-2 rounded-lg bg-gray-900 border border-gray-700 focus:outline-none focus:border-purple-500">
150+
</div>
151+
<div>
152+
<label class="block text-sm font-medium mb-2">ایمیل</label>
153+
<input type="email" class="w-full px-4 py-2 rounded-lg bg-gray-900 border border-gray-700 focus:outline-none focus:border-purple-500">
154+
</div>
155+
<div>
156+
<label class="block text-sm font-medium mb-2">پیام</label>
157+
<textarea rows="4" class="w-full px-4 py-2 rounded-lg bg-gray-900 border border-gray-700 focus:outline-none focus:border-purple-500"></textarea>
158+
</div>
159+
<button class="w-full bg-purple-600 hover:bg-purple-700 px-6 py-3 rounded-lg transition-colors">
160+
ارسال پیام
161+
</button>
162+
</form>
163+
</div>
164+
</div>
165+
</section>
166+
167+
<footer class="bg-gray-900 py-8">
168+
<div class="container mx-auto px-6 text-center" data-aos="fade-up">
169+
<p class="text-gray-400">© ۱۴۰۲ آکادمی متال‌کد. تمامی حقوق محفوظ است.</p>
170+
</div>
171+
</footer>
172+
173+
<script>
174+
AOS.init({
175+
duration: 1000,
176+
once: true,
177+
easing: 'ease-in-out'
178+
});
179+
</script>
180+
<script>
181+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
182+
anchor.addEventListener('click', function (e) {
183+
e.preventDefault();
184+
const target = document.querySelector(this.getAttribute('href'));
185+
target.scrollIntoView({
186+
behavior: 'smooth'
187+
});
188+
document.getElementById('mobileMenu').classList.add('hidden');
189+
});
190+
});
191+
</script>
192+
193+
</body>
194+
</html>

0 commit comments

Comments
 (0)