diff --git a/src/views/Contact/index.js b/src/views/Contact/index.js
index 92755b8..aeddfdc 100644
--- a/src/views/Contact/index.js
+++ b/src/views/Contact/index.js
@@ -16,10 +16,15 @@ const maxMobileSize = 550;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
- p : window.innerWidth > maxDesktopSize ? 14: window.innerWidth / 80,
- span : window.innerWidth > maxDesktopSize ? 16: window.innerWidth / 80,
- }
-}
+ p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
+ span: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
+ },
+ mobile: {
+ h1: window.innerWidth > maxMobileSize ? 25 : window.innerWidth / 16,
+ p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 28,
+ span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 28,
+ },
+};
export default class Contact extends Component {
render() {
return (
@@ -58,11 +63,15 @@ export default class Contact extends Component {
style={{ width: "55%", justifyContent: "space-between" }}
>
-
02163462405
+
+ 02163462405
+
-
Info@Danovin.ir
+
+ Info@Danovin.ir
+
@@ -75,6 +84,56 @@ export default class Contact extends Component {
>
) : null}
+ {window.innerWidth < 1000 ? (
+
+
+
+
تماس با ما
+
+ برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده کنید و
+ پس از انتخاب دپارتمان مد نظر پیام خود را ارسال کنید.
+
+
+
+
+
+
+
+
+
+
+
+
+ تهران خیابان انقلاب اسلامی بن بست سروش پلاک 2 طبقه چهار
+
+
+
+
+
+ 02163462405
+
+
+
+
+
+ Info@Danovin.ir
+
+
+
+
+
+
+
+
+
+ ) : null}
>
);
}
diff --git a/src/views/Contact/index.scss b/src/views/Contact/index.scss
index d99b050..11722bc 100644
--- a/src/views/Contact/index.scss
+++ b/src/views/Contact/index.scss
@@ -148,10 +148,158 @@
width: 100%;
height: 430px;
border-radius: 20px;
- img{
+ img {
transform: scale(0.4);
}
}
}
}
}
+
+.mobile-contact {
+ width: 100vw;
+ max-width: 550px;
+ margin: 0px auto;
+ padding: 0px 10px;
+ direction: rtl;
+ overflow-x: hidden;
+ padding-top: 90px;
+ &__form {
+ width: 100%;
+ justify-content: space-between;
+ margin-top: 20px;
+ margin-bottom: 20px;
+
+ .MuiOutlinedInput-notchedOutline {
+ top: 0px !important;
+ }
+ .MuiOutlinedInput-notchedOutline {
+ border-color: #cecece !important;
+ border-width: 1px !important;
+ color: green !important;
+ border-radius: 10px !important;
+ }
+
+ .MuiOutlinedInput-input {
+ padding: 20px 14px !important;
+ }
+ .MuiInputLabel-outlined {
+ font-family: numeralLight !important;
+ display: inline !important;
+ position: absolute;
+ text-align: right !important;
+ right: 10px;
+ top: 12px;
+ padding: 0px !important;
+ transform: translate(0px, 0px) scale(1) !important;
+ }
+ .MuiInputLabel-shrink {
+ text-align: right !important;
+ display: inline;
+ position: absolute;
+ right: -5px;
+ top: -8px;
+ transform: translate(0px, 0px) scale(0.75) !important;
+ padding-right: 15px !important;
+ }
+
+ label {
+ background-color: white;
+ max-width: 120px;
+ text-align: center;
+ color: #797979 !important;
+ letter-spacing: -1px;
+ }
+ .Mui-focused {
+ color: rgba(0, 0, 0, 0.54) !important;
+ border-color: #c4c4c5 !important;
+ }
+ h1 {
+ letter-spacing: -2px;
+ color: #6cbe44;
+ font-family: numeralBold;
+ }
+ p {
+ font-family: numeralLight;
+ color: #6f7074;
+ letter-spacing: -1px;
+ }
+
+ button {
+ align-self: flex-start;
+ margin-top: 30px;
+ font-family: numeralLight;
+ text-decoration: none;
+ color: white;
+ background-color: #6cbe44;
+ border-radius: 6px;
+ padding: 8px 25px;
+ width: 100%;
+ border: 0px;
+ &:hover {
+ color: white;
+ }
+ }
+
+ textarea {
+ width: 350px;
+ font-family: numeralLight;
+ border-radius: 10px;
+ margin-top: 20px;
+ border: 1px solid #c4c4c5;
+ padding: 10px 8px;
+ color: #6f7074;
+ &::placeholder {
+ color: #797979;
+ }
+ &:focus {
+ outline: 0px;
+ }
+ }
+ .MuiFormControl-root {
+ select {
+ font-family: numeralLight;
+ height: 100%;
+ direction: rtl;
+ border: 1px solid #cecece !important;
+ text-align: center !important;
+ border-radius: 10px !important;
+ color: #76797e !important;
+ &:focus {
+ background-color: white !important;
+ }
+ option {
+ padding: 5px !important;
+ }
+ }
+ .MuiNativeSelect-icon {
+ display: none;
+ }
+ .MuiNativeSelect-select {
+ padding: 8px 10px 8px 100px !important;
+ }
+ }
+ }
+ &__address {
+ width: 100%;
+ p {
+ font-family: numeralLight;
+ margin-bottom: 0px;
+ color: #6f7074;
+ }
+ span {
+ font-family: numeralLight;
+ margin-bottom: 0px;
+ color: #6f7074;
+ margin-right: 5px;
+ }
+ &--map {
+ width: 100%;
+ height: 180px;
+ border-radius: 20px;
+ img {
+ transform: scale(0.4);
+ }
+ }
+ }
+}