-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
234 lines (223 loc) · 11.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- title -->
<title>eduwell</title>
<!-- font-awsome -->
<link rel="stylesheet" href="css/all.min.css">
<!-- style -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<!-- start navbar -->
<nav class="navbar">
<div class="container">
<div class="logo">
<a><img src="img/logo.png" alt="logo"/></a>
<button class="toggle">
<i class="fas fa-bars"></i>
</button>
</div>
<div>
<ul class="navbar-nav">
<li class="nav-item"><a href="index.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#services" class="nav-link">services</a></li>
<li class="nav-item"><a href="#courses" class="nav-link">courses</a></li>
<li class="nav-item"><a href="#testi" class="nav-link">Testimonials</a></li>
<li class="nav-item"><a href="#contact" class="nav-link">contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- end navbar -->
<!-- start header-->
<header class="header">
<div class="container">
<div class="grid">
<div class="intro">
<span>Welcome To Our School</span>
<h1 class="mb-2">Best Place To Learn Graphic
<span class="main-color">Design!</span>
</h1>
<button class="btn btn-main">join us now</button>
</div>
<div class="intro-banner">
<img src="img/banner-right-image.png" alt="">
</div>
</div>
</div>
</header>
<!-- start header-->
<!-- start services -->
<section class="services spad" id="services">
<div class="container">
<div class="special-section text-center pad">
<span class="text-muted">our services</span>
<h2>Provided <span class="main-color"> Services</span></h2>
</div>
<div class="grid-4">
<div class="col card text-center">
<img class="mb-1" src="img/service-icon-01.png"/>
<h3 class="mb-1">useful tricks</h3>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, et?</p>
</div>
<div class="col card text-center">
<img class="mb-1" src="img/service-icon-02.png"/>
<h3 class="mb-1">creative idea</h3>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, et?</p>
</div>
<div class="col card text-center">
<img class="mb-1" src="img/service-icon-03.png"/>
<h3 class="mb-1">ready target</h3>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, et?</p>
</div>
<div class="col card text-center">
<img class="mb-1" src="img/service-icon-04.png"/>
<h3 class="mb-1">technology</h3>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, et?</p>
</div>
</div>
</div>
</section>
<!-- end services -->
<!-- start courses -->
<section class="courses spad" id="courses">
<div class="container">
<div class="special-section text-center pad">
<span class="text-muted">OUR COURSES</span>
<h2 class="mb-1">What You Can Learn</h2>
<p class="lead">You just think about TemplateMo whenever you need free CSS templates for your business website</p>
</div>
<div class="flex">
<div class="col-3">
<h3 class="h3 text-center">Web developer</h3>
<h3 class="h3 text-center">web Design</h3>
<h3 class="h3 text-center">Graphic Design</h3>
<h3 class="h3 text-center">wordpress</h3>
</div>
<div class="col-9">
<div class="flex card box">
<img src="img/courses-03.jpg"/>
<div>
<h3 class="mb-1">Web Design</h3>
<p class="lead mb-1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime molestias ex animi aut repellat accusamus?</p>
<p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime molestias ex animi aut repellat accusamus?</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- end courses -->
<!-- start cta -->
<div class="cta">
<div class="container">
<div class="grid">
<img src="img/cta-left-image.png"/>
<div class="">
<h6 class="">Get the sale right now!</h6>
<h4 class="mb-2">Up to 50% OFF For 1+ courses</h4>
<p class="mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum obcaecati consectetur recusandae nostrum distinctio qui!</p>
<button class="btn btn-light">view courses</button>
</div>
</div>
</div>
</div>
<!-- end cta -->
<!-- start testi -->
<section class="testi spad" id="testi">
<div class="container">
<div class="special-section text-center pad">
<span class="text-muted">TESTIMONIALS</span>
<h2>What They <span class="main-color">Think</span></h2>
</div>
<div class="grid-3">
<div class="col card">
<p class="lead mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur deleniti quaerat</p>
<div class="flex">
<div>
<h3>David martin</h3>
<span class="main-color">fronend developer</span>
</div>
<img src="img/quote.png"/>
</div>
</div>
<div class="col card">
<p class="lead mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur deleniti quaerat</p>
<div class="flex">
<div>
<h3>David martin</h3>
<span class="main-color">fronend developer</span>
</div>
<img src="img/quote.png"/>
</div>
</div>
<div class="col card">
<p class="lead mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur deleniti quaerat</p>
<div class="flex">
<div>
<h3>David martin</h3>
<span class="main-color">fronend developer</span>
</div>
<img src="img/quote.png"/>
</div>
</div>
</div>
</div>
</section>
<!-- end testi -->
<!-- start contact-->
<div class="contact spad" id="contact">
<div class="container">
<div class="special-section text-center pad">
<span class="text-muted">CONTACT</span>
<h2>Say <span class="main-color">Hello</span></h2>
</div>
<div class="grid">
<div class="col">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7151.84524236698!2d-122.19494600413192!3d47.56605883252286!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5490695e625f8965%3A0xf99b055e76477def!2sNewcastle%20Beach%20Park%20Playground%2C%20Bellevue%2C%20WA%2098006%2C%20USA!5e0!3m2!1sen!2sth!4v1644335269264!5m2!1sen!2sth" width="100%" height="420px" frameborder="0" style="border:0; border-radius: 15px; position: relative; z-index: 2;" allowfullscreen=""></iframe>
</div>
<div class="col">
<div class="form box">
<span class="text-muted">CONTACT</span>
<h2 class="main-color mb-2">contact us</h2>
<p class="lead mb-2">IF you need a working contact form by PHP script, please visit TemplateMo's contact page for more info.</p>
<div class="form-group">
<input class="form-control" type="text" placeholder="Your Name">
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Your Name">
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Your Name">
</div>
<div class="form-group">
<textarea name="" id="" placeholder="Massage"></textarea>
</div>
<div class="flex-end">
<button class="btn btn-main">
SEND MASSAGE
</button>
</div>
</div>
</div>
</div>
<div class="social">
<a href=""><i class="fab fa-facebook icon"></i></a>
<a href=""><i class="fab fa-twitter icon"></i></a>
<a href=""><i class="fab fa-instagram icon"></i></a>
<a href=""><i class="fab fa-youtube icon"></i></a>
</div>
<p class="text-center copy">Copyright © 2022 EduWell Co., Ltd. All Rights Reserved.</p>
</div>
</div>
<!-- end contact-->
</main>
<!-- script -->
<script src="js/script.js"></script>
</body>
</html>