phone component third section made and completed

master
Pedram Keshavarzi 3 years ago
parent 6b31b12807
commit 7f1a26a2f0
  1. 42
      src/Components/mobileMockup/mobileMockup.css
  2. 37
      src/Components/mobileMockup/mobileMockup.js
  3. BIN
      src/assets/images/alireza.png
  4. BIN
      src/assets/images/babanoel.png
  5. BIN
      src/assets/images/gavazn.png
  6. BIN
      src/assets/images/mahmood.png
  7. BIN
      src/assets/images/sohrab.png
  8. BIN
      src/assets/images/tahmoores.png

@ -54,23 +54,53 @@
border:2px solid rgba(0,0,0,0.1); border:2px solid rgba(0,0,0,0.1);
border-radius: 12px; border-radius: 12px;
width:90%; width:90%;
margin: 20px 0px; margin: 10px 0px;
align-items: center; align-items: center;
vertical-align: middle; vertical-align: middle;
} }
.mobileMockup .secondSection div{ .mobileMockup .secondSection div{
width:20%; width:15%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 40px; height: 40px;
margin:0px 2.5%; margin:0px 5%;
border-bottom: 3px solid #1577F8;
} }
.mobileMockup .secondSection div img{ .mobileMockup .secondSection div img{
height: 25px; height: 25px;
width:25px; width:25px;
cursor: pointer; cursor: pointer;
} }
.mobileMockup .secondSection div.choosen{
border-bottom: 3px solid #1577F8;
}
.mobileMockup .thirdsection{
display: flex;
justify-content: center;
align-items: center;
width:90%;
}
.mobileMockup .thirdsection div{
display: flex;
flex-direction: column;
align-items: center;
width:16%;
min-height: 50px;
padding: 0px;
margin: 2px;
}
.mobileMockup .thirdsection div img{
padding: 0px;
margin: 0px;
width:100%;
height: 100%;
background: rgba(0,0,0,0.2);
border-radius: 12px;
}
.mobileMockup .thirdsection div p{
font-size: 0.7em;
padding: 0px;
margin:0px;
color:gray;
}

@ -6,6 +6,14 @@ import bookIcon from '../../assets/images/vuesax-bold-book.png';
import chatIcon from '../../assets/images/vuesax-bold-message-text.png'; import chatIcon from '../../assets/images/vuesax-bold-message-text.png';
import smsIcon from '../../assets/images/vuesax-bold-sms.png'; import smsIcon from '../../assets/images/vuesax-bold-sms.png';
import alireza from '../../assets/images/alireza.png';
import mahmood from '../../assets/images/mahmood.png';
import tahmoores from '../../assets/images/tahmoores.png';
import sohrab from '../../assets/images/sohrab.png';
import gavazn from '../../assets/images/gavazn.png';
import babanoel from '../../assets/images/babanoel.png';
const MobileMockup = () => { const MobileMockup = () => {
return ( return (
<div className='mobileMockup'> <div className='mobileMockup'>
@ -27,10 +35,37 @@ const MobileMockup = () => {
<div> <div>
<img src={smsIcon} /> <img src={smsIcon} />
</div> </div>
<div> <div className='choosen'>
<img src={chatIcon} /> <img src={chatIcon} />
</div> </div>
</div> </div>
<div className='thirdsection'>
<div>
<img src={alireza} />
<p>علیرضا</p>
</div>
<div>
<img src={mahmood} />
<p>محمود</p>
</div>
<div>
<img src={tahmoores} />
<p>طهمورث</p>
</div>
<div>
<img src={sohrab} />
<p>سهراب</p>
</div>
<div>
<img src={gavazn} />
<p>گوزن</p>
</div>
<div>
<img src={babanoel} />
<p>بابانوئل</p>
</div>
</div>
</div> </div>
); );
}; };

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

Loading…
Cancel
Save