zuri-training · Lujionyes1213 · Aug 10, 2022
diff --git a/contact_us-page/index.css 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
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="index.css" />
+    <title>Contact us</title>
+  </head>
+  <body>
+    <div class="contact-box">
+      <h2 class="contact-box__header">Contact Us</h2>
+      <h3 class="contact-box__subline">Leave us a message</h3>
+      <div class="contactform-box">
+        <div class="contactform">
+          <input type="text" placeholder="Your Name" />
+          <input type="text" placeholder="Email" />
+          <textarea
+            name="message"
+            id="message"
+            cols="30"
+            rows="7"
+            placeholder="Your Message"
+          ></textarea>
+          <button class="contactform__submit">Send</button>
+        </div>
+        <div class="contactinfo">
+          <div>
+            <span class="contactinfo__icon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="ionicon"
+                viewbox="0 0 512 512"
+              >
+                <title>Location</title>
+                <path
+                  d="M256 48c-79.5 0-144 61.39-144 137 0 87 96 224.87 131.25 272.49a15.77 15.77 0 0025.5 0C304 409.89 400 272.07 400 185c0-75.61-64.5-137-144-137z"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="32"
+                />
+                <circle
+                  cx="256"
+                  cy="192"
+                  r="48"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="32"
+                />
+              </svg>
+            </span>
+            <p>
+              Information Technologies building, Victoria Island, Lagos,
+              Nigeria.
+            </p>
+          </div>
+          <div>
+            <span class="contactinfo__icon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="ionicon"
+                viewbox="0 0 512 512"
+              >
+                <title>Call</title>
+                <path
+                  d="M451 374c-15.88-16-54.34-39.35-73-48.76-24.3-12.24-26.3-13.24-45.4.95-12.74 9.47-21.21 17.93-36.12 14.75s-47.31-21.11-75.68-49.39-47.34-61.62-50.53-76.48 5.41-23.23 14.79-36c13.22-18 12.22-21 .92-45.3-8.81-18.9-32.84-57-48.9-72.8C119.9 44 119.9 47 108.83 51.6A160.15 160.15 0 0083 65.37C67 76 58.12 84.83 51.91 98.1s-9 44.38 23.07 102.64 54.57 88.05 101.14 134.49S258.5 406.64 310.85 436c64.76 36.27 89.6 29.2 102.91 23s22.18-15 32.83-31a159.09 159.09 0 0013.8-25.8C465 391.17 468 391.17 451 374z"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-miterlimit="10"
+                  stroke-width="32"
+                />
+              </svg>
+            </span>
+            <p>+234 081-1234-5678</p>
+          </div>
+          <div>
+            <span class="contactinfo__icon"
+              ><svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="ionicon"
+                viewbox="0 0 512 512"
+              >
+                <title>Mail</title>
+                <rect
+                  x="48"
+                  y="96"
+                  width="416"
+                  height="320"
+                  rx="40"
+                  ry="40"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="32"
+                />
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="32"
+                  d="M112 160l144 112 144-112"
+                /></svg
+            ></span>
+            <p>animax98@gmail.com</p>
+          </div>
+          <div class="icons">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="ionicon"
+              viewbox="0 0 512 512"
+            >
+              <title>Logo Facebook</title>
+              <path
+                d="M480 257.35c0-123.7-100.3-224-224-224s-224 100.3-224 224c0 111.8 81.9 204.47 189 221.29V322.12h-56.89v-64.77H221V208c0-56.13 33.45-87.16 84.61-87.16 24.51 0 50.15 4.38 50.15 4.38v55.13H327.5c-27.81 0-36.51 17.26-36.51 35v42h62.12l-9.92 64.77H291v156.54c107.1-16.81 189-109.48 189-221.31z"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="ionicon"
+              viewbox="0 0 512 512"
+            >
+              <title>Logo Twitter</title>
+              <path
+                d="M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z"
+              />
+            </svg>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="ionicon"
+              viewbox="0 0 512 512"
+            >
+              <title>Logo Instagram</title>
+              <path
+                d="M349.33 69.33a93.62 93.62 0 0193.34 93.34v186.66a93.62 93.62 0 01-93.34 93.34H162.67a93.62 93.62 0 01-93.34-93.34V162.67a93.62 93.62 0 0193.34-93.34h186.66m0-37.33H162.67C90.8 32 32 90.8 32 162.67v186.66C32 421.2 90.8 480 162.67 480h186.66C421.2 480 480 421.2 480 349.33V162.67C480 90.8 421.2 32 349.33 32z"
+              />
+              <path
+                d="M377.33 162.67a28 28 0 1128-28 27.94 27.94 0 01-28 28zM256 181.33A74.67 74.67 0 11181.33 256 74.75 74.75 0 01256 181.33m0-37.33a112 112 0 10112 112 112 112 0 00-112-112z"
+              />
+            </svg>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="ionicon"
+              viewbox="0 0 512 512"
+            >
+              <title>Logo Linkedin</title>
+              <path
+                d="M444.17 32H70.28C49.85 32 32 46.7 32 66.89v374.72C32 461.91 49.85 480 70.28 480h373.78c20.54 0 35.94-18.21 35.94-38.39V66.89C480.12 46.7 464.6 32 444.17 32zm-273.3 373.43h-64.18V205.88h64.18zM141 175.54h-.46c-20.54 0-33.84-15.29-33.84-34.43 0-19.49 13.65-34.42 34.65-34.42s33.85 14.82 34.31 34.42c-.01 19.14-13.31 34.43-34.66 34.43zm264.43 229.89h-64.18V296.32c0-26.14-9.34-44-32.56-44-17.74 0-28.24 12-32.91 23.69-1.75 4.2-2.22 9.92-2.22 15.76v113.66h-64.18V205.88h64.18v27.77c9.34-13.3 23.93-32.44 57.88-32.44 42.13 0 74 27.77 74 87.64z"
+              />
+            </svg>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="ionicon"
+              viewbox="0 0 512 512"
+            >
+              <title>Logo Github</title>
+              <path
+                d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9a17.56 17.56 0 003.8.4c8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1a102.4 102.4 0 01-22.6 2.7c-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1a63 63 0 0025.6-6c2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8a18.64 18.64 0 015-.5c8.1 0 26.4 3.1 56.6 24.1a208.21 208.21 0 01112.2 0c30.2-21 48.5-24.1 56.6-24.1a18.64 18.64 0 015 .5c12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5a19.35 19.35 0 004-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"
+              />
+            </svg>
+          </div>
+          <div class="map">
+            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15858.940149177308!2d3.4131896218379865!3d6.428076698475985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x103bf53280e7648d%3A0x4d01e5de6b847fe5!2sVictoria%20Island%2C%20Lagos!5e0!3m2!1sen!2sng!4v1660116759636!5m2!1sen!2sng" width="400" height="170" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+          </div>
+        </div>
+      </div>
+      <p class="footnote">
+        You can also check our
+        <a href="a" class="login">FAQs</a> to get likely answers to your question.
+      </p>
+    </div>
+  </body>
+</html>