User Profile

A user profile is a directory of stored user settings and information for the related user account.

Profile With Counter

YOUR INSTRUCTOR

Hi, I’m James Davies,
I will be taking you through lessons.

Create beautiful website with this Geeks UI template. Get started building a site today.

45

Lessons

10,500+

Students

12+

Learning Hours

<div class="py-8 ">
  <div class="container">
    <div class="row mb-6 align-items-center justify-content-center">
      <div class="col-md-10">
        <div class="row align-items-center ">
          <div class="col-xl-6 col-lg-7 col-md-12 col-12 order-1 text-center text-lg-start ">
            <!-- caption -->
            <span class="text-primary mb-3 d-block text-uppercase fw-semibold ls-xl">YOUR INSTRUCTOR</span>
            <h2 class="mb-2 display-4 fw-bold mb-3">Hi, I’m <span class="text-primary">James Davies</span>,
              <br>I will be taking you through lessons.</h2>
            <p class="fs-3 pe-6">Create beautiful website with this Geeks UI template. Get started building a
              site today.</p>

            <hr class="my-5">
              <!-- Counter -->
            <div class="row">
              <div class="col-sm mb-3 mb-lg-0">
                <h2 class="h1 fw-bold mb-0 ls-xs">45</h2>
                <p class="mb-0">Lessons</p>
              </div>
              <div class="col-lg-5 col-sm mb-3 mb-lg-0">
                <h2 class="h1 fw-bold mb-0 ls-xs">10,500+</h2>
                <p class="mb-0">Students</p>
              </div>
              <div class="col-sm mb-3 mb-lg-0">
                <h2 class="h1 fw-bold mb-0 ls-xs">12+</h2>
                <p class="mb-0">Learning Hours</p>
              </div>
            </div>
          </div>
            <!-- Img -->
          <div class="offset-xl-1 col-xl-5 col-lg-5 col-12 mb-6 mb-lg-0 order-lg-2 text-center ">
            <img src="../assets/images/instructor/instructor-img.png" alt="" class="img-fluid">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Card Contact

Wade Warren

United States

Message
Enrolled 3/12/2020
Progress 0% 
<div class="col-lg-4 col-md-6 col-12">
    <!-- Card -->
    <div class="card mb-4">
        <!-- Card Body -->
        <div class="card-body ">
            <div class="text-center">
                <img src="../assets/images/avatar/avatar-3.jpg" class="rounded-circle avatar-xl mb-3" alt="">
                <h4 class="mb-1">Wade Warren</h4>
                <p class="mb-0 fs-6"><i class="fe fe-map-pin me-1"></i>United
                    States</p>
                <a href="#" class="btn btn-sm btn-outline-secondarymt-3 ">Message</a>
            </div>
            <div class="d-flex justify-content-between border-bottom py-2 mt-4 fs-6">

                <span>Enrolled</span>
                <span class="text-dark"> 3/12/2020</span>
            </div>
            <div class="d-flex justify-content-between pt-2 fs-6">
                <span>Progress</span>
                <span class="text-success"> 0% </span>
            </div>
        </div>
    </div>
</div>

Card Profile

Wade Warren

Web Developer, Designer

Students 50,274
Instructor Rating 4.5
Courses 12 
 <div class="col-xl-4 col-lg-6 col-md-6 col-12">
<!-- Card -->
<div class="card">
  <!-- Card Body -->
  <div class="card-body">
    <div class="text-center">
      <img src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle avatar-xl mb-3" alt="">
      <h4 class="mb-0">Wade Warren</h4>
      <p class="mb-0">Web Developer, Designer</p>
    </div>
    <div class="d-flex justify-content-between border-bottom py-2 mt-4">
      <span>Students</span>
      <span class="text-dark">50,274</span>
    </div>
    <div class="d-flex justify-content-between border-bottom py-2">
      <span>Instructor Rating</span>
      <span class="text-warning">
        4.5 <span class="">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
            fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
            <path
              d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
          </svg>
      </span>
    </div>
    <div class="d-flex justify-content-between pt-2">
      <span>Courses</span>
      <span class="text-dark"> 12 </span>
    </div>
  </div>
