How to create such login?

JavaScript
1

Want such login to my website. Looks like prompt with 2 fields. Help please with solution.

https://cryptedge.io/

image

2

Enjoy!

https://jsfiddle.net/yjxr693s/2/

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

  <div id="site_container">
    <div id="login_container">
      <div class="title">My Title</div>
      <div class="website">https://mywebsite.com</div>

      <div class="input_container">
        <label><span>Username</span><input type="text" name="username"></label>
        <label><span>Password</span><input type="password" name="password"></label>
      </div>
      
      <div class="button_container">
        <a href="#" name="enter">Enter</a>
        <a href="#" name="cancel">Cancel</a>
      </div>

    </div>
  </div>

<style>
* {
  box-sizing: border-box;
  font-family: Arial;
  color: #555;
}

body {
  margin: 0;
  padding: 0;
}

#site_container {
  padding: 20px;
}

#login_container {
  padding: 30px;
  border: 1px solid #eee;
  border-radius: 5px;
  box-shadow: 1px 1px 20px rgba(0,0,0,0.3);
  max-width: 550px;
}

#login_container .title,
#login_container .website {
  font-size: 14px;
  padding-bottom: 10px;
}

#login_container .input_container {
  display: flex;
  flex-flow: column;
  padding-top: 10px;
}

#login_container .input_container label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  font-size: 14px;
}

#login_container .input_container label span {
  margin-right: 20px;
  max-width: 50px;
}

#login_container .input_container input {
  padding: 10px;
  display: block;
  width: 100%;
  max-width: 400px;
  background: #eee;
  border: 1px solid #ddd;
}

#login_container a {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
}

.button_container {
  display: flex;
  justify-content: flex-end;
}

.button_container a[name='enter'] {
    background: #4182ef;
    color: #fff;
    border-radius: 5px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button_container a[name='cancel'] {
  border-radius: 5px;
  border: 1px solid #ddd;
  color: #555;
  margin-left: 10px;
  font-size: 12px;
}
</style>

</body>
</html>
3

No man. Please, check website before answer… It should look like alert window.

4

This is a HTML/CSS forum. So I gave an answer in that context.

What you’re looking for is server authentication. Specifically NGINX.