add search page and search style

This commit is contained in:
ismailsosic
2022-12-30 04:02:16 +01:00
parent fe233c8562
commit 6eb127b8f9
40 changed files with 395 additions and 3622 deletions

View File

@@ -3,13 +3,13 @@ import '../styles/Layout.module.css'
export default function HomePage() {
return (
<div className="flex flex-col items-center w-[100vw] h-[50vh]">
<div className="flex flex-col justify-center items-center w-[100vw] h-[50vh]">
<div className="p-10 ">
<p className="text-6xl text-white font-serif">KitabCitab</p>
</div>
<div className="group
hover:bg-[#303134]
py-3 border-[1px] w-[90%]
py-2 border-[1px] w-[90%]
border-[#bdc1c6] rounded-3xl flex flex-row justify-around
tablet:w-[70%]
@@ -17,16 +17,16 @@ export default function HomePage() {
laptop:w-[40%]
"
>
<a className='rounded-3xl hover:border-black text-[#9aa0a6]' onClick={() => console.log("Search for results")}><AiOutlineSearch size={25}/></a>
<input className="bg-[#202124] group-hover:bg-[#303134] w-[80%] search px-2 active:border-none text-white font-serif outline-none"/>
<a className='rounded-3xl hover:border-black text-[#9aa0a6]' onClick={() => console.log("Remove text from input")}><AiOutlineClose size={25} /></a>
<a className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => console.log("Search for results")}><AiOutlineSearch size={25}/></a>
<input className="bg-[#202124] group-hover:bg-[#303134] w-[80%] px-2 active:border-none text-white outline-none text-xl"/>
<a className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => console.log("Remove text from input")}><AiOutlineClose size={25} /></a>
</div>
<button
<a href='/search'><button
className='py-1 px-10 mt-10 text-3xl rounded-md bg-[#303134] text-white font-serif border-[1px] border-[#303134] hover:border-[#fff] hover:border-[1px]'
onClick={() => console.log("Searching")}
>
Traži
</button>
</button></a>
</div>