-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathFINAL.html
213 lines (196 loc) · 13.5 KB
/
FINAL.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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Rowdies&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Aclonica&family=Chela+One&family=Dosis:wght@500&family=Emblema+One&family=Inconsolata&family=Lemonada:wght@700&family=Limelight&family=Luckiest+Guy&family=Press+Start+2P&family=Sarpanch:wght@800&family=Shojumaru&family=Skranji:wght@700&family=Syncopate:wght@700&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Aclonica&family=Chela+One&family=Emblema+One&family=Lemonada:wght@700&family=Limelight&family=Luckiest+Guy&family=Press+Start+2P&family=Sarpanch:wght@800&family=Shojumaru&family=Skranji:wght@700&family=Syncopate:wght@700&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Aclonica&family=Emblema+One&family=Lemonada:wght@700&family=Limelight&family=Luckiest+Guy&family=Press+Start+2P&family=Shojumaru&family=Skranji:wght@700&family=Syncopate:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Aclonica&family=Limelight&family=Luckiest+Guy&family=Press+Start+2P&family=Shojumaru&family=Skranji:wght@700&family=Syncopate:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Acme&family=Chilanka&family=Recursive&family=Red+Rose:wght@300&family=Rowdies&family=Teko:wght@300;400&display=swap" rel="stylesheet">
<title>Password Generator</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style2.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#" style="font-family:recursive;
text-shadow: 2px 2px black;font-weight: bolder;">RPG</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav" style="margin-top: 2px;margin-bottom: 5px;">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#project">Project</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#btc">BTC</a>
</li>
</ul>
</div>
</nav>
<!-- ........................HOME..................................................... -->
<section id="home" class="home">
<div class="type-container">
<p id="line"></p>
<div class="cursor"></div>
</div>
<p class="para" style="margin-top: 0px;">In today’s world, when every thing ranging from social media to bank transactions are online, there is a need to protect one’s privacy and security. Password protection is provided by each website or portal we visit today but it is important that
the password not be something that can be easily decoded.
<br> A strong password should consist of:</p>
<ul type="square">
<li>Uppercase letters</li>
<li>Lowercase letters</li>
<li>Numbers</li>
<li>Symbols</li>
</ul>
<p class="para">More often than not, we don’t make an effort to think of a difficult password and end up using our phone numbers or birth dates as one. This does nothing except making our online profiles, bank account information etc. unsafe and easy to hack.
To provide a hassle-free solution to this, we have created this Random Password Generator. <br>It gives the user the freedom to select the categories such as length and password requirements and creates a safe password according to the user’s
needs. The user can select any <b>Length</b> varying from 8 to 15 characters and further select the requirements for the password from the <b>Setting</b> section. All one has to do now is to click on the <b>Generate Password</b> button located
at the bottom of the mobile-like look of this model. The user will be provided with a password in a fraction of seconds. This password will also be available for the user to copy from our site without any trouble. The user can generate as
many passwords as he/she wants to ensure the safety of his/her profiles in the virtual world.</p>
<br>
<div style="float:right;margin:18px;">
<a href="#home"><i class="fas fa-arrow-circle-up fa-2x"></i></div></a>
</div>
</section>
<!-- ............................PROJECT....................................................... -->
<section id="project" class="project" style="background-image: url('rpg.jpeg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;"><br>
<div class="container">
<div class="innerborder">
<h3>PASSWORD GENERATOR</h3>
<div class="main">
<div class="length range__slider" data-min="8" data-max="15">
<div class="length__title field-title" data-length='0'><b>Length:</b></div>
<div class="check" style="border:0px solid black;border-radius:10px;">
<input style="background: black;" id="slider" type="range" min="8" max="15" value="11" />
</div>
</div><br>
<div class="settings" style="text-align: center;">
<span class="settings__title field-title"><b>Settings:</b></span><br>
<div class="newsettings">
<div class="custom-control custom-switch check" style="border-radius:10px;">
<input type="checkbox" class="custom-control-input" id="customSwitch1" checked>
<span class="slider"></span>
<label class="custom-control-label" for="customSwitch1">Include Uppercase</label>
<br></div><br>
<div class="custom-control custom-switch check" style="border-radius:10px;">
<input type="checkbox" class="custom-control-input" id="customSwitch2">
<span class="slider"></span>
<label class="custom-control-label" for="customSwitch2">Include Lowercase</label>
<br></div><br>
<div class="custom-control custom-switch check" style="border-radius:10px;">
<input type="checkbox" class="custom-control-input" id="customSwitch3" checked>
<span class="slider"></span>
<label class="custom-control-label" for="customSwitch3">Include Numbers</label>
<br></div><br>
<div class="custom-control custom-switch check" style="border-radius:10px;">
<input type="checkbox" class="custom-control-input" id="customSwitch4">
<span class="slider"></span>
<label class="custom-control-label" for="customSwitch4">Include Symbols</label>
<br></div><br>
</div>
</div>
<div class="result-container check" style=" width:215px;margin:1px;
height:50px;border-radius: 10px;float:center;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.45),
0 4px 8px rgba(0, 0, 0, 0.35),
0 8px 12px rgba(0, 0, 0, 0.15);">
<span id="result" style="font-family:rowdies;top: 10px;font-size:large;margin-top: 15px;"></span>
<button class="btn" id="clipboard">
<i class="fas fa-copy" style="color:white;position: relative;bottom: 5px;"></i>
</button>
</div>
<br><br>
</div>
</div>
<div class="button1">
<button type="button" id="generate">Generate Password</button>
</div>
</div>
<br>
<div style="float:right;margin:18px;">
<a href="#home"><i class="fas fa-arrow-circle-up fa-2x"></i></div></a>
</div>
</section>
<!-- ..........................BTC..................................................... -->
<section id="btc" class="btc" style="background-image:url('img2.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover"><br>
<h1 class="bb" style="font-family: rowdies;font-size: 50px;
text-shadow: 3px 3px green;text-align:center;"><b>BEHIND THE CURTAIN</b></h1>
<br>
<div class="main">
<div class="cards-container">
<div class="cards-inner1">
<div class="card1">
<figure class="front"></figure>
<figure class="back">
<h4>Isheta Bansal</h4>
<p>Sophomore|Web-Developer|<br> Content-Writer</p>
<p>The World is my Oyster.</p><br>
<a href="https://github.com/IshetaBansal"><i class="fab fa-github"></i></a>
<a href="https://www.instagram.com/isheta_bansal/"><i class="fab fa-instagram"></i></a>
<a href="https://www.linkedin.com/in/isheta-bansal-7989511a1/"><i class="fab fa-linkedin"></i></a>
<a href="https://mobile.twitter.com/BansalIsheta"><i class="fab fa-twitter-square"></i></a>
</figure>
</div>
</div>
<div class="cards-inner2">
<div class="card2">
<figure class="front"> </figure>
<figure class="back">
<h4>Bhavesh Garg</h4>
<p>Sophomore|Web-Developer|<br> Digital-Marketer</p>
<p>Life is all about Expl<i class="fas fa-fire-alt"></i>ring <i class="fas fa-laptop-code"></i></p><br>
<td><a href="https://github.com/bhavesh1129"><i class="fab fa-github"></i></a></td>
<td> <a href="https://www.instagram.com/bhavesh_1129/"><i class="fab fa-instagram"></i></a></td>
<a href="https://www.linkedin.com/in/bhavesh-garg-3728371a0/"><i class="fab fa-linkedin"></i></a>
<a href="https://twitter.com/bhavesh75630744"><i class="fab fa-twitter-square"></i></a>
</figure>
</div>
</div>
<div class="cards-inner3">
<div class="card3">
<figure class="front"> </figure>
<figure class="back">
<h4>Nandini Gupta</h4>
<p>Sophomore|Web-Developer|<br>Coder</p>
<p>Escape the Ordinary!</p><br>
<a href="https://github.com/NandiniGupta04"><i class="fab fa-github"></i></a>
<a href="https://www.instagram.com/nandini_gupta04/"><i class="fab fa-instagram"></i></a>
<a href="https://www.linkedin.com/in/nandini-gupta-3b53b81b4/"><i class="fab fa-linkedin"></i></a>
<a href="https://twitter.com/Nandini04000825"><i class="fab fa-twitter-square"></i></a>
</figure>
</div>
</div>
</div>
</div>
<!-- .......................FOOTER................................ -->
<footer class="page-footer font-small blue pt-4">
<div class="copy"><i class="far fa-copyright"></i> 2020 All Rights Reserved</div>
<div class="footer-copyright text-center py-3">Made with
<i class="fas fa-heart"></i> by @Bhavesh, @Isheta & @Nandini
</div>
</footer>
</section>
<script src="FINALJS.js"></script>
</body>
</html>