From d3e2b34cb43d061374b6264a9cf15387cc0bc7df Mon Sep 17 00:00:00 2001 From: Pedram Keshavarzi Date: Wed, 12 Jan 2022 16:35:41 +0330 Subject: [PATCH] first section of mobile mockup done --- src/Components/mobileMockup/mobileMockup.css | 50 ++++++++++++++++++++ src/Components/mobileMockup/mobileMockup.js | 19 ++++++++ 2 files changed, 69 insertions(+) create mode 100644 src/Components/mobileMockup/mobileMockup.css create mode 100644 src/Components/mobileMockup/mobileMockup.js diff --git a/src/Components/mobileMockup/mobileMockup.css b/src/Components/mobileMockup/mobileMockup.css new file mode 100644 index 0000000..2547a4e --- /dev/null +++ b/src/Components/mobileMockup/mobileMockup.css @@ -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); +} \ No newline at end of file diff --git a/src/Components/mobileMockup/mobileMockup.js b/src/Components/mobileMockup/mobileMockup.js new file mode 100644 index 0000000..fcb7917 --- /dev/null +++ b/src/Components/mobileMockup/mobileMockup.js @@ -0,0 +1,19 @@ +import React from 'react'; +import './mobileMockup.css'; + +const MobileMockup = () => { + return ( +
+
+
+

پشتیبانی آنلاین👋

+

اگر نیاز به پشتیبانی داشتید تیم ما در کنار شماست

+
+
+
+
+
+ ); +}; + +export default MobileMockup; \ No newline at end of file