CSS Form

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

<div class="login_box">
  <h1>Sing Up Now</h1>
  <form>
      <p>First Name</p>
      <input type="text" name="First name" placeholder="Enter Your First Name">

      <p>Last Name</p>
      <input type="text" name="Last name" placeholder="Enter Your Last Name">

      <p>Create Password</p>
      <input type="Password" name="" placeholder="Enter Your Password">

      <p>Confirm Your Password</p>
      <input type="Password" name="" placeholder="Enter Your Password">

      <p>Select Your Country</p>
      <select id="country" name="country">
        <option value="Sri Lanka">Sri Lanka</option>
         <option value="India">India</option>
          <option value="USA">USA</option>
           <option value="Japan">Japan</option>
            <option value="Sweden">Sweden</option>
             <option value="Australia">Australia</option>
             <option value="Bangladesh">Bangladesh</option>
             <option value="Cambodia">Cambodia</option>
             <option value="Canada">Canada</option>
             <option value="Chile">Chile</option>
             <option value="Netherlands">Netherlands</option>
             <option value="Pakistan">Pakistan</option>
             <option value="Russia">Russia</option>
             <option value="South Korea">South Korea</option>
             <option value="Thailand">Thailand</option>
             <option value="Vietnam">Vietnam</option>
      </select>
      <input type="submit" value="Submit">
  </form>
</div>

<style>
*{margin: 0; padding: 0;
}

body
{
  background: url(https://c1.staticflickr.com/1/126/387606063_408c203f6c_b.jpg);
  background-attachment: fixed; 
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
 
.login_box
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 420px;
  padding: 70px 30px;
}

.login_box {
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);   
    border-radius: 5px;
    background-color: rgba(255, 255, 255, .15);
    backdrop-filter: blur(10px);
}

.login_box h1
{
  text-align: center;
  margin-top: -10%;
  padding: 0 0 20px;
  font-size: 42px;
}

.login_box p
{
  font-family: sans-serif;
  font-size: 25px;
  color: #000;
  font-weight: bold;
  margin: 0;
  padding: 0; 
}  

.login_box input{
  width: 100%;
  height: 30px;
  margin-bottom: 20px;
  color: #000;
  font-family: sans-serif;
  font-size: 16px;
  background-color: rgba(255, 255, 255, .7);
  display: inline-block;
  box-sizing: border-box;
  border: none;
  border-radius: 2px;

}

.login_box input[type="submit"]
{
  border: none;
  outline: none;
  height: 40px;
  background: #fb2525;
  color: #fff;
  font-size: 18px;
}

.login_box select
{
  width: 100%;
  height: 30px;
  margin-bottom: 20px;
  color: #000;
  font-family: sans-serif;
  font-size: 16px;
  background-color: rgba(255, 255, 255, .7);
  display: inline-block;
  box-sizing: border-box;
  border: none;
  border-radius: 2px;
}

.login_box input[type="submit"]:hover
{
  cursor: pointer;
  background: #ffc107;
  color: #000;
}
</style>

</body>
</html>
ICT With Shantha Bandara

CSS Form

CSS Form

No comments:

Post a Comment
