-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
301 lines (290 loc) · 16.6 KB
/
index.html
File metadata and controls
301 lines (290 loc) · 16.6 KB
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
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Ecomlanka Future Planes">
<meta name="keywords" content="HTML,CSS,SCSS,SASS,Ecomlanka,CLONE">
<meta name="author" content="Sachindu Sahan">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./stylesheets/style.css">
<link rel="stylesheet" href="./assets/module.css">
</head>
<body>
<!--- header section --->
<header>
<!--- navigation -->
<nav>
<div class="brand-icon">
<h3>EcLanka</h3>
</div>
<div class="inner-navigation">
<ul>
<li><a class="active" href="">Home</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
<li><a href="">Login</a></li>
<!--- responsive --- this is bar --->
<li id="bar">
<i class="fa fa-bars">
<div>
<div class="inner-bar">
<a class='a' href="./index.html">home</a>
<a class='b' href="#">Contact</a>
<a class='c' href="#">About</a>
<a class='d' href="#">Login</a>
</div>
</div>
</i>
</li>
</ul>
</div>
</nav>
<!--- end of navigation --->
<!--- hero section--->
<section class='hero'>
<div id='inner-hero'>
<img src="./images/blogs/hero.jpg">
<div>
<h1>Manage your Finance <br> with us</h1>
<h4>Ecomlanka has features to view and manage </h4>
<h4>our finances, such as transfer, and statistics.</h4>
<button>get start</button>
<div class="empty-div"></div>
</div>
</div>
</section>
<!--- end of hero section --->
</header>
<!--- end of header -->
<!---- main ---->
<main>
<h1>Check our Discounts </h1>
<!--- our Features discounts --->
<div class="main-feature">
<div id="main-block">
<div id="feature1">
<h4>Create a Logo Using Tailor Brands... and Save 25%!</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id doloribus quibusdam quo iusto, ratione, cum at expedita tenetur sit tempore omnis quis culpa numquam molestiae, quam officiis, ipsam esse veniam perferendis quaerat exercitationem doloremque! Quibusdam pariatur quis, dolorem odit perspiciatis, voluptate cum beatae nostrum, quasi, tempora minus. Culpa velit rerum animi, repellat aliquam, iure, ratione hic ea error fugiat praesentium.</p>
<p>You can <span>save 25% on any Tailor Brands</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, accusamus.</p>
</div>
</div>
<div id="secondery-block">
<div class="sub-secondary1">
<div id="feature3">
<p><span>Tailor brands Guide</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos autem magni odit, at in, tempore impedit incidunt numquam. Ratione voluptatem incidunt deleniti.</p>
<p><span>Templates review</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos autem magni odit, at in, tempore impedit incidunt numquam. Ratione voluptatem incidunt deleniti.</p>
</div>
<div id="feature2">
<h4>Do You Want to 25% on Your Design Template ?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti corporis veniam libero voluptate, molestiae debitis eum porro id, veritatis unde adipisci iure.</p>
<button>Save 25% use EcLanka</button>
</div>
</div>
<div class="sub-secondary2">
<h4> Everything plus .</h4>
<div>
<p><span id="True"> √ </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolorum culpa incidunt, ab ullam labore amet assumenda unde architecto. Velit.</p>
<p><span id="True"> √ </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolorum culpa incidunt, ab ullam labore amet assumenda.</p>
<p><span id="True"> √ </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolorum culpa incidunt, ab ullam labore amet assumenda unde architecto. Velit.</p>
<p><span>learn more</span></p>
</div>
</div>
</div>
</div>
<!---- End of feature discounts ---->
<!----- paragraphs 1 ----->
<div class="paragraphs1">
<h2>Saleforce</h2>
<h3>Here is are saleforce facts:</h3>
<ul>
<li>2020 platform has <em>100,000</em> active users</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, inventore.</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ut totam officia perspiciatis eius vero et pariatur voluptates obcaecati cumque, quidem sapiente, sunt a est porro quod illo voluptatem laboriosam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, id voluptate numquam, dicta fugit vero nam! Nesciunt corporis accusantium voluptatum?</p>
<p><b>Best for: </b>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, amet, error. Vitae, obcaecati. Enim, fugit.</p>
</div>
<!------->
<!---- Center image ---->
<h1> Join with Us</h1>
<div class="center-image">
<button>Join</button>
<img src="./images/illustration_contact.svg">
</div>
<!---- Center Topics ---->
<div class="center-topics">
<div class="ct1">
<img src="./images/icons/support.svg">
<h1><span>Finance</span> Offer</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ullam iste doloremque distinctio, necessitatibus odit saepe voluptas ad nihil quo, pariatur amet quaerat provident, laudantium inventore eaque tenetur minus. Omnis.</p>
</div>
<div class="ct2">
<img src="./images/icons/testimony.svg">
<h1><span>Design related</span> Offer</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ullam iste doloremque distinctio, necessitatibus odit saepe voluptas ad nihil quo, pariatur amet quaerat provident, laudantium inventore eaque tenetur minus. Omnis.</p>
</div>
<div class="ct3">
<img src="./images/icons/promotion.svg">
<h1><span>This year</span> Offer</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ullam iste doloremque distinctio, necessitatibus odit saepe voluptas ad nihil quo, pariatur amet quaerat provident, laudantium inventore eaque tenetur minus. Omnis.</p>
</div>
<div class="ct4">
<img src="./images/icons/laptop.svg">
<h1><span>Local</span> Offer</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ullam iste doloremque distinctio, necessitatibus odit saepe voluptas ad nihil quo, pariatur amet quaerat provident, laudantium inventore eaque tenetur minus. Omnis.</p>
</div>
</div>
<!---- paragraphs2 ---->
<div class="paragraphs2">
<h2>Why late ?</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde voluptatibus nisi iure animi quisquam cumque alias tenetur facere debitis minus id excepturi accusantium consequuntur ut maxime molestias itaque, numquam asperiores quasi vel voluptatum, ullam ratione.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident beatae excepturi, eaque molestiae. Quidem explicabo quae, laboriosam delectus, molestias ut.</p>
</div>
<div class="paragraphs3">
<h2> 100% secure your details .</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At nam, architecto quo expedita aut officia error explicabo placeat velit sint vel itaque delectus sapiente libero et minima, eligendi enim commodi assumenda facere sed cupiditate odit. Aperiam, harum! Tempora perferendis, aliquid corporis veniam mollitia nam, natus nostrum illo modi neque. Distinctio.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur aspernatur voluptate hic, delectus ducimus ipsa quisquam commodi molestias libero alias ut quas impedit tenetur nulla sed placeat necessitatibus voluptas, optio. Hic inventore tenetur, omnis temporibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem libero ea debitis aut eius dignissimos praesentium soluta beatae in pariatur.</p>
</div>
<hr style="margin: 40px 20px 0 20px">
<!--- our client --->
<div class="client">
<h2>Our Clients</h2>
<div class="inner-clients">
<img src="./images/clients/spa_beauty.png" alt='client image'>
<img src="./images/clients/cleaning_service.png" alt='client image'>
<img src="./images/clients/creative_photo.png" alt='client image'>
<img src="./images/clients/global_tv.png" alt='client image'>
<img src="./images/clients/news_digital_tv.png" alt='client image'>
</div>
</div>
<hr style="margin: 40px 20px 0 20px">
<!--- Usefull links and our tools --->
<div class="usefull-tool-and-links">
<h2>Links & Tools</h2>
<h3><em>Usefull </em><em>Tools and </em><em>Links.</em></h3>
<div class="inner">
<div>
<img src="./images/icons/concept.png">
<h4>Stock 1</h4>
<a>Fixed deposit stock</a>
<a>Monthly</a>
<a>Daily situation</a>
<a>Photograph</a>
</div>
<div>
<img src="./images/icons/concept.png">
<h4>Stock 2</h4>
<a>Fixed deposit stock</a>
<a>Monthly</a>
<a>Daily situation</a>
<a>Photograph</a>
</div>
<div>
<img src="./images/icons/customizable.png">
<h4>Stock 3</h4>
<a>Fixed deposit stock</a>
<a>Monthly</a>
<a>Daily situation</a>
<a>Photograph</a>
</div>
<div>
<img src="./images/icons/concept.png">
<h4>Stock 4</h4>
<a>Fixed deposit stock</a>
<a>Monthly</a>
<a>Daily situation</a>
<a>Photograph</a>
</div>
</div>
</div>
<div class="paragraphs3">
<h2> 100% secure your details .</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At nam, architecto quo expedita aut officia error explicabo placeat velit sint vel itaque delectus sapiente libero et minima, eligendi enim commodi assumenda facere sed cupiditate odit. Aperiam, harum! Tempora perferendis, aliquid corporis veniam mollitia nam, natus nostrum illo modi neque. Distinctio.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur aspernatur voluptate hic, delectus ducimus ipsa quisquam commodi molestias libero alias ut quas impedit tenetur nulla sed placeat necessitatibus voluptas, optio. Hic inventore tenetur, omnis temporibus.</p>
<p style="margin-bottom: 50px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem libero ea debitis aut eius dignissimos praesentium soluta beatae in pariatur.</p>
</div>
<div class="paragraphs3">
<h2> Avoid This Habits .</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At nam, architecto quo expedita aut officia error explicabo placeat velit sint vel itaque delectus sapiente libero et minima, eligendi enim commodi assumenda facere sed cupiditate odit. Aperiam, harum! Tempora perferendis, aliquid corporis veniam mollitia nam, natus nostrum illo modi neque. Distinctio.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur aspernatur voluptate hic, delectus ducimus ipsa quisquam commodi molestias libero alias ut quas impedit tenetur nulla sed placeat necessitatibus voluptas, optio. Hic inventore tenetur, omnis temporibus.</p>
<p style="margin-bottom: 50px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem libero ea debitis aut eius dignissimos praesentium soluta beatae in pariatur.</p>
</div>
<!--- Last image --->
<div class="last-image">
<img src="./images/blogs/blog_6.jpg" alt="large img">
<div class="paragraph">
<h3>Customer Stories</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.<br>Mollitia voluptates facere explicabo! Rerum<br>necessitatibus cum qui veritatis reprehenderit, neque<br>sapiente consequatur atque eaque molestias, est, quod<br>totam quo laudantium ratione.</p>
<b>Sachindu Sahan, Web developer</b><br>
<button>Read More ></button>
</div>
<div class="empty-div"></div>
</div>
<!--- Form --->
<form class="contact-form">
<h3>Need help ?<br>Don't worry just contact us</h3>
<label for="username">username</label><br>
<input type="text" id="username"><br>
<label for="email">Email</label><br>
<input type="email" id="email"><br>
<label for='message'>Message</label><br>
<input type="text" id="message">
<input class='btn' type="submit" value="Send Message">
</form>
<!--- End of form --->
<!--- Footer --->
<footer>
<div class="breake-1">
<div class="pages">
<h5>services pages</h5>
<h4>Features</h4>
<h4>Customers</h4>
<h4>Pricing</h4>
<h4>ECLK</h4>
</div>
<div class="company">
<h5>company</h5>
<h4>About Us</h4>
<h4>Teams</h4>
<h4>Leadership</h4>
<h4>Careers</h4>
<h4>HIRING !</h4>
</div>
</div>
<div class="breake-2">
<div class="contacts">
<h5>contacts</h5>
<h4>Contact us</h4>
<h4>Location</h4>
<h4>sachindusahan@gmail.com</h4>
<h4>eclanka@gmail.com</h4>
<h4>+94 189283 745</h4>
</div>
<div class="subscribe">
<h5>subscribe</h5>
<h6>Lorem ipsum dolor sit.</h6>
<div class='email'>
<input style="font-family: 'Montserrat', sans-serif;" type="email" placeholder="Your Email ..">
<button>Subscribe</button>
</div>
<div class="contact-icons">
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="copyright">
<h6>Copyright © 2020 | <b>Eclanka</b> All rights reserved</h6>
</div>
</footer>
<!--- End of footer --->
</main>
</body>
</html>