step 3 : slicing login page phone dan desktop
This commit is contained in:
sindhu
BIN
images/bgCoverLoginMdUp.jpeg
Normal file
BIN
images/bgCoverLoginMdUp.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
BIN
images/loginBgPhone.png
Normal file
BIN
images/loginBgPhone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
images/logo.png
Normal file
BIN
images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
images/logoServer.png
Normal file
BIN
images/logoServer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
images/xloginbg.png
Normal file
BIN
images/xloginbg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
142
v1/index.html
142
v1/index.html
@@ -1,15 +1,133 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Login XPORT</title>
|
||||
<!-- tailwind cdn -->
|
||||
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
|
||||
<!-- alpine cdn -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="text-3xl">Setting Project Awal</h1>
|
||||
</body>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Login XPORT</title>
|
||||
<!-- tailwind cdn -->
|
||||
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
|
||||
<!-- alpine cdn -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- wrapper -->
|
||||
<div class=" lg:bg-white shadow-lg">
|
||||
<!-- Screen phone & tablet start-->
|
||||
<div class="relative w-full
|
||||
bg-cover bg-center h-screen
|
||||
lg:hidden">
|
||||
<img src="../images/loginBgPhone.png" class="w-full h-full object-cover">
|
||||
<!-- logo & title start -->
|
||||
<img src="../images/logoServer.png" class="absolute top-28 left-1/2 mt-10
|
||||
transform -translate-x-1/2 object-contain
|
||||
mb-3" />
|
||||
<div class="absolute top-32 left-1/2 mt-21
|
||||
transform -translate-x-1/2 object-contain">
|
||||
<h2 class="text-3xl font-bold text-white">Log in to your</h2>
|
||||
<h2 class="text-3xl font-bold text-white text-center">Account</h2>
|
||||
</div>
|
||||
<!-- logo & title end -->
|
||||
<!-- inputan username -->
|
||||
<div class="absolute top-77 w-full object-contain px-10 mt-2">
|
||||
<input class="shadow appearance-none rounded-xl border-[#D9D9D9] w-full h-16 py-2 px-3 text-gray-700 leading-tight
|
||||
outline-[#D9D9D9] bg-white
|
||||
focus:outline-[#2196F3] focus:shadow-outline" id="username" type="text" placeholder="Username">
|
||||
</div>
|
||||
<!-- inputan password -->
|
||||
<div class="absolute top-98 w-full object-contain px-10 mt-2">
|
||||
<input class="shadow appearance-none rounded-xl border-[#D9D9D9] w-full h-16 py-2 px-3 text-gray-700 leading-tight
|
||||
outline-[#D9D9D9] bg-white
|
||||
focus:outline-[#2196F3] focus:shadow-outline" id="password" type="password" placeholder="Password">
|
||||
</div>
|
||||
<!-- remember me & password -->
|
||||
<div class="absolute top-120 flex justify-between w-full object-contain px-10 mt-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<input type="checkbox" class="size-4" /> <label
|
||||
class="lg:text-[1.9vh] xl:text-[2vh] 2xl:text-[1.8vh] text-[#6C7278] font-medium text-center">Remember
|
||||
me</label>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#"
|
||||
class="lg:text-[1.9vh] xl:text-[2vh] 2xl:text-[1.8vh] text-[#2196F3] font-semibold items-end">Forgot
|
||||
Password ?</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- btn login -->
|
||||
<div class="absolute top-140 flex justify-between w-full object-contain px-10 mt-2">
|
||||
<button
|
||||
class="w-full h-16 bg-[#1D61E7] hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-xl focus:outline-none focus:shadow-outline"
|
||||
type="button">
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Screen hone & tablet end -->
|
||||
<!-- Screen lg up start -->
|
||||
<div class="hidden lg:grid grid-cols-2 h-screen">
|
||||
<!-- kiri -->
|
||||
<div class="bg-[#F0F2F5] shadow-lg text-center">
|
||||
<!-- wrapper box -->
|
||||
<div class="mt-14">
|
||||
<!-- paling luar -->
|
||||
<!-- logo start -->
|
||||
<div class="mt-3 ml-14 flex items-center space-x-2">
|
||||
<img src="../images/logoServer.png" class="mr-3">
|
||||
<p class="lg:text-[2.5vh] xl:text-[3vh] text-[#2196F3] font-normal">Port Server</p>
|
||||
</div>
|
||||
<!-- logo end -->
|
||||
<!-- form login start -->
|
||||
<div class="lg:px-24 lg:py-12 xl:px-32 xl:py-16 2xl:px-40 2xl:py-16">
|
||||
<!-- welcome text -->
|
||||
<h2 class="lg:text-[4vh] xl:text-[5vh] 2xl:text-[6vh] font-semibold mb-2">Welcome Back</h2>
|
||||
<!-- Log in into your account -->
|
||||
<p class="lg:text-[2vh] xl:text-[2.5vh] font-normal mb-16">Log in into your account</p>
|
||||
|
||||
<!-- inputan username -->
|
||||
<div class="mb-9">
|
||||
<input class="shadow appearance-none rounded-xl border-[#D9D9D9] w-full h-16 py-2 px-3 text-gray-700 leading-tight
|
||||
outline-[#D9D9D9] bg-white
|
||||
focus:outline-blue-400 focus:shadow-outline" id="username" type="text" placeholder="Username">
|
||||
</div>
|
||||
<!-- inputan password -->
|
||||
<div class="mb-4">
|
||||
<input class="shadow appearance-none rounded-xl border-[#D9D9D9] w-full h-16 py-2 px-3 text-gray-700 leading-tight
|
||||
outline-[#D9D9D9] bg-white
|
||||
focus:outline-blue-400 focus:shadow-outline" id="password" type="password" placeholder="Password">
|
||||
</div>
|
||||
<!-- remember me -->
|
||||
<div class="mb-16 flex justify-between">
|
||||
<div class="flex items-center space-x-2">
|
||||
<input type="checkbox" class="size-4" /> <label
|
||||
class="lg:text-[1.9vh] xl:text-[2vh] 2xl:text-[1.8vh] text-[#6C7278] font-medium text-center">Remember
|
||||
me</label>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#"
|
||||
class="lg:text-[1.9vh] xl:text-[2vh] 2xl:text-[1.8vh] text-[#2196F3] font-semibold items-end">Forgot
|
||||
Password ?</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- button login -->
|
||||
<button
|
||||
class="w-full h-16 bg-[#2196F3] hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-xl focus:outline-none focus:shadow-outline"
|
||||
type="button">
|
||||
Login
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<!-- form login end -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- kanan -->
|
||||
<div class="hidden lg:inline-block bg-orange-400 ">
|
||||
<img class="object-cover h-full" src="../images/xloginbg.png" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Screnn lg up end -->
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user