<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="supreme-container"> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary mybtn " data-toggle="modal" data-target="#myModal"> Click Me ! </button> </div> <!-- The Modal --> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <center> <span class="modal-title">Login form</span></center> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <p class="text-intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> <div class="form-div"> <form action="/action_page.php"> <div class="form-group"> <input type="email" class="form-control" id="email" placeholder="Registered E-Mail ID"> </div> <div class="form-group"> <input type="password" class="form-control" id="pwd" placeholder="Password"> </div> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-warning btn-block mybtn">Submit</button> <center><a href="#" title="Reset Password"><small>Forgot Password ?</small></a></center> <button type="submit" class="btn btn-primary btn-block mybtn">Login with facebook</button> <button type="submit" class="btn btn-danger btn-block mybtn">Login with Google-Plus</button> </form> </div> </div> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic'); body{font-family:'Nanum Gothic', sans-serif; font-size:14px; color:#777; height: 600px; background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB); background-size: 400% 400%; -webkit-animation: Gradient 15s ease infinite; -moz-animation: Gradient 15s ease infinite; animation: Gradient 15s ease infinite; } @-webkit-keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @-moz-keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } a{ color:#777; } a:hover{ color:#f39305; text-decoration:none; } .text-center{text-align:center;} .banner-heading{ font-family: 'Nanum Gothic', sans-serif; font-size: 75px; font-weight: 700; line-height: 100px; margin-bottom: 30px; color:#fff; } .banner-sub-heading{ font-family: 'Nanum Gothic', sans-serif; font-size: 30px; font-weight: 300; line-height: 30px; margin-bottom: 50px; color:#fff; } .btn-warning{background-color:#eca439;} .btn-warning:hover{background-color:#f39305;} .mybtn{ border-radius:0; height:30px; margin:10px auto; line-height:10px; } .form-control{ color:#d1d1d1; font-size:14px; font-weight:400; border-bottom:2px solid #f39305; border-top:0; border-left:0; border-right:0; height:30px; } .form-check-input{ background-color:#fff !important; border-radius:50% !important; border:2px solid #f39305 !important; } .modal-content{ width:400px; margin:auto; } .modal-header { padding:0.7rem 1rem; border-bottom: 1px solid #e9ecef; border-radius:0; background-color:#9a4a05; } .modal-title{ font-size:16px; font-family: 'Nanum Gothic', sans-serif; text-transform:uppercase; color:#fff; text-align:center; } .modal-body{ background-image:url('http://snippetimg.meditialabs.com/bgs/bg1.jpg'); background-position:top left; background-size:cover; width:100%; padding:1.5rem 3rem 3rem 3rem; } body.modal-open .supreme-container{ -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px); } .text-intro{ font-size:0.8em; color:#777; text-align:center; } .form-div{ background-color:#fff; padding:2em 1.5em; box-shadow:2px 2px 2px 2px rgba(215,215,215,0.5); } form{ border:0 !important; } @media (max-width:500px){ .modal-content{ width:330px; margin:auto; } .banner-heading{ font-size: 30px; line-height: 30px; margin-bottom: 20px; } .banner-sub-heading{ font-size: 10px; font-weight: 200; line-height: 10px; margin-bottom: 40px; } } @media (max-width:768px){ .banner-text{ padding:150px 0 150px 0; } .banner-sub-heading{ font-size: 23px; font-weight: 200; line-height: 23px; margin-bottom: 40px; } }