"Teacher_Details.html"
Bootstrap 4.1.1 Snippet by ThePaPPu

<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 ----------> {% extends 'Admin_app/Admin/base_template.html' %} {% block page_title %} View Student {% endblock page_title %} {% block main_content %} <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> <style> body{ background: -webkit-linear-gradient(left, #3931af, #00c6ff); } .fade { transition: opacity .15s linear; margin-left: 350px; margin-bottom: 530px; } .col-md-6 { -ms-flex: 0 0 50%; flex: 3 0 50%; max-width: 38%; } .col-md-8{ margin-top: -80px; } .emp-profile{ padding: 3%; margin-top: 3%; margin-bottom: 3%; border-radius: 0.5rem; background: #fff; } .profile-img{ text-align: center; } .profile-img img{ width: 70%; height: 100%; } .profile-img .file { position: relative; overflow: hidden; margin-top: -20%; width: 70%; border: none; border-radius: 0; font-size: 15px; background: #212529b8; } .profile-img .file input { position: absolute; opacity: 0; right: 0; top: 0; } .profile-head h5{ color: #333; } .profile-head h6{ color: #0062cc; } .profile-edit-btn{ border: none; border-radius: 1.5rem; width: 70%; padding: 2%; font-weight: 600; color: #6c757d; cursor: pointer; } .proile-rating{ font-size: 12px; color: #818182; margin-top: 5%; } .proile-rating span{ color: #495057; font-size: 15px; font-weight: 600; } .profile-head .nav-tabs{ margin-bottom:5%; } .profile-head .nav-tabs .nav-link{ font-weight:600; border: none; } .profile-head .nav-tabs .nav-link.active{ border: none; border-bottom:2px solid #0062cc; } .profile-work{ padding: 14%; margin-top: -15%; } .profile-work p{ font-size: 12px; color: #818182; font-weight: 600; margin-top: 10%; } .profile-work a{ text-decoration: none; color: #495057; font-weight: 600; font-size: 14px; } .profile-work ul{ list-style: none; } .profile-tab label{ font-weight: 600; } .profile-tab p{ font-weight: 600; color: #0062cc; } </style> <div class="container emp-profile"> <form method="post"> <div class="row"> <div class="col-md-4"> <div class="profile-img"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS52y5aInsxSm31CvHOFHWujqUx_wWTS9iM6s7BAm21oEN_RiGoog" alt=""/> <div class="file btn btn-lg btn-primary"> Change Photo <input type="file" name="file"/> </div> </div> </div> <div class="col-md-6"> <div class="profile-head"> <h1> {{ data.user.first_name }} {{ data.user.last_name }} </h1> </div> </div> </div> <div class="col-md-8"> <div class="tab-content profile-tab" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> <div class="row"> <div class="col-md-6"> <label>Username</label> </div> <div class="col-md-6"> <p>{{data.user.username}}</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Email</label> </div> <div class="col-md-6"> <p>{{data.user.email}}</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Department</label> </div> <div class="col-md-6"> <p>{{data.user.department}}</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Student Id</label> </div> <div class="col-md-6"> <p>{{data.user.student_id}}</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Level-Term</label> </div> <div class="col-md-6"> <p>{{data.user.level_term}}</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Phone</label> </div> <div class="col-md-6"> <p>{{data.user.phone}}</p> </div> </div> </div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> <div class="row"> <div class="col-md-6"> <label>Experience</label> </div> <div class="col-md-6"> <p>Expert</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Hourly Rate</label> </div> <div class="col-md-6"> <p>10$/hr</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Total Projects</label> </div> <div class="col-md-6"> <p>230</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>English Level</label> </div> <div class="col-md-6"> <p>Expert</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Availability</label> </div> <div class="col-md-6"> <p>6 months</p> </div> </div> <div class="row"> <div class="col-md-12"> <label>Your Bio</label><br/> <p>Your detail description</p> </div> </div> </div> </div> </div> </div> </form> </div> {% endblock main_content %}

Related: See More


Questions / Comments: