1.6K views
CSSAdd prefixes
1.card { 2 width: 350px; 3 border: 1px solid #ccc; 4 border-radius: 4px; 5 box-shadow: 2px 2px 8px rgba(0,0,0,0.1); 6 overflow: hidden; 7 margin: 10px; 8} 9 10.card-header { 11 background-color: #333; 12 padding: 16px; 13 text-align: center; 14} 15 16.card-header .text-header { 17 margin: 0; 18 font-size: 18px; 19 color: rgb(255, 255, 255); 20} 21 22.card-body { 23 padding: 16px; 24} 25 26.form-group { 27 margin-bottom: 10px; 28} 29 30.form-group label { 31 display: block; 32 font-size: 14px; 33 color: #333; 34 font-weight: bold; 35 margin-bottom: 1px; 36} 37 38.form-group input[type="text"], 39.form-group input[type="email"], 40.form-group input[type="password"] { 41 width: 100%; 42 padding: 8px; 43 font-size: 14px; 44 border: 1px solid #ccc; 45 border-radius: 4px; 46} 47 48.btn { 49 padding: 12px 24px; 50 margin-left: 13px; 51 font-size: 16px; 52 border: none; 53 border-radius: 4px; 54 background-color: #333; 55 color: #fff; 56 text-transform: uppercase; 57 transition: background-color 0.2s ease-in-out; 58 cursor: pointer 59} 60 61.btn:hover { 62 background-color: #ccc; 63 color: #333; 64}
HTML
1<div class="card"> 2 <div class="card-header"> 3 <div class="text-header">Register</div> 4 </div> 5 <div class="card-body"> 6 <form action="#"> 7 <div class="form-group"> 8 <label for="username">Username:</label> 9 <input required="" class="form-control" name="username" id="username" type="text"> 10 </div> 11 <div class="form-group"> 12 <label for="email">Email:</label> 13 <input required="" class="form-control" name="email" id="email" type="email"> 14 </div> 15 <div class="form-group"> 16 <label for="password">Password:</label> 17 <input required="" class="form-control" name="password" id="password" type="password"> 18 </div> 19 <div class="form-group"> 20 <label for="confirm-password">Confirm Password:</label> 21 <input required="" class="form-control" name="confirm-password" id="confirm-password" type="password"> 22 </div> 23 <input type="submit" class="btn" value="submit"> </form> 24 </div> 25</div> 26