Profile component - 5
COPY
<section class="my-5 px-3">
<div class="row justify-content-center">
<div class="col-md-4">
<div class="card">
<img src="/component/images/nature/neom-Wh-2.jpg" alt=".." class="img-fluid">
<div class="card-body">
<div class="d-flex justify-content-center" style="margin-top: -70px;">
<a href="#" class="avatar avatar-xl position-relative">
<img src="/component/images/avatar/m4.jpg" width="100" alt="Avatar" class="img-fluid rounded-circle border-2">
<div class="badge badge-circle bg-success badge-msg-n fw-normal p-2 rounded-circle border-2 position-absolute" style="top: 70px; right: 0px;">
</div>
</a>
</div>
<div class="text-center my-4">
<a href="#" class="d-block h5 mb-0 fw-semibold">Julienne Moore</a>
<span class="d-block text-sm text-dark text-opacity-50">julianne@company.com</span>
</div>
<!-- Stats -->
<div class="d-flex border-top mt-3 pt-4 pb-2">
<div class="col-4 text-center">
<a href="#" class="h5 fw-bolder mb-0">141</a>
<span class="d-block text-muted small">Posts</span>
</div>
<div class="col-4 text-center">
<a href="#" class="h6 fw-bolder mb-0">1245</a>
<span class="d-block text-muted small">Following</span>
</div>
<div class="col-4 text-center">
<a href="#" class="h6 fw-bolder mb-0">5.04K</a>
<span class="d-block text-muted small">Followers</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #009ce4;
--bs-primary-rgb: 0, 156, 228;
--bs-secondary: #000000;
}
body {
font-family: 'Inter', sans-serif;
font-size: .90rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
a {
text-decoration: none;
color: var(--bs-primary);
}
.card {
margin: auto;
box-shadow: 0px 3px 3px -1px rgba(10, 22, 70, .1), 0px 0px 1px 0px rgba(10, 22, 70, .06);
}
.border-2 {
border: 3px solid #ffffff !important;
}
Profile component - 4
COPY
<section class="my-5 px-3">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="card">
<img src="/component/images/nature/dreem-evening-3.jpg" alt=".." class="img-fluid">
<div class="card-body">
<div class="d-flex justify-content-start align-items-center">
<a href="#" class="avatar avatar-xl">
<img src="/component/images/avatar/m3.jpg" width="120" alt="Avatar" class="img-fluid rounded-3 border-2" style="margin-top: -60px;">
</a>
<div class="ms-4">
<span class="d-block text-sm text-dark text-opacity-50 fw-medium">Profile</span>
<a href="#" class="d-block h4 mb-0 fw-bold text-decoration-none">Rayond LAL</a>
</div>
<div class="ms-auto ">
<a href="#" class="btn btn-sm btn-dark rounded-1">Follow</a>
</div>
</div>
<nav class="menu navbar navbar-expand-md py-1 mt-3">
<button class="navbar-toggler ms-sm-auto mx-3 me-md-0 p-2 p-sm-2 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCategoryCollapse" aria-controls="navbarCategoryCollapse" aria-expanded="false" aria-label="Toggle navigation">
<i class="bi bi-list fs-1"></i>
</button>
<div class="navbar-collapse collapse" id="navbarCategoryCollapse">
<ul class="navbar-nav navbar-nav-scroll nav-pills-primary-soft">
<li class="nav-item active"> <a class="nav-link" href="#">Overview</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Projects</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Education</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Experience</a></li>
</ul>
</div>
</nav>
<div class="py-5 text-muted small">
<p>I'd love design beuatiful produt which you will love it. I'd love design beuatiful produt which you
will love it. Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum
quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate.</p>
<p>Beuatiful produt which you will love it. I'd love design beuatiful produt which you will love it.
Magnam dolores commodi suscipit.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #009ce4;
--bs-primary-rgb: 0, 156, 228;
--bs-secondary: #000000;
}
body {
font-family: 'Inter', sans-serif;
font-size: .90rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
.card {
margin: auto;
box-shadow: 0px 3px 3px -1px rgba(10, 22, 70, .1), 0px 0px 1px 0px rgba(10, 22, 70, .06);
}
.card-body {
padding: 1rem 3rem;
}
.menu .nav-link {
text-decoration: none;
font-weight: 500;
color: rgb(var(--bs-dark-rgb), .7);
border-radius: 5px;
margin: 0 .1rem;
padding: .5rem 1.5rem !important
}
.menu .nav-link:hover,
.menu .active .nav-link {
color: var(--bs-white) !important;
background: rgb(var(--bs-primary-rgb));
}
.border-2 {
border: 3px solid #ffffff !important;
}
Profile component - 3
COPY
<section class="my-5 px-3">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="card">
<img src="/component/images/nature/neom-Wh-2.jpg" alt=".." class="img-fluid">
<div class="card-body">
<div class="d-flex justify-content-center" style="margin-top: -120px;">
<a href="#" class="avatar avatar-xl">
<img src="/component/images/avatar/m1.jpg" width="200" alt="Avatar" class="img-fluid rounded-circle border">
</a>
</div>
<div class="text-center my-4">
<!-- Title -->
<a href="#" class="d-block h5 mb-0">Julienne Moore</a>
<!-- Subtitle -->
<span class="d-block text-sm text-dark text-opacity-50">julianne.moore@company.com</span>
</div>
<div class="py-2">
<p class="text-center">I'd love design beuatiful produt which you will love it. I'd love design beuatiful produt which you will love it. Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate.</p>
<p class="text-center">Beuatiful produt which you will love it. I'd love design beuatiful produt which you will love it. Magnam dolores commodi suscipit.</p>
</div>
<div class="row justify-content-center">
<div class="col-6">
<div class="section-title text-center mb-5">
<h2 class="fw-bold text-primary text-uppercase pb-2 mb-2">Skills</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint
consectetur velit. Quisquam quos quisquam cupiditate.</p>
</div>
<div class="row justify-content-center">
<div class="col-md-8 mb-5">
<div><span class="fw-bolder">HTML <i class="text-primary mx-3">100%</i></span></div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div><span class="fw-bolder"> CSS <i class="text-primary mx-3">90%</i> </span></div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div><span class="fw-bolder"> JavaScript <i class="text-primary mx-3">75%</i></span></div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div><span class="fw-bolder"> PHP <i class="text-primary mx-3">80%</i></span></div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span class="fw-bolder"> WordPress/CMS <i class="text-primary mx-3">90%</i></span>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span class="fw-bolder"> Photoshop <i class="text-primary mx-3">55%</i></span>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Stats -->
<div class="d-flex border-top mt-3 py-5">
<div class="col-4 text-center">
<a href="#" class="h4 font-bolder mb-0">25</a>
<span class="d-block text-sm">Posts</span>
</div>
<div class="col-4 text-center">
<a href="#" class="h4 font-bolder mb-0">350</a>
<span class="d-block text-sm">Following</span>
</div>
<div class="col-4 text-center">
<a href="#" class="h4 font-bolder mb-0">1.5K</a>
<span class="d-block text-sm">Followers</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #009ce4;
--bs-primary-rgb: 0, 156, 228;
--bs-secondary: #000000;
}
body {
font-family: 'Inter', sans-serif;
font-size: .90rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
a,
.nav-link {
text-decoration: none;
color: var(--bs-primary);
}
.card {
margin: auto;
box-shadow: 0px 3px 3px -1px rgba(10, 22, 70, .1), 0px 0px 1px 0px rgba(10, 22, 70, .06);
}
.progress {
border-radius: 1px;
height: 10px;
}
.progress-bar {
background: rgb(var(--bs-primary-rgb), 0.8);
}
Profile component - 1
COPY
<section class="my-5 px-3">
<div class="row justify-content-center">
<div class="col-md-4">
<div class="d-block px-2 px-lg-0">
<div class="card overflow-hidden rounded-1 shadow-sm border">
<div style="background-image:url(/component/images/nature-1.jpg); height: 100px; background-position: center; background-size: cover; background-repeat: no-repeat;">
</div>
<div class="card-body pt-0">
<div class="text-center">
<!-- Avatar -->
<div class="mb-3" style="margin-top: -50px;">
<a href="#">
<img class="border border-white rounded-circle" src="/component/images/avatar/01.jpg" width="100" alt="Avatar">
</a>
</div>
<!-- Info -->
<h5 class="mb-0">
<a href="#">Raymon LAL </a>
</h5>
<small>UX Designer</small>
<p class="mt-4 mb-5">I'd love design beuatiful produt which you will love it. I'd love design beuatiful
produt which you will love it.</p>
<!-- User stat start -->
<div class="hstack gap-3 gap-xl-3 mx-auto justify-content-between text-muted">
<div class="w-100">
<h6 class="mb-0">141,056</h6>
<small>Post</small>
</div>
<div class="vr"></div>
<div class="w-100">
<h6 class="mb-0">4.5K</h6>
<small>Followers</small>
</div>
<div class="vr"></div>
<div class="w-100">
<h6 class="mb-0">4065</h6>
<small>Following</small>
</div>
</div>
</div>
</div>
<div class="card-footer text-center py-2">
<a class="" href="#">View Profile </a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #009ce4;
--bs-secondary: #000000;
}
body {
font-family: 'Inter', sans-serif;
font-size: .90rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
a,
.nav-link {
text-decoration: none;
color: var(--bs-primary);
}
More coming soon