Skip to content

Commit b1f024f

Browse files
tomarcodinglifetomarcodinglife
committed
updated
1 parent 04d35ed commit b1f024f

2 files changed

Lines changed: 269 additions & 18 deletions

File tree

‎26_miniproject/project06/index.html‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Faq Page</title>
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
78
<link rel="stylesheet" href="style.css">
89
</head>
910
<body>
@@ -14,11 +15,11 @@ <h1>FAQ HubB</h1>
1415
</div>
1516

1617
<div id="language">
17-
<h1>Langaguge : </h1>
18+
<!-- <h1>Langaguge : </h1> -->
1819
<select name="lang" id="lang">
19-
<option value="eng">English</option>
20-
<option value="eng">Hindi</option>
21-
<option value="eng">Chinese</option>
20+
<option value="english">English</option>
21+
<option value="hindi">Hindi</option>
22+
<option value="chiinese">Chinese</option>
2223
</select>
2324
</div>
2425
</div>
@@ -28,15 +29,24 @@ <h1>Langaguge : </h1>
2829
<h1>Frequently Asked Questions</h1>
2930
<p>Find right answers to your questions here.</p>
3031
</div>
31-
<div id="hero-section-section">
32+
<!-- <div id="hero-section-search">
3233
<input type="text" id="search" placeholder="Search for your question...">
33-
<button id="search-btn"><img src="./files/search.png" alt=""></button>
34-
</div>
34+
<button id="search-btn"><i class="fa fa-search"></i></button>
35+
</div> -->
36+
<div id="hero-section-search">
37+
<div class="search-container">
38+
<input type="text" id="search" placeholder="Search your query...">
39+
<button id="search-btn"><i class="fa fa-search"></i></button>
40+
</div>
41+
</div>
3542
</div>
3643
<div class="group-container">
3744
<div class="group">
3845
</div>
3946
</div>
47+
<div id="card" class="faq-group">
48+
49+
</div>
4050
</body>
4151
<script src="script.js"></script>
4252
</html>

‎26_miniproject/project06/style.css‎

Lines changed: 252 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,27 @@ body {
1515
align-items: center;
1616
padding: .25rem;
1717
background-color: #1e1e22;
18+
border-bottom: linear-gradient(90deg, #FEC45D, #FC6E7B, #995FBB);;
19+
border-width: 1rem;
20+
padding-left: 5rem;
21+
padding-right: 5rem;
1822
}
1923

24+
/* #header-bar::before {
25+
content: "";
26+
position: absolute;
27+
bottom: 0;
28+
left: 0;
29+
width: 100%;
30+
height: 5px;
31+
background: linear-gradient(90deg, #FEC45D, #FC6E7B, #995FBB);
32+
} */
33+
2034
#logo{
2135
display: flex;
2236
flex-direction: column;
23-
align-items: left;
24-
justify-content: left;
37+
align-items: center;
38+
justify-content: center;
2539
/* padding: 1rem; */
2640
}
2741

@@ -33,34 +47,44 @@ body {
3347
-webkit-background-clip: text;
3448
-webkit-text-fill-color: transparent;
3549
background-clip: text;;
36-
padding: 1rem;
50+
3751
}
3852

3953
#logo p{
4054
color: #ffffff;
41-
font-size: 1rem;
55+
font-size: .6rem;
4256
font-weight: bold;
43-
/* padding: 1rem; */
57+
/* padding-top: -.5rem; */
4458
}
4559

4660
#language h1 {
4761
color: #ffffff;
4862
font-size: 1rem;
4963
font-weight: bold;
50-
padding: 1rem;
64+
/* padding: 1rem; */
5165
}
5266

5367
#language {
5468
display: flex;
5569
flex-direction: row;
56-
align-items: right;
70+
align-items: center;
5771
justify-content: right;
5872
}
5973

60-
#land{
61-
height: 1rem;
62-
width: 2.5rem;
63-
background-color: #FEC45D;
74+
#lang{
75+
height: 2rem;
76+
width: 8rem;
77+
background : linear-gradient(90deg, #FEC45D, #FC6E7B, #995FBB);
78+
border-radius: .5rem;
79+
border-color: #000000;
80+
}
81+
82+
83+
#lang:active{
84+
height: 2rem;
85+
width: 8rem;
86+
background : linear-gradient(90deg, #FEC45D, #FC6E7B, #995FBB);
87+
border-radius: .5rem;
6488
}
6589

6690
#header-bar h1:hover {
@@ -69,5 +93,222 @@ body {
6993
transform: scale(1.05);
7094
}
7195

