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.13.1/css/all.min.css" integrity="sha256-2XFplPlrFClt0bIdPgpz8H7ojnk10H69xRqd9+uTShA=" crossorigin="anonymous" />
<section>
<div class="container">
<div class="text-center mb-5">
<h5 class="text-primary h6">Our Projects</h5>
<h2 class="display-20 display-md-18 display-lg-16">Our latest projects</h2>
</div>
<div class="row">
<div class="col-sm-6 col-lg-3 mb-1-9">
<div class="card-wrapper">
<div class="card-img"><img src="https://www.bootdey.com/image/280x280/FFB6C1/000000" alt="..."/></div>
<div class="card-body">
<div>
<h3 class="h5">Kitchen Cleaning</h3>
<p class="display-30">Proin gravida nibh vel velit auctor alique.</p>
<a href="#!" class="read-more">view project</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 mb-1-9">
<div class="card-wrapper">
<div class="card-img"><img src="https://www.bootdey.com/image/280x280/6495ED/000000" alt="..."/></div>
<div class="card-body">
<div>
<h3 class="h5">Window Cleaning</h3>
<p class="display-30">Gravida proin nibh vel velit auctor alique.</p>
<a href="#!" class="read-more">view project</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 mb-1-9">
<div class="card-wrapper">
<div class="card-img"><img src="https://www.bootdey.com/image/280x280/008B8B/000000" alt="..."/></div>
<div class="card-body">
<div>
<h3 class="h5">Storage Cleaning</h3>
<p class="display-30">Nibh proin gravida vel velit auctor alique.</p>
<a href="#!" class="read-more">view project</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 mb-1-9">
<div class="card-wrapper">
<div class="card-img"><img src="https://www.bootdey.com/image/280x280/00CED1/000000" alt="..."/></div>
<div class="card-body">
<div>
<h3 class="h5">Floor Cleaning</h3>
<p class="display-30">Vel proin gravida nibh velit auctor alique.</p>
<a href="#!" class="read-more">view project</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 mb-1-9 mb-lg-0">
<div class="card-wrapper">
<div class="card-img"><img src="https://www.bootdey.com/image/280x280/483D8B/000000" alt="..."/></div>
<div class="card-body">
<div>
<h3 class="h5">Office Cleaning</h3>
<p class="display-30">Auctor proin gravida nibh vel velit alique.</p>
<a href="#!" class="read-more">view project</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 mb-1-9 mb-lg-0">
<div class="card-wrapper">
<div class="card-img"><img src="https://www.bootdey.com/image/280x280/FF69B4/000000" alt="..."/></div>
<div class="card-body">
<div>
<h3 class="h5">Carpet Cleaning</h3>
<p class="display-30">Aliquetenean proin gravida nibh vel velit.</p>
<a href="#!" class="read-more">view project</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 mb-1-9 mb-sm-0">
<div class="card-wrapper">
<div class="card-img"><img src="https://www.bootdey.com/image/280x280/87CEFA/000000" alt="..."/></div>
<div class="card-body">
<div>
<h3 class="h5">Toilet Cleaning</h3>
<p class="display-30">Nibh auctor proin gravida vel velit aliquet.</p>
<a href="#!" class="read-more">view project</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card-wrapper">
<div class="card-img"><img src="https://www.bootdey.com/image/280x280/20B2AA/000000" alt="..."/></div>
<div class="card-body">
<div>
<h3 class="h5">Glass Cleaning</h3>
<p class="display-30">Gravida aliquetenean proin nibh vel velit.</p>
<a href="#!" class="read-more">view project</a>
</div>
</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{
background:#eee;
margin-top:20px;}
.card-wrapper {
position: relative;
overflow: hidden;
}
.card-wrapper .card-img {
text-align: center;
position: relative;
overflow: hidden;
transition: all 0.3s ease-out;
}
.card-wrapper .card-img img {
transition: all 0.3s ease-in-out;
border-radius: 0.25rem;
border-radius: 0.25rem;
}
.card-wrapper .card-body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
visibility: hidden;
padding: 30px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
transform: translateX(-100%);
transition: 0.8s;
z-index: 11;
}
.card-wrapper:before {
content: "";
width: 100%;
position: absolute;
height: 100%;
top: 0;
right: 100%;
z-index: 9;
transition: 0.8s;
background: rgba(0, 186, 238, 0.82);
border-radius: 0.25rem;
}
.card-wrapper:hover:before {
right: 0;
}
.card-wrapper h3,
.card-wrapper p {
color: #fff;
}
.card-wrapper .read-more {
color: #fff;
}
.card-wrapper .read-more:after {
color: #fff;
}
.card-wrapper:hover .card-body {
visibility: visible;
transform: translateX(0px);
}
.card-wrapper:hover .backgound-color {
right: 0;
}
.mb-1-9, .my-1-9 {
margin-bottom: 1.9rem;
}
@media (min-width: 992px){
.mb-lg-0, .my-lg-0 {
margin-bottom: 0 !important;
}
}
.read-more:after {
content: '\f0a9';
font-family: Font Awesome\ 5 Free;
font-weight: 600;
padding-left: 8px;
font-weight: 900;
color: #00baee;
vertical-align: middle;
}