</div>
</div>

User Profile Page header

Jenny Wilson

@Jennywilson

<div class="row align-items-center">
   <!-- User Info -->
   <div class="col-xl-12 col-lg-12 col-md-12 col-12">
      <div class="pt-8 rounded-top-md" style="background: url(../assets/images/background/profile-bg.jpg) no-repeat; background-size: cover;"></div>
      <div class="d-flex align-items-end justify-content-between bg-white px-4 pt-2 pb-4 rounded-none rounded-bottom-md shadow-sm">
         <div class="d-flex align-items-center">
            <div class="me-2 position-relative d-flex justify-content-end align-items-end mt-n5">
               <img src="../assets/images/avatar/avatar-1.jpg" class="avatar-xl rounded-circle border border-4 border-white" alt="">
               <a href="#" class="position-absolute mb-6 me-n2" data-bs-toggle="tooltip" data-placement="top" title="" data-original-title="Verified">
               <img src="../assets/images/svg/checked-mark.svg" alt="" height="30" width="30">
               </a>
            </div>
            <div class="lh-1">
               <h2 class="mb-0">Jenny Wilson</h2>
               <p class="mb-0 d-block">@Jennywilson</p>
            </div>
         </div>
         <div>
            <a href="add-course.html" class="btn btn-primary btn-sm d-none d-md-block">Create New Course</a>
         </div>
      </div>
   </div>
</div>

Profile

Jenny Wilson

Front-end Developer, Designer

4.5 Instructor Rating
11,604
Students
32
Courses
12,230
Reviews

I am an Innovation designer focussing on UX/UI based in Berlin. As a creative resident at Figma explored the city of the future and how new technologies.

View Details 
 <div class="card">
                          <!-- Card Body -->
                          <div class="card-body">
                            <div class="d-flex align-items-center">
                              <div class="position-relative">
                                <img src="../assets/images/avatar/avatar-1.jpg" alt="" class="rounded-circle avatar-xl">
                                <a href="#" class="position-absolute mt-2 ms-n3" data-bs-toggle="tooltip"
                                  data-placement="top"  title="Verifed">
                                  <img src="../assets/images/svg/checked-mark.svg" alt="" height="30" width="30">
                                </a>
                              </div>
                              <div class="ms-4">
                                <h4 class="mb-0">Jenny Wilson</h4>
                                <p class="mb-1 fs-6">Front-end Developer, Designer</p>
                                <span class="text-warning lh-1 d-flex align-baseline">
                                  4.5<span class="fs-6 mx-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                                      fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                                      <path
                                        d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                                    </svg>
                                </span>Instructor Rating
                                </span>
                              </div>
                            </div>
                            <div class="border-top row mt-3 border-bottom mb-3 g-0">
                              <div class="col">
                                <div class="pe-1 ps-2 py-3">
                                  <h5 class="mb-0">11,604</h5>
                                  <span>Students</span>
                                </div>
                              </div>
                              <div class="col border-start">
                                <div class="pe-1 ps-3 py-3">
                                  <h5 class="mb-0">32</h5>
                                  <span>Courses</span>
                                </div>
                              </div>
                              <div class="col border-start">
                                <div class="pe-1 ps-3 py-3">
                                  <h5 class="mb-0">12,230</h5>
                                  <span>Reviews</span>
                                </div>
                              </div>
                            </div>
                            <p>I am an Innovation designer focussing on UX/UI based in Berlin. As a creative
                              resident at Figma explored the city of the future and how new technologies.</p>
                            <a href="#" class="btn btn-outline-secondary btn-sm">View
                              Details</a>
                          </div>
                        </div>