-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
398 lines (349 loc) · 25 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
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Legal Solution assignment by Farhan Fardid</title>
<!-- <link rel="stylesheet" href="styles/bootstrap.min.css"> -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&family=Work+Sans:wght@400;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<!-- header -->
<header>
<!-- header navbar -->
<nav class="navbar navbar-expand-lg bg-dark-subtle p-2 p-lg-3">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="images/logo2.png" alt="logo 2"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0 text-center">
<li class="nav-item p-2 ">
<a class="nav-link active fw-bolder text-primary" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item p-2">
<a class="nav-link fw-bold" href="#">Service ></a>
</li>
<li class="nav-item p-2">
<a class="nav-link fw-bold">Cases ></a>
</li>
<li class="nav-item p-2">
<a class="nav-link fw-bold">Blog ></a>
</li>
<li class="nav-item p-2">
<a class="nav-link fw-bold">Contact Us ></a>
</li>
</ul>
<!-- Button with modal activation -->
<div class="text-center"> <button type="button" class="btn btn-outline-success fw-bold btn-primary-clr p-2" data-bs-toggle="modal" data-bs-target="#exampleModal">Free Consultation</button></div>
<!-- Custom Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content bg-primary">
<div class="modal-header">
<h1 class="modal-title fs-4 text-black fw-bold mx-auto" id="exampleModalLabel">Welcome to Legal Solution</h1>
<button type="button" class="btn-close bg-danger" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bg-dark-subtle">
We are sensitive to those needs and offer a variety of Service Packages designed to meet the budget of any company or entrepreneur. These Service Packages provide you with the legal advice and services you need to help your company grow and to protect your business and intellectual property.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save changes</button>
</div>
</div>
</div>
</div>
<!-- modal part ends -->
</div>
</div>
</nav>
<!-- navbar ends -->
<!-- banner starts -->
<section class="bg-info-subtle m-lg-0 banner">
<div> <div class=" mx-auto mx-lg-auto text-center p-3 p-lg-5 sml">
<h1 class="display-3 fw-bolder">We Provide Effective <br>Legal Solutions</h1>
<p class="py-3 py-lg-3">Clients don't know or care if you have a small or large law firm if they can't find you. They will find your competitors.</p>
<form class="d-flex w-100 mx-lg-auto" role="search">
<input class="form-control me-2" type="search" placeholder="Search your services" aria-label="Search">
<button class="btn btn-outline-success btn-primary-clr btn-2 fw-bold p-2" type="submit">Search</button>
</form>
</div></div>
</section>
<!-- banner ends -->
</header>
<!-- header ends -->
<!-- main starts -->
<main>
<!-- legal practice section -->
<section class="bg-body-secondary">
<div class="w-50 text-center mx-auto py-2 py-lg-3"><h3 class="display-5 fw-bold">The Legal Practice Area</h3>
<p class="py-1">Arbitration is a technique of resolving civil and commercial disputes outside of court. The parties present their case to a single arbitrator or a panel who then hands down a decision which the parties have agreed to be bound by.</p></div>
<!-- cards -->
<div class="card-group p-lg-3 p-3">
<div class="card text-center py-2 py-lg-2">
<img src="images/business.png" class="card-img-top img-fluid w-25 mx-auto m-5 mx-lg-auto m-lg-5 p-lg-2 p-2" alt="business">
<div class="card-body py-2 pt-lg-3">
<h5 class="card-title fw-bolder">Business Law</h5>
<p class="card-text ">Commercial law involves legal problems that can occur in the running of businesses and commercial transactions. Its predominant concerns are contract and tort law. Clients that come to commercial law firms include large businesses, governments, banks, insurance companies and more.</p>
<div class="mb-2 mb-lg-2">
<p class="card-text "><small class=""><img src="images/Frame.png" alt=""></small></p>
</div>
</div>
</div>
<div class="card text-center py-2 py-lg-2 bg-info-subtle bg-gradient">
<img src="images/criminal.png" class="card-img-top img-fluid w-25 mx-auto m-5 m-lg-5 mx-lg-auto p-lg-2 p-2" alt="criminal">
<div class="card-body py-2 pt-lg-2">
<h5 class="card-title fw-bolder">Criminal Law</h5>
<p class="card-text">Criminal law involves legal problems that can occur in the running of businesses and commercial transactions. Its predominant concerns are contract and tort law. Clients that come to commercial law firms include large businesses, governments, banks, insurance companies and more.</p>
<div class="mb-2 mb-lg-2">
<p class="card-text "><small class=""><img src="images/Frame.png" alt=""></small></p>
</div>
</div>
</div>
<div class="card text-center py-2 py-lg-2">
<img src="images/child.png" class="card-img-top img-fluid w-25 mx-auto m-5 m-lg-5 mx-lg-auto p-lg-2 p-2" alt="child">
<div class="card-body py-2 pt-lg-3">
<h5 class="card-title fw-bolder">Child Law</h5>
<p class="card-text ">Child law involves legal problems that can occur in the running of businesses and commercial transactions. Its predominant concerns are contract and tort law. Clients that come to commercial law firms include large businesses, governments, banks, insurance companies and more.</p>
<div class="mb-2 mb-lg-2">
<p class="card-text "><small class=""><img src="images/Frame.png" alt=""></small></p>
</div>
</div>
</div>
</div>
<div class="card-group p-lg-3 p-3">
<div class="card text-center py-2 py-lg-2 bg-info-subtle bg-gradient">
<img src="images/education.png" class="card-img-top img-fluid w-25 mx-auto m-5 m-lg-5 mx-lg-auto p-lg-2 p-2" alt="education">
<div class="card-body py-2 pt-lg-3">
<h5 class="card-title fw-bolder">Educational Law</h5>
<p class="card-text ">Educational law involves legal problems that can occur in the running of businesses and commercial transactions. Its predominant concerns are contract and tort law. Clients that come to commercial law firms include large businesses, governments, banks, insurance companies and more.</p>
<div class="mb-2 mb-lg-2">
<p class="card-text "><small class=""><img src="images/Frame.png" alt=""></small></p>
</div>
</div>
</div>
<div class="card text-center py-2 py-lg-2">
<img src="images/divorce.png" class="card-img-top img-fluid w-25 mx-auto m-5 m-lg-5 mx-lg-auto p-lg-1 p-2" alt="divorce">
<div class="card-body py-2 pt-lg-5">
<h5 class="card-title fw-bolder">Divorce Law</h5>
<p class="card-text ">Divorce law involves legal problems that can occur in the running of businesses and commercial transactions. Its predominant concerns are contract and tort law. Clients that come to commercial law firms include large businesses, governments, banks, insurance companies and more.</p>
<div class="mb-2 mb-lg-2">
<p class="card-text "><small class=""><img src="images/Frame.png" alt=""></small></p>
</div>
</div>
</div>
<div class="card text-center py-2 py-lg-2 bg-info-subtle bg-gradient">
<img src="images/tax.png" class="card-img-top img-fluid w-25 mx-auto m-5 m-lg-5 mx-lg-auto p-lg-2 p-2" alt="tax">
<div class="card-body py-2 pt-lg-3">
<h5 class="card-title fw-bolder">Tax Law</h5>
<p class="card-text ">Tax law involves legal problems that can occur in the running of businesses and commercial transactions. Its predominant concerns are contract and tort law. Clients that come to commercial law firms include large businesses, governments, banks, insurance companies and more.</p>
<div class="mb-2 mb-lg-2">
<p class="card-text "><small class=""><img src="images/Frame.png" alt=""></small></p>
</div>
</div>
</div>
</div>
</section>
<!-- legal practice section ends -->
<!-- clients section -->
<section class="bg-body-secondary ">
<div class="w-50 text-center mx-auto py-2"><h3 class="display-5 fw-bold">What Our Client Say</h3>
<p class="py-1">If you are looking for answers to the question why to choose our legal firm, then use this feedbacks from other clients to decide if are interested in getting our help for your legal solution.</p></div>
<!--clients carousel -->
<div id="carouselExampleCaptions" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner ">
<div class="carousel-item active ">
<img src="images/slider-1.jpg" class="d-block w-100 " alt="slider-1">
<div class="carousel-caption d-block w-75">
<div class="container-fluid w-75 pos p-lg-3 pt-2"><img src="images/user-1.png" class="img-fluid w-25 h-25 mx-auto " alt="user">
<h5 class="fw-bold">John Brook</h5>
<p >Designer</p>
<p class="conatiner-fluid mt-lg-4 ">Start by reviewing your client experience journey and asking yourself what meaningful feedback you could get from each step of the journey. </p>
</div>
</div>
</div>
<div class="carousel-item ">
<img src="images/slider-2.jpg" class="d-block w-100 " alt="slider-2">
<div class="carousel-caption d-block w-75">
<div class="container-fluid w-75 pos p-lg-3 pt-2"><img src="images/user-2.png" class="img-fluid w-25 h-25 mx-auto " alt="user">
<h5 class="fw-bold">Marry Anne</h5>
<p>Artist</p>
<p class="conatiner-fluid mt-lg-4 ">Start by reviewing your client experience journey and asking yourself what meaningful feedback you could get from each step of the journey. </p>
</div>
</div>
</div>
<div class="carousel-item ">
<img src="images/slider-3.jpg" class="d-block w-100 " alt="slider-3">
<div class="carousel-caption d-block w-75">
<div class="container-fluid w-75 pos p-lg-3 pt-2"><img src="images/user-3.png" class="img-fluid w-25 h-25 mx-auto " alt="user">
<h5 class="fw-bold">Emilia Clark</h5>
<p>Singer</p>
<p class="conatiner-fluid mt-lg-4 ">Start by reviewing your client experience journey and asking yourself what meaningful feedback you could get from each step of the journey. </p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<!-- clients section ends -->
<!-- FAQ section starts -->
<section class="bg-info-subtle">
<div class="w-50 text-center mx-auto py-3"><h3 class="display-5 fw-bold">Frequently Asked Questions</h3>
<p class="py-1">An FAQ page can help users navigate your site.
Not only does an FAQ with links to related content provide your user with a deeper experience of your website, it also boosts your internal link-building, which is an important search ranking factor.</p></div>
<div class="row row-cols-1 row-cols-md-2 mt-3 mt-lg-2">
<div class="col order-lg-1 order-2">
<div class="accordion m-1 p-1 my-lg-5 mx-lg-5" id="accordionExample">
<div class="accordion-item bg-secondary m-lg-3 p-lg-3 m-2 p-2">
<h2 class="accordion-header " id="headingOne">
<button class="accordion-button bg-secondary fw-bold text-black" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
1. Differences Between Flexbox and Grid?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time.
</div>
</div>
</div>
<div class="accordion-item bg-secondary m-2 p-2 m-lg-3 p-lg-3">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed bg-secondary fw-bold text-black" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
2. What is the purpose of Media Query?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on.
</div>
</div>
</div>
<div class="accordion-item bg-secondary m-2 p-2 m-lg-3 p-lg-3">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed bg-secondary fw-bold text-black" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
3. What is CSS Box model and fow does it work?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
The CSS box model explains how rectangular boxes are displayed on a web page. These boxes can have a variety of features and interact with one another in various ways, but they all contain a content area as well as optional padding, border, and margin areas used for changing the appearance.
</div>
</div>
</div>
<div class="accordion-item bg-secondary m-2 p-2 m-lg-3 p-lg-3">
<h2 class="accordion-header" id="headingfour">
<button class="accordion-button collapsed bg-secondary fw-bold text-black" type="button" data-bs-toggle="collapse" data-bs-target="#collapsefour" aria-expanded="false" aria-controls="collapsefour">
4. What is Semantic Tags?
</button>
</h2>
<div id="collapsefour" class="accordion-collapse collapse" aria-labelledby="headingfour" data-bs-parent="#accordionExample">
<div class="accordion-body">
Semantic HTML tags are tags that define the meaning of the content they contain. For example, tags like "header", "article", and "footer" are semantic HTML tags. They clearly indicate the role of the content they contain. On the other hand, tags like "div" and "span" are typical examples of non-semantic HTML elements.
</div>
</div>
</div>
</div>
</div>
<div class="col order-lg-2 order-1">
<img src="images/faq.png" class="img-fluid " alt="qstn mark">
</div>
</div>
</section>
<!-- FAQ ends -->
<!-- Extra section for bonus Packages section starts -->
<section class="bg-warning-subtle m-0">
<div class="conatiner-fluid d-flex flex-column d-lg-flex flex-lg-row ">
<div class="conatainer-fluid m-2 p-3 d-grid w-100 m-lg-5 p-lg-4">
<div class="row d-flex flex-row">
<div class="container-fluid col-6 w-50 d-flex flex-column ">
<div class="sml_1 my-2 my-lg-3 "><img src="images/banner.png" class="img-fluid mt-4 rounded-2" alt=""></div>
<div class="big my-2 my-lg-3 text-center "><img src="images/slider-2.jpg" class="img-fluid my-lg-5 pt-lg-5 my-5 pt-4 rounded-1" alt=""></div>
</div>
<div class="col-6 w-50 col-6 w-50 d-flex flex-column">
<div class="big my-2 my-lg-3 text-center ">
<img src="images/slider-3.jpg" class="img-fluid my-5 pt-4 my-lg-5 pt-lg-4 rounded-1" alt="">
</div>
<div class=" sml_1 my-2 my-lg-3 "><img src="images/closeup-gavel-judgement-concept.jpg" class="img-fluid mt-0 rounded-2" alt=""></div>
</div>
</div>
</div>
<div class="p-3 conatiner-fluid w-100 m-lg-4 p-lg-5 ">
<h2 class="display-5 fw-bolder py-lg-2 py-2">Legal Packages Offers</h2>
<p class="py-lg-2 py-2">For years, firms have come up with everything from simple to very complex formulas to determine law firm salaries and compensation. These formulae consider metrics like client origination credit, matter origination credit, hours billed, non-billable firm activity, non-billable administrative responsibilities.</p>
<h5 class="fs-4 fw-semibold py-lg-2 py-2">Compensation Model Package</h5>
<p class="py-lg-2 py-2">Health and life outside the firm go out the window as attorneys struggle to reach the required level for monetary reward. Attorneys must focus on winning clients instead of serving them, resulting in lackluster client experience and overloaded staff.</p>
<h5 class="fs-4 fw-semibold py-lg-2 py-2">Standard Corporate Package</h5>
<p>We can provide you with all the business legal advice and documents you need to deal with your dispute in several countries of the world. Above mentioned service packages are only valid for business entities.</p>
</div>
</div>
</section>
<!-- Extra section ends -->
</main>
<!-- main ends -->
<!-- footer starts -->
<footer class="bg-black text-white">
<div class="container-fluid d-grid p-3 p-lg-5 mx-lg-5">
<div class="row ">
<div class="col-6 col-lg-3 p-2 ps-lg-5">
<div><img src="images/logo2.png" class="img-fluid pt-3" alt=""></div>
<div>
<p class="w-50 py-3">In its broadest sense, is the principle that people receive that which they deserve.</p>
</div>
</div>
<div class="col-6 col-lg-3 p-2 "><h5 class="pt-4 fw-bold">Useful Links</h5>
<ul style="list-style-type: none;">
<li class="py-1"><a href=""></a>Home</li>
<li class="py-1"><a href=""></a>About Us</li>
<li class="py-1"><a href=""></a>Cases</li>
<li class="py-1"><a href=""></a>Blogs</li>
<li class="py-1"><a href=""></a>Contact Us</li>
</ul>
</div>
<div class="col-6 col-lg-3 p-2 ">
<h5 class="pt-4 fw-bold">Contact Now</h5>
<p class="py-1">555 4th 5t NW, Washington <br>
DC 20530, United States</p>
<p>+88 01750 000 00</p>
<p>[email protected]</p>
</div>
<div class="col-6 col-lg-3 pe-lg-5 p-2">
<h5 class="pt-4 fw-bold " >Subscribe</h5>
<p class="w-50"> Subscribe for our latest
Articles and offers.</p>
<div class="row">
<form class="container-fluid w-100 d-flex">
<div>
<input type="email" class="form-control w-100 m-lg-0" id="inputemail" placeholder="Email Address">
</div>
<div class="w-50"><button type="submit" class="btn btn-info p-1"><img src="images/email.png" class="img-fluid w-75" alt=""></button></div>
</form>
</div>
</div>
</div>
</div>
</footer>
<!-- footer ends -->
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
</body>
</html>