diff --git a/contact_us-page/index.css b/contact_us-page/index.css new file mode 100644 index 0000000..334aa49 --- /dev/null +++ b/contact_us-page/index.css @@ -0,0 +1,212 @@ +/* + 1. Use a more-intuitive box-sizing model. +*/ +*, +*::before, +*::after { + box-sizing: border-box; +} +/* + 2. Remove default margin + */ +* { + margin: 0; +} +/* + 3. Allow percentage-based heights in the application + */ +html, +body { + height: 100%; + font-size: 16px; + display: flex; + justify-content: center; + align-items: center; +} +/* + Typographic tweaks! + 4. Add accessible line-height + 5. Improve text rendering + */ +body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; + font-family: "Open Sans", sans-serif; +} +/* + 6. Improve media defaults + */ +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} +/* + 7. Remove built-in form typography styles + */ +input, +button, +textarea, +select { + font: inherit; +} +/* + 8. Avoid text overflows + */ +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} +/* + 9. Create a root stacking context + */ +#root, +#__next { + isolation: isolate; +} + +.contact-box { + display: flex; + align-items: center; + flex-direction: column; + background: #f1c0f2; + padding: 60px 104px; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-radius: 8px; + color: #170317; + max-width: 1000px; + margin: auto; +} +.contact-box__header { + font-size: 2rem; +} +.contact-box__subline { + font-size: 1.5rem; +} +.contactform-box { + display: flex; + justify-content: space-between; + font-size: 1rem; + font-weight: 300; + font-style: normal; + line-height: 140%; + margin-top: 50px; +} +.contactform { + width: 48%; +} +.contactform > input, +.contactform > textarea { + color: #4e4e4e; + display: block; + padding: 10px 10px; + background: #fdf7fd; + border-radius: 8px; + width: 100%; + border: 0px; +} +.contactform > input:not(:first-child), +.contactform > textarea { + margin-top: 7px; +} +.contactform__submit { + margin-top: 14px; + background: #7d1b7e; + border: 0; + color: #fce8fc; + border-radius: 8px; + width: 100%; + padding: 8px 16px; +} +.contactinfo { + width: 48%; +} +.contactinfo > div { + display: flex; + font-size: 0.8rem; + align-items: center; +} +.contactinfo > div:not(:first-child) { + margin-top: 12px; +} +.contactinfo__icon { + font-weight: 300; + color: #4e4e4e; + height: 100%; + width: 20px; + margin-right: 10px; + + display: flex; + align-items: center; + justify-content: center; +} +.contactinfo__icon > svg { + height: 100%; +} +.contactinfo p{ + +/* BODY 3 */ + +font-family: 'Open Sans'; +font-style: normal; +font-weight: 400; +font-size: 16px; +line-height: 140%; +/* or 22px */ + + +/* Anima/text/black */ + +color: #170317; + +} +.footnote { + margin-top: 50px; + font-size: 0.9rem; + font-weight: 300; + color: #170317; + font-family: 'Inter'; +font-style: normal; +font-weight: 400; +font-size: 16px; +line-height: 19px; + +/* Anima/text/black */ + +color: #170317; + + + + +} +.footnote > a { + color:#770e79; +} +.map { + border-radius: 4px; + overflow: hidden; + margin-top: 0px; +} +.map > img { + width: 100%; + max-height: 155px; +} +.icons { + width: 100%; + display: flex; +} +.icons > svg { + width: 24px; + height: 24px; +} +.icons > svg { + margin-right: 48px; +} diff --git a/contact_us-page/index.html b/contact_us-page/index.html new file mode 100644 index 0000000..9b9ad98 --- /dev/null +++ b/contact_us-page/index.html @@ -0,0 +1,185 @@ + + + + + + + + + + + Contact us + + +
+

Contact Us

+

Leave us a message

+
+
+ + + + +
+
+
+ + + Location + + + + +

+ Information Technologies building, Victoria Island, Lagos, + Nigeria. +

+
+
+ + + Call + + + +

+234 081-1234-5678

+
+
+ + Mail + + +

animax98@gmail.com

+
+
+ + Logo Facebook + + + + Logo Twitter + + + + Logo Instagram + + + + + Logo Linkedin + + + + Logo Github + + +
+
+ +
+
+
+

+ You can also check our + to get likely answers to your question. +

+
+ + \ No newline at end of file