Skip to content

Commit 1b6c4cd

Browse files
Merge pull request #114 from RiyaGupta89/google-clone
Added Google Clone Project
2 parents bc29548 + fbdba83 commit 1b6c4cd

File tree

8 files changed

+432
-0
lines changed

8 files changed

+432
-0
lines changed

GOOGLE.COM PAGE PROJECT/.gitkeep

Whitespace-only changes.

GOOGLE.COM PAGE PROJECT/README.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Google Clone
2+
3+
*An amazing project to get started with. This is a google clone which also lets you search information, looks exactly same as Google.*
4+
5+
6+
> Used Technologies:
7+
- HTML
8+
- CSS
9+
- JAVASCRIPT
10+
11+
12+
13+
### Steps to use:
14+
15+
- Download or clone the repositorY
16+
`
17+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
18+
`
19+
20+
- Go to the directory
21+
- Run the index.html file
22+
- Check out the amazing project!
23+
24+
### Screenshot
25+
26+
<!-- image -->
181 KB
Loading
60.6 KB
Loading

GOOGLE.COM PAGE PROJECT/index.html

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Google</title>
8+
<link rel="icon" href="images/favicon.jpg">
9+
<link rel="stylesheet" href="style.css">
10+
<script src="https://kit.fontawesome.com/b0f29e9bfe.js" crossorigin="anonymous"></script>
11+
12+
</head>
13+
<body>
14+
<!-- Header -->
15+
<header>
16+
<nav class="navbar">
17+
<ul>
18+
<li>
19+
<a class="link" href="">Gmail</a>
20+
</li>
21+
<li>
22+
<a class="link" href="">Images</a>
23+
</li>
24+
<li>
25+
<div class="circle-shadow">
26+
<a class="menu-icon" href=""><i class="fas fa-bars"></i></a>
27+
</div>
28+
</li>
29+
<li>
30+
<div class="circle-shadow">
31+
<a class="user-icon" href=""><span>J</span></a>
32+
</div>
33+
</li>
34+
</ul>
35+
</nav>
36+
</header>
37+
38+
<!-- Content -->
39+
<section class="content-section">
40+
<div class="content-wrapper">
41+
<img class="logo-img" src="images/logo.jpg" alt="Google Logo Image">
42+
<div class="search-bar">
43+
<i class="fas fa-search"></i>
44+
<input id="search-input" class="search-input" type="text">
45+
<i class="fas fa-keyboard"></i>
46+
<i class="fas fa-microphone"></i>
47+
</div>
48+
<div class="search-btns">
49+
<button class="google-search-btn">Google Search</button>
50+
<button class="lucky-search-btn">I'm Feeling Lucky</button>
51+
</div>
52+
<div class="language">
53+
<p>Google Offered in: <a href="">Maori</a></p>
54+
</div>
55+
</div>
56+
</section>
57+
58+
<!-- Footer -->
59+
<footer>
60+
<div class="footer-content upper-footer">
61+
<p>New Zealand</p>
62+
</div>
63+
<div class="footer-content lower-footer">
64+
<ul class="lower-left-footer">
65+
<li>
66+
<a href="">About</a>
67+
</li>
68+
<li>
69+
<a href="">Advertising</a>
70+
</li>
71+
<li>
72+
<a href="">Business</a>
73+
</li>
74+
<li>
75+
<a href="">How Search Works</a>
76+
</li>
77+
</ul>
78+
<ul class="lower-right-footer">
79+
<li>
80+
<a href="">Privacy</a>
81+
</li>
82+
<li>
83+
<a href="">Terms</a>
84+
</li>
85+
<li>
86+
<a href="">Settings</a>
87+
</li>
88+
</ul>
89+
</div>
90+
</footer>
91+
<script src="script.js"></script>
92+
</body>
93+
</html>

GOOGLE.COM PAGE PROJECT/script.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const searchInput = document.querySelector("#search-input");
2+
3+
searchInput.addEventListener("keydown", function(event) {
4+
if(event.code === "Enter") {
5+
search();
6+
}
7+
});
8+
9+
function search() {
10+
const input = searchInput.value;
11+
12+
window.location.href = "https://www.google.com/search?q=" + input + "&rlz=1C5CHFA_enNZ948NZ948&oq=" + input + "&aqs=chrome.0.69i59l2j46i175i199i433j46i199i291i433j46j0i433j0j69i60.875j0j9&sourceid=chrome&ie=UTF-8"
13+
}

0 commit comments

Comments
 (0)