From 58df9d60f216eab00c487c8f473e2a5547f5cfc9 Mon Sep 17 00:00:00 2001 From: Matthew Lemon Date: Sun, 1 Dec 2024 20:31:22 +0000 Subject: wip: working on the form and front page --- alphabetlearning/static/css/project.css | 135 ++++++++----- alphabetlearning/templates/base.html | 14 +- alphabetlearning/templates/pages/home.html | 315 +++++++++++++++++++++-------- 3 files changed, 313 insertions(+), 151 deletions(-) (limited to 'alphabetlearning') 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 { diff --git a/alphabetlearning/templates/base.html b/alphabetlearning/templates/base.html index a413cfc..533d0e8 100644 --- a/alphabetlearning/templates/base.html +++ b/alphabetlearning/templates/base.html @@ -60,7 +60,7 @@ -
{% block body %} diff --git a/alphabetlearning/templates/pages/home.html b/alphabetlearning/templates/pages/home.html index dc64549..8f74836 100644 --- a/alphabetlearning/templates/pages/home.html +++ b/alphabetlearning/templates/pages/home.html @@ -1,98 +1,249 @@ -{% extends "base.html" %} +{% extends "base.html" %} {% load static %} {% block content %} -{% load static %} -{% block content %} - -
-
-
-

High Quality Educational Resources

-

- Alphabet Learning is a brand new platform selling high quality educational resources. - As of December 2024, the site is currently in active development and will be launched soon. -

-
+
+
+
+

Welcome, friend!

+

+ Alphabet Learning is a brand new platform selling high quality + educational resources. As of December 2024, the site is + currently in active development and will be launched soon. +

- -
+
-
-
- Funnel 1 -
-
- Funnel 2 -
-
- Funnel 3 -
+
+ +
+
+ Funnel 1
+
+ Funnel 2 +
+
+ Funnel 3 +
+
-
+
-
-
-
-

What is Alphabet Learning?

-

- Our teaching resources are created by experienced educators with 30 years of combined - experience in mainstream and special education, American camps, Australian nurseries, childminding, and online teaching. -

-

- All resources will be available to purchase individually for a very competitive price without needing a - subscription. We believe this will make our resources more accessible to more people. -

-
+
+
+
+

+ What is Alphabet Learning? +

+

+ Our teaching resources are created by experienced educators + with 30 years of combined experience in mainstream and + special education, American camps, Australian nurseries, + childminding, and online teaching. +

+

+ All resources will be available to purchase individually for + a very competitive price without needing a + subscription. We believe this will make our resources more + accessible to more people. +

-
-
-

Our philosophy

-

- Our resources have been designed with individual learners in mind: those who need clarity, detail and to be stimulated and engaged. -

-

- Not all learners are the same and one way doesn’t fit all. Sometimes learners need to revisit concepts, explore them further and - look at them in a different way - Alphabet Learning resources are designed with this in mind, focused on getting to the nub of a concept to make learning clear. -

-
+
+
+
+

Our philosophy

+

+ Our resources have been designed with individual learners in + mind: those who need clarity, detail and to be stimulated + and engaged. +

+

+ Not all learners are the same and one way doesn’t fit all. + Sometimes learners need to revisit concepts, explore them + further and look at them in a different way - Alphabet + Learning resources are designed with this in mind, focused + on getting to the nub of a concept to make learning clear. +

- -
+
-
-
- Funnel 1 -
-
- Funnel 2 -
-
- Funnel 3 -
+
+ +
+
+ Funnel 1
-
-
-
-

- To be kept informed about the site launch and to receive 50% off your first purchase, please submit your email address - to join our new-customer mailing list. -

-
-
- {% csrf_token %} -
-
- - -
- -
-
-

- By joining our list, you agree to our Privacy and Legal Notice. +

+ Funnel 2 +
+
+ Funnel 3 +
+
+
+
+
+

+ To be kept informed about the site launch and to receive + 50% off your first purchase, please submit your email address to join our new-customer + mailing list.

+
+ {% csrf_token %} +
+
+ + +
+
+

...easy as A, B, C!

+ +
+
+
+

+ By joining our list, you agree to our + Privacy and Legal Notice. +

+
{% endblock content %} -- cgit v1.2.3