-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbs_task2.html
148 lines (135 loc) · 6.5 KB
/
bs_task2.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BS task 2</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<style>
.taller-row {
height: 300px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="top-bar bg-warning">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-4 col-md-12">
<div class="logo">
<h1>Builderz</h1>
</div>
</div>
<div class="col-lg-8 col-md-7 d-none d-lg-block">
<div class="row">
<div class="col-4">
<div class="top-bar-item">
<div class="top-bar-icon">
<i class="flaticon-calendar"></i>
</div>
<div class="top-bar-text">
<h3>Opening Hour</h3>
<p>Mon - Fri, 8:00 - 9:00</p>
</div>
</div>
</div>
<div class="col-4">
<div class="top-bar-item">
<div class="top-bar-icon">
<i class="flaticon-call"></i>
</div>
<div class="top-bar-text">
<h3>Call Us</h3>
<p>+012 345 6789</p>
</div>
</div>
</div>
<div class="col-4">
<div class="top-bar-item">
<div class="top-bar-icon">
<i class="flaticon-send-mail"></i>
</div>
<div class="top-bar-text">
<h3>Email Us</h3>
<p>info@example.com</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="nav-bar">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
<div class="navbar-nav mr-auto">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">About</a>
<a href="#" class="nav-item nav-link">Service</a>
<a href="#" class="nav-item nav-link">Team</a>
<a href="#" class="nav-item nav-link">Project</a>
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Pages</a>
<a href="#" class="nav-item nav-link">Contact</a>
</div>
<div class="ml-auto">
<p><a class="btn btn-outline-light text-white" href="#">Get A Quote</a></p>
</div>
</div>
</nav>
</div>
</div>
<!-- Background image -->
<div
class="bg-image"
style="background-image: url('https://www.build-review.com/wp-content/uploads/2019/07/MOST-TRUSTED-BUILDER.png');
height: 900px;
width: 1430px;">
<div class="h-100 d-flex flex-column align-items-center justify-content-center text-center">
<h3 class="text-white">We Are Professional</h3>
<h1 class="text-white"><b>For Your Dream Project</b></h1>
<a href="#" class="btn btn-outline-light">Get A Quote</a>
</div>
<div class="h-25 container-fluid">
<div class="row align-items-center">
<div class="bg-dark col-lg-4 col-md-12 taller-row">
<div class="feature-item">
<div class="feature-text">
<h3 class="text-warning">Expert Worker</h3>
<p class="text-warning">Lorem ipsum dolor sit amet elit. Phasus nec pretim ornare velit non</p>
</div>
</div>
</div>
<div class="bg-warning col-lg-4 col-md-12 taller-row">
<div class="feature-item">
<div class="feature-text">
<h3>Quality Work</h3>
<p>Lorem ipsum dolor sit amet elit. Phasus nec pretim ornare velit non</p>
</div>
</div>
</div>
<div class="bg-dark col-lg-4 col-md-12 taller-row">
<div class="feature-item">
<div class="feature-text">
<h3 class="text-warning">24/7 Support</h3>
<p class="text-warning">Lorem ipsum dolor sit amet elit. Phasus nec pretim ornare velit non</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Background image -->
<!-- <nav class="navbar bg-warning" style="height: 140px;">
<p class="h1 mb-auto ms-5 text-dark"><b>Builderz</p>
<div class="container-fluid">
<div class="d-flex justify-content-center">
<div class="p-2">.hdjfhe</div>
<div class="p-2">.cefehe </div>
<div class="p-2">.csad </div>
</div>
</div> -->
</body>
</html>