-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
249 lines (238 loc) · 12.8 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>ProEdu</title>
</head>
<body>
<div>
<h1 class=" text-center mt-10 md:text-center lg:text-left lg:my-8 lg:mx-32 text-2xl font-bold">Pro Edu</h1>
<ul class="text-center p-8 lg:flex lg:float-right lg:-my-14 lg:mx-20">
<li class="p-2 mx-2 lg:mx-3 lg:p-0 sm:p-2 hover:text-pink-600"><a href="">Home</a></li>
<li class="p-2 mx-2 lg:mx-6 lg:p-0 sm:p-2 hover:text-pink-600"><a href="">Courses</a></li>
<li class="p-2 mx-2 lg:mx-6 lg:p-0 sm:p-2 hover:text-pink-600"><a href="">Deals</a></li>
<li class="p-2 mx-2 lg:mx-6 lg:p-0 sm:p-2 hover:text-pink-600"><a href="">Success</a></li>
<li class="p-2 mx-2 lg:mx-6 lg:p-0 sm:p-2 hover:text-pink-600"><a href="">About</a></li>
<li class="p-2 mx-2 lg:mx-6 lg:p-0 sm:p-2 hover:text-pink-600"><a href="">Register</a></li>
</ul>
</div>
<div class="lg:p-7 lg:my-20 lg:flex">
<div>
<h1 class="font-bold text-4xl text-center lg:text-left mx-9 lg:mx-24">Start Learning with us now</h1>
<br>
<p class="w-1/2 mx-auto pb-6 lg:mx-28 lg:text-left lg:w-1/3">Lorem ipsum dolor sit amet consectetur adipisicing elit.
A velit qui, quibusdam quisquam veniam recusandae.
</p>
<button class="bg-blue-400 text-white rounded-lg p-2.5 mx-auto flex lg:float-left lg:ml-28 hover:bg-blue-800 ">Start Learning</button></div>
<div class="flex justify-center p-4 ">
<img
src="https://school.mangoanimate.com/wp-content/uploads/2023/05/Animated-Educational-Videos-for-Students-to-Learn-With-Fun.webp"
alt="" width="350px" class="mx-5 ">
</div>
</div>
<div class="mt-16">
<h1 class="mx-auto text-center text-3xl font-bold ">Discover Our Popular Courses</h1>
<p class="w-1/2 mx-auto text-center mt-6">Lorem ipsum dolor sit amet consectetur
adipisicing elit. Unde sequi maxime voluptas dolore necessitatibus earum.</p>
<div class="md:grid md:grid-cols-2 md:grid-rows-3 lg:grid lg:grid-cols-2 lg:grid-rows-3 ">
<div class="m-10 border lg:flex lg:mx-10 "><img
src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Rectangle%2019.png?raw=true"
class="p-1 w-full h-auto">
<div class="m-7">
<h1 class="font-bold text-xl">Fundamental Of UI/UX Design</h1><br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus enim temporibus quae voluptas nemo
beatae.</p><br><button class="text-blue-600 font-bold hover:text-purple-800">Price: $20</button>
</div>
</div>
<div class="m-10 border lg:flex lg:mx-10"><img
src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Rectangle%2021.png?raw=true"
class="p-1 w-full h-auto">
<div class="m-7">
<h1 class="font-bold text-xl">Javascript Basic To Advanced</h1><br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus enim temporibus quae voluptas nemo
beatae.</p><br><button class="text-blue-600 font-bold hover:text-purple-800">Price: $20</button>
</div>
</div>
<div class="m-10 border lg:flex lg:mx-10 "><img
src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Rectangle%2023.png?raw=true"
class="p-1 w-full h-auto">
<div class="m-7">
<h1 class="font-bold text-xl">FullStack Web Development</h1><br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus enim temporibus quae voluptas nemo
beatae.</p><br><button class="text-blue-600 font-bold hover:text-purple-800">Price: $20</button>
</div>
</div>
<div class="m-10 border lg:flex lg:mx-10"><img
src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Rectangle%2025.png?raw=true"
class="p-1 w-full h-auto">
<div class="m-7">
<h1 class="font-bold text-xl">Digital Marketing</h1><br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus enim temporibus quae voluptas nemo
beatae.</p><br><button class="text-blue-600 font-bold hover:text-purple-800">Price: $20</button>
</div>
</div>
<div class="m-10 border lg:flex lg:mx-10"><img
src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Rectangle%2027.png?raw=true"
class="p-1 w-full h-auto">
<div class="m-7">
<h1 class="font-bold text-xl">Photography Basic Rules</h1><br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus enim temporibus quae voluptas nemo
beatae.</p><br><button class="text-blue-600 font-bold hover:text-purple-800">Price: $20</button>
</div>
</div>
<div class="m-10 border lg:flex lg:mx-10"><img
src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Rectangle%2029.png?raw=true"
class="p-1 w-full h-auto">
<div class="m-7">
<h1 class="font-bold text-xl">Motion Graphics</h1><br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus enim temporibus quae voluptas nemo
beatae.</p><br><button class="text-blue-600 font-bold hover:text-purple-800">Price: $20</button>
</div>
</div>
</div>
<button class="bg-blue-400 text-white rounded-lg p-3 flex mx-auto hover:bg-blue-800">See More Courses</button>
</div>
<div class="mt-10 lg:flex lg:mx-32 ">
<img src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Rectangle%208.png?raw=true" alt="" class="w-full h-auto object-cover"
>
<div class="p-6 bg-cyan-100 w-full object-cover h-auto">
<h1 class="font-bold text-3xl text-center lg:text-left lg:mt-24">Explore the e-learning institute</h1>
<br>
<p class="mx-6 lg:mx-auto lg:mr-40">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore
voluptate illum at architecto eius. Illo ex aliquid tempore eveniet iste minima, aspernatur velit? Neque fuga
sint sed adipisci asperiores molestias animi expedita assumenda distinctio nulla error, nostrum culpa ipsum
officia, blanditiis voluptas. Ipsam, voluptates? Eligendi optio tempora mollitia accusantium.</p>
<br>
<button class=" bg-blue-500 text-white rounded-lg p-2.5 flex mx-auto hover:bg-blue-800">Read More</button>
</div>
</div>
<div class="py-16 px-12 lg:py-10 lg:px-10 lg:mx-32 lg:my-10 bg-blue-400 text-white">
<h1 class="text-center lg:text-left font-bold text-2xl">Ready to Join?</h1>
<br>
<p class="w-3/4 mx-auto text-center ">Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quasi laborum expedita doloribus ut numquam? Quos.</p>
<br>
<button
class="bg-white text-blue-400 rounded-lg p-3 flex mx-auto hover:bg-blue-900 hover:text-white">Register
Now</button>
</div>
<div class="p-5 lg;p-auto text-center lg:text-left mx-5 my-12 lg:mx-32 lg:my-24">
<h1 class="font-bold text-2xl">Meet Our Succesful Students</h1>
<p class="my-6">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam, tempore!</p>
<div class="md:grid md:grid-cols-2 lg:flex">
<div class="border my-8 lg:my-auto ml-2 lg:ml-auto lg:mr-4 lg:mb-4">
<img src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Rectangle%2031.png?raw=true"
alt="Image 1" class="p-1 w-full h-auto relative">
<div class="px-7 py-3">
<p class="font-bold">Awlad Hossain</p>
<p>UI/UX Designer</p>
</div>
</div>
<div class="border my-8 lg:my-auto ml-2 lg:ml-auto lg:mr-4 lg:mb-4">
<img src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Rectangle%2033.png?raw=true"
alt="Image 2" class="p-1 w-full h-auto relative">
<div class="px-7 py-3">
<p class="font-bold">Michael Fields</p>
<p>Graphic Designer</p>
</div>
</div>
<div class="border my-8 lg:my-auto ml-2 lg:ml-auto lg:mr-4 lg:mb-4">
<img src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Rectangle%206-1.png?raw=true"
alt="Image 3" class="p-1 w-full h-auto relative">
<div class="px-7 py-3">
<p class="font-bold">Nishi Akter</p>
<p>Web developer</p>
</div>
</div>
<div class="border my-8 lg:my-auto ml-2 lg:ml-auto lg:mr-4 lg:mb-4">
<img src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Rectangle%206.png?raw=true"
alt="Image 4" class="p-1 w-full h-auto relative">
<div class="px-7 py-3">
<p class="font-bold">Emma Wilson</p>
<p>Motion Designer</p>
</div>
</div>
</div>
<button class="bg-blue-400 text-white rounded-lg p-2.5 flex mx-auto hover:bg-blue-800">View All</button>
</div>
<div>
<h1 class="mx-5 lg:mx-auto text-center font-bold text-4xl">Some Students Feedback</h1>
<br>
<p class="w-2/3 mx-auto text-center mt-5">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Cum est possimus sapiente deserunt voluptates quaerat libero omnis officiis placeat ad.</p>
<br>
<div class="lg:flex lg:mx-32 lg:mt-6 ">
<div class="my-8 lg:my-auto border px-14 py-7 mx-6"><img
src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Vector.png?raw=true"><br>Lorem ipsum
dolor sit amet consectetur, adipisicing elit. Quaerat velit officia numquam laborum, iste voluptatibus.
Molestias dolorem, nesciunt itaque tempore, accusamus ducimus voluptatibus excepturi dolores temporibus optio
pariatur repellat, reiciendis ipsam vitae delectus aliquid.<div class="flex"><img class="p-4"
src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Ellipse%201-1.png?raw=true">
<div>
<h1 class="mt-4 font-bold">Liliana Gomes</h1>Graphic Designer
</div>
</div>
</div>
<div class="border px-14 py-7 mx-6"><img
src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Vector.png?raw=true"><br>Lorem ipsum
dolor sit amet consectetur, adipisicing elit. Quaerat velit officia numquam laborum, iste voluptatibus.
Molestias dolorem, nesciunt itaque tempore, accusamus ducimus voluptatibus excepturi dolores temporibus optio
pariatur repellat, reiciendis ipsam vitae delectus aliquid.<div class="flex"><img class="p-4"
src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Ellipse%201.png?raw=true">
<div>
<h1 class="mt-4 font-bold">Frank Larson</h1>UI Designer
</div>
</div>
</div>
</div>
</div>
<div class="p-5 m-5">
<h1 class="font-bold text-3xl text-center mb-12">Trusted by Over 800+ Companies</h1>
<div class="flex flex-wrap justify-center items-center w-screen ">
<div class="mb-14 mr-14">
<img src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Group.png?raw=true" alt="">
</div>
<div class="mb-14 mr-14">
<img src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Group%2010111.png?raw=true" alt="">
</div>
<div class="mb-14 mr-14">
<img src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Group%2010110.png?raw=true" alt="">
</div>
<div class="mb-14 mr-14">
<img src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/fedex-express-6%201.png?raw=true"
alt="">
</div>
<div class="mb-14 mr-14">
<img src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/logo-elecom-1%201.png?raw=true"
alt="">
</div>
<div class="mb-14 mr-14">
<img src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/udemy-2%201.png?raw=true" alt="">
</div>
</div>
</div>
<footer class="bg-black text-white text-center p-20 ">
<h1 class="font-bold text-2xl">
Pro Edu
</h1>
<p class="my-2 ">
Ofiice 31,Zawaya Building, Ghala Muscat, Sultanate Of Oman
!</p>
<p class="my-2"><a href="">Privacy Policy</a> | <a href="">Terms of Use</a></p>
<div class="flex justify-center items-center ">
<div class="m-2"><a href=""><img
src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Group%2010060.png?raw=true"
alt=""></a></div>
<div class="m-2"><a href=""><img
src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Group%2010059.png?raw=true"
alt=""></a></div>
<div class="m-2"><a href=""><img
src="https://github.com/ferdouszihad/WST-Assignment-2/blob/main/images/Group%2010058.png?raw=true"
alt=""></a></div>
<div><img src="" alt=""></div>
</div>
</footer>
</body>
</html>