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" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"/>
<div class="container bootstrap snippets bootdey">
<section id="team" class="white-bg padding-top-bottom">
<div class="container bootstrap snippets bootdey">
<h1 class="section-title text-center page-title">Meet our team</h1>
<p class="section-description text-center">We are a small team with great skills. See the faces behind the lines of code. </p>
<div class="row member-content">
<div class="col-sm-3 col-sm-offset-1 member-thumb fade-right in">
<img class="img-responsive img-center img-thumbnail img-circle" src="https://bootdey.com/img/Content/avatar/avatar7.png" alt=""/>
<h4>John Doe</h4>
<p class="title">Lead Designer & Founder</p>
</div>
<div class="col-sm-7">
<div class="details">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<ul class="social-content">
<li><a href="mailto:[email protected]"><i class="fa fa-envelope fa-fw"></i></a></li>
<li><a href="#link"><i class="fa fa-twitter fa-fw"></i></a></li>
<li><a href="#link"><i class="fa fa-facebook fa-fw"></i></a></li>
<li><a href="#link"><i class="fa fa-linkedin fa-fw"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="row member-content right">
<div class="col-sm-3 col-sm-push-8 member-thumb">
<img class="img-responsive img-center img-thumbnail img-circle" src="https://bootdey.com/img/Content/avatar/avatar6.png" alt=""/>
<h4>John Doe</h4>
<p class="title">Designer</p>
</div>
<div class="col-sm-7 col-sm-pull-2">
<div class="details">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<ul class="social-content">
<li><a href="mailto:[email protected]"><i class="fa fa-envelope fa-fw"></i></a></li>
<li><a href="#link"><i class="fa fa-twitter fa-fw"></i></a></li>
<li><a href="#link"><i class="fa fa-facebook fa-fw"></i></a></li>
<li><a href="#link"><i class="fa fa-linkedin fa-fw"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="row member-content">
<div class="col-sm-3 col-sm-offset-1 member-thumb">
<img class="img-responsive img-center img-thumbnail img-circle" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt=""/>
<h4>John Doe</h4>
<p class="title">Lead Developer</p>
</div>
<div class="col-sm-7 ">
<div class="details">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<ul class="social-content">
<li><a href="mailto:[email protected]"><i class="fa fa-envelope fa-fw"></i></a></li>
<li><a href="#link"><i class="fa fa-twitter fa-fw"></i></a></li>
<li><a href="#link"><i class="fa fa-facebook fa-fw"></i></a></li>
<li><a href="#link"><i class="fa fa-linkedin fa-fw"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{
background:#ddd;
}
.page-title{
color:#5bc0de;
}
.member-content .social-content li a{
display:inline-block;
padding:0;
min-width:40px;
height:40px;
font-size:21px;
line-height:40px;
color:#5cc9df;
border-radius:5px;
box-shadow:0 3px 0 0 transparent;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.member-content .details {
margin:20px 0 0 20px;
position:relative;
padding:30px;
padding-left:100px;
background:#f5f5f5;
border-radius:10px;
box-shadow:5px 5px 0 rgba(0,0,0,0.08);
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.member-content {
margin-bottom:30px;
}
.member-thumb{
text-align:center;
}
.member-thumb h4{
font-size:21px;
margin:10px 0;
}
.member-thumb .title{
font-size:18px;
margin:10px 0;
color:#5CC9DF;
}
.member-content:hover .details {
background:#5bc0de;
color:#fff;
}
.member-content.right .details {
margin:20px 20px 0 0;
box-shadow:-5px 5px 0 rgba(0,0,0,0.08);
}
.member-content .details:after {
display:block;
content:"";
position:absolute;
left:-18px;
top:30px;
width:0px;
height:0px;
background:transparent;
border:20px solid transparent;
border-left:20px solid #f5f5f5;
box-shadow:-3px 0 0 rgba(0,0,0,0.08);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-transition:border-left-color .3s ease-out;
transition:border-left-color .3s ease-out;
}
.member-content.right .details:after {
position:absolute;
left:auto;
right:-17px;
border-left:20px solid transparent;
border-right:20px solid #f5f5f5;
box-shadow:3px 0 0 0 rgba(0,0,0,0.08);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transition:border-right-color .3s ease-out;
transition:border-right-color .3s ease-out;
}
.member-content:hover .details:after {
border-left-color:#5CC9DF;
}
.member-content.right:hover .details:after {
border-left-color:transparent;
border-right-color:#5CC9DF;
}
.member-content .details:before {
display:block;
content:"\201D";
position:absolute;
left:20px;
top:50px;
font-size:120px;
font-weight:800;
line-height:60px;
font-family:Arial;
color:#5cc9df;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.member-content:hover .details:before {
color:#fff;
}
.member-content .social-content {
list-style:none;
margin:0;
padding:0;
}
.member-content .social-content li {
display:inline;
text-align:center;
margin:0 2px;
}
.member-content:hover .social-content li a {
color:#fff;
}
.member-content .social-content li a:hover{
background:#fff;
color:#5cc9df;
box-shadow:0 3px 0 0 rgba(0,0,0,0.05);
}
