Merge pull request #23 from HYF-Class19/volunteer-page

volunteer-page
HYF-Class19 · Aug 11, 2022 · a570e89 · a570e89
2 parents 1f035f0 + 2e3589f
commit a570e89
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 3 deletions.
diff --git a/pages/volunteer.html b/pages/volunteer.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="./client/assets/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Volunteer page</title>
+    <link href="../styles/index.css" rel="stylesheet" />
+  </head>
+  <body>
+    <!---Title with text--->
+    <section class="title-v">
+      <div class="text-v">
+        <h2>VOLUNTEER</h2>
+        <p>
+          HackYourFuture is possible only thanks to our many volunteer coaches
+          and mentors. Do you also want to help to make the tech industry more
+          inclusive and become part of our community?
+        </p>
+      </div>
+      <div>
+        <button
+          form="my-form"
+          class="button-v"
+          type="submit"
+          aria-required="false"
+        >
+          Join as a coach
+        </button>
+
+        <button
+          form="my-form"
+          class="button-v"
+          type="submit"
+          aria-required="false"
+        >
+          Join as a mentor
+        </button>
+      </div>
+    </section>
+
+    <!---volunteer`s motivation--->
+
+    <section>
+      <div>
+        <h1>WHY SHOULD I VOLUNTEER AT HYF?</h1>
+      </div>
+    </section>
+  </body>
+</html>
diff --git a/planning/development-strategy.md b/planning/development-strategy.md
@@ -97,7 +97,7 @@ The site needs a clear logo at the top-left of the page.
 
 ### Footer: CSS
 
-## volunteer.html <!-- Valeriya -->
+## Volunteer.html <!-- Valeriya -->
 
 <!-- **Head start** -->
 
@@ -124,12 +124,12 @@ The site needs a clear logo at the top-left of the page.
 
 ### Footer: HTML
 
-- Section containing title, addres and @mail
+- Section containing title, address and @mail
 - Section for social medial links
 
 ### Footer: CSS
 
-- -Use grid to position items on to footer
+- Use grid to position items on to footer
 - Use hover for social media links
 
 ## digitalents.html <!-- Elnura -->

diff --git a/styles/index.css b/styles/index.css
@@ -1 +1,62 @@
 @import url("./something.css");
+
+/* Volunteer page */
+
+/* Title with text */
+
+body {
+  background-color: rgb(255, 255, 255);
+  font-family: "Space Mono", monospace;
+  max-width: 100vw;
+}
+
+.title-v {
+  text-align: center;
+  justify-content: center;
+  max-width: 500px;
+  margin: auto;
+}
+
+h2 {
+  font-size: 36px;
+  line-height: 120%;
+  margin-bottom: 20px;
+  text-transform: uppercase;
+  font-family: "Work Sans", sans-serif;
+  font-weight: 700;
+  color: rgb(28, 34, 148);
+  text-align: center;
+  max-width: none;
+}
+
+.text-v {
+  max-width: 550px;
+  text-align: center;
+  color: rgb(45, 48, 55);
+  line-height: 160%;
+  font-size: 16px;
+  font-family: "Space Mono", monospace;
+  word-break: break-word;
+  font-weight: 300;
+}
+
+.button-v {
+  display: inline-flex;
+  margin: 20px 0 0;
+  font-size: 12px;
+  line-height: 160%;
+  text-decoration: none;
+  background-color: rgb(74, 80, 187);
+  color: white;
+  font-weight: 600;
+  margin-left: 10px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  box-sizing: border-box;
+  padding: 10px 20px;
+  cursor: pointer;
+  text-transform: uppercase;
+  -webkit-box-align: center;
+  align-items: center;
+  font-family: "Work Sans", sans-serif;
+}