128 lines
5.5 KiB
Plaintext
128 lines
5.5 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Carme&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Document</title>
|
|
</head>
|
|
<body
|
|
class="w-screen h-screen grid place-items-center bg-gradient-to-r from-[#020024] via-[#090979] to-[#156e80]"
|
|
>
|
|
<div class="w-[60dvw] h-[70dvh] bg-white rounded-[5dvh] p-[15px] flex">
|
|
<div
|
|
class="w-[40%] h-[100%] rounded-[2dvh] bg-black bg-center bg-no-repeat bg-cover bg-[url(https://images.pexels.com/photos/443383/pexels-photo-443383.jpeg)]"
|
|
></div>
|
|
<div class="w-[60%] h-[100%] grid place-items-center space-y-[-10dvh]">
|
|
<div class="flex flex-col space-y-[-5dvh]">
|
|
<div class="grid place-items-center">
|
|
<img
|
|
class="w-[200px]"
|
|
src="https://png.pngtree.com/png-vector/20220630/ourmid/pngtree-rasterize-logo-template-bold-brand-png-image_5584123.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="space-y-[0.2dvh] text-center">
|
|
<h1 class="text-[5dvh] font-['Oswald']">Hello Again !</h1>
|
|
<h2 class="text-[2dvh] font-['Poppins'] text-black/60">
|
|
What a good day to work together
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="grid place-items-center">
|
|
<form class="space-y-[1dvh] w-full" action="">
|
|
<div class="w-[20dvw]">
|
|
<label
|
|
for="input-group-1"
|
|
class="block mb-2 text-sm font-medium text-gray-900"
|
|
>Username / email :</label
|
|
>
|
|
<div class="relative mb-6">
|
|
<div
|
|
class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none"
|
|
>
|
|
<svg
|
|
class="w-4 h-4 text-gray-500"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 16"
|
|
>
|
|
<path
|
|
d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z"
|
|
/>
|
|
<path
|
|
d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
id="input-group-1"
|
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5"
|
|
placeholder="name@flowbite.com"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="w-[20dvw]">
|
|
<label
|
|
for="input-group-1"
|
|
class="block mb-2 text-sm font-medium text-gray-900"
|
|
>Mot de passe :</label
|
|
>
|
|
<div class="relative mb-6">
|
|
<div
|
|
class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none"
|
|
>
|
|
<svg
|
|
class="w-4 h-4 text-gray-500"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<input
|
|
type="password"
|
|
id="input-group-1"
|
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5"
|
|
placeholder="mot de passe..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="grid place-items-end">
|
|
<button
|
|
class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-300"
|
|
>
|
|
<span
|
|
class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white rounded-md group-hover:bg-opacity-0"
|
|
>
|
|
Se connecter
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|