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/simple-line-icons/2.5.5/css/simple-line-icons.min.css" integrity="sha512-QKC1UZ/ZHNgFzVKSAhV5v5j73eeL9EEN289eKAEFaAjgAiobVAnVv/AGuPbXsKl1dNoel3kNr6PYnSiTzVVBCw==" crossorigin="anonymous" />
<section>
<div class="container">
<div class="section-heading title-style4 border-bottom padding-25px-bottom sm-padding-15px-bottom">
<h3><span>Our</span> Services</h3>
<p class="width-55 sm-width-75 xs-width-95">Business consulting excepteur sint occaecat cupidatat consulting non proident, sunt in culpa qui officia deserunt laborum market.</p>
</div>
<div class="row mt-60">
<div class="col-lg-4 col-md-6 margin-30px-bottom xs-margin-20px-bottom">
<div class="service-block4 h-100">
<div class="service-icon">
<i class="icon-tools"></i>
</div>
<div class="service-desc">
<h4>Contant Marketing</h4>
<h5>Market Plan</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 margin-30px-bottom xs-margin-20px-bottom">
<div class="service-block4 h-100">
<div class="service-icon">
<i class="icon-layers"></i>
</div>
<div class="service-desc">
<h4>Saving Investments</h4>
<h5>Finance Plan</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 margin-30px-bottom xs-margin-20px-bottom">
<div class="service-block4 h-100">
<div class="service-icon">
<i class="icon-hotairballoon"></i>
</div>
<div class="service-desc">
<h4>Detail Report</h4>
<h5>Detail Plan</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 sm-margin-30px-bottom xs-margin-20px-bottom">
<div class="service-block4 h-100">
<div class="service-icon">
<i class="icon-mobile"></i>
</div>
<div class="service-desc">
<h4>Investment Plan</h4>
<h5>Business Plan</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 xs-margin-20px-bottom">
<div class="service-block4 h-100">
<div class="service-icon">
<i class="icon-presentation"></i>
</div>
<div class="service-desc">
<h4>Media Marketing</h4>
<h5>Marketing Plan</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="service-block4 h-100">
<div class="service-icon">
<i class="icon-genius"></i>
</div>
<div class="service-desc">
<h4>Finance Analysis</h4>
<h5>Finance Plan</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</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;}
.service-block4 {
position: relative;
border: 1px solid #f7f7f7;
background: #fff;
box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
border-radius: 5px;
overflow: hidden;
padding: 30px
}
.service-block4:before {
position: absolute;
top: -42px;
right: -100px;
z-index: 0;
content: " ";
width: 250px;
height: 120px;
background: #f7f7f7;
border-bottom-left-radius: 0;
transition: all 0.4s ease-in-out;
transform: rotate(45deg);
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out
}
.service-block4:hover:before {
background: #86bc42
}
.service-block4 .service-icon {
position: absolute;
top: 18px;
right: 18px;
z-index: 1;
text-align: center
}
.service-block4 i {
color: #86bc42;
font-size: 38px;
line-height: normal;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
margin-bottom: 0
}
.service-block4:hover i {
color: #fff
}
.service-block4 .service-desc {
position: relative
}
.service-block4 .service-desc h4 {
margin-bottom: 8px;
font-size: 18px;
font-weight: 600
}
.service-block4 .service-desc h5 {
margin-bottom: 5px;
font-size: 12px;
font-weight: 500
}
.service-block4 .service-desc h5:after {
content: '';
display: block;
width: 80px;
height: 2px;
background: #86bc42;
margin-top: 10px;
margin-bottom: 15px;
-moz-transition-duration: .4s;
-ms-transition-duration: .4s;
-webkit-transition-duration: .4s;
-o-transition-duration: .4s;
transition-duration: .4s
}
.service-block4 p {
margin-top: 25px;
padding-right: 50px;
margin-bottom: 0
}
@media screen and (max-width: 1199px) {
.service-block4:before {
right: -110px
}
.service-block4 .service-desc h4 {
font-size: 16px;
margin-bottom: 5px
}
.service-block4 p {
padding-right: 40px;
margin-top: 20px
}
.service-block4 i {
font-size: 34px
}
}
@media screen and (max-width: 991px) {
.service-block4 {
padding: 25px
}
.service-block4 .service-desc h4 {
font-size: 15px
}
.service-block4 i {
font-size: 32px
}
.service-block4 p {
margin-top: 15px;
padding-right: 30px
}
}
@media screen and (max-width: 767px) {
.service-block4 {
padding: 20px
}
.service-block4:before {
right: -130px
}
.service-block4 i {
font-size: 28px
}
.service-block4 .service-icon {
top: 13px;
right: 12px
}
}
.margin-30px-bottom {
margin-bottom: 30px;
}
