wip: working on the form and front page

1 files changed, 79 insertions, 56 deletions

diff --git a/alphabetlearning/static/css/project.css b/alphabetlearning/static/css/project.css
index d475b2a..be6532f 100644
--- a/alphabetlearning/static/css/project.css
+++ b/alphabetlearning/static/css/project.css
@@ -1,113 +1,136 @@
 /* These styles are generated from project.scss. */
 
 .roboto-thin {
-  font-family: "Roboto", sans-serif;
-  font-weight: 100;
-  font-style: normal;
+    font-family: "Roboto", sans-serif;
+    font-weight: 100;
+    font-style: normal;
 }
 
 .roboto-light {
-  font-family: "Roboto", sans-serif;
-  font-weight: 300;
-  font-style: normal;
+    font-family: "Roboto", sans-serif;
+    font-weight: 300;
+    font-style: normal;
 }
 
 .roboto-regular {
-  font-family: "Roboto", sans-serif;
-  font-weight: 400;
-  font-style: normal;
+    font-family: "Roboto", sans-serif;
+    font-weight: 400;
+    font-style: normal;
 }
 
 .roboto-medium {
-  font-family: "Roboto", sans-serif;
-  font-weight: 500;
-  font-style: normal;
+    font-family: "Roboto", sans-serif;
+    font-weight: 500;
+    font-style: normal;
 }
 
 .roboto-bold {
-  font-family: "Roboto", sans-serif;
-  font-weight: 700;
-  font-style: normal;
+    font-family: "Roboto", sans-serif;
+    font-weight: 700;
+    font-style: normal;
 }
 
 .roboto-black {
-  font-family: "Roboto", sans-serif;
-  font-weight: 900;
-  font-style: normal;
+    font-family: "Roboto", sans-serif;
+    font-weight: 900;
+    font-style: normal;
 }
 
 .roboto-thin-italic {
-  font-family: "Roboto", sans-serif;
-  font-weight: 100;
-  font-style: italic;
+    font-family: "Roboto", sans-serif;
+    font-weight: 100;
+    font-style: italic;
 }
 
 .roboto-light-italic {
-  font-family: "Roboto", sans-serif;
-  font-weight: 300;
-  font-style: italic;
+    font-family: "Roboto", sans-serif;
+    font-weight: 300;
+    font-style: italic;
 }
 
 .roboto-regular-italic {
-  font-family: "Roboto", sans-serif;
-  font-weight: 400;
-  font-style: italic;
+    font-family: "Roboto", sans-serif;
+    font-weight: 400;
+    font-style: italic;
 }
 
 .roboto-medium-italic {
-  font-family: "Roboto", sans-serif;
-  font-weight: 500;
-  font-style: italic;
+    font-family: "Roboto", sans-serif;
+    font-weight: 500;
+    font-style: italic;
 }
 
 .roboto-bold-italic {
-  font-family: "Roboto", sans-serif;
-  font-weight: 700;
-  font-style: italic;
+    font-family: "Roboto", sans-serif;
+    font-weight: 700;
+    font-style: italic;
 }
 
 .roboto-black-italic {
-  font-family: "Roboto", sans-serif;
-  font-weight: 900;
-  font-style: italic;
+    font-family: "Roboto", sans-serif;
+    font-weight: 900;
+    font-style: italic;
 }
 
 body {
-    font-family: 'Roboto', sans-serif;
+    font-family: "Roboto", sans-serif;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-weight: 700; /* Bold for headings */
 }
 
-p, label, button {
+p,
+label,
+button {
     font-weight: 400; /* Regular for body text */
 }
 
 .custom-text {
-    font-family: 'Roboto', sans-serif;
+    font-family: "Roboto", sans-serif;
     font-size: 1.1rem;
     font-weight: 400;
     line-height: 1.7;
     color: #212529;
 }
 
-.alert-debug {
-  color: black;
-  background-color: white;
-  border-color: #d6e9c6;
+.email-submit-button {
+    background-color: #ac94eb;
+    padding: 12px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    transition: background-color 0.3s;
 }
 
+.email-submit-button:hover {
+    background-color: #c0b0eb;
+}
+
+.alert-debug {
+    color: black;
+    background-color: white;
+    border-color: #d6e9c6;
+}
 
 .alert-error {
-  color: #b94a48;
-  background-color: #f2dede;
-  border-color: #eed3d7;
+    color: #b94a48;
+    background-color: #f2dede;
+    border-color: #eed3d7;
 }
 
 .rotated-image {
     transform: rotate(0deg); /* Existing rotation */
-    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.3)); /* Existing drop-shadow */
+    filter: drop-shadow(
+        2px 2px 5px rgba(0, 0, 0, 0.3)
+    ); /* Existing drop-shadow */
     transition: transform 0.3s ease; /* Smooth transition for the hover effect */
 }
 
@@ -131,28 +154,28 @@ p, label, button {
 
 /* Change the colour of the box shadow */
 .my-card-shadow-sm {
-  box-shadow: 0 0.25rem 0.5rem rgba(100, 100, 100, 0.1);
+    box-shadow: 0 0.25rem 0.5rem rgba(100, 100, 100, 0.1);
 }
 
 .my-card-shadow-lg {
-  box-shadow: 7px 7px 7px rgba(100, 100, 100, 0.5);
+    box-shadow: 7px 7px 7px rgba(100, 100, 100, 0.5);
 }
 
 h1 {
     /*color: #657c76;*/
-    font-size: 2.0rem;
+    font-size: 2rem;
     font-weight: bold;
 }
 
 a {
-  font-size: inherit;
-  color: #394f49;
-  font-weight: bold;
-  text-decoration: none;
+    font-size: inherit;
+    color: #394f49;
+    font-weight: bold;
+    text-decoration: none;
 }
 
 header {
-  margin-top: 30px;
+    margin-top: 30px;
 }
 
 .card-title a {