-
Notifications
You must be signed in to change notification settings - Fork 0
/
forms.html
92 lines (79 loc) · 5.56 KB
/
forms.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="style.css">
<title>Netflix</title>
</head>
<body class="bg-black md-large0:bg-bg md-large0:bg-cover md-large0:bg-fixed flex flex-col">
<!-- Navbar -->
<nav class="px-4 sm-small1:px-1 sm-small1:-mt-6 md-large0:px-10">
<div class="mt-2">
<a href="index.html"><img src="./images/homeLogo.png" alt="" class="w-24 sm-small1:w-44 md-large0:w-48" id="logo-img"></a>
</div>
</nav>
<!-- form -->
<div class="md-large0:mx-auto">
<form action="#" id="form" class="p-5 -mt-4 sm:p-8 md-large0:bg-black md-large0:rounded-sm md-large0:bg-opacity-70 md-large0:pb-[115px] md-large0:w-[450px] md-large0:px-16" onsubmit="return validation()">
<div>
<h1 class="font-bold text-white text-4xl tracking-wide md-large0:pt-10">Sign In</h1>
</div>
<div class="relative mt-6 md-large0:mt-8">
<input type="email" id="email" name="email" value="" class="bg-neutral-700 py-3 px-3 rounded-md font-poppins w-full peer placeholder-transparent text-white outline-none focus:invalid:border-b-[3px] focus:invalid:border-[#e38400]" placeholder="Email">
<label for="email" class="font-poppins absolute left-3 b-sm:left-[20px] text-gray-400 text-sm peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-4 b-sm:peer-placeholder-shown:top-4 transition-all peer-focus:-top-0 b-sm:peer-focus:-top-0 peer-focus:text-xs peer-focus:text-gray-400 tracking-wide">Email or phone number</label>
<span class="text-[#e38400] text-sm tracking-wider focus:hidden" id="emailField"></span>
</div>
<div class="relative mt-5">
<input type="password" id="pass" name="pass" value="" class="bg-neutral-700 py-3 px-3 rounded-md font-poppins w-full peer placeholder-transparent text-white outline-none focus:invalid:border-b-[3px] focus:invalid:border-[#e38400]" autocomplete="off" placeholder="Password" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$">
<label for="pass" class="font-poppins absolute left-3 b-sm:left-[20px] text-gray-400 text-sm peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-4 b-sm:peer-placeholder-shown:top-4 transition-all peer-focus:-top-0 b-sm:peer-focus:-top-0 peer-focus:text-xs peer-focus:text-gray-400 tracking-wide">Password</label>
<span class="text-[#e38400] text-sm tracking-wider" id="passField"></span>
</div>
<div class="bg-button mt-9 font-medium text-white cursor-pointer py-3 text-lg tracking-wide px-3 rounded-md text-center w-full">
<button type="submit">Sign In</button>
</div>
<div class="mt-3 flex justify-between font-poppins text-stone-300 text-[12px] ">
<div class="flex gap-2">
<input type="checkbox" name="check" id="checkbox" class="w-5 accent-white rounded-sm cursor-pointer" checked>
<label for="checkbox" class="">Remember me</label>
</div>
<a>Need help?</a>
</div>
<div class="font-poppins text-stone-500 flex gap-1 mt-5 b-sm:mt-14 md-large0:mt-20">
<h2>New to Netflix?</h2>
<a href="index.html" class="font-medium text-white">Sign up now<span class="text-gray-600">.</span></a>
</div>
<div class="mt-2 font-poppins text-stone-300 text-[12px] tracking-wide">
<h1>This page is protected by Google reCAPTCHA to ensure you're not a bot. <span class="text-indigo-500 cursor-pointer" id="learnmore">Learn more.</span></h1>
<h1 class="mt-3" id="addText"></h1>
</div>
</form>
</div>
<div class="h-[2px] block bg-[#323232] mt-8 md-large0:hidden" id="line"></div>
<!-- footer -->
<footer class="mt-3 font-poppins text-stone-300 px-5 sm:px-8 pb-16 md-large0:mt-16 md-large0:bg-black md-large0:bg-opacity-70 md-large0:px-20 after-lg1:px-60">
<h1 class="pt-3 md-large0:pt-8">Questions? Call <span class="tracking-wider">000-800-919-1694</span></h1>
<div class="mt-6 text-[13px] grid grid-cols-2 sm:grid-cols-3 md-large0:grid-cols-4">
<a href="#">FAQ</a>
<a href="#">Help Center</a>
<a href="#" class="pt-4 sm:pt-0">Terms of Use</a>
<a href="#" class="pt-4 md-large0:pt-0">Privacy</a>
<a href="#" class="pt-4">Cookie Preferences</a>
<a href="#" class="pt-4">Corporate Information</a>
</div>
<div class="mt-9 px-3 py-2 border border-gray-700 w-32 flex gap-2 text-sm">
<span class="material-symbols-outlined text-xl">
language
</span>
<select name="lang" id="lang" class="bg-black outline-none" onchange="location = this.value;">
<option value="forms.html" selcted>English</option>
<option value="formsHindi.html">हिंदी</option>
</select>
</div>
</footer>
<script src="formScript.js"></script>
</body>
</html>