Hugging Face's logo

Spaces:
KingNish
/
test-space
Running

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

Implement basic Google clone layout and dummy search functionality (#18)

Browse files

- Implement basic Google clone layout and dummy search functionality (845139069ff0f40fcc994bbfd63a6a22b3a984ef)


Co-authored-by: smolSWE Bot <smolSWE@users.noreply.huggingface.co>

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
+ }