Mobile MockUp Done

master
Pedram Keshavarzi 3 years ago
parent 01082fd8b6
commit e2d4c5c0f6
  1. 51
      src/Components/mobileMockup/mobileMockup.css
  2. 17
      src/Components/mobileMockup/mobileMockup.js
  3. BIN
      src/assets/images/vuesax-linear-attach-square.png
  4. BIN
      src/assets/images/vuesax-linear-emoji-normal.png

@ -1,7 +1,7 @@
.mobileMockup{ .mobileMockup{
border-radius: 29px; border-radius: 29px;
background-color: white; background-color: white;
box-shadow: 0px 0px 33px rgba(0,0,0,0.1); box-shadow: 0px 0px 33px rgba(0,0,0,0.05);
width: 18em; width: 18em;
max-width: 90vw; max-width: 90vw;
min-height: 35em; min-height: 35em;
@ -10,6 +10,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border:1px solid rgba(0,0,0,0.07);
margin-bottom:50px;
} }
.mobileMockup .firstSection{ .mobileMockup .firstSection{
width:90%; width:90%;
@ -184,3 +186,50 @@
.nirooGerefteh img{ .nirooGerefteh img{
padding: 2.5px; padding: 2.5px;
} }
.mobileMockup .writeSth{
width:90%;
margin: 10px 0px;
display: flex;
align-items: center;
}
.mobileMockup .writeSth input{
height: 40px;
padding: 2.5px 10px;
border: 1px solid #EEF5FF;
border-radius: 0px 10px 10px 0px;
border-left: 0px solid red;
font-family: 'iranSans';
background-color: white;
width:75%;
outline: none;
}
.mobileMockup .writeSth button{
background-color: white;
height: 47px;
padding: 2.5px;
display: flex;
border-radius: 10px 0px 0px 10px;
border: 1px solid #EEF5FF;
border-right: 0px;
align-items: center;
justify-content: space-between;
width: 25%;
}
.mobileMockup .writeSth input:focus{
outline: none;
}
.mobileMockUpStand{
background-color: white;
width: 24em;
height: 24em;
border-radius: 50%;
margin-bottom:-34em ;
margin-top: 10em;
box-shadow:0px 0px 53px rgba(13,65,255,0.1);
}
.mobileMockupcontainer{
display: flex;
flex-direction: column;
align-items: center;
}

@ -13,13 +13,21 @@ import tahmoores from '../../assets/images/tahmoores.png';
import sohrab from '../../assets/images/sohrab.png'; import sohrab from '../../assets/images/sohrab.png';
import gavazn from '../../assets/images/gavazn.png'; import gavazn from '../../assets/images/gavazn.png';
import babanoel from '../../assets/images/babanoel.png'; import babanoel from '../../assets/images/babanoel.png';
import StartButton from '../buttons/startBtn'; import StartButton from '../buttons/startBtn';
import smileyIcon from '../../assets/images/vuesax-linear-emoji-normal.png';
import fileIcon from '../../assets/images/vuesax-linear-attach-square.png';
import logoRiz from '../../assets/images/logo-riz.png'; import logoRiz from '../../assets/images/logo-riz.png';
const MobileMockup = () => { const MobileMockup = () => {
return ( return (
<div className='mobileMockupcontainer'>
<div className='mobileMockUpStand'></div>
<div className='mobileMockup'> <div className='mobileMockup'>
<div className='firstSection'> <div className='firstSection'>
<div> <div>
@ -109,6 +117,15 @@ const MobileMockup = () => {
<img src={logoRiz} /> <img src={logoRiz} />
نیرو گرفته از بازو نیرو گرفته از بازو
</div> </div>
<div className="writeSth">
<input type='text' placeholder='پیامی بنویسید' />
<button>
<img src={smileyIcon} />
<img src={fileIcon} />
</button>
</div>
</div>
</div> </div>
); );
}; };

Binary file not shown.

After

Width:  |  Height:  |  Size: 703 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 701 B

Loading…
Cancel
Save