<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="main">
<h1>Generate a <span>random password</span></h1>
<h2>Never use an insecure password again.</h2>
<button class="generate">
<p>Generate passwords</p>
</button>
<input type="checkbox" id="toggle1">
<label for="toggle1" class="clone">123</label>
<input type="checkbox" id="toggle2">
<label for="toggle2" class="clone">%&</label>
<input type="checkbox" id="night-toggle">
<label for="night-toggle" class="clone">
<i class="fa-regular fa-moon"></i>
<i class="fa-regular fa-sun"></i>
</label>
<hr>
<p class="pass1 pass"></p>
<button class="clone1 clone"><i class="fa fa-clone" aria-hidden="true"></i></button>
<p class="pass2 pass"></p>
<button class="clone2 clone"><i class="fa fa-clone" aria-hidden="true"></i></button>
</div>
<script src="index.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<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=Karla:wght@800&family=Yusei+Magic&
display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter&family=Karla:wght@800&
family=Yusei+Magic&display=swap" rel="stylesheet">
