<html>
    <head>
        <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=Inter:wght@400;600;700&family=Source+Sans+Pro:wght@400;900&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="generate-pw-container">
        <h1 class="title">Generate a <span class="accent-txt">random password</span></h1>
        <p class="subtitle">Never use an insecure password again.</p>
        <div class="actions">
        <button class="generate-passwords-btn"><img src="./icon1.png" alt='lightning icon' >Generate passwords</button>
        <input type="number" min="8" max="15" placeholder="change password length" class="change-password-length" >
        </div>
        <div class="display-passwords-container">
            <div class="pw-display one"></div>
             <div class="pw-display two"></div>
              <div class="pw-display three row"></div>
               <div class="pw-display four row"></div>
             
            
        </div>
        
        </div>

        <script src="index.pack.js"></script>
    </body>
</html>

<html>

<head>

+Pro:wght@400;900&display=swap" rel="stylesheet">

</head>

<body>

<h1 class="title">Generate a <span class="accent-txt">random password</span></h1>

<p class="subtitle">Never use an insecure password again.</p>

<button class="generate-passwords-btn"><img src="./icon1.png" alt='lightning icon'

>Generate passwords</button>

<input type="number" min="8" max="15" placeholder="change password length"

class="change-password-length" >

</div>

</div>

</body>

</html>

-4:15