-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathBoot_Task2.html
More file actions
175 lines (174 loc) · 11.7 KB
/
Copy pathBoot_Task2.html
File metadata and controls
175 lines (174 loc) · 11.7 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap_Task2</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
.img-svg{
float: left;
padding-left: 10px;
padding-top: 20px;
}
.card-text{
float: right;
}
.bi-person-workspace{
fill: rgb(251, 189, 34);
}
.bi-telephone-inbound-fill{
fill: rgb(251, 189, 34);
}
#myCarousel{
margin-bottom: 10px;
}
</style>
</head>
<body>
<div>
<div class="pr-3 py-2 text-bg-warning border-bottom">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<h1 class="text-dark">BUILDERZ</h1>
<ul class="nav col-12 col-lg-auto my-2 justify-content my-md-0 text-small ms-auto">
<li>
<a href="#" class="nav-link text-dark">
<svg xmlns="http://www.w3.org/2000/svg" width="30" fill="currentColor" class="bi bi-clock" viewBox="0 0 16 16">
<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
</svg>
Opening hour
</a>
</li>
<li>
<a href="#" class="nav-link text-dark">
<svg xmlns="http://www.w3.org/2000/svg" width="30" fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16">
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
</svg>
Call us
</a>
</li>
<li>
<a href="#" class="nav-link text-dark">
<svg xmlns="http://www.w3.org/2000/svg" width="30" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
</svg>
Email us
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<nav class="py-2 bg-dark border-bottom">
<div class="container d-flex flex-wrap">
<ul class="nav me-auto">
<li class="nav-item"><a href="#" class="text-light nav-link link-body-emphasis px-2 active" aria-current="page">Home</a></li>
<li class="nav-item"><a href="#" class="text-light nav-link link-body-emphasis px-2">About</a></li>
<li class="nav-item"><a href="#" class="text-light nav-link link-body-emphasis px-2">Service</a></li>
<li class="nav-item"><a href="#" class="text-light nav-link link-body-emphasis px-2">Team</a></li>
<li class="nav-item"><a href="#" class="text-light nav-link link-body-emphasis px-2">Project</a></li>
<li class="nav-item"><a href="#" class="text-light nav-link link-body-emphasis px-2">Pages</a></li>
<li class="nav-item"><a href="#" class="text-light nav-link link-body-emphasis px-2">Contact</a></li>
</ul>
<ul class="nav ms-auto">
<li class="nav-item"><button type="button" class="btn btn-outline-light">Get a Quote</button></li>
</ul>
</div>
</nav>
</div>
<div class="container">
<div id="myCarousel" class="carousel slide mb-6 "data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-label="Slide 1" aria-current="true"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2" class=""></button> </div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjMDF1jrRs3hUQoi1VSpyRjOnyabu1Xlgz7Q&usqp=CAU" alt="carousel image-1" width="100%" height="100%">
<div class="container">
<div class="carousel-caption text-start">
<h1>We Are Professional</h1>
<p class="opacity-75">For your dream project.</p>
<p><a class="btn btn-lg btn-outline-light text-warning" href="#">Call us</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7J0AMdkoEguSZxIIos2IkUaxnB5O-Ku1STw&usqp=CAU" alt="carousel image-2" width="100%" height="100%">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>For your dream .</p>
<p><a class="btn btn-lg btn-outline-light text-warning" href="#">Get a quote</a></p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" 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="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div>
<div class="card-container mx-2">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col">
<div class="card shadow-sm bg-dark">
<svg xmlns="http://www.w3.org/2000/svg" width="50" fill="currentColor" class="img-svg bi bi-person-workspace me-auto" viewBox="0 0 16 16">
<path d="M4 16s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H4Zm4-5.95a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"/>
<path d="M2 1a2 2 0 0 0-2 2v9.5A1.5 1.5 0 0 0 1.5 14h.653a5.373 5.373 0 0 1 1.066-2H1V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v9h-2.219c.554.654.89 1.373 1.066 2h.653a1.5 1.5 0 0 0 1.5-1.5V3a2 2 0 0 0-2-2H2Z"/>
</svg> <div class="card-body">
<p class="card-text">
<h1 class="text-warning">Expert Worker</h1>
<p class="text-warning">
Aliquam efficitur varius mi et ultrices. Pellentesque a sapien ut purus bibendum sodales non faucibus sem.
</p>
</p>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm bg-warning">
<svg xmlns="http://www.w3.org/2000/svg" width="50" fill="currentColor" class="img-svg bi bi-buildings-fill" viewBox="0 0 16 16">
<path d="M15 .5a.5.5 0 0 0-.724-.447l-8 4A.5.5 0 0 0 6 4.5v3.14L.342 9.526A.5.5 0 0 0 0 10v5.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V14h1v1.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5V.5ZM2 11h1v1H2v-1Zm2 0h1v1H4v-1Zm-1 2v1H2v-1h1Zm1 0h1v1H4v-1Zm9-10v1h-1V3h1ZM8 5h1v1H8V5Zm1 2v1H8V7h1ZM8 9h1v1H8V9Zm2 0h1v1h-1V9Zm-1 2v1H8v-1h1Zm1 0h1v1h-1v-1Zm3-2v1h-1V9h1Zm-1 2h1v1h-1v-1Zm-2-4h1v1h-1V7Zm3 0v1h-1V7h1Zm-2-2v1h-1V5h1Zm1 0h1v1h-1V5Z"/>
</svg>
<div class="card-body">
<p class="card-text">
<h1 class="text-dark">Quality Work</h1>
<p class="text-dark">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</p>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm bg-dark">
<svg xmlns="http://www.w3.org/2000/svg" width="50" fill="currentColor" class="img-svg bi bi-telephone-inbound-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511zM15.854.146a.5.5 0 0 1 0 .708L11.707 5H14.5a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 1 0v2.793L15.146.146a.5.5 0 0 1 .708 0z"/>
</svg> <div class="card-body">
<p class="card-text ">
<h1 class="text-warning">24/7 Support</h1>
<p class="text-warning">
Nunc scelerisque odio sit amet vestibulum ullamcorper. In consequat pulvinar magna vel accumsan.
</p>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>