diff --git a/src/Components/mobileMockup/mobileMockup.css b/src/Components/mobileMockup/mobileMockup.css index 2dce8f8..88039ce 100644 --- a/src/Components/mobileMockup/mobileMockup.css +++ b/src/Components/mobileMockup/mobileMockup.css @@ -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; } \ No newline at end of file diff --git a/src/Components/mobileMockup/mobileMockup.js b/src/Components/mobileMockup/mobileMockup.js index 47db574..ab434ff 100644 --- a/src/Components/mobileMockup/mobileMockup.js +++ b/src/Components/mobileMockup/mobileMockup.js @@ -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 (
@@ -23,14 +31,41 @@ const MobileMockup = () => {
-
+
-
-
+
+
-
- + + + +
+
+ +

علیرضا

+
+
+ +

محمود

+
+
+ +

طهمورث

+
+
+ +

سهراب

+
+
+ +

گوزن

+
+
+ +

بابانوئل

+
+
); }; diff --git a/src/assets/images/alireza.png b/src/assets/images/alireza.png new file mode 100644 index 0000000..723e31c Binary files /dev/null and b/src/assets/images/alireza.png differ diff --git a/src/assets/images/babanoel.png b/src/assets/images/babanoel.png new file mode 100644 index 0000000..6a83563 Binary files /dev/null and b/src/assets/images/babanoel.png differ diff --git a/src/assets/images/gavazn.png b/src/assets/images/gavazn.png new file mode 100644 index 0000000..fcf1d34 Binary files /dev/null and b/src/assets/images/gavazn.png differ diff --git a/src/assets/images/mahmood.png b/src/assets/images/mahmood.png new file mode 100644 index 0000000..405b758 Binary files /dev/null and b/src/assets/images/mahmood.png differ diff --git a/src/assets/images/sohrab.png b/src/assets/images/sohrab.png new file mode 100644 index 0000000..bba93a9 Binary files /dev/null and b/src/assets/images/sohrab.png differ diff --git a/src/assets/images/tahmoores.png b/src/assets/images/tahmoores.png new file mode 100644 index 0000000..64246b0 Binary files /dev/null and b/src/assets/images/tahmoores.png differ