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" />
<div class="container">
<div class="row mt-n1-9">
<div class="col-md-6 col-xl-3 mt-1-9 wow fadeInUp" data-wow-delay=".2s" style={{/*visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;*/}}>
<div class="team-style07">
<div class="team-thumb mb-1-9">
<div class="thumb"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="rounded-circle" alt="..."/></div>
<div class="team-social">
<ul class="styled-icons">
<li><a class="styled-icons-item" href="#!"><i class="fab fa-facebook-f"></i></a></li>
<li><a class="styled-icons-item" href="#!"><i class="fab fa-twitter"></i></a></li>
<li><a class="styled-icons-item" href="#!"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
<h3 class="h5 mb-1"><a href="#!">Elmer Chavez</a></h3>
<p class="mb-0">Founder</p>
</div>
</div>
<div class="col-md-6 col-xl-3 mt-1-9 wow fadeInUp" data-wow-delay=".3s" style={{/*visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;*/}}>
<div class="team-style07">
<div class="team-thumb mb-1-9">
<div class="thumb"><img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="rounded-circle" alt="..."/></div>
<div class="team-social">
<ul class="styled-icons">
<li><a class="styled-icons-item" href="#!"><i class="fab fa-facebook-f"></i></a></li>
<li><a class="styled-icons-item" href="#!"><i class="fab fa-twitter"></i></a></li>
<li><a class="styled-icons-item" href="#!"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
<h3 class="h5 mb-1"><a href="#!">Elmira Milani</a></h3>
<p class="mb-0">Co-Founder</p>
</div>
</div>
<div class="col-md-6 col-xl-3 mt-1-9 wow fadeInUp" data-wow-delay=".4s" style={{/*visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;*/}}>
<div class="team-style07">
<div class="team-thumb mb-1-9">
<div class="thumb"><img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="rounded-circle" alt="..."/></div>
<div class="team-social">
<ul class="styled-icons">
<li><a class="styled-icons-item" href="#!"><i class="fab fa-facebook-f"></i></a></li>
<li><a class="styled-icons-item" href="#!"><i class="fab fa-twitter"></i></a></li>
<li><a class="styled-icons-item" href="#!"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
<h3 class="h5 mb-1"> <a href="#!">Dorcas Laueri</a></h3>
<p class="mb-0">Developer</p>
</div>
</div>
<div class="col-md-6 col-xl-3 mt-1-9 wow fadeInUp" data-wow-delay=".5s" style={{/*visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;*/}}>
<div class="team-style07">
<div class="team-thumb mb-1-9">
<div class="thumb"><img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="rounded-circle" alt="..."/></div>
<div class="team-social">
<ul class="styled-icons">
<li><a class="styled-icons-item" href="#!"><i class="fab fa-facebook-f"></i></a></li>
<li><a class="styled-icons-item" href="#!"><i class="fab fa-twitter"></i></a></li>
<li><a class="styled-icons-item" href="#!"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
<h3 class="h5 mb-1"> <a href="#!">Steven Miloler</a></h3>
<p class="mb-0">Designer</p>
</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:#EE82EE;
}
img {
max-width: 100%;
height: auto;
vertical-align: top;
}
.mb-1 {
margin-bottom: 0.25rem!important;
}
.h5, h5 {
font-size: 1.25rem;
}
a {
text-decoration:none;
}
.team-style07 {
background: #fff;
text-align: center;
padding: 30px;
box-shadow: 0px 10px 30px 0px rgb(26 29 72 / 7%);
border-radius: 15px;
transition: all .3s ease-in-out;
}
.team-style07 {
background: #fff;
text-align: center;
padding: 30px;
box-shadow: 0px 10px 30px 0px rgba(26, 29, 72, 0.07);
border-radius: 15px;
transition: all .3s ease-in-out
}
.team-style07:hover {
background: #292dc2
}
.team-style07:hover h3 a,
.team-style07:hover p {
color: #fff
}
.team-style07 .team-thumb {
position: relative
}
.team-style07 .team-thumb .team-social {
position: absolute;
bottom: 0;
left: 0;
right: 0
}
.team-style07:hover .team-thumb .team-social .styled-icons li:nth-child(1) {
left: 40px;
position: absolute;
bottom: 0;
z-index: 10;
opacity: 1;
transition: all .4s ease-in-out 0s
}
.team-style07 .team-thumb .team-social .styled-icons li:nth-child(1) {
position: absolute;
opacity: 0;
left: -10px;
bottom: -20px;
z-index: 10;
transition: all .3s ease-in-out
}
.team-style07 .team-thumb .team-social .styled-icons li:nth-child(2) {
position: absolute;
opacity: 0;
left: 0;
right: 0;
bottom: -40px;
transition: all .3s ease-in-out
}
.team-style07 .team-thumb .team-social .styled-icons li:nth-child(3) {
opacity: 0;
position: absolute;
right: 0;
bottom: -20px;
transition: all .3s ease-in-out
}
.team-style07:hover .team-thumb .team-social .styled-icons li:nth-child(3) {
position: absolute;
right: 40px;
bottom: 0;
opacity: 1;
transition: all .4s ease-in-out 0s
}
.team-style07:hover .team-thumb .team-social .styled-icons li:nth-child(2) {
position: absolute;
left: 0;
right: 0;
bottom: -20px;
opacity: 1;
transition: all .5s ease-in-out 0s
}
.team-style07 .team-thumb .team-social .styled-icons li a {
background: #3457f1;
color: #fff;
height: 40px;
width: 40px;
line-height: 40px;
border: none;
font-size: 16px;
transition: all .3s ease-in-out
}
.mb-1-9, .my-1-9 {
margin-bottom: 1.9rem;
}
.styled-icons a {
border: 2px solid transparent;
color: #333;
display: inline-block;
font-size: 16px;
height: 36px;
line-height: 2;
margin-right: 4px;
position: relative;
text-align: center;
text-decoration: none;
width: 36px;
transition: all .2s ease;
border-radius: 50%
}
.styled-icons li {
display: inline-block;
margin-bottom: 5px;
margin-top: 0;
padding-left: 0 !important
}
