first section of mobile mockup done

master
Pedram Keshavarzi 3 years ago
parent 2d9ec48558
commit d3e2b34cb4
  1. 50
      src/Components/mobileMockup/mobileMockup.css
  2. 19
      src/Components/mobileMockup/mobileMockup.js

@ -0,0 +1,50 @@
.mobileMockup{
border-radius: 29px;
background-color: white;
box-shadow: 0px 0px 33px rgba(0,0,0,0.1);
width: 20em;
max-width: 90vw;
min-height: 35em;
padding: 0.25em 1em;
direction: rtl;
display: flex;
flex-direction: column;
align-items: center;
}
.mobileMockup .firstSection{
width:90%;
margin-top:2em;
display: flex;
justify-content: space-between;
vertical-align: middle;
align-items : center;
}
.mobileMockup .firstSection div{
display: inline;
flex-direction: column;
vertical-align: middle;
}
.mobileMockup .firstSection h3{
font-size: 20px;
margin-bottom: -10px;
}
.mobileMockup .firstSection p{
font-size: 11px;
}
.mobileMockup .firstSection .mobileGoDown{
border-radius: 7px;
padding: 12px;
pointer-events: none;
background-repeat: no-repeat;
display: flex;
width: 0.7em;
height: 0.7em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='10' height='10' viewBox='0 0 50 80' xml:space='preserve'%3E%3Cpolyline fill='none' stroke='%23BBBBBB' stroke-width='8' stroke-linecap='round' stroke-linejoin='round' points=' 0.375,0.375 45.63,38.087 0.375,75.8 '/%3E%3C/svg%3E");
background-color: #F6F6F6;
background-size: 20px;
background-position: center;
vertical-align: middle;
align-items : center;
transform: rotate(90deg);
}

@ -0,0 +1,19 @@
import React from 'react';
import './mobileMockup.css';
const MobileMockup = () => {
return (
<div className='mobileMockup'>
<div className='firstSection'>
<div>
<h3>پشتیبانی آنلاین👋</h3>
<p>اگر نیاز به پشتیبانی داشتید تیم ما در کنار شماست</p>
</div>
<div className='mobileGoDown'>
</div>
</div>
</div>
);
};
export default MobileMockup;
Loading…
Cancel
Save