index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Password Generator</title>
  <link rel="shortcut icon" href="./img/logo.png" type="image/png">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="./css/styles.css">
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

  <div id="topBtn" title="Go to Top">
    <a href="#"><span class="fa fa-angle-up"></span></a>
  </div>

  <div class="splash">
    <img class="fadein" src="img/logo.png">
  </div>
  <header>
    <nav class="navbar">
      <input type="checkbox" id="check">
      <label for="check" class="checkbtn">
        <i class="fa fa-bars"></i>
      </label>
      <div class="logo">
        <img src="./img/logo.png">
      </div>
      <div class="navitems">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#aboutus">About Us</a></li>
          <li><a href="https://github.com/syedmazharaliraza/IntrepidKey" target=”_blank”>Contribute</a></li>
        </ul>
      </div>
    </nav>
  </header>
  <div class="main-body">
    <div class="container">
      <h1 class="title">Password Generator</h1>
      <input id="password" placeholder="Password"><i class="fa fa-clone" id="copy_icon" onclick="myFunction()">
        <span class="popuptext" id="myPopup">Copied!</span>
      </i>
      <form class="form">
        <label for="numberinput">Number Of Characters</label>
        <div class="charamountcont">
          <input type="range" min="1" max="25" value="10" id="slider">
          <input id="numberinput" type="number" min="1" max="25" value="10">
        </div>

        <label for="uppercase">Include Uppercase</label>
        <input type="checkbox" id="uppercase">

        <label for="lowercase">Include Lowercase</label>
        <input type="checkbox" id="lowercase" checked>

        <label for="number">Include Numbers</label>
        <input type="checkbox" id="number">

        <label for="symbol">Include Symbols</label>
        <input type="checkbox" id="symbol">

        <button type="button" id="button">Generate Password</button>
        <button type="button" id="txt-button">Save as Text File</button>
      </form>
    </div>
    <!-- Theme Checkbox-->
    <div class="theme-checkbox">
      <label class="theme-switch" for="checkbox">
          <input type="checkbox" id="checkbox" />
          <div class="slider round"></div>
    </label>
  </div>

    <!---About--->
    <section id="aboutus" class="dark">
      <div class="inner-width">
          <h1 class="section-title">About Us</h1>
          <div class="services">
              <div class="about">
                  <h4>What is IntrepidKey?</h4>
                  <p>IntrepidKey is random password generator for generating impossible-to-crack passwords, which are 
                      complex with multiple types of characters (numbers, letters, and symbols). It keeps you safe from most 
                      password-hacking methods, such as by social engineering, brute force, dictionary attack method, etc. and 
                      keep your online accounts safe. Using complex and unique passwords can largely minimise such kinds of hacking.
                      <br><br> IntrepidKey has the vision to create a platform where user can generate and save their passwords, with no 
                      privacy issues and easy access to all saved passwords.</p>
              </div>
                
              <div class="about">
                  <h4>Why password generator is necessary?</h4>
                  <p> We are in a modern technological era where almost everyone has various high-tech gadgets. The sophisticated 
                      devices are used in connecting and sharing information with other computing devices. At times they connect with 
                      banks and help in completing financial transactions. As such, they’re prone to unauthorized access that may lead 
                      to loss of valuable data or money. Furthermore, unauthorized users may use your logins to commit a cybercrime 
                      leaving you in trouble with the authorities.<br> <br>
  
                      The most prevalent way hackers can break through computers is by guessing your password. Use of simple and 
                      common passwords creates an opportunity for hackers to get access to your electronic devices. Since no one 
                      would wish to have their personal information stolen, use strong passwords to protect your information.<br><br>
                      
                      Password generators can save you from fraud and other cyber security threats by creating secure and strong passwords. </p>
              </div>  
                
              <div class="about">
                  <h4>How to prevent your password from being hacked?</h4>
                  <p>1) Do not use the same password, security question and answer for multiple important accounts.<br><br>
                     2) Use a password that has at least 16 characters, use at least one number, one uppercase letter, one lowercase 
                         letter and one special symbol.<br><br>
                     3) Change passwords at least a couple of times a year: get fresh ones, and don’t just swap around the 
                         ones you already use!<br><br>
                     4) Do not let your Web browsers( FireFox, Chrome, Safari, Opera, IE, Microsoft Edge ) to store your passwords, 
                         since all passwords saved in Web browsers can be revealed easily.<br><br>
                     5) It's recommended that you remember a few master passwords, store other passwords in a plain text file and encrypt this file 
                         with 7-Zip, GPG or a disk encryption software such as BitLocker, or manage your passwords with a password management software.<br><br>   
                     6) Remember that public WiFi has more holes than Swiss cheese – everything you do while connected can be spied on.<br><br>
                     7) Only use well-known or reputable WiFi hotspots – setting up fake free networks is a common sting.<br><br>
                     8) Turn on 2-step authentication whenever possible.<br><br>
                     9) Do not store your critical passwords in the cloud.<br><br>
                    10) Do not click the link in an email or SMS message, do not reset your passwords by clicking them, except that you know 
                         these messages are not fake.<br><br>
                    11) Encrypt and backup your passwords to different locations, then if you lost access to your computer or account, you can 
                         retrieve your passwords back quickly.</p>
              </div>
           </div>
      </div>
    </section>

  <footer>
    <div class="left">
      <img src="./img/logo.png">
      <p>IntrepidKey</p>
    </div>
    <div class="middle">
      <p>Make impossible to crack passwords using IntrepidKey</p>
      <p class="center">&copy; 2021 IntrepidKey</p>
    </div>
    <div class="right">
      <p>Connect with Us</p>
      <div class="flex">
        <a class="social" href="#"><i class="fa fa-facebook"></i></a>
        <a class="social" href="#"><i class="fa fa-instagram"></i></a>
        <a class="social" href="#"><i class="fa fa-github"></i></a>
        <a class="social" href="#"><i class="fa fa-linkedin"></i></a>
        <a class="social" href="#"><i class="fa fa-envelope-square"></i></a>
        <a class="social" href="#"><i class="fa fa-twitter"></i></a>
      </div>
    </div>
  </footer>
  <script src="js/Script.js"></script>
</body>

</html>