Popup chat window

Html part

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>new project</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <h1>welcome to our youtube channel</h1>
  <h2>Popup chat window </h2>
  
    <button class="start" onclick="openform()">Login</button>
    <div  class="form" id="pop-up" >
      <form class="ok" >
        <label>User Name</label>
        <input type="text" placeholder="
  Enter your Username" required>
        <label>Password</label>
        <input type="password" placeholder=" Enter
  Enter your password" required >
        <button type="submit"   class="btn">Login</button>
        <button type="button" class="btn another" onclick="closeform()">close</button>
      </form>
      
            </div>
         
 <script>
   let popup=document.getElementById("pop-up");
   function openform(){
   popup.style.display ="block";
  
  }
  function closeform(){
    popup.style.display="none";
  }
 
 </script>
</body>

</html>

CSS Part

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  min-height: 100vh;
  background: #333;
  font-family: sans-serif;

}
h1,h2{
  font-size: 20px;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
}
h2{
  border-bottom: 1px solid rgb(5, 3, 3);
border-bottom-width: 7px;

letter-spacing: 1px;
font-family: sans-serif;
}
.head{
  margin-top: 100px;
margin-left: 150px;
position: absolute;
width: 400px;
height: 400px;
background: rgb(48, 129, 105);
border-radius: 10px;
}
.start{
 position:fixed;
 top: 70%;
 left: 25%;
 padding: 20px 40px;
 font-size: 1.2em;
 border-radius: 10px;
 border: none;
 cursor: pointer;

}
.start:hover{
  box-shadow: 2px 3px 13px rgb(126, 24, 24);
  transform: translatey(-2px);
 
}
.form{
  margin: 10px;
  padding: 10px;
  background-color: rgb(41, 38, 33);
  position: fixed;
  display: none;
  width: 350px;
  height: 300px;
  border: 3px solid #000;
left:100px ;
top: 30%;
}
label{
  
  font-size: 20px;
  color: #fff;
 
 margin-top: 40px;
}
input[type=text],[type=password]{
  width: 100%;
  padding: 10px 20px;
margin: 10px 0;
  font-size: 20px;
  border: none;
  outline: none;
 
}
.btn{
  
  width: 100%;
  padding: 10px 0;
  margin: 5px 0;
  font-size: 20px;
  background: darkcyan;
  border: none;
  cursor: pointer;
  transition: .3s;
}
.btn:hover{
  box-shadow: 5px 5px 15px #32443f;
  color: #fff;
}

CodeWithCreativity

Search This Blog