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 (
علیرضا
+محمود
+طهمورث
+سهراب
+گوزن
+بابانوئل
+