នេះគឺ simple កូដសម្រាប់ធ្វើ card responsive screen ជាមួយ login model ជាពីរ side។ ក្នុងមួយ side មាន buttom ផ្សេង ចំណែកឯមួយចំហៀងគឺរូបភាព ហើយត្រូវបិទនៅពេល screen តូច ដែលមានដូចខាងក្រោមនេះ
left side និង right side model
</head>
<body>
<!-- Global Contain -->
<div class="flex bg-rose-50 items-center justify-center min-h-screen">
<!-- Card Contain -->
<div class="relative flex flex-col m-6 space-y-10 md:flex-row bg-white rounded-xl md:space-y-0">
<!-- left -->
<div class="p-3 md:20">
<!-- Top content -->
<h1 class="text-xl font-semibold mb-5">Login</h1>
<p class="text-gray-500 mb-6">សូមចូល login គណន័យដើម្បី upload វិដេអូ និងរូបភាព</p>
<input type="text" placeholder="បញ្ចូល email"
class="w-full border border-gray-300 rounded-md p-2"
>
</div><!--close left-->
<!-- right side -->
<img src="/kep3.jpeg" alt="" class="w-[430px] hidden md:block">
</div><!--close card contain-->
</div>
</body>
Middle buttom
<!-- Top content -->
<h1 class="text-xl font-semibold mb-5">Login</h1>
<p class="text-gray-500 mb-6">សូមចូល login គណន័យដើម្បី upload វិដេអូ និងរូបភាព</p>
<input type="text" placeholder="បញ្ចូល email"
class="w-full border border-gray-300 rounded-md p-2"
>
<!-- Middle -->
<div class="flex flex-col items-center justify-between mt-6 space-y-6 md:space-y-0 md:flex-row">
<div class="font-thin text-cyan-500 cursor-pointer">ភ្លេចលេខកូដ</div>
<button class="w-full md:w-auto flex items-center justify-center bg-sky-600 p-3 px-9 text-gray-100
rounded-md transition space-x-3 duration-150 shadow-md
hover:-translate-y-0.5 hover:bg-opacity-90">
<span>បន្ទាប់</span>
<svg xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#ffff"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<path d="M5 12h13M12 5l7 7-7 7"/></svg>
</button>
</div><!--Close middle-->
</div><!--close left-->
<!-- right side -->
<img src="/kep3.jpeg" alt="" class="w-[430px] hidden md:block">
</div><!--close card contain-->
</div>
</body>
Login ជាមួយ facebook និង google
</button>
</div><!--Close middle-->
<!-- hr-botton -->
<div class="mt-5 border-b border-b-gray-300"></div>
<!-- botton content -->
<p class="py-4 text-sm text-gray-400 text-center">login ជាមួយ</p>
<!-- Buttom botton content -->
<div class="flex flex-col space-x-0 space-y-5 md:flex-row md:space-x-3 md:space-y-0 ">
<button class="flex items-center justify-center py-2 space-x-3 rounded border border-gray-200
hover:bg-opacity-20 hover:shadow-lg hover:-translate-y-0.5 transition duration-150 md:w-1/2">
<img src="./fb.png" alt="" class="w-9 rounded-full">
<span>Facebook</span>
</button>
<button class="flex items-center justify-center py-2 space-x-3 rounded border border-gray-200
hover:bg-opacity-20 hover:shadow-lg hover:-translate-y-0.5 transition duration-150 md:w-1/2">
<img src="./google.png" alt="" class="w-9 rounded-full">
<span>Google</span>
</button>
</div><!--close buttom botton content-->
</div><!--close left-->
<!-- right side -->
<img src="/kep3.jpeg" alt="" class="w-[430px] hidden md:block">
</div><!--close card contain-->
</div>
close button
</div><!--close left-->
<!-- right side -->
<img src="/kep3.jpeg" alt="" class="w-[430px] hidden md:block">
<!-- Close buttom -->
<div class="group absolute -top-8 right-3 flex items-center justify-center cursor-pointer
w-6 h-6 bg-gray-200 rounded-full md:right-2 md:top-2 md:bg-white hover:translate-y-0.5 transition duration-150">
<svg xmlns="http://www.w3.org/2000/svg"
class="text-black w-5 h-5 group-hover:text-gray-600"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18">
</line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</div><!--close buttom-->
</div><!--close card contain-->
</div>
simple code
0 Comments