-
Notifications
You must be signed in to change notification settings - Fork 0
/
formsHindi.html
92 lines (79 loc) · 5.86 KB
/
formsHindi.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="hindi.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 validate()">
<div>
<h1 class="font-medium text-white text-4xl tracking-wide md-large0:pt-10">साइन इन करें</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 w-full peer placeholder-transparent text-white outline-none focus:invalid:border-b-[3px] focus:invalid:border-[#e38400]" placeholder="Email">
<label for="email" class="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">ईमेल या फ़ोन नंबर</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 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="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">पासवर्ड</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">साइन इन करें</button>
</div>
<div class="mt-3 flex justify-between 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="">याद रखें</label>
</div>
<a>आपको मदद चाहिए?</a>
</div>
<div class="font- text-stone-500 flex gap-1 mt-5 b-sm:mt-14 md-large0:mt-20">
<h2>Netflix पर नए हैं?</h2>
<a href="index.html" class="font-medium text-white">अभी साइन अप करें<span class="text-gray-600">.</span></a>
</div>
<div class="mt-2 text-stone-300 text-[12px] tracking-wide">
<h1>यह पक्का करने के लिए कि आप बॉट नहीं हैं, यह पेज Google reCAPTCHA द्वारा सुरक्षित है. <span class="text-indigo-500 cursor-pointer" id="learnmore">और जानें.</span></h1>
<h1 class="mt-3" id="addHindiText"></h1>
</div>
</form>
</div>
<div class="h-[2px] block bg-[#323232] mt-8 md-large0:hidden" id="line"></div>
<!-- footer -->
<footer class="mt-3 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">कोई सवाल है? <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="#">सहायता केंद्र</a>
<a href="#" class="pt-4 sm:pt-0">उपयोग की शर्तें</a>
<a href="#" class="pt-4 md-large0:pt-0">प्रायवेसी</a>
<a href="#" class="pt-4">कुकी प्रेफ़रेंस</a>
<a href="#" class="pt-4">कॉरपोरेट जानकारी</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">English</option>
<option value="formsHindi.html" selected>हिंदी</option>
</select>
</div>
</footer>
<script src="formsHindi.js"></script>
</body>
</html>