Profile
Beautiful profile cover panels.
Examples
Dropbox
4.5
2,391评论
<!-- Page Header -->
<div class="container pt-4">
<div class="page-header">
<!-- Profile Cover -->
<div class="profile-cover">
<div class="profile-cover-img-wrapper">
<img class="profile-cover-img" src="../assets/img/1920x400/img1.jpg" alt="图片描述内容">
</div>
</div>
<!-- End Profile Cover -->
<!-- Media -->
<div class="d-sm-flex align-items-lg-center pt-1 px-3 pb-3">
<div class="flex-shrink-0 mb-2 mb-sm-0 me-4">
<img class="avatar avatar-xl profile-cover-avatar shadow-sm" src="../assets/svg/brands/dropbox-icon.svg" alt="图片描述内容">
</div>
<div class="flex-grow-1">
<div class="row">
<div class="col-md mb-3 mb-md-0">
<h1 class="h2 mb-1">Dropbox <img class="avatar avatar-xs" src="../assets/svg/illustrations/top-vendor.svg" alt="Review rating" data-bs-toggle="tooltip" data-bs-placement="top" title="已声明的个人资料"></h1>
<!-- Rating -->
<div class="d-flex gap-1">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
<img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="14">
<span class="fw-semi-bold text-dark ms-1">4.5</span>
<span class="ms-1">2,391评论</span>
</div>
<!-- End Rating -->
</div>
<!-- End Col -->
<div class="col-md-auto align-self-md-end">
<div class="d-grid d-sm-flex gap-2">
<a class="btn btn-primary" href="#">54 Open jobs</a>
<a class="btn btn-outline-primary" href="#">
<i class="bi-person-plus-fill me-1"></i> Follow
</a>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Media -->
</div>
</div>
<!-- End Page Header -->