Skip to content

Commit d69cb58

Browse files
anshulsarathe35anshulsarathe35
committed
adding files
0 parents  commit d69cb58

19 files changed

+1958
-0
lines changed

‎BS_Task_1.css

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.top-bar {
2+
background-color: #25b6e2;
3+
height: 3rem;
4+
}
5+
6+
.menu {
7+
background-color: #969292f0;
8+
}
9+
10+
.right-content {
11+
background-color: #565353;
12+
}

‎BS_Task_1.html

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
3+
<head>
4+
<title>
5+
Bootstrap Task 1
6+
</title>
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
8+
<link rel="stylesheet" href="BS_Task_1.css">
9+
</head>
10+
11+
<body>
12+
<div class="top-bar text-center">
13+
<h2>Ethnus Layout</h2>
14+
</div>
15+
16+
<nav class="navbar navbar-expand-lg menu d-flex">
17+
<ul class="navbar-nav">
18+
<li class="nav-item mr-5">
19+
<a class="nav-link text-white" href="#">HOME</a>
20+
</li>
21+
<li class="nav-item mr-5">
22+
<a class="nav-link text-white" href="#">MENU</a>
23+
</li>
24+
<li class="nav-item mr-5">
25+
<a class="nav-link text-white" href="#">ABOUT</a>
26+
</li>
27+
<li class="nav-item mr-5">
28+
<a class="nav-link text-white" href="#">CONTACT</a>
29+
</li>
30+
</ul>
31+
<ul class="navbar-nav ml-auto">
32+
<li class="nav-item ml-5">
33+
<a class="nav-link text-white" href="#">SIGNUP</a>
34+
</li>
35+
<li class="nav-item ml-5">
36+
<a class="nav-link text-white" href="#">LOGIN</a>
37+
</li>
38+
</ul>
39+
</nav>
40+
41+
<div class="container-fluid d-flex flex-direction-column vh-100">
42+
<div class="row flex-fill">
43+
<div class="col-10 flex-grow-1 text-center">
44+
<p>Write your content here</p>
45+
</div>
46+
<div class="col-2 right-content flex-grow-1 text-center text-white">
47+
<p>This is</p>
48+
</div>
49+
</div>
50+
</div>
51+
</body>
52+
53+
</html>

‎BS_Task_2.css

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.bg-custom {
2+
background-color: rgb(255, 208, 0);
3+
padding-top: 20px;
4+
}
5+
6+
html,
7+
body {
8+
font-family: 'Poppins', sans-serif;
9+
}
10+
11+
.txt-head {
12+
font-family: 'Poppins', sans-serif;
13+
font-weight: 400;
14+
font-size: smaller;
15+
padding-left: 15px;
16+
margin: 0 0 5px 0;
17+
}
18+
19+
.hdr {
20+
padding-bottom: 20px;
21+
}
22+
23+
.img-cust {
24+
width: 68.7%;
25+
margin-left: auto;
26+
margin-right: auto;
27+
}
28+
29+
.carousel-caption {
30+
display: flex;
31+
flex-direction: column;
32+
justify-content: center;
33+
align-items: center;
34+
height: 100%;
35+
text-align: center;
36+
}

‎BS_Task_2.html

