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 id="cadre">
<div id="first"></div>
<div id="second"></div>
<span class="zocial-windows" title="windows"></span>
<span class="zocial-appstore" title="apple"></span>
<span class="zocial-android" title="android"></span>
<div id="traitnoir"></div>
<div id="traitblanc"></div>
<span class="zocial-facebook" title="facebook"></span>
<span class="zocial-twitter" title="twitter"></span>
<span class="zocial-googleplus" title="google plus"></span>
</div>
</div>
);
}
export default App;
4. Now we need to add below code into our my-awesome-project/src/App.css file :
@import url(https://weloveiconfonts.com/api/?family=zocial);
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
font-size:5em;
text-shadow:0px 0px 5px #666,0px 0px 30px #DDD;
}
.zocial-facebook:hover, .zocial-twitter:hover, .zocial-googleplus:hover, .zocial-windows:hover, .zocial-appstore:hover, .zocial-android:hover
{
color:#5bc0de;
transition:all ease 0.5s;
}
.zocial-facebook, .zocial-twitter, .zocial-googleplus{
position:relative;
top:33px;
margin-left:60px;
color:#EEE;
transition:all ease 0.5s;
}
.zocial-twitter{
margin-left:90px
}
.zocial-windows, .zocial-appstore, .zocial-android{
position:relative;
top:10px;
margin-left:70px;
color:#EEE;
transition:all ease 0.5s;
}
#cadre{
width:500px;
height:250px;
background: -webkit-linear-gradient(-90deg, #C3C1BF 0%, #B7B4B0 100%);
margin: 50px auto;
border-radius:6px;
-webkit-border-radius:6px;
box-shadow:0px 0px 2px #555, 0px 0px 10px #999,0px 0px 60px #CCC;
}
#traitnoir{
width:400px;
height:1px;
background:#666;
position:relative;
top:32px;
left:50px;
}
#first{
width:490px;
height:1px;
background-color:#DDD;
position:relative;
left:5px;
}
#traitblanc{
width:400px;
height:1px;
background:#FFF;
position:relative;
top:30px;
left:50px;
}
#second{
width:1px;
height:242px;
position:absolute;
background-color:#DDD;
top:54px;
}
p{
position:relative;
font-size:1.5em;
color:#EEE;
text-align:center;
}