<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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="wrapper fadeInDown"> <div id="formContent"> <!-- Tabs Titles --> <!-- Icon --> <div class="fadeIn first"> <img src="https://media.istockphoto.com/id/1132330364/vector/vector-illustration-icon-with-the-concept-of-online-auction-bidding-service-access.jpg?s=612x612&w=0&k=20&c=b8Ppc4EfGdLz3ZJI66Pgjetl7NrfSKL_hZ5r4S562bU=" id="icon" alt="User Icon" /> <h1>EbayKiller</h1> </div> <!-- Register Form --> <form class="row"> <div class="col-md-6 mb-3"> <input type="text" id="firstName" class="form-control fadeIn second" name="firstName" placeholder="First Name" ng-model="register.firstname"> </div> <div class="col-md-6 mb-3"> <input type="text" id="lastName" class="form-control fadeIn third" name="lastName" placeholder="Last Name" ng-model="register.lastname"> </div> <div class="col-md-12 mb-3"> <input type="text" id="email" class="form-control fadeIn second" name="email" ng-model="register.email" placeholder="Email"> </div> <div class="col-md-12 mb-3"> <input type="text" id="password" class="form-control fadeIn third" name="password" ng-model="register.password" placeholder="Password"> </div> <div class="col-md-12 mb-3"> <label class="subs" for="subscriptions">Subscriptions:</label> <div class="row"> <div class="col-md-4"> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="checkbox" name="subscriptions" value="Technology" ng-model="register.subscriptions.Technology"> <label class="form-check-label" for="subscriptions">Technology</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" name="subscriptions" value="Fashion" ng-model="register.subscriptions.Fashion"> <label class="form-check-label" for="subscriptions">Fashion</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" name="subscriptions" value="Home" ng-model="register.subscriptions.Home"> <label class="form-check-label" for="subscriptions">Home</label> </div> </div> </div> <div class="col-md-4"> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="checkbox" name="subscriptions" value="Collectibles" ng-model="register.subscriptions.Collectibles"> <label class="form-check-label" for="subscriptions">Collectibles</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" name="subscriptions" value="Sports" ng-model="register.subscriptions.Sports"> <label class="form-check-label" for="subscriptions">Sports</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" name="subscriptions" value="Health&Beauty" ng-model="register.subscriptions.HealthBeauty"> <label class="form-check-label" for="subscriptions">Health&Beauty</label> </div> </div> </div> <div class="col-md-3"> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="checkbox" name="subscriptions" value="Art" ng-model="register.subscriptions.Art"> <label class="form-check-label" for="subscriptions">Art</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" name="subscriptions" value="CarParts" ng-model="register.subscriptions.CarParts"> <label class="form-check-label" for="subscriptions">Car Parts</label> </div> </div> </div> </div> </div> <div class="col-md-4"> <input type="reset" class="btn btn-outline-primary" value="Clear"> </div> <div class="col-md-7 text-right"> <input type="submit" class="btn btn-block btn-primary" value="Log In"> </div> </form> <!-- Remind Passowrd --> <div id="formFooter"> Don't have an account yet? <a class="underlineHover" href="#">Register</a> </div> </div> </div>

body { font-family: "Poppins", sans-serif; height: 100vh; } h2 { text-align: center; font-size: 16px; font-weight: 600; text-transform: uppercase; display:inline-block; margin: 40px 8px 10px 8px; color: #cccccc; } /* STRUCTURE */ .wrapper { display: flex; align-items: center; flex-direction: column; justify-content: center; width: 100%; min-height: 100%; padding: 20px; } #formContent { border-radius: 10px 10px 10px 10px; background: #fff; padding: 30px; width: 90%; max-width: 450px; position: relative; padding: 0px; box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3); text-align: center; } #formFooter { background-color: #f6f6f6; border-top: 1px solid #dce8f1; padding: 25px; text-align: center; -webkit-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; } /* TABS */ h2.inactive { color: #cccccc; } h2.active { color: #0d0d0d; border-bottom: 2px solid #5fbae9; } input[type=text] { background-color: #f6f6f6; border: none; color: #0d0d0d; padding: 15px 10px; text-decoration: none; display: inline-block; font-size: 16px; width: 80%; border: 2px solid #f6f6f6; border-radius: 5px 5px 5px 5px; } input[type=text]:focus { background-color: #fff; border-bottom: 2px solid #5fbae9; } input[type=text]:placeholder { color: #cccccc; } input[type=submit], input[type=reset] { margin-bottom:15px; } h1{ color:#60a0ff; font-weight:bolder; } /* OTHERS */ #icon { width:30%; } #firstName { width:150px; margin-left:30px; } #lastName { width:150px; margin-right:28px; } .form-group { margin:auto; padding: 1px; } .subs { font-size:20px; font-weight:bolder; color:#60a0ff; }