<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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="container contact"> <div class="row"> <div class="col-md-3"> <div class="contact-info"> <img src="game-controller" alt="image"/> <h2>สมัครงาน</h2> <h4>กรอกข้อมูลส่วนตัวของทาน</h4> </div> </div> <div class="col-md-9"> <div class="contact-form"> <div class="form-group"> <label class="control-label col-sm-2" for="fname">ชื่อ</label> <div class="col-sm-10"> <input type="text" class="form-control" id="fname" placeholder=" First Name" name="fname"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="lname">นามสกุล</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lname" placeholder=" Last Name" name="lname"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="email">Email:</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" placeholder="email" name="email"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="lname">เบอร์โทร</label> <div class="col-sm-10"> <input type="number" class="form-control" id="lname" placeholder=" " name="lname"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="lname">วันเกิด</label> <div class="col-sm-10"> <input type="date" class="form-control" id="lname" placeholder=" " name="lname"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="lname">วันเกิด</label> <div class="col-sm-10"> <select class="form-control"> <option class="hidden" selected disabled>จบการศึกษาระดับ</option> <option >ปริญญาตรี</option> <option>ปริญญาโท</option> <option>ปริญญาเอก</option> </select> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="comment">ที่อยู่</label> <div class="col-sm-10"> <textarea class="form-control" rows="5" id="comment"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Submit</button> </div> </div> </div> </div> </div> </div>

body{ background-color: #25274d; } .contact{ padding: 4%; height: 400px; } .col-md-3{ background: #ff9b00; padding: 4%; border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } .contact-info{ margin-top:10%; } .contact-info img{ margin-bottom: 15%; } .contact-info h2{ margin-bottom: 10%; } .col-md-9{ background: #fff; padding: 3%; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } .contact-form label{ font-weight:600; } .contact-form button{ background: #25274d; color: #fff; font-weight: 600; width: 25%; } .contact-form button:focus{ box-shadow:none; }