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 start
2. 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 again
3. 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>
<div class="container light-section">
<h3>Meet our Lectors:</h3>
<div class="row mt-60">
<div class="col-lg-6 text-md-left">
<div class="canvas-caption__wrapper row">
<div class="col-md-6 text-center">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" width="277" height="396" class="border-1" alt=""/>
<div class="canvas-anim">
<canvas class="canvas"></canvas>
<div class="table">
<div class="table-cell">
<div class="container">
<svg class="background-svg" width="400px" height="300px" viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><defs><filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.095 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix><feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset><feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur><feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite><feColorMatrix values="0 0 0 0 0.647959184 0 0 0 0 0.549016553 0 0 0 0 0.549016553 0 0 0 0.35 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode><feMergeNode in="shadowMatrixInner1"></feMergeNode></feMerge></filter></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Artboard-1" fill="#6E9AA4"><path d="M187.785156,200 L180,232 L66,232 L58.2148437,200 L187.785156,200 Z" id="Rectangle-1" filter="url(#filter-1)"></path><path d="M349.760339,49.1234675 L375.905579,277.733833 L199.999999,277.733834 L43.9648432,143.710938 L349.760339,49.1234675 Z" class="Triangle-1" filter="url(#filter-1)"></path><path d="M399.8936,96.1889997 L29.4623426,250.140552 L0,36.4302476 L399.8936,96.1889997 Z" class="Triangle-2" filter="url(#filter-1)"></path></g></g></svg>
<div class="container-info">
<h1>
Hey! <br/>I'm <span>Anna Batura</span>, <span class="info">Manager</span>
</h1>
<div class="box">
<a class="box-item" href="#/" target="_blank"><i class="fa fa-behance"></i></a><a class="box-item" href="#/" target="_blank"><i class="fa fa-codepen"></i></a><a class="box-item" href="#/" target="_blank"><i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 flex-item-middle mt-50 mt-md-0">
<div class="p-30 pr-md-50">
<h4 class="third-font text-medium">Anna Batura</h4>
<p>Rule meat likeness grass above under creeping make male after you're for grass dominion don't man heaven third creepeth his years, were dry him won't i their all he our one seasons grass moving that itself i.</p>
<a href="#/" class="btn btn-sm btn-primary-1">CONTACT HER</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-lg-offset-6 mt-70 mt-lg-custom text-md-left">
<div class="canvas-caption__wrapper-1 row">
<div class="col-md-6 text-center col-md-order-1">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" width="280" height="397" class="border-2" alt=""/>
<div class="canvas-anim">
<canvas class="canvas"></canvas>
<div class="table">
<div class="table-cell">
<div class="container">
<svg class="background-svg" width="400px" height="300px" viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><defs><filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox"><feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.095 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix><feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset><feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur><feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite><feColorMatrix values="0 0 0 0 0.647959184 0 0 0 0 0.549016553 0 0 0 0 0.549016553 0 0 0 0.35 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode><feMergeNode in="shadowMatrixInner1"></feMergeNode></feMerge></filter></defs><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="#51A367"><path d="M187.785156,200 L180,232 L66,232 L58.2148437,200 L187.785156,200 Z" filter="url(#filter-1)"></path><path d="M349.760339,49.1234675 L375.905579,277.733833 L199.999999,277.733834 L43.9648432,143.710938 L349.760339,49.1234675 Z" class="Triangle-1" filter="url(#filter-1)"></path><path d="M399.8936,96.1889997 L29.4623426,250.140552 L0,36.4302476 L399.8936,96.1889997 Z" class="Triangle-2" filter="url(#filter-1)"></path></g></g></svg>
<div class="container-info">
<h1>
Hey! <br/>I'm <span>John Doe</span>, <span class="info">Designer</span>
</h1>
<div class="box">
<a class="box-item" href="#/" target="_blank"><i class="fa fa-behance"></i></a><a class="box-item" href="#/" target="_blank"><i class="fa fa-codepen"></i></a><a class="box-item" href="#/" target="_blank"><i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 flex-item-middle mt-50 mt-md-0">
<div class="p-30 pl-md-50">
<h4 class="third-font text-medium">John Doe</h4>
<p>Herb fourth they're waters gathered female moveth from make light evening yielding, meat lesser creeping he. Air living seasons appear land dry evening also given in won't. </p>
<a href="#/" class="btn btn-sm btn-primary">CONTACT HIM</a>
</div>
</div>
</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:#eee;
}
.pb-120 {
padding-bottom: 120px;
}
.pt-90 {
padding-top: 90px;
}
html .mt-60, html .global-wrapper .mt-60 {
margin-top: 60px;
}
/*
* Canvas Caption Wrapper
* =======
*/
.canvas-caption__wrapper, .canvas-caption__wrapper-1 {
position: relative;
color: #222;
padding: 0;
z-index: 1;
}
.canvas-caption__wrapper h1, .canvas-caption__wrapper-1 h1, .canvas-caption__wrapper h2, .canvas-caption__wrapper-1 h2, .canvas-caption__wrapper h3, .canvas-caption__wrapper-1 h3, .canvas-caption__wrapper h4, .canvas-caption__wrapper-1 h4, .canvas-caption__wrapper h5, .canvas-caption__wrapper-1 h5, .canvas-caption__wrapper h6, .canvas-caption__wrapper-1 h6, .canvas-caption__wrapper .h1, .canvas-caption__wrapper-1 .h1, .canvas-caption__wrapper .h2, .canvas-caption__wrapper-1 .h2, .canvas-caption__wrapper .h3, .canvas-caption__wrapper-1 .h3, .canvas-caption__wrapper .h4, .canvas-caption__wrapper-1 .h4, .canvas-caption__wrapper .h5, .canvas-caption__wrapper-1 .h5, .canvas-caption__wrapper .h6, .canvas-caption__wrapper-1 .h6 {
color: #222;
}
.canvas-caption__wrapper img, .canvas-caption__wrapper-1 img {
position: relative;
top: -30px;
}
.canvas-caption__wrapper:before, .canvas-caption__wrapper-1:before {
display: block;
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -100vw;
left: -100vw;
background: #E4E2E0;
border-right: 5px solid #6E9AA4;
transform: skewX(-20deg);
z-index: -1;
}
@media (min-width: 1200px) {
.canvas-caption__wrapper:before, .canvas-caption__wrapper-1:before {
right: -30px;
}
}
@media (min-width: 1200px) {
.canvas-caption__wrapper-1:after {
left: 50px;
right: -100vw;
}
}
.canvas-caption__wrapper-1:before {
right: -100vw;
left: -100vw;
background: #E4E2E0;
border-left: 5px solid #51A367;
border-right: none;
transform: skewX(-20deg);
}
@media (min-width: 1200px) {
.canvas-caption__wrapper-1:before {
left: -30px;
}
}
.canvas-caption__wrapper img, .canvas-caption__wrapper-1 img {
position: relative;
top: -30px;
}
.border-1 {
border: 5px solid #6E9AA4;
}
/*
* Canvas Caption
* ==============
*/
.canvas-anim {
position: absolute;
bottom: -100px;
left: 52%;
transform: translateX(-50%);
}
@media (min-width: 992px) {
.canvas-anim {
left: 52%;
}
}
@media (min-width: 1200px) {
.canvas-anim {
left: -10px;
transform: translateX(0);
}
}
@media (min-width: 1800px) {
.canvas-anim {
left: 60px;
}
}
.canvas-anim .canvas, .canvas-anim .background-svg, .canvas-anim .container-info {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.canvas-anim .container-info {
z-index: 2;
}
.canvas-anim h1 {
font-weight: 400;
font-size: 18px;
font-family: "Raleway", sans-serif !important;
line-height: 24px;
letter-spacing: 0.04em;
color: #fff;
text-align: left;
margin: 85px 37px 27px;
}
.canvas-anim h1 .info {
display: block;
color: #fff;
font-size: 14px;
line-height: 24px;
letter-spacing: 0.04em;
}
.canvas-anim .box {
text-align: right;
padding: 0px 30px;
}
.canvas-anim .box-item {
display: inline-block;
color: #fff;
font-size: 30px;
padding-right: 20px;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.canvas-anim .table {
display: table;
width: 100%;
height: 100%;
}
.canvas-anim .table-cell {
display: table-cell;
vertical-align: middle;
}
.canvas-anim .container {
position: relative;
width: 350px;
height: 260px;
max-width: 100%;
margin: 0 auto;
}
.canvas-anim .container:before, .canvas-anim .container:after {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 600px;
height: 100px;
}
.canvas-anim .Triangle-1 {
-webkit-animation: box 42.5s infinite;
animation: box 42.5s infinite;
}
.canvas-anim .Triangle-2 {
-webkit-animation: box2 12.5s infinite;
animation: box2 12.5s infinite;
}
@keyframes box2 {
10% {
-moz-transform: rotate(1deg);
-ms-transform: rotate(1deg);
-webkit-transform: rotate(1deg);
transform: rotate(1deg);
}
80% {
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
}
@keyframes box {
10% {
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
80% {
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
}
}
.canvas-anim .box-item:hover {
opacity: 0.6;
}
@media (min-width: 992px) {
.text-md-left {
text-align: left;
}
}
@media (min-width: 1200px) {
.canvas-caption__wrapper:before, .canvas-caption__wrapper-1:before {
right: -30px;
}
}
.canvas-caption__wrapper:before, .canvas-caption__wrapper-1:before {
display: block;
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -100vw;
left: -100vw;
background: #E4E2E0;
border-right: 5px solid #6E9AA4;
transform: skewX(-20deg);
z-index: -1;
}
@media (min-width: 1200px) {
.canvas-caption__wrapper-1:before {
left: -30px;
}
}
.canvas-caption__wrapper-1:before {
right: -100vw;
left: -100vw;
background: #E4E2E0;
border-left: 5px solid #51A367;
border-right: none;
transform: skewX(-20deg);
}
@media (min-width: 1200px) {
.canvas-caption__wrapper:before, .canvas-caption__wrapper-1:before {
right: -30px;
}
}
.canvas-caption__wrapper:before, .canvas-caption__wrapper-1:before {
display: block;
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -100vw;
left: -100vw;
background: #E4E2E0;
border-right: 5px solid #6E9AA4;
transform: skewX(-20deg);
z-index: -1;
}