Skip to content

Commit a3c89f0

Browse files
Parv-gugnaniParv-gugnani
committed
search bar css
1 parent 3c7dc55 commit a3c89f0

File tree

2 files changed

+169
-2
lines changed

2 files changed

+169
-2
lines changed

‎Search bar/index.html‎

Lines changed: 119 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,124 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Search Bar</title>
7-
<link rel="stylesheet" href="" />
7+
<link rel="stylesheet" href="style.css" />
88
</head>
9-
<body></body>
9+
<body>
10+
<div class="container">
11+
<input
12+
class="searchbar"
13+
onkeyup="search_animal()"
14+
type="text"
15+
name="search"
16+
placeholder="search..."
17+
>
18+
<ul id="list">
19+
<li class="option">Girl</li>
20+
<li class="option">cat</li>
21+
<li class="option">Dog</li>
22+
<li class="option">Mouse</li>
23+
<li class="option">Apple</li>
24+
<li class="option">Banana</li>
25+
<li class="option">Elephant</li>
26+
<li class="option">Sunshine</li>
27+
<li class="option">Laptop</li>
28+
<li class="option">Ocean</li>
29+
<li class="option">Mountain</li>
30+
<li class="option">Guitar</li>
31+
<li class="option">Butterfly</li>
32+
<li class="option">Universe</li>
33+
<li class="option">Coffee</li>
34+
<li class="option">Rainbow</li>
35+
<li class="option">Adventure</li>
36+
<li class="option">Moonlight</li>
37+
<li class="option">Symphony</li>
38+
<li class="option">Waterfall</li>
39+
<li class="option">Pineapple</li>
40+
<li class="option">Starfish</li>
41+
<li class="option">Firefly</li>
42+
<li class="option">Harmony</li>
43+
<li class="option">Compass</li>
44+
<li class="option">Dragonfly</li>
45+
<li class="option">Telescope</li>
46+
<li class="option">Wanderlust</li>
47+
<li class="option">Serendipity</li>
48+
<li class="option">Pomegranate</li>
49+
<li class="option">Radiance</li>
50+
<li class="option">Galaxy</li>
51+
<li class="option">Bumblebee</li>
52+
<li class="option">Enchantment</li>
53+
<li class="option">Whirlwind</li>
54+
<li class="option">Echo</li>
55+
<li class="option">Infinity</li>
56+
<li class="option">Serenity</li>
57+
<li class="option">Wonderland</li>
58+
<li class="option">Cascade</li>
59+
<li class="option">Velvet</li>
60+
<li class="option">Nebula</li>
61+
<li class="option">Horizon</li>
62+
<li class="option">Zephyr</li>
63+
<li class="option">Ethereal</li>
64+
<li class="option">Dandelion</li>
65+
<li class="option">Tangerine</li>
66+
<li class="option">Symphony</li>
67+
<li class="option">Horizon</li>
68+
<li class="option">Zenith</li>
69+
<li class="option">Infusion</li>
70+
<li class="option">Celestial</li>
71+
<li class="option">Tiramisu</li>
72+
<li class="option">Lighthouse</li>
73+
<li class="option">Essence</li>
74+
<li class="option">Elixir</li>
75+
<li class="option">Periwinkle</li>
76+
<li class="option">Radiance</li>
77+
<li class="option">Marvel</li>
78+
<li class="option">Mystique</li>
79+
<li class="option">Utopia</li>
80+
<li class="option">Enigma</li>
81+
<li class="option">Jubilee</li>
82+
<li class="option">Essence</li>
83+
<li class="option">Lullaby</li>
84+
<li class="option">Oasis</li>
85+
<li class="option">Whisper</li>
86+
<li class="option">Bliss</li>
87+
<li class="option">Charm</li>
88+
<li class="option">Cascade</li>
89+
<li class="option">Utopia</li>
90+
<li class="option">Labyrinth</li>
91+
<li class="option">Twilight</li>
92+
<li class="option">Harmony</li>
93+
<li class="option">Whisper</li>
94+
<li class="option">Ponder</li>
95+
<li class="option">Solitude</li>
96+
<li class="option">Amethyst</li>
97+
<li class="option">Zenith</li>
98+
<li class="option">Lagoon</li>
99+
<li class="option">Harmony</li>
100+
<li class="option">Obsidian</li>
101+
<li class="option">Enigma</li>
102+
<li class="option">Purity</li>
103+
<li class="option">Velvet</li>
104+
<li class="option">Nebula</li>
105+
<li class="option">Lullaby</li>
106+
<li class="option">Infusion</li>
107+
<li class="option">Marvel</li>
108+
<li class="option">Cascade</li>
109+
<li class="option">Whisper</li>
110+
<li class="option">Utopia</li>
111+
<li class="option">Essence</li>
112+
<li class="option">Radiance</li>
113+
<li class="option">Periwinkle</li>
114+
<li class="option">Horizon</li>
115+
<li class="option">Lighthouse</li>
116+
<li class="option">Serenity</li>
117+
<li class="option">Nebula</li>
118+
<li class="option">Labyrinth</li>
119+
<li class="option">Infusion</li>
120+
<li class="option">Cascade</li>
121+
<li class="option">Symphony</li>
122+
</ul>
123+
</input>
124+
</div>
125+
<script src="script.js"></script>
126+
</body>
10127
</html>

‎Search bar/style.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
8+
.container {
9+
display: flex;
10+
flex-direction: column;
11+
align-items: center;
12+
margin: 20px;
13+
}
14+
15+
#searchbar {
16+
margin: 10px;
17+
padding: 10px;
18+
border-radius: 5px;
19+
width: 50%;
20+
box-sizing: border-box;
21+
}
22+
23+
#list {
24+
list-style: none;
25+
padding: 0;
26+
margin: 0;
27+
}
28+
29+
.animals {
30+
font-size: 1.2em;
31+
padding: 10px;
32+
border-bottom: 1px solid #ccc;
33+
animation: fadeIn 0.5s ease-in-out;
34+
}
35+
36+
.animals:last-child {
37+
border-bottom: none;
38+
}
39+
40+
@keyframes fadeIn {
41+
from {
42+
opacity: 0;
43+
transform: translateY(-10px);
44+
}
45+
46+
to {
47+
opacity: 1;
48+
transform: translateY(0);
49+
}
50+
}

0 commit comments

Comments
 (0)