Home / css / Registration Form over an Image using Bootstrap and CSS

Registration Form over an Image using Bootstrap and CSS

LIVE DEMO

 CODE

  • HTML
  • Style.css
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
        <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
        <link rel="stylesheet" href="style.css" >
    </head>
<body>
<div class="position-relative text-white">
    <div class="img-overlay">
      <img src="photo.jpeg" class="img-fluid cover" />
    </div>
    <div class="wrapper">
      <div class="container">
        <div class="row">
          <div class="col-md-6 align-self-center">
            <h1 class="display-4 mb-3 bgfont">Houses </br> &  </br> apartments </h1>
            <h3 class="mb-4">For sale and for rent.</h3>
          </div>
          <div class="col-md-5 ml-auto mt-5 mb-5">
            <div class="card">
              <div class="card-body text-dark">
                <form>
                  <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" autofocus="autofocus" class="form-control" id="email" placeholder="Enter your email">
                  </div>
                  <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Enter your password">
                  </div>
                  <div class="form-group">
                    <label for="password-repeat">Repeat password</label>
                    <input type="password" class="form-control" id="password-repeat" placeholder="Repeat your password">
                  </div>
                  <button type="submit" class="btn btn-success btn-block btn-lg mb-2">Sign up</button>
                  <div class="text-center">
                    Already have an account? <a href="#">Sign in</a>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

 

body{
   font-family: 'Montserrat';
}

.bgfont{
    font-family: 'Pacifico', cursive;;
}
.wrapper {
    z-index: 3;
    position: relative;
}

img {
    vertical-align: middle;
    border-style: none;
}

.cover {
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.img-overlay:after {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #f4791f 0%, #659999 100%);
    background: -moz-linear-gradient(45deg, #f4791f 0%, #659999 100%);
    background: -webkit-linear-gradient(45deg, #f4791f 0%, #659999 100%);
    opacity: .3;
    z-index: 2
}

.btn-block {
    border-radius: 50px;
    padding-left: 40px;
    padding-right: 40px;
    border-color: #64f38c;
    background: linear-gradient(45deg, #52c234 0%, #64f38c 100%);
    background: -moz-linear-gradient(45deg, #52c234 0%, #64f38c 100%);
    background: -webkit-linear-gradient(45deg, #52c234 0%, #64f38c 100%);
    box-shadow: 0px 15px 28px -5px #45b649;
    -webkit-box-shadow: 0px 15px 28px -5px #45b649;
    -moz-box-shadow: 0px 15px 28px -5px #45b649;
     
}
.card {
    box-shadow: 1px 11px 70px -20px rgba(0, 0, 0, 0.70);
}

 

Check Also

WebsiteFooter

Perfect Footer for your website using Bootstrap and Fontawesome

Perfect Footer for your website using Bootstrap and Fontawesome Even though Footer is located at …

Leave a Reply

Your email address will not be published. Required fields are marked *