diff --git a/src/App.js b/src/App.js index b78ce99..d0b31c7 100644 --- a/src/App.js +++ b/src/App.js @@ -11,6 +11,7 @@ import Twitter from "./views/Redirect/Twitter"; import GitHub from "./views/Redirect/GitHub"; import LinkedIn from "./views/Redirect/Linkedin"; import PersonalLinks from "./views/PersonalLinks"; +import ContactUs from "./views/ContactUs"; function App() { return ( @@ -23,6 +24,7 @@ function App() { + {/* routes for re-direction to external links */} diff --git a/src/assets/Illustration.png b/src/assets/Illustration.png new file mode 100644 index 0000000..10f07ce Binary files /dev/null and b/src/assets/Illustration.png differ diff --git a/src/components/section-components/Footer/index.js b/src/components/section-components/Footer/index.js index 71cbc2c..cd3534e 100644 --- a/src/components/section-components/Footer/index.js +++ b/src/components/section-components/Footer/index.js @@ -137,10 +137,10 @@ export default function Footer() { ))}
- + Privacy - + Terms

diff --git a/src/components/section-components/Header/index.js b/src/components/section-components/Header/index.js index 5589f45..4721ef5 100644 --- a/src/components/section-components/Header/index.js +++ b/src/components/section-components/Header/index.js @@ -10,7 +10,7 @@ export default function Header() {

@@ -18,25 +18,32 @@ export default function Header() { - ) + ); } \ No newline at end of file diff --git a/src/views/ContactUs/index.js b/src/views/ContactUs/index.js new file mode 100644 index 0000000..0b325c4 --- /dev/null +++ b/src/views/ContactUs/index.js @@ -0,0 +1,49 @@ +import React from 'react'; +import './style.view.contact-us.css'; +import Button from '../../components/widgets/Button'; +import img from '../../assets/Illustration.png'; + +export default function ContactUs() { + return ( +
+

Contact Us

+

+ Be in touch with us, and collaborate with the community members and grow + in a team. +

+ +
+ Contact-Us-Illustration + +
+ + + + + +
+
+ ); +} \ No newline at end of file diff --git a/src/views/ContactUs/style.view.contact-us.css b/src/views/ContactUs/style.view.contact-us.css new file mode 100644 index 0000000..a41ec14 --- /dev/null +++ b/src/views/ContactUs/style.view.contact-us.css @@ -0,0 +1,89 @@ +div.contact-us { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-right: auto; + margin-left: auto; + margin-top: 8em; +} + +div.contact-us > p.contact-us-section-description { + margin-top: 1em; + font-size: 20px; + text-align: center; + color: #f2f2f2; + margin-right: auto; + margin-left: auto; +} + +div.contact-us > div.form-section-wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + margin-right: auto; + margin-left: auto; + gap: 10px; + margin-top: 4em; + width: 51em; + height: 26em; + background: white; + border-radius: 20px; +} + +div.contact-us > div.form-section-wrapper > form.contact-us-form { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin-top: 1em; + margin-right: 5em; +} + +div.contact-us > div.form-section-wrapper > form.contact-us-form > label { + color: black; + font-family: inherit; + font-size: 18px; + font-weight: 600; + margin-top: 1em; +} + +div.contact-us > div.form-section-wrapper > form.contact-us-form > label > input { + display: block; + padding: 0.8em 1em; + border-radius: 10px; + margin-top: 0.5em; + border: 2px solid black; +} + +div.contact-us > div.form-section-wrapper > form.contact-us-form > label > input:focus { + outline: none; +} + +div.contact-us > div.form-section-wrapper > form.contact-us-form > textarea { + margin-top: 0.5em; + border-radius: 10px; + padding: 0.6em 0.8em; + border: 2px solid black; +} + +div.contact-us > div.form-section-wrapper > form.contact-us-form > textarea:focus { + outline: none; +} + +div.contact-us > div.form-section-wrapper > form.contact-us-form > a.submit-form-button { + margin-top: 0.6em; +} +/*# sourceMappingURL=style.view.contact-us.css.map */ \ No newline at end of file diff --git a/src/views/ContactUs/style.view.contact-us.css.map b/src/views/ContactUs/style.view.contact-us.css.map new file mode 100644 index 0000000..d144910 --- /dev/null +++ b/src/views/ContactUs/style.view.contact-us.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "AAAA,AAAA,GAAG,AAAA,WAAW,CAAA;EACV,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EACnB,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,GAAG;CAyDlB;;AA/DD,AAOI,GAPD,AAAA,WAAW,GAOR,CAAC,AAAA,+BAA+B,CAAA;EAC9B,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,IAAI;EACf,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,OAAO;EACd,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;CACpB;;AAdL,AAeI,GAfD,AAAA,WAAW,GAeR,GAAG,AAAA,qBAAqB,CAAA;EACtB,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,GAAG,EAAE,IAAI;EACT,UAAU,EAAE,GAAG;EACf,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,KAAK;EACjB,aAAa,EAAE,IAAI;CAoCtB;;AA7DL,AA0BQ,GA1BL,AAAA,WAAW,GAeR,GAAG,AAAA,qBAAqB,GAWpB,IAAI,AAAA,gBAAgB,CAAA;EAClB,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,UAAU,EAAE,GAAG;EACf,YAAY,EAAE,GAAG;CA8BpB;;AA5DT,AA+BY,GA/BT,AAAA,WAAW,GAeR,GAAG,AAAA,qBAAqB,GAWpB,IAAI,AAAA,gBAAgB,GAKhB,KAAK,CAAA;EACH,KAAK,EAAE,KAAK;EACZ,WAAW,EAAE,OAAO;EACpB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,GAAG;CAWlB;;AA/Cb,AAqCgB,GArCb,AAAA,WAAW,GAeR,GAAG,AAAA,qBAAqB,GAWpB,IAAI,AAAA,gBAAgB,GAKhB,KAAK,GAMD,KAAK,CAAA;EACH,OAAO,EAAE,KAAK;EACd,OAAO,EAAE,SAAS;EAClB,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,KAAK;EACjB,MAAM,EAAE,eAAe;CAI1B;;AA9CjB,AA2CoB,GA3CjB,AAAA,WAAW,GAeR,GAAG,AAAA,qBAAqB,GAWpB,IAAI,AAAA,gBAAgB,GAKhB,KAAK,GAMD,KAAK,AAMF,MAAM,CAAA;EACH,OAAO,EAAE,IAAI;CAChB;;AA7CrB,AAgDY,GAhDT,AAAA,WAAW,GAeR,GAAG,AAAA,qBAAqB,GAWpB,IAAI,AAAA,gBAAgB,GAsBhB,QAAQ,CAAA;EACN,UAAU,EAAE,KAAK;EACjB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,WAAW;EACpB,MAAM,EAAC,eAAe;CAIzB;;AAxDb,AAqDgB,GArDb,AAAA,WAAW,GAeR,GAAG,AAAA,qBAAqB,GAWpB,IAAI,AAAA,gBAAgB,GAsBhB,QAAQ,AAKL,MAAM,CAAA;EACH,OAAO,EAAE,IAAI;CAChB;;AAvDjB,AAyDY,GAzDT,AAAA,WAAW,GAeR,GAAG,AAAA,qBAAqB,GAWpB,IAAI,AAAA,gBAAgB,GA+BhB,CAAC,AAAA,mBAAmB,CAAA;EAClB,UAAU,EAAE,KAAK;CACpB", + "sources": [ + "style.view.contact-us.scss" + ], + "names": [], + "file": "style.view.contact-us.css" +} \ No newline at end of file diff --git a/src/views/ContactUs/style.view.contact-us.scss b/src/views/ContactUs/style.view.contact-us.scss new file mode 100644 index 0000000..033fb08 --- /dev/null +++ b/src/views/ContactUs/style.view.contact-us.scss @@ -0,0 +1,64 @@ +div.contact-us{ + display: flex; + flex-direction: column; + align-items: center; + margin-right: auto; + margin-left: auto; + margin-top: 8em; + > p.contact-us-section-description{ + margin-top: 1em; + font-size: 20px; + text-align: center; + color: #f2f2f2; + margin-right: auto; + margin-left: auto; + } + > div.form-section-wrapper{ + display: flex; + justify-content: center; + margin-right: auto; + margin-left: auto; + gap: 10px; + margin-top: 4em; + width: 51em; + height: 26em; + background: white; + border-radius: 20px; + > form.contact-us-form{ + display: flex; + flex-direction: column; + margin-top: 1em; + margin-right: 5em; + > label{ + color: black; + font-family: inherit; + font-size: 18px; + font-weight: 600; + margin-top: 1em; + > input{ + display: block; + padding: 0.8em 1em; + border-radius: 10px; + margin-top: 0.5em; + border: 2px solid black; + &:focus{ + outline: none; + } + } + } + > textarea{ + margin-top: 0.5em; + border-radius: 10px; + padding: 0.6em 0.8em; + border:2px solid black; + &:focus{ + outline: none; + } + } + > a.submit-form-button{ + margin-top: 0.6em; + } + } + } + +} \ No newline at end of file