Technigo · dannebrob · Mar 14, 2023 · Mar 17, 2023 · Mar 17, 2023 · Mar 18, 2023
diff --git a/code/.eslintrc.json b/code/.eslintrc.json
@@ -97,6 +97,10 @@
         "nonEmpty": "after-props"
       }
     ],
+    "linebreak-style":[
+      "off",
+      "unix"
+    ],
     "react/jsx-curly-spacing": [
       "error",
       {

diff --git a/code/package-lock.json b/code/package-lock.json
diff --git a/code/public/index.html b/code/public/index.html
@@ -1,9 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Technigo week 6 project: Find a mentor. Made by Daniel Brobäck."
+    />
+    <meta
+      property="og:title"
+      content="Become a coding mentor - Quick sign up!"
+    />
+    <meta
+      property="og:description"
+      content="Help out a fellow newbee by becoming the greatest mentor on this planet!"
+    />
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -13,7 +25,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Technigo React App</title>
+    <title>Find a mentor</title>
   </head>
 
   <body>
@@ -30,5 +42,4 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
-
 </html>
diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,10 @@
 import React from 'react';
+import { Form } from './componets/Form';
 
 export const App = () => {
   return (
     <div>
-      Find me in src/app.js!
+      <Form />
     </div>
   );
-}
+};
diff --git a/code/src/assets/DSG-large.jpg b/code/src/assets/DSG-large.jpg
diff --git a/code/src/assets/DSG-medium.jpg b/code/src/assets/DSG-medium.jpg
diff --git a/code/src/assets/DSG-small.jpg b/code/src/assets/DSG-small.jpg
diff --git a/code/src/componets/Form.css b/code/src/componets/Form.css
@@ -0,0 +1,79 @@
+main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.image-box {
+  width: 80%;
+  max-height: 50vh;
+}
+.image-box img {
+  width: 100%;
+  max-height: 50vh;
+}
+
+.title {
+  display: flex;
+  font-weight: 400;
+  width: 80%;
+}
+
+.title p {
+  padding: 0 1rem 0 1rem;
+  color: #4fb0ae;
+  font-size: 1.8rem;
+}
+
+.title h1 {
+  font-weight: 400;
+  padding-top: 0.5rem;
+}
+
+.title span {
+  padding: 0 0 0 0.5rem;
+  color: #4fb0ae;
+}
+.reset-button {
+  margin: 0.5rem 0 0 -70%;
+}
+form {
+  width: 80%;
+  margin: 0 auto;
+}
+input[type='text'],
+select {
+  width: 40vw;
+}
+
+input,
+select,
+label {
+  color: #4fb0ae;
+}
+
+button {
+  height: 2.5rem;
+  width: 4rem;
+  border-radius: 10px;
+  background-color: #4fb0ae;
+  color: #ededed;
+  text-align: center;
+  border: none;
+}
+
+.submit-button {
+  margin-top: 1rem;
+}
+
+@media only screen and (min-width: 768px) {
+  .title,
+  .image-box,
+  form {
+    width: 60%;
+  }
+  .reset-button {
+    margin: 0.5rem 0 0 -50%;
+  }
+}