parent
2d9ec48558
commit
d3e2b34cb4
2 changed files with 69 additions and 0 deletions
@ -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…
Reference in new issue