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. 45
      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-radius: 12px;
width:90%;
margin: 20px 0px;
margin: 10px 0px;
align-items: center;
vertical-align: middle;
}
.mobileMockup .secondSection div{
width:20%;
width:15%;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
margin:0px 2.5%;
border-bottom: 3px solid #1577F8;
margin:0px 5%;
}
.mobileMockup .secondSection div img{
height: 25px;
width:25px;
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 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 = () => {
return (
<div className='mobileMockup'>
@ -23,14 +31,41 @@ const MobileMockup = () => {
</div>
<div>
<img src={bookIcon} />
</div>
</div>
<div>
<img src={smsIcon} />
</div>
<div>
</div>
<div className='choosen'>
<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>
);
};

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