diff --git a/assets/css/style.css b/assets/css/style.css index a302a68..6a5f4b7 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -10,6 +10,10 @@ font-family: "Roboto"; src: url("../font/Roboto-Regular.ttf") format("truetype"); } +@font-face { + font-family: "Roboto-Med"; + src: url("../font/Roboto-Bold.ttf") format("truetype"); +} @font-face { font-family: "Roboto-Bold"; src: url("../font/Roboto-ExtraBold.ttf") format("truetype"); @@ -120,13 +124,15 @@ html body a:hover { height: 384px; width: 384px; position: absolute; - left: 0; - top: 100px; + left: -25px; + top: 30px; z-index: -1; } .container { - max-width: 1080px; + width: 100%; + padding-right: var(--bs-gutter-x, 0.75rem); + padding-left: var(--bs-gutter-x, 0.75rem); margin-right: auto; margin-left: auto; } @@ -143,6 +149,63 @@ html body a:hover { justify-content: center; } +.footer { + position: relative; +} +.footer .effect-2 { + height: 522px; + position: absolute; + right: 0; + bottom: 0; + z-index: -1; +} +.footer .footter-inner { + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: column; + padding-top: 30px; + padding-bottom: 50px; + border-top: 1px solid #e7e7e7; +} +.footer .footter-inner .f-top { + padding-bottom: 40px; +} +.footer .footter-inner .f-top img { + width: 177px; +} +.footer .footter-inner .f-midd { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding-bottom: 40px; +} +.footer .footter-inner .f-midd .footer-item { + width: 32%; + display: flex; + align-items: center; + justify-content: center; +} +.footer .footter-inner .f-midd .footer-item span { + display: flex; + align-items: center; + justify-content: center; +} +.footer .footter-inner .f-midd .footer-item span img { + margin-right: 20px; +} +.footer .footter-inner .f-bott p { + font-size: 12px; + color: #9E9E9E; + text-align: center; + padding-bottom: 15px; +} + +.d-none { + display: none; +} + .slider { padding-top: 15px; } @@ -233,56 +296,138 @@ html body a:hover { text-align: center; } -.footer { - position: relative; +.contact-us { + padding-top: 50px; } -.footer .effect-2 { - position: absolute; - right: 0; - bottom: 0; - z-index: -1; -} -.footer .footter-inner { +.contact-us .contact-us-inner .cu-top { display: flex; align-items: center; - justify-content: space-between; + justify-content: center; flex-direction: column; - padding-top: 30px; - padding-bottom: 50px; - border-top: 1px solid #e7e7e7; } -.footer .footter-inner .f-top { - padding-bottom: 40px; +.contact-us .contact-us-inner .cu-top span { + display: inline-block; + padding: 7px 10px; + font-size: 14px; + background-color: #e3eeff; + color: #0164FF; + border-radius: 50px; + font-weight: 500; } -.footer .footter-inner .f-top img { - width: 177px; +.contact-us .contact-us-inner .cu-top h1 { + font-family: "Roboto-Bold"; + font-size: 48px; + font-weight: 900; + color: #222222; + padding: 30px 0; } -.footer .footter-inner .f-midd { +.contact-us .contact-us-inner .cu-top p { + font-size: 16px; + font-weight: 300; + color: #222222; +} +.contact-us .contact-us-inner .cu-top p a { + color: #0164FF; +} +.contact-us .contact-us-inner .cu-main { + margin-top: 70px; + margin-bottom: 70px; + padding: 30px; + border-radius: 32px; + border: 1px solid #DADADA; + background-color: #fff; + display: flex; + align-items: center; + justify-content: center; +} +.contact-us .contact-us-inner .cu-main .cu-main-inner { + width: 60%; +} + +.input-box { + margin-bottom: 25px; +} +.input-box label { + display: inline-block; + font-size: 16px; + margin-bottom: 12px; + color: #222; +} +.input-box div { + display: flex; + align-items: center; + border-radius: 10px; + height: 44px; + border: 1px solid #DADADA; + overflow: hidden; +} +.input-box div img { + margin-left: 15px; + margin-right: 5px; +} +.input-box div input { width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - padding-bottom: 40px; + height: 100%; + border: 0; + font-family: "Roboto-Med"; } -.footer .footter-inner .f-midd .footer-item { - width: 32%; - display: flex; - align-items: center; - justify-content: center; +.input-box div input::placeholder { + font-family: "Roboto"; } -.footer .footter-inner .f-midd .footer-item span { - display: flex; - align-items: center; - justify-content: center; +.input-box div:focus-within { + border: 1px solid #0164FF; } -.footer .footter-inner .f-midd .footer-item span img { - margin-right: 20px; +.input-box.textarea div { + height: 90px; } -.footer .footter-inner .f-bott p { - font-size: 12px; - color: #9E9E9E; - text-align: center; - padding-bottom: 15px; +.input-box.textarea textarea { + width: 100%; + height: 100%; + padding-left: 20px; + padding-top: 10px; + border: none; + resize: none; + font-size: 14px; + font-family: "Roboto"; +} +.input-box.submit { + padding-top: 15px; +} +.input-box.submit input[type=submit], +.input-box.submit button { + width: 100%; + border: none; + font-size: 16px; + color: #fff; + padding: 18.5px 0; + background-color: #0164FF; + border-radius: 50px; +} + +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} +@media (min-width: 768px) { + .container { + max-width: 720px; + } +} +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} +@media (min-width: 1200px) { + .container { + max-width: 1080px; + } +} +@media (min-width: 1441px) { + .container { + max-width: 1280px; + } } /*# sourceMappingURL=style.css.map */ diff --git a/assets/css/style.css.map b/assets/css/style.css.map index 55ebd58..82a65fb 100644 --- a/assets/css/style.css.map +++ b/assets/css/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/style.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAaF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;;;AAKJ;EACE;;AAEA;EACE;EAEA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;AAEA;EACE;EACA;EACA;;;AAcR;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAOR;EACE;;AAGA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAYN;EACE;EACA;EACA;EACA","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/style.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAaF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAOJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAYN;EACE;EACA;EACA;EACA;;;AAWR;EACE;;;AAOF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;AAEA;EACE;EACA;EACA;;;AAOR;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAmBR;EACE;;AAGE;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAQR;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;;AAKF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWN;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE","file":"style.css"} \ No newline at end of file diff --git a/assets/font/Roboto-Bold.ttf b/assets/font/Roboto-Bold.ttf new file mode 100644 index 0000000..9d7cf22 Binary files /dev/null and b/assets/font/Roboto-Bold.ttf differ diff --git a/assets/image/Calling.svg b/assets/image/Calling.svg new file mode 100644 index 0000000..045522d --- /dev/null +++ b/assets/image/Calling.svg @@ -0,0 +1,3 @@ + diff --git a/assets/image/Message-2.svg b/assets/image/Message-2.svg new file mode 100644 index 0000000..5c82536 --- /dev/null +++ b/assets/image/Message-2.svg @@ -0,0 +1,3 @@ + diff --git a/assets/image/effect-2.png b/assets/image/effect-2.png new file mode 100644 index 0000000..18d843e Binary files /dev/null and b/assets/image/effect-2.png differ diff --git a/assets/image/en-flag.png b/assets/image/en-flag.png new file mode 100644 index 0000000..155aa8b Binary files /dev/null and b/assets/image/en-flag.png differ diff --git a/assets/image/fa-flag.png b/assets/image/fa-flag.png new file mode 100644 index 0000000..be3c678 Binary files /dev/null and b/assets/image/fa-flag.png differ diff --git a/assets/image/user.svg b/assets/image/user.svg new file mode 100644 index 0000000..b9930c4 --- /dev/null +++ b/assets/image/user.svg @@ -0,0 +1,3 @@ + diff --git a/assets/scss/style.scss b/assets/scss/style.scss index a55d68e..a301a7c 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -13,6 +13,11 @@ src: url('../font/Roboto-Regular.ttf') format("truetype"); } +@font-face { + font-family: 'Roboto-Med'; + src: url('../font/Roboto-Bold.ttf') format("truetype"); +} + @font-face { font-family: 'Roboto-Bold'; src: url('../font/Roboto-ExtraBold.ttf') format("truetype"); @@ -27,6 +32,7 @@ html body { color: #505050; margin: 0; direction: ltr; + overflow-x: hidden; } html:focus, @@ -140,27 +146,26 @@ html body a:hover { height: 384px; width: 384px; position: absolute; - left: 0; - top: 100px; + left: -25px; + top: 30px; z-index: -1; } } .container { - max-width: 1080px; + width: 100%; + padding-right: var(--bs-gutter-x, 0.75rem); + padding-left: var(--bs-gutter-x, 0.75rem); margin-right: auto; margin-left: auto; } - .header { height: 76px; display: flex; align-items: center; justify-content: space-between; - .header-logo {} - .header-side { display: flex; align-items: center; @@ -169,126 +174,13 @@ html body a:hover { } -.slider { - padding-top: 15px; - - .slider-inner { - display: flex; - // align-items: center; - justify-content: space-between; - } - - .s-left { - width: 50%; - padding-top: 50px; - - h1 { - font-family: 'Roboto-Bold'; - font-size: 89px; - font-weight: 900; - background-image: radial-gradient(52.27% 52.27% at 50% 50%, #0164FF 0%, #2EEAE1 100%); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - // margin-bottom: 50px; - } - - h3 { - font-family: 'Roboto-Bold'; - font-weight: 900; - font-size: 48px; - color: #0164FF; - margin-top: 40px; - margin-bottom: 40px; - } - - strong { - font-family: 'Roboto-Bold'; - font-weight: 900; - font-size: 32px; - color: #222222; - } - - p { - font-size: 16px; - font-weight: 400; - color: #777; - margin-top: 20px; - } - } - - .s-right { - width: 50%; - - .s-right-inner { - position: relative; - - img { - position: absolute; - top: 0; - right: -25%; - } - } - - - - - } -} - - - - - -.our-sec { - padding-top: 120px; - padding-bottom: 130px; - - .our-sec-inner { - display: flex; - align-items: center; - justify-content: space-between; - - .os-item { - width: 30%; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - - h1 { - font-family: 'Roboto-Bold'; - font-size: 89px; - font-weight: 900; - background-image: radial-gradient(52.27% 52.27% at 50% 50%, #0164FF 0%, #2EEAE1 100%); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - margin-bottom: 20px; - } - - span { - font-size: 20px; - color: #000; - font-weight: 600; - } - - p { - margin-top: 20px; - font-size: 16px; - color: #777777; - text-align: center; - } - } - } -} .footer { position: relative; - .effect-2 { + height: 522px; position: absolute; right: 0; bottom: 0; @@ -352,4 +244,302 @@ html body a:hover { } } } +} + + + + + + +.d-none { + display: none; +} + + + +// ------------------------------Index Page------------- + +.slider { + padding-top: 15px; + + .slider-inner { + display: flex; + justify-content: space-between; + } + + .s-left { + width: 50%; + padding-top: 50px; + + h1 { + font-family: 'Roboto-Bold'; + font-size: 89px; + font-weight: 900; + background-image: radial-gradient(52.27% 52.27% at 50% 50%, #0164FF 0%, #2EEAE1 100%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + } + + h3 { + font-family: 'Roboto-Bold'; + font-weight: 900; + font-size: 48px; + color: #0164FF; + margin-top: 40px; + margin-bottom: 40px; + } + + strong { + font-family: 'Roboto-Bold'; + font-weight: 900; + font-size: 32px; + color: #222222; + } + + p { + font-size: 16px; + font-weight: 400; + color: #777; + margin-top: 20px; + } + } + + .s-right { + width: 50%; + + .s-right-inner { + position: relative; + + img { + position: absolute; + top: 0; + right: -25%; + } + } + } +} + + +.our-sec { + padding-top: 120px; + padding-bottom: 130px; + + .our-sec-inner { + display: flex; + align-items: center; + justify-content: space-between; + + .os-item { + width: 30%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + h1 { + font-family: 'Roboto-Bold'; + font-size: 89px; + font-weight: 900; + background-image: radial-gradient(52.27% 52.27% at 50% 50%, #0164FF 0%, #2EEAE1 100%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + margin-bottom: 20px; + } + + span { + font-size: 20px; + color: #000; + font-weight: 600; + } + + p { + margin-top: 20px; + font-size: 16px; + color: #777777; + text-align: center; + } + } + } +} + +// ------------------------------Index Page END------------- + + + + + + + + + + +// ------------------------------Contact Us page------------- + +.contact-us { + padding-top: 50px; + + .contact-us-inner { + .cu-top { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + span { + display: inline-block; + padding: 7px 10px; + font-size: 14px; + background-color: #e3eeff; + color: #0164FF; + border-radius: 50px; + font-weight: 500; + } + + h1 { + font-family: 'Roboto-Bold'; + font-size: 48px; + font-weight: 900; + color: #222222; + padding: 30px 0; + } + + p { + font-size: 16px; + font-weight: 300; + color: #222222; + + a { + color: #0164FF; + } + } + } + + .cu-main { + margin-top: 70px; + margin-bottom: 70px; + padding: 30px; + border-radius: 32px; + border: 1px solid #DADADA; + background-color: #fff; + display: flex; + align-items: center; + justify-content: center; + + .cu-main-inner { + width: 60%; + } + } + } +} + + + +.input-box { + margin-bottom: 25px; + + label { + display: inline-block; + font-size: 16px; + margin-bottom: 12px; + color: #222; + } + + div { + display: flex; + align-items: center; + border-radius: 10px; + height: 44px; + border: 1px solid #DADADA; + overflow: hidden; + + img { + margin-left: 15px; + margin-right: 5px; + } + + input { + width: 100%; + height: 100%; + border: 0; + font-family: 'Roboto-Med'; + + &::placeholder { + font-family: 'Roboto'; + } + } + + &:focus-within { + border: 1px solid #0164FF; + } + } + + &.textarea { + div { + height: 90px; + } + + textarea { + width: 100%; + height: 100%; + padding-left: 20px; + padding-top: 10px; + border: none; + resize: none; + font-size: 14px; + font-family: 'Roboto'; + } + } + + &.submit { + padding-top: 15px; + + & input[type="submit"], + button { + width: 100%; + border: none; + font-size: 16px; + color: #fff; + padding: 18.5px 0; + background-color: #0164FF; + border-radius: 50px; + } + } +} + +// ------------------------------Contact Us page End------------- + + + + + +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 720px; + } +} + +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} + +@media (min-width: 1200px) { + .container { + max-width: 1080px; + } +} + +@media (min-width: 1441px) { + .container { + max-width: 1280px; + } } \ No newline at end of file diff --git a/contact-us.html b/contact-us.html new file mode 100644 index 0000000..76e2fc1 --- /dev/null +++ b/contact-us.html @@ -0,0 +1,152 @@ + + + +
+ + +
+