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>
<div class="container">
<div class="row justify-content-center text-center">
<div class="col-lg-12">
<h2 class="font-300">How It Works?</h2>
<p class="text-muted mt-4 title-subtitle mx-auto">It is a long established fact that a reader will be of a page when established fact looking at its layout.</p>
</div>
</div>
<div class="timeline-page mt-5">
<div class="timeline-item">
<div class="row">
<div class="col-lg-6">
<div class="duration date-label-left">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-fluid rounded-circle"/>
</div>
</div>
<div class="col-lg-6">
<div class="works works-description-right">
<h4>Tell us your idea</h4>
<p class="timeline-subtitle">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,</p>
</div>
</div>
</div>
</div>
<div class="timeline-item">
<div class="row">
<div class="col-lg-6">
<div class="works works-description-left">
<h4>Debut with users</h4>
<p class="timeline-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lacinia magna vel molestie faucibus. Donec auctor et urnaLorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-lg-6">
<div class="duration duration-right ">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="img-fluid rounded-circle"/>
</div>
</div>
</div>
</div>
<div class="timeline-item">
<div class="row">
<div class="col-lg-6">
<div class="duration date-label-left">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="" class="img-fluid rounded-circle"/>
</div>
</div>
<div class="col-lg-6">
<div class="works works-description-right">
<h4>Research and Develop</h4>
<p class="timeline-subtitle">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis.</p>
</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:#F0F8FF;
}
.timeline-page {
padding: 10px 0;
position: relative;
margin-top: 35px;
}
.timeline-page::after {
content: "";
height: 95%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 1px;
background-color: #e8e8e8;
}
.timeline-item {
margin-bottom: 80px;
}
.timeline-page .timeline-item .date-label-left {
text-align: center;
margin-right: 20px;
position: relative;
}
.timeline-page .timeline-item .date-label-left::after,
.timeline-page .timeline-item .duration-right::after {
border: 3px solid rgba(255, 255, 255, 0.8);
border-radius: 50%;
content: "";
height: 20px;
position: absolute;
top: 20px;
width: 20px;
z-index: 1;
}
.timeline-page .timeline-item .date-label-left::after {
right: -45px;
}
.timeline-page .timeline-item .duration-right::after {
left: -45px;
}
.timeline-page .timeline-item .works-description-right {
text-align: left;
margin-left: 15px;
float: left;
border-radius: 0;
padding: 20px 0;
}
.timeline-page .timeline-item .duration-right {
text-align: center;
margin-left: 20px;
position: relative;
}
.timeline-page .timeline-item .works-description-left {
text-align: right;
margin-right: 15px;
float: right;
border-radius: 0;
padding: 20px 0;
}
.timeline-page h4,
.works-description-left h4 {
font-size: 18px;
margin-top: 0;
text-transform: capitalize;
}
.timeline-subtitle {
line-height: 26px;
color: #666;
}
.bg-custom, .btn-custom, .timeline-page .timeline-item .date-label-left::after, .timeline-page .timeline-item .duration-right::after, .back-to-top:hover {
background-color: #f6576e;
}
