Hugging Face's logo

Spaces:
KingNish
/
test-space
Running

App Files Community
29
smolSWE commited on
Commit
8451390
·
verified ·
1 Parent(s): cc0a382

Implement basic Google clone layout and dummy search functionality

Browse files

Added Google logo to index.html, restyled layout using style.css to resemble Google search page, and kept existing script.js for dummy suggestions and results.

Files changed (2) hide show
  1. index.html +1 -1
  2. style.css +40 -11
index.html CHANGED
@@ -5,7 +5,7 @@
5
  <link rel="stylesheet" href="style.css">
6
  </head>
7
  <body>
8
- <div class="search-container">
9
  <input type="text" id="search-input" placeholder="Search Google">
10
  <div id="suggestions"></div>
11
  </div>
 
5
  <link rel="stylesheet" href="style.css">
6
  </head>
7
  <body>
8
+ <div class="logo-container"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo"></div><div class="search-container">
9
  <input type="text" id="search-input" placeholder="Search Google">
10
  <div id="suggestions"></div>
11
  </div>
style.css CHANGED
@@ -1,3 +1,4 @@
 
1
  body {
2
  font-family: Arial, sans-serif;
3
  margin: 0;
@@ -5,39 +6,60 @@ body {
5
  display: flex;
6
  flex-direction: column;
7
  align-items: center;
 
 
 
 
 
 
 
 
 
 
 
 
8
  }
9
 
10
  .search-container {
11
- margin-top: 100px;
12
  position: relative;
13
  }
14
 
15
  #search-input {
16
- width: 500px;
17
- padding: 12px 20px;
18
  font-size: 16px;
19
- border: 1px solid #ccc;
20
  border-radius: 24px;
21
  outline: none;
 
 
22
  }
23
 
 
 
 
 
 
 
24
  #suggestions {
25
  position: absolute;
26
  top: 100%;
27
  left: 0;
28
- width: 500px;
29
  background-color: #fff;
30
- border: 1px solid #ccc;
31
  border-top: none;
32
  border-radius: 0 0 8px 8px;
33
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
34
  display: none;
35
  z-index: 1;
36
  }
37
 
38
  #suggestions div {
39
- padding: 8px 16px;
40
  cursor: pointer;
 
41
  }
42
 
43
  #suggestions div:hover {
@@ -45,6 +67,13 @@ body {
45
  }
46
 
47
  #results-container {
48
- margin-top: 20px;
49
- width: 600px;
50
- }
 
 
 
 
 
 
 
 
1
+
2
  body {
3
  font-family: Arial, sans-serif;
4
  margin: 0;
 
6
  display: flex;
7
  flex-direction: column;
8
  align-items: center;
9
+ min-height: 100vh; /* Use min-height for better centering */
10
+ }
11
+
12
+ .logo-container {
13
+ margin-top: 100px; /* Adjust as needed */
14
+ margin-bottom: 20px; /* Space between logo and search bar */
15
+ text-align: center;
16
+ }
17
+
18
+ .logo-container img {
19
+ width: auto; /* Maintain aspect ratio */
20
+ height: 92px; /* Google logo height */
21
  }
22
 
23
  .search-container {
24
+ /* margin-top: 100px; */ /* Removed, logo container handles top margin */
25
  position: relative;
26
  }
27
 
28
  #search-input {
29
+ width: 580px; /* Increased width slightly */
30
+ padding: 13px 20px; /* Adjusted padding */
31
  font-size: 16px;
32
+ border: 1px solid #dfe1e5; /* Softer border color */
33
  border-radius: 24px;
34
  outline: none;
35
+ box-shadow: 0 1px 6px rgb(32 33 36 / 28%); /* Add a subtle shadow */
36
+ transition: box-shadow 0.3s ease-in-out; /* Smooth transition */
37
  }
38
 
39
+ #search-input:focus {
40
+ border-color: #adadad; /* Slightly darker border on focus */
41
+ box-shadow: 0 1px 6px rgb(32 33 36 / 28%); /* Keep shadow on focus */
42
+ }
43
+
44
+
45
  #suggestions {
46
  position: absolute;
47
  top: 100%;
48
  left: 0;
49
+ width: calc(580px + 40px); /* Match input width + padding */
50
  background-color: #fff;
51
+ border: 1px solid #dfe1e5;
52
  border-top: none;
53
  border-radius: 0 0 8px 8px;
54
+ box-shadow: 0 4px 6px rgb(32 33 36 / 10%); /* Softer shadow */
55
  display: none;
56
  z-index: 1;
57
  }
58
 
59
  #suggestions div {
60
+ padding: 10px 16px; /* Adjusted padding */
61
  cursor: pointer;
62
+ font-size: 14px;
63
  }
64
 
65
  #suggestions div:hover {
 
67
  }
68
 
69
  #results-container {
70
+ margin-top: 40px; /* Increased margin for results */
71
+ width: 600px; /* Adjusted width */
72
+ }
73
+
74
+ #results-container div {
75
+ margin-bottom: 15px; /* Space between results */
76
+ padding: 10px 0;
77
+ border-bottom: 1px solid #eee; /* Separator line */
78
+ font-size: 14px;
79
+ }