phone component forthSection made

master
Pedram Keshavarzi 3 years ago
parent 7f1a26a2f0
commit dbb05c9268
  1. 38
      src/Components/mobileMockup/mobileMockup.css
  2. 15
      src/Components/mobileMockup/mobileMockup.js

@ -76,9 +76,11 @@
}
.mobileMockup .thirdsection{
display: flex;
justify-content: center;
align-items: center;
width:90%;
justify-content: center;
align-items: center;
width:90%;
padding-bottom: 20px;
border-bottom: 1px solid rgba(238,238,238,0.7);
}
.mobileMockup .thirdsection div{
display: flex;
@ -103,4 +105,34 @@ width:90%;
padding: 0px;
margin:0px;
color:gray;
}
.mobileMockup .forthSection{
margin-top: 15px;
display: flex;
width:90%;
}
.mobileMockup .forthSection .messageBox{
color:#484848;
padding: 5px;
font-size: 0.67em;
background: white;
margin:15px;
margin-bottom: 3px;
border-radius:7px ;
box-shadow: 0px 0px 9px rgba(0,0,0,0.1);
}
.mobileMockup .forthSection img{
width: 50px;
height: 50px;
background: rgba(0,0,0,0.1);
border-radius: 15px;
margin-left:5px;
}
.mobileMockup .forthSection .messageTime{
font-size: 0.6em;
float: left;
margin-left: 5%;
margin-top: 0px;
color:rgba(0,0,0,0.3);
}

@ -66,6 +66,21 @@ const MobileMockup = () => {
<p>بابانوئل</p>
</div>
</div>
<div className='forthSection'>
<img src={tahmoores} />
<div>
<div className='messageBox'>
<p>
سلام به روباتیو خوش اومدی
من اینجا هستم تا به شما کمک کنم تا نهایت از امکانات ما لذت ببرید.ضمنا اگر کمیخواستید من در خدمت شما هستم تا شب هم اینجا می مونم آره فکر کردی من ولت میکنم نخیر
</p>
</div>
<p className='messageTime'>12:30</p>
</div>
</div>
</div>
);
};

Loading…
Cancel
Save