Initial commit

.gitignore

@@ -0,0 +1,132 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+.idea

index.css

@@ -0,0 +1,157 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+:root {
+  --colorWhite: #ffffff;
+  --darkBlue: #482CE6FF;
+  --darkPink: #480022FF;
+  --pink: #FF007A;
+  --lightGray: rgba(0, 0, 0, 0.24);
+  --darkGray: rgba(0, 0, 0, 0.60);
+}
+
+html, body {
+  font-family: "Montserrat", sans-serif;
+  font-size: 10px;
+}
+
+body {
+  background-size: 845px 982px;
+  background-position: 0 0;
+  background: url('assets/background.png') no-repeat, linear-gradient(180deg, var(--darkBlue) 0%, var(--darkPink) 100%);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+
+  min-height: 100vh;
+  accent-color: var(--darkBlue);
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+main {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  height: 100vh;
+}
+
+.text-hook {
+  width: 100%;
+  padding: 16rem 0 9.6rem 18.8rem;
+
+  h2 {
+    color: var(--colorWhite);
+    font-size: 5.4rem;
+  }
+
+  p {
+    color: var(--colorWhite);
+    font-size: 2.4rem;
+    font-weight: 200;
+    padding-inline-end: 4rem;
+  }
+}
+
+.form-container {
+  padding-top: 16.8rem;
+  padding-inline-start: 6rem;
+
+  h4 {
+    font-size: 2rem;
+  }
+
+  p {
+    font-size: 1.7rem;
+    color: var(--darkGray);
+    font-weight: 500;
+    padding: 2.2rem 0;
+  }
+}
+
+form {
+  background-color: var(--colorWhite);
+  width: 56.5rem;
+  height: 74.5rem;
+  border-radius: 2.4rem;
+  display: grid;
+  grid-template-rows: 2.8rem auto;
+  padding: 4rem;
+}
+
+.fields-container {
+  display: grid;
+  padding-top: 2.4rem;
+  height: 19rem;
+  gap: 2rem;
+}
+
+input {
+  width: 485px;
+  padding: 8px 10px;
+  border: 1px solid var(--lightGray);
+  border-radius: 16px;
+  font-size: 17px;
+  height: 5rem;
+  font-weight: 500;
+}
+
+input[type=radio] {
+  accent-color: inherit;
+  padding: 0;
+  width: unset;
+  height: unset;
+}
+
+.radio-container {
+  display: flex;
+  justify-content: flex-start;
+  font-size: 1.7rem;
+  font-weight: 500;
+  color:var(--darkGray);
+  gap: .4rem;
+}
+
+.radio-group {
+  padding-bottom: 1rem;
+}
+
+fieldset {
+  border: none;
+  display: flex;
+  gap: 4rem;
+  padding: 0;
+}
+
+.message-container {
+  height: 19.6rem;
+}
+
+.message-container textarea {
+  width: 100%;
+  border: 1px solid var(--lightGray);
+  color: var(--darkGray);
+  font-size: 1.7rem;
+  font-weight: 500;
+  border-radius: 16px;
+  padding: .8rem 1rem;
+}
+
+.submit {
+  background: var(--pink);
+  color:var(--colorWhite);
+  font-size: 2rem;
+  border-radius: 4.8rem;
+  border: none;
+  height: 5.4rem;
+  align-self: flex-end;
+}

index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Contact-Us Solution</title>
+  <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=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+  <main>
+    <div class="text-hook">
+      <h2>Contact Us</h2>
+      <p>Get in touch with us! Whether you have questions, feedback, or just want to say hello, we're here for you.</p>
+    </div>
+    <div class="form-container">
+      <form action="">
+        <h4>Send us a Message</h4>
+        <div class="fields-container">
+          <input type="text" name="name" placeholder="Name">
+          <input type="email" name="email" placeholder="Email">
+          <input type="phone" name="phone" placeholder="Phone">
+        </div>
+        <p>
+          Preferred contact method of communicaton
+        </p>
+        <div class="radio-group">
+          <fieldset>
+            <div class="radio-container">
+              <input type="radio" id="preferEmail" name="preferance" value="email"> 
+              <label for="preferEmail">Email</label>
+            </div>
+            <div class="radio-container">
+              <input type="radio" name="preferance" id="preferPhone" value="email"> 
+              <label for="preferPhone">Phone</label>
+            </div>
+          </fieldset>
+        </div>
+        <div class="message-container">
+          <textarea name="message" id="message" rows="5" cols="33" placeholder="Message"></textarea>
+        </div>
+        <button class="submit">Submit</button>
+      </form>
+    </div>
+  </main>
+</body>
+</html>