96+
#hero-section {
97+
height: 18rem;
98+
width: 100%;
99+
background : linear-gradient(90deg, #FEC45D, #FC6E7B, #995FBB);
100+
display: flex;
101+
flex-direction: column;
102+
align-items: center;
103+
justify-content: center;
104+
}
105+
106+
#hero-text {
107+
display: flex;
108+
flex-direction: column;
109+
align-items: center;
110+
justify-content: center;
111+
}
112+
113+
#hero-text h1 {
114+
margin-bottom: 1rem;
115+
}
116+
117+
#hero-section-search {
118+
display: flex;
119+
flex-direction: row;
120+
align-items: center;
121+
justify-content: center;
122+
padding: 2rem;
123+
}
124+
125+
126+
127+
/* #search{
128+
height: 1.8rem;
129+
width: 30rem;
130+
border: none;
131+
border-radius: 5rem;
132+
padding: .5rem;
133+
} */
134+
135+
#search {
136+
height: 2.5rem;
137+
width: 100%;
138+
border: none;
139+
border-radius: 2rem;
140+
padding: 0 3rem 0 1rem; /* leave space for icon */
141+
font-size: 1rem;
142+
}
143+
144+
#search :active{
145+
border: none;
146+
}
147+
148+
/* #search-btn img{
149+
height: 1.5rem;
150+
border: none;
151+
margin-left: -2rem;
152+
margin-top: -.8rem;
153+
background-color: transparent;
154+
mix-blend-mode: multiply;
155+
position: absolute;
156+
} */
157+
158+
/* #search-btn {
159+
background: transparent;
160+
border: none;
161+
font-size: 1.2rem;
162+
color: #333;
163+
cursor: pointer;
164+
padding: 0.5rem;
165+
/* position: absolute; */ /*
166+
} */
167+
168+
#search-btn {
169+
position: absolute;
170+
right: 0.5rem;
171+
top: 50%;
172+
transform: translateY(-50%);
173+
background: transparent;
174+
border: none;
175+
color: #333;
176+
font-size: 1.8rem;
177+
cursor: pointer;
178+
}
179+
180+
.search-container {
181+
position: relative;
182+
width: 30rem;
183+
}
184+
185+
#search-btn :active{
186+
border: none;
187+
}
188+
189+
#lang {
190+
height: 2rem;
191+
width: 8rem;
192+
background: linear-gradient(90deg, #FEC45D, #FC6E7B, #995FBB);
193+
border-radius: 0.5rem;
194+
border: none;
195+
color: rgb(0, 0, 0);
196+
padding: 0 0.5rem;
197+
appearance: none;
198+
-webkit-appearance: none;
199+
-moz-appearance: none;
200+
cursor: pointer;
201+
position: relative;
202+
}
203+
204+
#language::after {
205+
content: '';
206+
position: absolute;
207+
right: 1rem;
208+
top: 50%;
209+
transform: translateY(-50%);
210+
pointer-events: none;
211+
color: white;
212+
font-size: 0.7rem;
213+
}
214+
215+
/* -------------------- Responsive Design ---------------------- */
216+
217+
@media (max-width: 1024px) {
218+
#search {
219+
width: 20rem;
220+
}
221+
222+
#header-bar {
223+
padding-left: 2rem;
224+
padding-right: 2rem;
225+
}
226+
227+
#lang {
228+
width: 6rem;
229+
}
230+
}
231+
232+
@media (max-width: 768px) {
233+
#header-bar {
234+
flex-direction: column;
235+
align-items: center;
236+
padding: 1rem;
237+
}
238+
239+
#logo h1 {
240+
font-size: 1.2rem;
241+
}
242+
243+
#logo p {
244+
font-size: 0.5rem;
245+
}
246+
247+
#lang {
248+
width: 6rem;
249+
margin-top: 0.5rem;
250+
}
251+
252+
#hero-section {
253+
padding: 1rem;
254+
}
255+
256+
#search {
257+
width: 16rem;
258+
}
259+
260+
#hero-section-search {
261+
padding: 1rem;
262+
}
263+
264+
.search-container {
265+
width: 16rem;
266+
}
267+
}
268+
269+
@media (max-width: 480px) {
270+
#search {
271+
width: 12rem;
272+
}
273+
274+
#search-btn img {
275+
height: 1rem;
276+
margin-left: -2rem;
277+
}
278+
279+
#lang {
280+
width: 5rem;
281+
font-size: 0.8rem;
282+
}
283+
284+
#hero-text h1 {
285+
font-size: 1.2rem;
286+
text-align: center;
287+
}
288+
289+
#hero-text p {
290+
font-size: 0.8rem;
291+
text-align: center;
292+
}
293+
294+
#logo h1 {
295+
font-size: 1rem;
296+
}
72297

298+
#logo p {
299+
font-size: 0.4rem;
300+
}
73301

302+
.search-container {
303+
width: 12rem;
304+
}
305+
306+
#search {
307+
font-size: 0.9rem;
308+
padding: 0 2.2rem 0 0.8rem;
309+
}
310+
311+
#search-btn {
312+
right: 0.3rem;
313+
}
314+
}

0 commit comments

Comments
 (0)