<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <saction id="starwars"> <div class="container"> <div class="row"> <div class="col-md-5"> <div class="starwars-form"> <div class="panel-body"> <form role="form"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <div class="icon-addon addon-lg"> <input type="text" name="first_name" id="first_name" class="form-control input-sm" placeholder="Name"> <label for="Name" class="glyphicon glyphicon-user" rel="tooltip" title="User Name"></label> </div> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <div class="icon-addon addon-lg"> <input type="text" name="Job Title" id="Job Title" class="form-control input-sm" placeholder="Job Title"> <label for="Job Title" class="glyphicon glyphicon-briefcase" rel="tooltip" title="Job Title"></label> </div> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <div class="icon-addon addon-lg"> <input type="text" name="company" id="company" class="form-control input-sm" placeholder="Company"> <label for="Company" class="glyphicon glyphicon-registration-mark" rel="tooltip" title="Company"></label> </div> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <div class="icon-addon addon-lg"> <input type="text" name="phone_number" id="phone_number" class="form-control input-sm" placeholder="Phone Number"> <label for="Phone Number" class="glyphicon glyphicon-earphone" rel="tooltip" title="Phone Number"></label> </div> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <div class="icon-addon addon-lg"> <input type="email" name="email" id="email" class="form-control input-sm" placeholder="Email Address"> <label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="email"></label> </div> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <div class="icon-addon addon-lg"> <select class="form-control"> <option>Number in Party</option> <option>1</option> <option>2</option> </select> <label for="email" class="glyphicon glyphicon-plus-sign" rel="tooltip" title="email"></label> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <textarea class="form-control" id="CaseDetails" placeholder="Case Details" rows="1"></textarea> </div> </div> </div> <input type="submit" value="Register" class="btn btn-info btn-block"> </form> </div> </div> </div> <div class="col-md-7"> <div class="starwar_title"> <h1>Free Screening of Star Wars: The Last Jedi presented by: Sumit Kumar</h1> </div> </div> </div> </div> </saction>

/*///////////////////////////////////// starwars /////////////////////////////////////*/ #starwars { background-image: url(https://images.flickreel.com/wp-content/uploads/2017/02/rey-jedi-1280x649.png); background-position: top center; width: 100%; height: auto; display: block; background-repeat: no-repeat; background-size: cover; padding:50px 0px; } .starwars-form{ padding:25px; background-color: rgba(255, 255, 255, 0.90); } .form-control { display: block; width: 100%; height: 30px; padding: 6px 12px; font-size: 12px; line-height: 2; color: #555; background-color: #fff; background-image: none; border: 0px solid; border-bottom:solid 2px #ffc926; border-radius: 0px; box-shadow:none; } .btn-info { color: #fff; background-color: #ffc926; border:solid 0px; border-radius:0px; } .btn-info:hover { color: #fff; background-color: #ffc926; } input[type="text"], textarea { background-color : #fff; } .input-group .icon-addon .form-control { border-radius: 0; } .icon-addon { position: relative; color: #555; display: block; } .icon-addon:after, .icon-addon:before { display: table; content: " "; } .icon-addon:after { clear: both; } .icon-addon .glyphicon { position: absolute; z-index: 2; left: 0px; font-size: 14px; width: 28px; color: #fff; text-align: center; padding: 8px 0; top: 0px; background-color: #fec828; } .icon-addon.addon-sm .form-control { height: 30px; padding: 5px 10px 5px 28px; font-size: 12px; line-height: 1.5; } .icon-addon.addon-md .form-control, .icon-addon .form-control { padding-left: 30px; float: left; font-weight: normal; } .icon-addon.addon-sm .fa, .icon-addon.addon-sm .glyphicon { margin-left: 0; font-size: 12px; left: 5px; top: -1px } .icon-addon .form-control:focus + .glyphicon, .icon-addon:hover .glyphicon, .icon-addon .form-control:focus + .fa, .icon-addon:hover .fa { color: #2580db; } .starwar_title{ padding:35px; } .starwar_title h1{ font-weight:bold; line-height:55px; color:#fff; text-align: left; }