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/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
<section class="section gray-bg" id="resume">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="section-title">
<h2>Experience</h2>
<p>I design and develop services for customers of all sizes, specializing in creating stylish, modern websites</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 m-15px-tb">
<div class="resume-box">
<ul>
<li>
<div class="icon">
<i class="fas fa-user-graduate"></i>
</div>
<span class="time">2019 - Present</span>
<h5>Art Director - Facebook Inc</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li>
<div class="icon">
<i class="fas fa-user-graduate"></i>
</div>
<span class="time">2019 - Present</span>
<h5>Art Director - Facebook Inc</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li>
<div class="icon">
<i class="fas fa-user-graduate"></i>
</div>
<span class="time">2019 - Present</span>
<h5>Art Director - Facebook Inc</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
</ul>
</div>
</div>
<div class="col-lg-6 m-15px-tb">
<div class="resume-box">
<ul>
<li>
<div class="icon">
<i class="fas fa-briefcase"></i>
</div>
<span class="time">2019 - Present</span>
<h5>Art Director - Facebook Inc</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li>
<div class="icon">
<i class="fas fa-briefcase"></i>
</div>
<span class="time">2019 - Present</span>
<h5>Art Director - Facebook Inc</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li>
<div class="icon">
<i class="fas fa-briefcase"></i>
</div>
<span class="time">2019 - Present</span>
<h5>Art Director - Facebook Inc</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</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;}
.section {
padding: 100px 0;
position: relative;
}
.gray-bg {
background-color: #f5f5f5;
}
.section-title h2 {
font-weight: 700;
color: #20247b;
font-size: 45px;
margin: 0 0 15px;
border-left: 5px solid #fc5356;
padding-left: 15px;
}
.section-title {
padding-bottom: 45px;
}
.section-title p {
margin: 0;
font-size: 18px;
}
/* Resume Box
---------------------*/
.resume-box {
background: #ffffff;
box-shadow: 0 0 1.25rem rgba(31, 45, 61, 0.08);
border-radius: 10px;
}
.resume-box ul {
margin: 0;
padding: 30px 20px;
list-style: none;
}
.resume-box li {
position: relative;
padding: 0 20px 0 60px;
margin: 0 0 30px;
}
.resume-box li:last-child {
margin-bottom: 0;
}
.resume-box li:after {
content: "";
position: absolute;
top: 0px;
left: 20px;
border-left: 1px dashed #fc5356;
bottom: 0;
}
.resume-box .icon {
width: 40px;
height: 40px;
position: absolute;
left: 0;
right: 0;
color: #fc5356;
line-height: 40px;
background: #ffffff;
text-align: center;
z-index: 1;
border: 1px dashed;
border-radius: 50%;
}
.resume-box .time {
background: #fc5356;
color: #ffffff;
font-size: 10px;
padding: 2px 10px;
display: inline-block;
margin-bottom: 12px;
border-radius: 20px;
font-weight: 600;
}
.resume-box h5 {
font-weight: 700;
color: #20247b;
font-size: 16px;
margin-bottom: 10px;
}
.resume-box p {
margin: 0;
}
.resume-box li:after {
content: "";
position: absolute;
top: 0px;
left: 20px;
border-left: 1px dashed #fc5356;
bottom: 0;
}
