Skip to content

Commit a8de220

Browse files
nksmanyanksmanya
committed
Added Google Search Clone
1 parent ea870dc commit a8de220

File tree

8 files changed

+230
-0
lines changed

8 files changed

+230
-0
lines changed

‎Front-end-Projects/Basic/Google-Search-Clone/advsrch.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link rel="stylesheet" href="style.css">
5+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
6+
<title>Google</title>
7+
<link rel="icon" type="image/x-icon" href="favi.png">
8+
9+
10+
</head>
11+
<body>
12+
<div>
13+
<ul class="img-adv-search">
14+
<a href="index.html">
15+
<li class="img-adv">
16+
Google
17+
</li>
18+
</a>
19+
</ul>
20+
</div>
21+
22+
<p class="h1">
23+
Advanced Search
24+
</p>
25+
<div class="line"> </div>
26+
<div class="div-adv">
27+
<p class="h2">Find pages with...</p>
28+
<form action="https://google.com/search">
29+
<div class="row-input">
30+
<div class="left"><p>all these words:</p></div>
31+
<div class="right ">
32+
<input type="text" name="as_q" class="form-control">
33+
</div>
34+
</div>
35+
<div class="row-input">
36+
<div class="left"><p>this exact word or phrase:</p></div>
37+
<div class="right ">
38+
<input type="text" name="as_epq" class="form-control">
39+
</div>
40+
</div>
41+
<div class="row-input">
42+
<div class="left"><p>any of these words:</p></div>
43+
<div class="right ">
44+
<input type="text" name="as_oq" class="form-control">
45+
</div>
46+
</div>
47+
<div class="row-input">
48+
<div class="left"><p>none of these words:</p></div>
49+
<div class="right ">
50+
<input type="text" name="as_eq" class="form-control">
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
<div class="btn-adv">
57+
<input type="submit" value="Advanced Search" class="btn-advanced"
58+
</div>
59+
</form>
60+
</div>
61+
</body>
62+
</html>

‎Front-end-Projects/Basic/Google-Search-Clone/favi.png‎

117 KB
Loading

‎Front-end-Projects/Basic/Google-Search-Clone/googleimage.png‎

5.8 KB
Loading

‎Front-end-Projects/Basic/Google-Search-Clone/home.jpg‎

17.9 KB
Loading

‎Front-end-Projects/Basic/Google-Search-Clone/imagesrch.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link rel="stylesheet" href="style.css">
5+
<title>Google Images</title>
6+
<link rel="icon" type="image/x-icon" href="favi.png">
7+
8+
</head>
9+
<body>
10+
<div>
11+
<ul class="img-adv-search">
12+
<a href="index.html">
13+
<li class="img-adv">
14+
Google
15+
</li>
16+
</a>
17+
</ul>
18+
</div>
19+
<div class="home-logo">
20+
<img src="googleimage.png" alt="Google logo" height="92">
21+
</div>
22+
<form action="https://google.com/search">
23+
<input type="text" class="round-input" name="q">
24+
<input type="hidden" name="tbm" value="isch">
25+
<div class="center">
26+
<input type="submit" value="Google Image" class="srch-btn">
27+
</div>
28+
</form>
29+
</body>
30+
</html>

‎Front-end-Projects/Basic/Google-Search-Clone/index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link rel="stylesheet" href="style.css">
5+
<title>Google</title>
6+
<link rel="icon" type="image/x-icon" href="favi.png">
7+
8+
9+
</head>
10+
<body>
11+
12+
<div>
13+
<ul class="img-adv-search">
14+
<a href="imagesrch.html">
15+
<li class="img-adv">
16+
Images
17+
</li>
18+
</a>
19+
<a href="advsrch.html">
20+
<li class="img-adv">
21+
Advanced Search
22+
</li>
23+
</a>
24+
</ul>
25+
</div>
26+
<div class="home-logo">
27+
<img src="home.jpg" alt="Google logo" height="122">
28+
</div>
29+
<form action="https://google.com/search">
30+
<input type="text" class="round-input" name="q">
31+
<div class="center" >
32+
<input type="submit" value="Google Search" class="srch-btn">
33+
<input type="submit" name="btnI" value="I'm Feeling Lucky" class="srch-btn" >
34+
</div>
35+
</form>
36+
</body>
37+
</html>

‎Front-end-Projects/Basic/Google-Search-Clone/style.css‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
.img-adv-search{
2+
display: flex;
3+
justify-content: right;
4+
list-style: none;
5+
}
6+
.img-adv{
7+
margin: 8px;
8+
}
9+
.home-logo{
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
}
14+
a:link,a:hover,a:visited,a:active{
15+
color: black;
16+
text-decoration: none;
17+
}
18+
/*Googles own css */
19+
.srch-btn{
20+
margin-top: 30px;
21+
background-color: #f8f9fa;
22+
border: 1px solid #f8f9fa;
23+
border-radius: 4px;
24+
color: #3c4043;
25+
font-family: Roboto,arial , sans-serif;
26+
font-size: 14px;
27+
margin: 11px 4px;
28+
padding: 0 16px;
29+
line-height: 27px;
30+
height: 36px;
31+
min-width: 54px;
32+
text-align: center;
33+
cursor: pointer;
34+
user-select: none;
35+
}
36+
.srch-btn:hover{
37+
border-color: #d4d9dc;
38+
}
39+
.center{
40+
display: flex;
41+
justify-content: center ;
42+
}
43+
.round-input{
44+
display: flex;
45+
z-index: 3;
46+
height: 44px;
47+
background: #fff;
48+
border: 1px solid #dfe1e5;
49+
box-shadow: none;
50+
border-radius: 24px;
51+
margin: 0 auto;
52+
width: calc(632px + 6px);
53+
width: 544px;
54+
max-width: 584px;
55+
margin-top: 18px;
56+
}
57+
58+
.h1{
59+
color: #d93025;
60+
font-size: 20px;
61+
margin: 25px 35px;
62+
}
63+
.line{
64+
border-bottom: 1px solid #ebebeb;
65+
}
66+
.h2{
67+
font-size: 16px;
68+
color: #333333;
69+
}
70+
.div-adv{
71+
margin: 55px;
72+
}
73+
.row-input{
74+
align-items: center;
75+
margin-top: 20px;
76+
display: flex;
77+
flex-direction: row;
78+
font-size: 13px;
79+
vertical-align: middle;
80+
}
81+
.left{
82+
width: 200px;
83+
}
84+
.right{
85+
width: 380px;
86+
}
87+
.btn-adv{
88+
89+
display: flex;
90+
justify-content: flex-end ;
91+
width: 625px;
92+
93+
}
94+
.btn-advanced{
95+
box-shadow: none;
96+
color: white;
97+
background-color:#4d90fe;
98+
border: 1px solid #3079ed;
99+
}

‎Front-end-Projects/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@
4949
| 22 | [Survey Form](./Basic//Survey-Form) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |
5050
| 23 | [Blood Donation Form](./Basic//Blood-Donation-Form) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |
5151
| 24 | [Linktree Clone](./Intermediate/Linktree-Clone)| ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |
52+
| 25 | [Google Search Clone](./Basic/Google-Search-Clone)| ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |
53+
5254

5355
</div>
5456

0 commit comments

Comments
 (0)