-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
331 lines (327 loc) · 17.3 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
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
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Welcome to DevBridge</title>
<!-- css file -->
<link rel="stylesheet" href="/styles/main.css" />
</head>
<body>
<nav class="navigation" id="naviagtion-home">
<svg
width="877"
height="104"
viewBox="0 0 877 104"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.120001 1.19999H42.6C53.256 1.19999 62.712 3.31199 70.968 7.536C79.224 11.76 85.608 17.712 90.12 25.392C94.728 32.976 97.032 41.712 97.032 51.6C97.032 61.488 94.728 70.272 90.12 77.952C85.608 85.536 79.224 91.44 70.968 95.664C62.712 99.888 53.256 102 42.6 102H0.120001V1.19999ZM41.736 89.472C49.896 89.472 57.048 87.888 63.192 84.72C69.432 81.552 74.232 77.136 77.592 71.472C80.952 65.712 82.632 59.088 82.632 51.6C82.632 44.112 80.952 37.536 77.592 31.872C74.232 26.112 69.432 21.648 63.192 18.48C57.048 15.312 49.896 13.728 41.736 13.728H14.52V89.472H41.736ZM192.241 89.472V102H119.089V1.19999H190.225V13.728H133.489V44.688H184.033V56.928H133.489V89.472H192.241ZM301.703 1.19999L257.495 102H243.239L198.887 1.19999H214.439L250.727 84L287.303 1.19999H301.703ZM382.382 49.728C388.238 51.36 392.846 54.336 396.206 58.656C399.566 62.88 401.246 68.256 401.246 74.784C401.246 83.52 397.934 90.24 391.31 94.944C384.782 99.648 375.23 102 362.654 102H314.558V1.19999H359.774C371.294 1.19999 380.174 3.50399 386.414 8.112C392.75 12.72 395.918 19.104 395.918 27.264C395.918 32.544 394.67 37.104 392.174 40.944C389.774 44.784 386.51 47.712 382.382 49.728ZM328.958 12.864V45.12H358.478C365.87 45.12 371.534 43.776 375.469 41.088C379.502 38.304 381.518 34.272 381.518 28.992C381.518 23.712 379.502 19.728 375.469 17.04C371.534 14.256 365.87 12.864 358.478 12.864H328.958ZM362.078 90.336C370.238 90.336 376.382 88.992 380.51 86.304C384.638 83.616 386.702 79.392 386.702 73.632C386.702 62.4 378.494 56.784 362.078 56.784H328.958V90.336H362.078ZM490.934 102L469.19 71.04C466.502 71.232 464.39 71.328 462.854 71.328H437.942V102H423.542V1.19999H462.854C475.91 1.19999 486.182 4.31999 493.67 10.56C501.158 16.8 504.902 25.392 504.902 36.336C504.902 44.112 502.982 50.736 499.142 56.208C495.302 61.68 489.83 65.664 482.726 68.16L506.63 102H490.934ZM462.422 59.088C471.542 59.088 478.502 57.12 483.302 53.184C488.102 49.248 490.502 43.632 490.502 36.336C490.502 29.04 488.102 23.472 483.302 19.632C478.502 15.696 471.542 13.728 462.422 13.728H437.942V59.088H462.422ZM528.167 1.19999H542.567V102H528.167V1.19999ZM572.745 1.19999H615.225C625.881 1.19999 635.337 3.31199 643.593 7.536C651.849 11.76 658.233 17.712 662.745 25.392C667.353 32.976 669.657 41.712 669.657 51.6C669.657 61.488 667.353 70.272 662.745 77.952C658.233 85.536 651.849 91.44 643.593 95.664C635.337 99.888 625.881 102 615.225 102H572.745V1.19999ZM614.361 89.472C622.521 89.472 629.673 87.888 635.817 84.72C642.057 81.552 646.857 77.136 650.217 71.472C653.577 65.712 655.257 59.088 655.257 51.6C655.257 44.112 653.577 37.536 650.217 31.872C646.857 26.112 642.057 21.648 635.817 18.48C629.673 15.312 622.521 13.728 614.361 13.728H587.145V89.472H614.361ZM761.554 51.024H775.378V90.336C770.386 94.464 764.578 97.632 757.954 99.84C751.33 102.048 744.418 103.152 737.218 103.152C727.042 103.152 717.874 100.944 709.714 96.528C701.554 92.016 695.122 85.872 690.418 78.096C685.81 70.224 683.506 61.392 683.506 51.6C683.506 41.808 685.81 32.976 690.418 25.104C695.122 17.232 701.554 11.088 709.714 6.67199C717.97 2.256 727.234 0.0479994 737.506 0.0479994C745.57 0.0479994 752.866 1.392 759.394 4.08C766.018 6.67199 771.634 10.512 776.242 15.6L767.314 24.528C759.25 16.752 749.506 12.864 738.082 12.864C730.402 12.864 723.49 14.544 717.346 17.904C711.298 21.168 706.546 25.776 703.09 31.728C699.634 37.584 697.906 44.208 697.906 51.6C697.906 58.896 699.634 65.52 703.09 71.472C706.546 77.328 711.298 81.936 717.346 85.296C723.49 88.656 730.354 90.336 737.938 90.336C746.962 90.336 754.834 88.176 761.554 83.856V51.024ZM876.1 89.472V102H802.948V1.19999H874.084V13.728H817.348V44.688H867.892V56.928H817.348V89.472H876.1Z"
fill="url(#paint0_linear)"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="-15"
y1="-38"
x2="869.736"
y2="-38"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.133964" stop-color="#CC2B5E" />
<stop
offset="0.493356"
stop-color="#DE6262"
stop-opacity="0.88"
/>
<stop offset="0.889208" stop-color="#753A88" />
</linearGradient>
</defs>
</svg>
<div class="container-links">
<div class="home link"><a href="#naviagtion-home">Home</a></div>
<div class="who-are-we link">
<a href="#who-are-we"> Who are we!</a>
</div>
<div class="services link"><a href="#services"> Services</a></div>
<div class="our-projects link">
<a href="#our-projects"> Our Projects</a>
</div>
<div class="pricing-plans link">
<a href="#pricing-plans">Pricing plans</a>
</div>
</div>
<button class="lets-talk header-btn ">Let's talk</button>
<img id="hamburger" src="/images/icon-hamburger.svg" alt="">
<img id="close-op" src="/images/icon-close.svg" alt="">
</nav>
<header>
<!-- <svg
id="wave-hero-bg"
width="1440"
height="900"
viewBox="0 0 1440 1115"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1806 0H-313.5C-313.5 0 -526.152 1335.05 -36.278 1083.43C453.596 831.81 864.35 1097.23 1438.72 817.446C2013.1 537.66 1806 0 1806 0Z"
fill="#FEF9F3"
/>
</svg> -->
<section class="hero">
<div class="hero-text-intro">
<h1>Quality Digital Content to Fit Your Needs.</h1>
<button class="lets-talk">Let's talk</button
><button class="know-more">Know more</button>
</div>
<div class="hero-img">
<img src="/images/hero-intro.svg" alt="">
</div>
</section>
</header>
<section id="who-are-we" class="who-are-we-section">
<h1>Who are we</h1>
<div class="who-are-we-row-1">
<div id="who-are-we-img-1">
<img src="/images/who-are-we.svg" alt="" />
</div>
<div class="who-are-we-content-1">
<h3>Headline</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro
perferendis ab itaque molestias mollitia sunt debitis suscipit
similique aspernatur, consequatur quod quis illo officia id
accusantium at eveniet nulla atque. Enim sequi commodi impedit sit
pariatur animi maiores dicta, id odit, harum aspernatur nemo nisi
dolores. Nemo tempore accusamus iure.
</p>
<a href="#" class="learn-more">Learn more →</a>
</div>
</div>
<div class="who-are-we-row-2">
<div class="who-are-we-content-2">
<h3>Any time, any where</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro
perferendis ab itaque molestias mollitia sunt debitis suscipit
similique aspernatur, consequatur quod quis illo officia id
accusantium at eveniet nulla atque. Enim sequi commodi impedit sit
pariatur animi maiores dicta, id odit, harum aspernatur nemo nisi
dolores. Nemo tempore accusamus iure.
</p>
<a href="#" class="learn-more">Customer support →</a>
</div>
<div id="who-are-we-img-2">
<img src="/images/any-time-any-where.svg" alt="" />
</div>
</div>
</section>
<section id="services" class="services-section">
<h1>Our Services</h1>
<h2>Discover the key features</h2>
<div class="grid">
<!-- <img src="/images/bg-circle.svg" alt="" /> -->
<div class="box-1 box"><h4>Mobile Responsive</h4>
<img src="/images/mobile-responsive.svg" alt=""></div>
<div class="box-2 box"><h4>User Friendly</h4><img src="/images/mobile-responsive.svg" alt=""></div>
<div class="box-3 box"><h4>Well Organised Layers</h4><img src="/images/mobile-responsive.svg" alt=""></div>
<div class="box-4 box"><h4>Easily Customisable</h4><img src="/images/mobile-responsive.svg" alt=""></div>
<div class="box-5 box"><h4>Better Components</h4><img src="/images/mobile-responsive.svg" alt=""></div>
<div class="box-6 box"><h4>Beautiful UI & better UX</h4><img src="/images/mobile-responsive.svg" alt=""></div>
<div class="box-7 box"><h4>WordPress</h4><img src="/images/mobile-responsive.svg" alt=""></div>
<div class="box-8 box"><h4>Mobile Responsive</h4><img src="/images/mobile-responsive.svg" alt=""></div>
</div>
<h2 class="approach">Our approach to reach your business goals</h2>
<div class="flex-row-approach-layout">
<div class="circle-1 circle">
<div class="approach-svg">
<img id="design" src="/images/design.svg" alt="">
</div>
<h3 class="h3-design-approach">Design</h3>
<p>Sketch out the product to align the user needs</p>
<div class="arrow-1 arrow"></div>
<div class="arrow-2 arrow"></div>
</div>
<div class="circle-2 circle">
<div class="approach-svg">
<img src="/images/develop.svg" alt="">
</div>
<h3 class="h3-develop-approach">Develop</h3>
<p>Convert the design into live application</p>
<div class="arrow"></div></div>
<div class="circle-3 circle">
<div class="approach-svg">
<img src="/images/deploy.svg" alt="">
</div>
<h3>Deploy</h3>
<p>Launching the application to the market</p>
</div>
</div>
<div class="approach-svg">
<img src="/images/our-approach.svg" alt="" />
</div>
</section>
<section id="our-projects" class="project-section">
<h1>Our Projects</h1>
<div class="grid-projects">
<div class="box box-1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, vel.
Sequi ad ea, maxime est voluptatem nobis quo assumenda dolores
quisquam ullam aut, quae voluptas unde neque doloribus fugiat. Maxime
asperiores saepe tempora nobis nisi tenetur perferendis ut sit quam ab
est amet animi, natus facilis nesciunt iusto sequi aut.
</div>
<div class="box box-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse
asperiores praesentium non? Officia cupiditate blanditiis, excepturi
illum omnis sit nisi culpa dolorum alias autem est asperiores quas
fugiat facilis iure, exercitationem magnam ipsam corporis sapiente
repudiandae. In laborum, error necessitatibus optio mollitia
voluptates, nobis et quas dolorum animi fugit nostrum?
</div>
<div class="box box-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe minus
et suscipit fugit laboriosam tempore necessitatibus eos, rem
blanditiis libero quidem debitis illo exercitationem vitae! Velit,
suscipit consectetur? Consectetur deserunt, nostrum ipsum iste omnis
quod amet quis itaque id? Ullam fugit ut voluptatem nobis sequi
accusantium impedit vero quaerat maiores?
</div>
<div class="box box-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi
commodi, nihil a repellendus laboriosam sed obcaecati harum, eaque,
doloremque sint recusandae. In cum dicta molestiae omnis ipsa
voluptas, saepe, fugiat ab nesciunt alias quisquam similique
reprehenderit illum, repellendus nisi nostrum maxime optio fuga itaque
atque eum magni nihil quas. Quas!
</div>
<div class="box box-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit
numquam error minus delectus magnam esse repudiandae ea voluptas autem
obcaecati vel quas omnis ipsum qui, aut quod, nobis voluptatibus hic
quidem laudantium nulla dignissimos aliquid. Eveniet dolorum nam eos
illum blanditiis ipsa eius consequuntur, ipsam, quia expedita
quibusdam similique aperiam?
</div>
<div class="box box-6">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim
similique quas exercitationem harum libero consectetur soluta modi
vitae et perspiciatis? Vero facere ratione assumenda labore mollitia
facilis nam sunt ex, explicabo error necessitatibus. Excepturi
reprehenderit ducimus est reiciendis ipsa, earum totam enim beatae,
unde adipisci dolor nostrum blanditiis optio ut!
</div>
<div class="box box-7">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus
aliquam corporis dolorum ea saepe magni magnam, reprehenderit tempora
ex non sint vero ad, iste sit ipsam quibusdam eius velit veritatis
repellendus odit. Neque quisquam dolores natus fuga perspiciatis nisi
iure perferendis, expedita similique quam, veniam ducimus architecto
velit dolore aliquam.
</div>
<div class="box box-8">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet illum
quaerat reprehenderit veniam fugit laborum aspernatur cum sequi,
maxime hic sint officia, excepturi soluta ratione ad totam odio rem
mollitia. Officia perferendis quo earum consequuntur ratione sequi
fugiat, natus rem explicabo deserunt hic adipisci delectus quas,
cupiditate est itaque ipsa?
</div>
</div>
</section>
<section id="pricing-plans" class="pricing-section">
<h1>Choose your plan</h1>
<svg
id="line"
width="200"
height="4"
viewBox="0 0 247 4"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M0 2H247" stroke="#F05454" stroke-width="4" />
</svg>
<div class="pricing-grid">
<div class="card card-1">
<img src="/images/car.svg" alt="" />
<div class="list-card">
<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>
<span>Suitable for ---</span>
</div>
<h2>20$/hour</h2>
</div>
<div class="card card-2">
<img src="/images/bus.svg" alt="" />
<div class="list-card">
<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>
<li>Item-4</li>
<li>Item-5</li>
<span>Suitable for ---</span>
</div>
<h2>50$/hour</h2>
</div>
<div class="card card-3">
<img src="/images/rocket.svg" alt="" />
<div class="list-card">
<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>
<li>Item-4</li>
<li>Item-5</li>
<li>Item-6</li>
<li>Item-7</li>
<span>Suitable for ---</span>
</div>
<h2>90$/hour</h2>
</div>
</div>
</section>
<section id="contact-form" class="contact-form-section">
<div class="form-col-1"><h2>Let's talk about your needs</h2>
<img id="your-needs" src="/images/your-needs.svg" alt=""></div>
<div class="form-col-2">
<form action="#">
<label for="first-name">NAME</label>
<input type="text" name="firstName" id="first-name" placeholder="Your name" required>
<label for="email">EMAIL</label>
<input type="email" name="firstName" id="email" placeholder="Your email" required>
<label for="message-form">MESSAGE</label>
<textarea name="message" id="message-form" cols="30" rows="10" placeholder="Say hello..."></textarea>
<button id="form-btn" type="submit">Send message</button>
</form>
</div>
<footer id="footer" class="footer-section">
<!-- <div id="footer-bg">
<img src="/images/footer-bg.svg" alt="">
</div> -->
<div class="flex-footer">
<div class="col-1-footer">
<img src="/images/logo-devbridge.svg" alt="">
<div>Copyright © 2020 DevBridge. All rights reserved</div>
</div>
<div class="col-2-footer">
<h4>Company</h4>
<li>Home</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</div>
<div class="col-3-footer">
<h4>Stay up to date <br>by signing our newsletter</h4>
<form action="">
<button type="submit"><img src="/images/send.svg" alt=""></button>
<input type="email" name="" id="send-newletter" placeholder="Your email address" required>
</form>
</div>
</div>
</footer>
</section>
<script src="app.js"></script>
</body>
</html>