1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:
npx create-react-app my-awesome-project
cd my-awesome-project
npm start2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install [email protected] --save
npm start //For start project again3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.2.96/css/materialdesignicons.min.css" integrity="sha512-LX0YV/MWBEn2dwXCYgQHrpa9HJkwB+S+bnBpifSOTO1No27TqNMKYoAn6ff2FBh03THAzAiiCwQ+aPX+/Qt/Ow==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="container">
<div class="row">
<div class="col-xl-8">
<div class="card">
<div class="card-body pb-0">
<div class="row align-items-center">
<div class="col-md-3">
<div class="text-center border-end">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-fluid avatar-xxl rounded-circle" alt=""/>
<h4 class="text-primary font-size-20 mt-3 mb-2">Jansh Wells</h4>
<h5 class="text-muted font-size-13 mb-0">Web Designer</h5>
</div>
</div>
<div class="col-md-9">
<div class="ms-3">
<div>
<h4 class="card-title mb-2">Biography</h4>
<p class="mb-0 text-muted">Hi I'm Jansh,has been the industry's standard
dummy text To an English person alteration text.</p>
</div>
<div class="row my-4">
<div class="col-md-12">
<div>
<p class="text-muted mb-2 fw-medium"><i class="mdi mdi-email-outline me-2"></i>[email protected]
</p>
<p class="text-muted fw-medium mb-0"><i class="mdi mdi-phone-in-talk-outline me-2"></i>418-955-4703
</p>
</div>
</div>
</div>
<ul class="nav nav-tabs nav-tabs-custom border-bottom-0 mt-3 nav-justfied" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link px-4 " href="https://bootdey.com/snippets/view/profile-projects" target="__blank">
<span class="d-block d-sm-none"><i class="fas fa-home"></i></span>
<span class="d-none d-sm-block">Projects</span>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link px-4 " href="https://bootdey.com/snippets/view/profile-task-with-team-cards" target="__blank">
<span class="d-block d-sm-none"><i class="mdi mdi-menu-open"></i></span>
<span class="d-none d-sm-block">Tasks</span>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link px-4 active" data-bs-toggle="tab" href="#team-tab" role="tab" aria-selected="true">
<span class="d-block d-sm-none"><i class="mdi mdi-account-group-outline"></i></span>
<span class="d-none d-sm-block">Team</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="tab-content p-4">
<div class="tab-pane active show" id="team-tab" role="tabpanel">
<h4 class="card-title mb-4">Team</h4>
<div class="row">
<div class="col-xl-4 col-md-6" id="team-1">
<div class="card">
<div class="card-body">
<div class="d-flex mb-4">
<div class="flex-grow-1 align-items-start">
<div class="avatar-group float-start flex-grow-1">
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Terrell Soto">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Ruhi Shah">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-block" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Denny Silva">
<div class="avatar-sm">
<div class="avatar-title rounded-circle bg-primary">
D
</div>
</div>
</a>
</div>
</div>
</div>
<div class="dropdown ms-2">
<a href="#/" class="dropdown-toggle font-size-16 text-muted" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-dots-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="javascript: void(0);">Edit</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger leave-team" data-id="1" data-bs-toggle="modal" data-bs-target=".bs-add-leave-team" href="javascript: void(0);">
Leave Team</a>
</div>
</div>
</div>
<div>
<h5 class="mb-1 font-size-17">Marketing</h5>
<p class="text-muted font-size-13 mb-0">4 Projects</p>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6" id="team-2">
<div class="card">
<div class="card-body">
<div class="d-flex mb-4">
<div class="flex-grow-1 align-items-start">
<div class="avatar-group float-start flex-grow-1">
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Mark Burke" data-bs-original-title="Mark Burke">
<img src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Julia Halsey" data-bs-original-title="Julia Halsey">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Ayaan Curry" data-bs-original-title="Ayaan Curry">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Jansh Wells" data-bs-original-title="Jansh Wells">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Denny Silva" data-bs-original-title="Denny Silva">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
</div>
</div>
<div class="dropdown ms-2">
<a href="#/" class="dropdown-toggle font-size-16 text-muted" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-dots-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="javascript: void(0);">Edit</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger leave-team" data-id="2" data-bs-toggle="modal" data-bs-target=".bs-add-leave-team" href="javascript: void(0);">Leave
Team</a>
</div>
</div>
</div>
<div>
<h5 class="mb-1 font-size-17">Blog Template</h5>
<p class="text-muted font-size-13 mb-0">5 Projects</p>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6" id="team-3">
<div class="card">
<div class="card-body">
<div class="d-flex mb-4">
<div class="flex-grow-1 align-items-start">
<div class="avatar-group float-start flex-grow-1">
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Mark Burke" data-bs-original-title="Mark Burke">
<img src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Julia Halsey" data-bs-original-title="Julia Halsey">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Ayaan Curry" data-bs-original-title="Ayaan Curry">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Ayaan Curry" data-bs-original-title="Ayaan Curry">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
</div>
</div>
<div class="dropdown ms-2">
<a href="#/" class="dropdown-toggle font-size-16 text-muted" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-dots-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="javascript: void(0);">Edit</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger leave-team" data-id="3" data-bs-toggle="modal" data-bs-target=".bs-add-leave-team" href="javascript: void(0);">Leave
Team</a>
</div>
</div>
</div>
<div>
<h5 class="mb-1 font-size-17">Multipurpose Landing</h5>
<p class="text-muted font-size-13 mb-0">2 Projects</p>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6" id="team-4">
<div class="card">
<div class="card-body">
<div class="d-flex mb-4">
<div class="flex-grow-1 align-items-start">
<div class="avatar-group float-start flex-grow-1">
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="William Zawacki" data-bs-original-title="William Zawacki">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Jansh Wells" data-bs-original-title="Jansh Wells">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Hattie Bustos" data-bs-original-title="Hattie Bustos">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
</div>
</div>
<div class="dropdown ms-2">
<a href="#/" class="dropdown-toggle font-size-16 text-muted" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-dots-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="javascript: void(0);">Edit</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger leave-team" data-id="4" data-bs-toggle="modal" data-bs-target=".bs-add-leave-team" href="javascript: void(0);">Leave
Team</a>
</div>
</div>
</div>
<div>
<h5 class="mb-1 font-size-17">Brand Logo Design</h5>
<p class="text-muted font-size-13 mb-0">5 Projects</p>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6" id="team-5">
<div class="card">
<div class="card-body">
<div class="d-flex mb-4">
<div class="flex-grow-1 align-items-start">
<div class="avatar-group float-start flex-grow-1">
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-block" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="James Ross">
<div class="avatar-sm">
<div class="avatar-title rounded-circle bg-purple">
J
</div>
</div>
</a>
</div>
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Jansh Wells" data-bs-original-title="Jansh Wells">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Dan Gibson" data-bs-original-title="Dan Gibson">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
</div>
</div>
<div class="dropdown ms-2">
<a href="#/" class="dropdown-toggle font-size-16 text-muted" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-dots-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="javascript: void(0);">Edit</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger leave-team" data-id="5" data-bs-toggle="modal" data-bs-target=".bs-add-leave-team" href="javascript: void(0);">
Leave Team</a>
</div>
</div>
</div>
<div>
<h5 class="mb-1 font-size-17">Landing Page</h5>
<p class="text-muted font-size-13 mb-0">3 Projects</p>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6" id="team-6">
<div class="card">
<div class="card-body">
<div class="d-flex mb-4">
<div class="flex-grow-1 align-items-start">
<div class="avatar-group float-start flex-grow-1">
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Terrell Soto" data-bs-original-title="Terrell Soto">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Ruhi Shah" data-bs-original-title="Ruhi Shah">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-block" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Denny Silva">
<div class="avatar-sm">
<div class="avatar-title rounded-circle bg-primary">
D
</div>
</div>
</a>
</div>
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Jansh Wells" data-bs-original-title="Jansh Wells">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
</div>
</div>
<div class="dropdown ms-2">
<a href="#/" class="dropdown-toggle font-size-16 text-muted" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-dots-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#/">Edit</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger leave-team" data-id="6" data-bs-toggle="modal" data-bs-target=".bs-add-leave-team" href="javascript: void(0);">Leave
Team</a>
</div>
</div>
</div>
<div>
<h5 class="mb-1 font-size-17">New Create Admin UI</h5>
<p class="text-muted font-size-13 mb-0">1 Projects</p>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6" id="team-7">
<div class="card mb-0">
<div class="card-body">
<div class="d-flex mb-4">
<div class="flex-grow-1 align-items-start">
<div class="avatar-group float-start flex-grow-1">
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Abel Owen" data-bs-original-title="Abel Owen">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
<div class="avatar-group-item">
<a href="javascript: void(0);" class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Jansh Wells" data-bs-original-title="Jansh Wells">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="rounded-circle avatar-sm"/>
</a>
</div>
</div>
</div>
<div class="dropdown ms-2">
<a href="#/" class="dropdown-toggle font-size-16 text-muted" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-dots-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="javascript: void(0);">Edit</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger leave-team" href="javascript: void(0);" data-id="7" data-bs-toggle="modal" data-bs-target=".bs-add-leave-team">Leave Team</a>
</div>
</div>
</div>
<div>
<h5 class="mb-1 font-size-17">Creating Dashboard UI Kit</h5>
<p class="text-muted font-size-13 mb-0">6 Projects</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card">
<div class="card-body">
<div class="pb-2">
<h4 class="card-title mb-3">About</h4>
<p>Hi I'm Jansh, has been the industry's standard dummy text To an English
person, it will seem like
simplified.</p>
<ul class="ps-3 mb-0">
<li>it will seem like simplified.</li>
<li>To achieve this, it would be necessary to have uniform pronunciation</li>
</ul>
</div>
<hr/>
<div class="pt-2">
<h4 class="card-title mb-4">My Skill</h4>
<div class="d-flex gap-2 flex-wrap">
<span class="badge badge-soft-secondary p-2">HTML</span>
<span class="badge badge-soft-secondary p-2">Bootstrap</span>
<span class="badge badge-soft-secondary p-2">Scss</span>
<span class="badge badge-soft-secondary p-2">Javascript</span>
<span class="badge badge-soft-secondary p-2">React</span>
<span class="badge badge-soft-secondary p-2">Angular</span>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div>
<h4 class="card-title mb-4">Personal Details</h4>
<div class="table-responsive">
<table class="table table-bordered mb-0">
<tbody>
<tr>
<th scope="row">Name</th>
<td>Jansh Wells</td>
</tr>
<tr>
<th scope="row">Location</th>
<td>California, United States</td>
</tr>
<tr>
<th scope="row">Language</th>
<td>English</td>
</tr>
<tr>
<th scope="row">Website</th>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div>
<h4 class="card-title mb-4">Work Experince</h4>
<ul class="list-unstyled work-activity mb-0">
<li class="work-item" data-date="2020-21">
<h6 class="lh-base mb-0">ABCD Company</h6>
<p class="font-size-13 mb-2">Web Designer</p>
<p>To achieve this, it would be necessary to have uniform grammar, and more
common words.</p>
</li>
<li class="work-item" data-date="2019-20">
<h6 class="lh-base mb-0">XYZ Company</h6>
<p class="font-size-13 mb-2">Graphic Designer</p>
<p class="mb-0">It will be as simple as occidental in fact, it will be
Occidental person, it will seem like simplified.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{
margin-top:20px;
background:#f7f8fa
}
.avatar-xxl {
height: 7rem;
width: 7rem;
}
.card {
margin-bottom: 20px;
-webkit-box-shadow: 0 2px 3px #eaedf2;
box-shadow: 0 2px 3px #eaedf2;
}
.pb-0 {
padding-bottom: 0!important;
}
.font-size-16 {
font-size: 16px!important;
}
.avatar-title {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #038edc;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-weight: 500;
height: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
}
.bg-soft-primary {
background-color: rgba(3,142,220,.15)!important;
}
.rounded-circle {
border-radius: 50%!important;
}
.nav-tabs-custom .nav-item .nav-link.active {
color: #038edc;
}
.nav-tabs-custom .nav-item .nav-link {
border: none;
}
.nav-tabs-custom .nav-item .nav-link.active {
color: #038edc;
}
.avatar-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-left: 12px;
}
.border-end {
border-right: 1px solid #eff0f2 !important;
}
.d-inline-block {
display: inline-block!important;
}
.badge-soft-danger {
color: #f34e4e;
background-color: rgba(243,78,78,.1);
}
.badge-soft-warning {
color: #f7cc53;
background-color: rgba(247,204,83,.1);
}
.badge-soft-success {
color: #51d28c;
background-color: rgba(81,210,140,.1);
}
.avatar-group .avatar-group-item {
margin-left: -14px;
border: 2px solid #fff;
border-radius: 50%;
-webkit-transition: all .2s;
transition: all .2s;
}
.avatar-sm {
height: 2rem;
width: 2rem;
}
.nav-tabs-custom .nav-item {
position: relative;
color: #343a40;
}
.nav-tabs-custom .nav-item .nav-link.active:after {
-webkit-transform: scale(1);
transform: scale(1);
}
.nav-tabs-custom .nav-item .nav-link::after {
content: "";
background: #038edc;
height: 2px;
position: absolute;
width: 100%;
left: 0;
bottom: -2px;
-webkit-transition: all 250ms ease 0s;
transition: all 250ms ease 0s;
-webkit-transform: scale(0);
transform: scale(0);
}
.badge-soft-secondary {
color: #74788d;
background-color: rgba(116,120,141,.1);
}
.badge-soft-secondary {
color: #74788d;
}
.work-activity {
position: relative;
color: #74788d;
padding-left: 5.5rem
}
.work-activity::before {
content: "";
position: absolute;
height: 100%;
top: 0;
left: 66px;
border-left: 1px solid rgba(3,142,220,.25)
}
.work-activity .work-item {
position: relative;
border-bottom: 2px dashed #eff0f2;
margin-bottom: 14px
}
.work-activity .work-item:last-of-type {
padding-bottom: 0;
margin-bottom: 0;
border: none
}
.work-activity .work-item::after,.work-activity .work-item::before {
position: absolute;
display: block
}
.work-activity .work-item::before {
content: attr(data-date);
left: -157px;
top: -3px;
text-align: right;
font-weight: 500;
color: #74788d;
font-size: 12px;
min-width: 120px
}
.work-activity .work-item::after {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
left: -26px;
top: 3px;
background-color: #fff;
border: 2px solid #038edc
}
