-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
237 lines (226 loc) · 14.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>West Bengal Education</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
rel="shortcut icon"
href="https://img.icons8.com/?size=48&id=SHlZSea7WHzv&format=png"
type="image/x-icon"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<nav>
<div class="content-box flex flex-col md:flex-row justify-between items-center max-w-[1125px] mx-auto py-5">
<div class="logo flex items-center">
<img
src="https://img.icons8.com/?size=48&id=SHlZSea7WHzv&format=png"
width="40px"
alt=""
/>
<h2 class="text-2xl font-bold">Pro Edu</h2>
</div>
<div class="menu space-x-0.5 lg:space-x-4">
<a href="">Home</a>
<a href="">Courses</a>
<a href="">Deals</a>
<a href="">Success</a>
<a href="">About</a>
<a href="">Register</a>
</div>
</div>
</nav>
<main>
<section id="hero">
<div class="content-box flex-col lg:flex-row bg-[#fff] mt-6 p-5 rounded-lg max-w-[1125px] mx-auto gap-10 flex items-center justify-between">
<div class="hero-info text-center lg:text-left flex-1 space-y-3">
<h1 class="text-6xl font-bold">Start learning with us now</h1>
<p class="text-gray-600">
Welcome to Pro Edu, where learning meets limitless possibilities! Our platform is designed to ignite curiosity, foster innovation, and empower learners of all ages. Explore a world of knowledge, dive into interactive courses, and embark on a journey towards academic excellence. Join a vibrant community dedicated to unlocking the full potential of education. Start your adventure with us today!
</p>
<button class="bg-blue-500 text-white py-3 space-x-2 px-6 rounded-lg shadow-inner">
Start Learning<i class="fa-solid fa-arrow-right"></i>
</button>
</div>
<div class="hero-image flex-1">
<img class="max-h-[525px] ml-auto" src="./images/boy.png" alt="boy-image"/>
</div>
</div>
</section>
<h2 class="text-3xl text-center font-bold pt-20">Discover Our Popular<br>Courses</h2>
<h5 class="text-center text-gray-600 pb-10">It is a long established fact that a reader will be distractedby the readable <br> content of a page when looking at its layout.</h5>
<section class="courses">
<div class="flex flex-col lg:flex-row lg:justify-center">
<div class="left"><!-- Left side boxes -->
<div class="w-100 bg-white p-4 m-2 border-solid border-2 border-gray-400 flex">
<img src="images/Rectangle 19.png" class="w-20 h-20 mt-8" >
<div class="flex-col">
<h3 class="text-sm font-bold p-2">Fundamental Of UI/UX Design</h3>
<h4 class="text-sm text-gray-600 p-2">The fundamentals of UI/UX design revolve around creating an intuitive,<br> engaging, and user-centric experience for digital interfaces.<br> Here are some key principles and aspects</h4>
<h5 class="text-blue-500 p-2 text-sm">Price: $40</h5>
</div>
</div>
<div class="w-100 bg-white p-4 m-2 border-solid border-2 border-gray-400 flex">
<img src="images/Rectangle 23.png" class="w-20 h-20 mt-8" >
<div class="flex-col">
<h3 class="text-sm font-bold p-2">Fullstack Web Development</h3>
<h4 class="text-sm text-gray-600 p-2">Fullstack development is the art of crafting dynamic and interactive <br> digital experiences from start to finish. As a Fullstack developer, you <br> delve into both the front-end and back-end realms of web creation.</h4>
<h5 class="text-blue-500 p-2 text-sm">Price: $25</h5>
</div>
</div>
<div class="w-100 bg-white p-4 m-2 border-solid border-2 border-gray-400 flex">
<img src="images/Rectangle 27.png" class="w-20 h-20 mt-8" >
<div class="flex-col">
<h3 class="text-sm font-bold p-2">Photography Basic Rules</h3>
<h4 class="text-sm text-gray-600 p-2">Photography, as an art form and a means of storytelling, thrives on<br>fundamental principles that guide composition, lighting, and subject focus.</h4>
<h5 class="text-blue-500 p-2 text-sm">Price: $15</h5>
</div>
</div>
</div>
<div class="right">
<div class="w-100 bg-white p-4 m-2 border-solid border-2 border-gray-400 flex">
<img src="images/Rectangle 21.png" class="w-20 h-20 mt-8" >
<div class="flex-col">
<h3 class="text-sm font-bold p-2">Javascript Basic to advanced</h3>
<h4 class="text-sm text-gray-600 p-2">JavaScript, the backbone of modern web development, empowers websites<br> with interactivity, responsiveness, and dynamic functionalities. <br>Exploring different data types and using operators for calculations and comparisons.</h4>
<h5 class="text-blue-500 p-2 text-sm">Price: $25</h5>
</div>
</div>
<div class="w-100 bg-white p-4 m-2 border-solid border-2 border-gray-400 flex">
<img src="images/Rectangle 25.png" class="w-20 h-20 mt-8" >
<div class="flex-col">
<h3 class="text-sm font-bold p-2">Digital Marketing</h3>
<h4 class="text-sm text-gray-600 p-2">Digital marketing encompasses a broad spectrum of strategies and tools<br> used to reach and engage with audiences online. It's an ever-evolving<br>field that leverages various digital channels to promote products, services, or brands.</h4>
<h5 class="text-blue-500 p-2 text-sm">Price: $30</h5>
</div>
</div>
<div class="w-100 bg-white p-4 m-2 border-solid border-2 border-gray-400 flex">
<img src="images/Rectangle 29.png" class="w-20 h-20 mt-8" >
<div class="flex-col">
<h3 class="text-sm font-bold p-2">Motion Graphics</h3>
<h4 class="text-sm text-gray-600 p-2">Motion graphics is a dynamic and creative field that blends graphic design,<br> animation, and storytelling to bring visuals to life.</h4>
<h5 class="text-blue-500 p-2 text-sm">Price: $10</h5>
</div>
</div>
</div>
</div>
<div class="flex justify-center pt-5 pb-10"><button class="bg-blue-500 text-white py-3 space-x-2 px-6 rounded-lg shadow-inner">See More Courses</button></div>
</section>
<section class="explore hidden lg:block pt-20">
<div class="content-box flex-col lg:flex-row bg-[#F4FAFD] mt-6 p-5 rounded-lg max-w-[1125px] mx-auto gap-10 flex items-center justify-between">
<div class="hero-image flex-1">
<img class="max-h-[525px] ml-auto" src="./images/Rectangle 8.png" alt="man"/>
</div>
<div class="hero-info text-center lg:text-left flex-1 space-y-3">
<h1 class="text-4xl font-bold">Explore The e-learning<br>Institute</h1>
<p class="text-gray-600">
Where curiosity meets discovery! Embark on a journey through a world of knowledge, where learning knows no bounds. Dive into a diverse array of subjects, courses, and resources carefully curated to ignite your passion for learning.
Uncover new horizons with our engaging content, designed to cater to learners of all levels and interests.<br><br> From fascinating historical discoveries to cutting-edge scientific breakthroughs, from mastering new languages to exploring the depths of arts and creativity, there's something here for every inquisitive mind.
</p>
<button class="bg-blue-500 text-white py-3 space-x-2 px-6 rounded-lg shadow-inner">
Read More<i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
</section>
<section id="join-section">
<div class="content-box my-14 bg-gradient-to-b from-cyan-500 to-blue-900 max-w-[1125px] h-[470px] flex flex-col md:flex-row justify-between items-center mx-auto rounded-lg gap-5 ">
<div class="left ml-5">
<h1 class="text-6xl font-mono font-bold text-white flex-1">Ready to Join?</h1>
<p class="p-5 text-white">
Ready to embark on an educational adventure? Join us and unlock a world of learning opportunities!<br> Our platform is a vibrant community of eager learners, passionate educators, and a diverse array of courses<br> designed to fuel your curiosity and drive your ambitions
</p>
</div>
<button class="bg-white text-blue-800 py-3 space-x-2 px-6 rounded-lg shadow-inner font-bold mr-10">Register Now</button>
</div>
</section>
<section class="student content-box flex-col justify-between items-center max-w-[1125px] mx-auto py-5">
<h2 class="text-4xl font-bold">Meet Our Successfull <br>Students</h2>
<p class="text-sm text-gray-600 pt-10 pb-5">Here, we celebrate milestones, dedication, and the achievements<br> of our learners.
In this section, we spotlight the stories of individuals<br> who have navigated their educational journeys with determination,<br> resilience, and a thirst for knowledge. From overcoming challenges to<br> reaching significant milestones, these success stories serve as inspiration <br>for fellow learners embarking on their paths to success.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 lg:flex lg:flex-wrap lg:gap-4 justify-between">
<div class="w-full lg:w-1/5 bg-white p-2">
<img src="images/Rectangle 31.png">
<h3 class="font-bold text-sm">Awlad Hossain</h3>
<h5 class="text-xs">UI/UX Designer</h5>
</div>
<div class="w-full lg:w-1/5 bg-white p-2">
<img src="images/Rectangle 6.png">
<h3 class="font-bold text-sm">Jannatul Islam</h3>
<h5 class="text-xs">Motion Design</h5>
</div>
<div class="w-full lg:w-1/5 bg-white p-2">
<img src="images/Rectangle 33.png">
<h3 class="font-bold text-sm">Imran Hossain</h3>
<h5 class="text-xs">Graphic Designer</h5>
</div>
<div class="w-full lg:w-1/5 bg-white p-2">
<img src="images/Rectangle 6-1.png">
<h3 class="font-bold text-sm">Nishi Akter</h3>
<h5 class="text-xs">Web Developer</h5>
</div>
</div>
</section>
<div class="flex justify-center pt-5 pb-10"><button class="bg-blue-500 text-white py-3 space-x-2 px-6 rounded-lg shadow-inner">View All</button></div>
<section class="feedback pt-20">
<h2 class="text-3xl text-center font-bold ">Some Students Feedback</h2>
<p class="text-center text-gray-600 py-10">Student reviews are the heart of our community. Here, learners share <br>their experiences, insights, and journeys through our courses.</p>
<div class="flex justify-center">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div class="w-96 bg-white p-10 border-solid border-gray-300 border-2">
<img src="images/Group 4879.png">
<h2>Enrolling in courses on this platform has been a game-changer for me. The variety and depth of content available are exceptional. From programming to art history, there's something for everyone. The instructors are not just knowledgeable but also passionate about their subjects, making learning engaging and enjoyable. The platform's interface is intuitive, and the community aspect adds immense value</h2>
<div class="flex pt-5">
<img src="images/Ellipse 1.png">
<div class="pl-3">
<h3 class="text-sm font-bold">Awlad Hossain</h3>
<h5 class="text-xs">UI Designer</h5>
</div>
</div>
</div>
<div class="w-96 bg-white p-10 border-solid border-gray-300 border-2">
<img src="images/Group 4879.png">
<h2>This platform surpassed my expectations. The courses are structured excellently, providing a perfect balance between theory and practical application. What truly sets this website apart is the emphasis on real-world skills. The assignments and projects challenged me to apply what I learned, preparing me for the professional field.</h2>
<div class="flex pt-5">
<img src="images/Ellipse 1-1.png">
<div class="pl-3">
<h3 class="text-sm font-bold">Shanta Akter</h3>
<h5 class="text-xs">Graphic Designer</h5>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="company pt-20">
<h2 class="text-5xl text-center font-bold pb-20">Trusted by over 800+ companies</h2>
<div class="flex justify-center">
<div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-6 gap-4 pb-28">
<img src="images/Group.png" alt="">
<img src="images/udemy-2 1.png" alt="">
<img src="images/fedex-express-6 1.png" alt="">
<img src="images/Group 10110.png" alt="">
<img src="images/logo-elecom-1 1.png" alt="">
<img src="images/Group 10111.png" alt="">
</div>
</div>
</section>
<footer class="content-box mt-14 bg-black w-100 h-[400px] flex flex-col justify-center items-center mx-auto">
<div class="font-sans">
<h1 class="text-white text-6xl font-bold text-center">Pro Edu</h2>
<p class="text-white text-lg text-center p-10">Office 41, Zawaya Buildin, Ghala Muscat,<br>Sultanate of Oman<br> Privacy Policy | Terms of use</p>
</div>
<img src="images/Icons.png" >
<h3 class="font-bold text-sm text-white pt-4">© 2023 All rights reserved by Shruti Sen</h3>
</footer>
</body>
</html>