+165
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
<!DOCTYPE html>
2+
3+
<head>
4+
<title>
5+
Bootstrap Task 2
6+
</title>
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
9+
<link rel="stylesheet" href="BS_Task_2.css">
10+
</head>
11+
12+
<body>
13+
<div class="container bg-custom">
14+
<div class="row align-items-center">
15+
<div class="col-lg-4">
16+
<div class="logo">
17+
<a href="#" class="text-decoration-none text-reset">
18+
<h1 style="font-weight: 700;">Builderz</h1>
19+
</a>
20+
</div>
21+
</div>
22+
<div class="col-md-8">
23+
<div class="row hdr">
24+
<div class="col-4">
25+
<div class="d-flex align-items-center justify-content-end">
26+
<div class="d-flex align-items-center">
27+
<i class="fa-solid fa-calendar-days fa-3x"></i>
28+
<!-- <i class="fa fa-calendar fa-3x" aria-hidden="true"></i> -->
29+
</div>
30+
<div class="txt-head align-items-center justify-content-center" style="height: 10vh;">
31+
<h3>Opening Hour</h3>
32+
<p>Mon-Fri 8:00-9:00</p>
33+
</div>
34+
</div>
35+
</div>
36+
<div class="col-4 d-flex justify-content-center align-items-center">
37+
<div class="d-flex align-items-center justify-content-end">
38+
<div class="d-flex align-items-center">
39+
<i class="fa fa-phone fa-3x" aria-hidden="true"></i>
40+
</div>
41+
<div class="txt-head align-items-center justify-content-center" style="height: 10vh;">
42+
<h3>Call Us</h3>
43+
<p>+012 345 6789</p>
44+
</div>
45+
</div>
46+
</div>
47+
<div class="col-4 d-flex justify-content-center align-items-center">
48+
<div class="d-flex align-items-center justify-content-end">
49+
<div class="d-flex align-items-center">
50+
<i class="fa-sharp fa-solid fa-envelopes-bulk fa-3x"></i>
51+
</div>
52+
<div class="txt-head align-items-center justify-content-center" style="height: 10vh;">
53+
<h3>Email Us</h3>
54+
<p>[email protected]</p>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
<div class="container bg-dark text-white px-2 py-1">
62+
<div class="d-flex row my-3 px-2 width-2">
63+
<div class="col-1 d-flex justify-content-center align-items-center "><a
64+
class="text-decoration-none text-reset" href="#">HOME</a></div>
65+
<div class="col-1 d-flex justify-content-center align-items-center "><a
66+
class="text-decoration-none text-reset" href="#">ABOUT</a></div>
67+
<div class="col-1 d-flex justify-content-center align-items-center "><a
68+
class="text-decoration-none text-reset" href="#">SERVICE</a></div>
69+
<div class="col-1 d-flex justify-content-center align-items-center "><a
70+
class="text-decoration-none text-reset" href="#">TEAM</a></div>
71+
<div class="col-1 d-flex justify-content-center align-items-center "><a
72+
class="text-decoration-none text-reset" href="#">PROJECT</a></div>
73+
<div class="col-1 d-flex justify-content-center align-items-center "><a
74+
class="text-decoration-none text-reset" href="#">
75+
PAGES
76+
</a></div>
77+
<div class="col-1 d-flex justify-content-center align-items-center "><a
78+
class="text-decoration-none text-reset" href="#">CONTACT</a></div>
79+
<div class="col-5 d-flex justify-content-end align-items-center "><button type="button"
80+
class=" btn btn-outline-light rounded-0" style="vertical-align: middle;">Get A Quote</button>
81+
</div>
82+
</div>
83+
</div>
84+
<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
85+
<div class="carousel-inner">
86+
<div class="carousel-item active">
87+
<img src="https://images.squarespace-cdn.com/content/v1/588635e63e00be43ba3b75c0/1554210410065-X0C3S9HYWPXHGPVZ9B2A/April_2019.jpeg"
88+
class="d-block w-100" alt="Workers" style="filter: brightness(40%);">
89+
<div class="carousel-caption">
90+
<h5>We Are Professional</h5>
91+
<strong>
92+
<h1>For Your Dream Project</h1>
93+
</strong>
94+
<button type="button" class=" btn btn-outline-light rounded-0"
95+
style="vertical-align: middle;">Get A Quote</button>
96+
</div>
97+
</div>
98+
</div>
99+
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying"
100+
data-bs-slide="prev">
101+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
102+
<span class="visually-hidden">Previous</span>
103+
</button>
104+
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying"
105+
data-bs-slide="next">
106+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
107+
<span class="visually-hidden">Next</span>
108+
</button>
109+
</div>
110+
</div>
111+
<div class="container">
112+
<div class="row">
113+
<div class="col-md-4 bg-dark text-white d-flex align-items-center">
114+
<div class="container">
115+
<div class="row">
116+
<div class="col-md-10 mx-auto">
117+
<div class="d-flex align-items-center">
118+
<i class="fa-solid fa-helmet-safety fa-3x me-4"></i>
119+
<div>
120+
<h2>Expert Worker</h2>
121+
<p>Lorem ipsum dolor sit amet elit. Phasus nec pretim ornare velit non</p>
122+
</div>
123+
</div>
124+
</div>
125+
</div>
126+
</div>
127+
</div>
128+
<div class="col-md-4 bg-custom text-dark d-flex align-items-center">
129+
<div class="container">
130+
<div class="row">
131+
<div class="col-md-10 mx-auto">
132+
<div class="d-flex align-items-center">
133+
<i class="fa-solid fa-building fa-3x me-4"></i>
134+
<div>
135+
<h2>Quality Work</h2>
136+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper mauris et
137+
malesuada ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
138+
Donec semper mauris et malesuada ultrices.</p>
139+
</div>
140+
</div>
141+
</div>
142+
</div>
143+
</div>
144+
</div>
145+
<div class="col-md-4 bg-dark text-white d-flex align-items-center">
146+
<div class="container">
147+
<div class="row">
148+
<div class="col-md-10 mx-auto">
149+
<div class="d-flex align-items-center justify-content-center">
150+
<i class="fa-solid fa-headset fa-3x me-4"></i>
151+
<div>
152+
<h2>24/7 Support</h2>
153+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper mauris et
154+
malesuada ultrices.</p>
155+
</div>
156+
</div>
157+
</div>
158+
</div>
159+
</div>
160+
</div>
161+
</div>
162+
</div>
163+
</body>
164+
165+
</html>

‎BS_Task_3.css

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
html {
2+
font-size: 14px;
3+
}
4+
5+
@media (min-width: 768px) {
6+
html {
7+
font-size: 16px;
8+
}
9+
}
10+
11+
.container {
12+
max-width: 960px;
13+
}
14+
15+
.pricing-header {
16+
max-width: 700px;
17+
}
18+
19+
.card-deck .card {
20+
min-width: 220px;
21+
}
22+
23+
.border-top {
24+
border-top: 1px solid #e5e5e5;
25+
}
26+
27+
.border-bottom {
28+
border-bottom: 1px solid #e5e5e5;
29+
}
30+
31+
.box-shadow {
32+
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
33+
}

0 commit comments

Comments
 (0)