Instagram login page codes

 Index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>VibeGram Login</title>

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <div class="login-box">

    <h1>VibeGram</h1>

    <p>Log in to your vibe frequency ⚡</p>

    <form onsubmit="handleLogin(event)">

      <input type="text" id="username" placeholder="Phone number, username or email" required>

      <input type="password" id="password" placeholder="Password" required>

      <button type="submit">Log In</button>

      <div class="extras">

        <a href="#">Forgot password?</a>

      </div>

    </form>

  </div>

  <script src="script.js"></script>

</body>

</html>


Index.css


body {

  font-family: 'Helvetica Neue', sans-serif;

  background: #fafafa;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100vh;

  margin: 0;

}


.login-box {

  width: 300px;

  padding: 40px 30px;

  background: #fff;

  border: 1px solid #ccc;

  text-align: center;

  border-radius: 8px;

}


h1 {

  font-family: 'Segoe UI', sans-serif;

  font-size: 36px;

  margin-bottom: 10px;

  color: #262626;

}


p {

  color: #8e8e8e;

  font-size: 14px;

  margin-bottom: 20px;

}


input {

  width: 100%;

  padding: 10px;

  margin: 6px 0;

  border: 1px solid #dbdbdb;

  border-radius: 4px;

}


button {

  width: 100%;

  padding: 10px;

  background-color: #0095f6;

  border: none;

  color: #fff;

  font-weight: bold;

  border-radius: 4px;

  cursor: pointer;

  margin-top: 10px;

}


.extras {

  margin-top: 15px;

}


.extras a {

  font-size: 12px;

  color: #00376b;

  text-decoration: none;

}



Script.js


function handleLogin(event) {

  event.preventDefault();

  const username = document.getElementById('username').value;

  alert(`Yo ${username}, your vibe just logged in!`);

}



html, body {

  height: 100%;

  margin: 0;

  padding: 0;

  font-family: 'Helvetica Neue', sans-serif;

  background: #fafafa;

  display: flex;

  align-items: center;

  justify-content: center;

}





Comments