diff options
Diffstat (limited to 'alphabetlearning/templates/pages/home.html')
| -rw-r--r-- | alphabetlearning/templates/pages/home.html | 282 |
1 files changed, 145 insertions, 137 deletions
diff --git a/alphabetlearning/templates/pages/home.html b/alphabetlearning/templates/pages/home.html index bda011c..e0827c1 100644 --- a/alphabetlearning/templates/pages/home.html +++ b/alphabetlearning/templates/pages/home.html @@ -1,18 +1,18 @@ {% extends "base.html" %} {% load static %} {% block content %} -<div class="container text-center"> - <div class="row"> - <div class="px-4 py-5 mt-5 mb-0"> - <h1 class="display-1 fw-bold">Alphabet Learning</h1> - <p class="display-6 mb-4 mt-4 p-4 rounded" style="color: #919191"> - High quality educational resources focused on simple concepts - and the first steps in learning. - </p> + <div class="container text-center"> + <div class="row"> + <div class="px-4 py-5 mt-5 mb-0"> + <h1 class="display-1 fw-bold">Alphabet Learning</h1> + <p class="display-6 mb-4 mt-4 p-4 rounded" style="color: #919191"> + High quality educational resources focused on simple concepts + and the first steps in learning. + </p> + </div> </div> - </div> - <hr - style=" + <hr + style=" border: none; height: 10px; background: linear-gradient( @@ -28,38 +28,46 @@ width: 100%; margin: 20px 0; " - /> + /> - <div class="row justify-content-center my-5"> - <div class="col-lg-12"> - <h2 class="display-4 font-weight-bolder my-3">Sign up</h2> - <div> - <p class="display-6 mb-4" style="color: darkgray"> - To be informed of the site launch and receive FREE resource - credits, join our new customer mailing list... - </p> - </div> - <form - method="post" - action="{% url 'payments:email_signup_verification' %}" - class="mb-4" - style="padding: 30px 0" - > - {% csrf_token %} - <div class="my-5"> - <div class="mb-4 text-start"> - <input - type="email" - class="sign-up-form-input" - id="email" - name="email" - required - placeholder="Your email address..." - /> - </div> - <button - type="submit" - style=" + <div class="row justify-content-center my-5"> + <div class="col-lg-12"> + <h2 class="display-4 font-weight-bolder my-3">Sign up</h2> + <div> + <p class="display-6 mb-4" style="color: darkgray"> + To be informed of the site launch and receive FREE resource + credits, join our new customer mailing list... + </p> + </div> + <form + method="post" + action="{% url 'payments:email_signup_verification' %}" + class="mb-4" + style="padding: 30px 0" + > + {% csrf_token %} + {{ form.non_field_errors }} + <div class="my-5"> + {% if form.email.errors %} + <div class="text-start my-2 border border-danger text-danger rounded"> + <p> + {{ form.email.errors }} + </p> + </div> + {% endif %} + <div class="mb-4 text-start"> + <input + type="email" + class="sign-up-form-input" + id="email" + name="email" + required + placeholder="Your email address..." + /> + </div> + <button + type="submit" + style=" background-color: red; color: white; border: none; @@ -68,33 +76,33 @@ font-size: 1.5rem; font-weight: bold; " - > - Submit - </button> - </div> - <p class="text-muted text-center mt-3"> - <small + > + Submit + </button> + </div> + <p class="text-muted text-center mt-3"> + <small >By joining our list, you agree to our - <a - href="{% url 'payments:privacy_policy' %}" - class="text-decoration-none" + <a + href="{% url 'payments:privacy_policy' %}" + class="text-decoration-none" >Privacy and Legal Notice</a - >.</small - > + >.</small + > + </p> + </form> + </div> + <div class="col-lg-12"> + <h2 class="display-4 font-weight-bolder my-3">Bonus offer!</h2> + <p class="display-6 mb-4" style="color: darkgray"> + As a thank-you, the first fifty customers who join our mailing + list will receive a 50% discount once the site is live. </p> - </form> - </div> - <div class="col-lg-12"> - <h2 class="display-4 font-weight-bolder my-3">Bonus offer!</h2> - <p class="display-6 mb-4" style="color: darkgray"> - As a thank-you, the first fifty customers who join our mailing - list will receive a 50% discount once the site is live. - </p> + </div> </div> - </div> - <hr - style=" + <hr + style=" border: none; height: 10px; background: linear-gradient( @@ -110,87 +118,87 @@ width: 100%; margin: 20px 0; " - /> + /> - <div class="row justify-content-center"> - <div class="col-md-4 mb-5 mb-md-0"> - <img - src="{% static 'images/funnel4.png' %}" - class="img-fluid rotated-image" - alt="Funnel 1" - /> - </div> - <div class="col-md-4 mb-5 mb-md-0"> - <img - src="{% static 'images/funnel5.png' %}" - class="img-fluid rotated-image" - alt="Funnel 2" - /> - </div> - <div class="col-md-4 mb-5 mb-md-0"> - <img - src="{% static 'images/funnel6.png' %}" - class="img-fluid rotated-image" - alt="Funnel 3" - /> + <div class="row justify-content-center"> + <div class="col-md-4 mb-5 mb-md-0"> + <img + src="{% static 'images/funnel4.png' %}" + class="img-fluid rotated-image" + alt="Funnel 1" + /> + </div> + <div class="col-md-4 mb-5 mb-md-0"> + <img + src="{% static 'images/funnel5.png' %}" + class="img-fluid rotated-image" + alt="Funnel 2" + /> + </div> + <div class="col-md-4 mb-5 mb-md-0"> + <img + src="{% static 'images/funnel6.png' %}" + class="img-fluid rotated-image" + alt="Funnel 3" + /> + </div> </div> - </div> - <div class="row my-5 d-flex align-items-stretch"> - <div class="col-md-12 d-flex"> - <div class="p-4 flex-fill"> - <h2 class="display-4 font-weight-bolder my-3"> - Learning from A to Z + <div class="row my-5 d-flex align-items-stretch"> + <div class="col-md-12 d-flex"> + <div class="p-4 flex-fill"> + <h2 class="display-4 font-weight-bolder my-3"> + Learning from A to Z + </h2> + <p + class="display-6" + style="margin-bottom: 20px; color: darkgray" + > + Focused on early concepts, these resources are designed to + be accessible to all learners. + </p> + </div> + </div> + <div class="display-4 font-weight-bolder my-5"> + <h2 class="display-4 font-weight-bolder mb-2"> + No commitment required </h2> - <p - class="display-6" - style="margin-bottom: 20px; color: darkgray" - > - Focused on early concepts, these resources are designed to - be accessible to all learners. + <p class="display-6" style="margin-bottom: 20px; color: darkgray"> + Resources will be available to purchase individually without a + subscription. </p> </div> </div> - <div class="display-4 font-weight-bolder my-5"> - <h2 class="display-4 font-weight-bolder mb-2"> - No commitment required - </h2> - <p class="display-6" style="margin-bottom: 20px; color: darkgray"> - Resources will be available to purchase individually without a - subscription. - </p> - </div> - </div> - <div class="row justify-content-center my-5"> - <div class="col-md-4 mb-5 mb-md-0"> - <img - src="{% static 'images/funnel1.png' %}" - class="img-fluid rotated-image" - alt="Funnel 1" - /> - </div> - <div class="col-md-4 mb-5 mb-md-0"> - <img - src="{% static 'images/funnel2.png' %}" - class="img-fluid rotated-image" - alt="Funnel 2" - /> - </div> - <div class="col-md-4 mb-5 mb-md-0"> - <img - src="{% static 'images/funnel3.png' %}" - class="img-fluid rotated-image" - alt="Funnel 3" - /> + <div class="row justify-content-center my-5"> + <div class="col-md-4 mb-5 mb-md-0"> + <img + src="{% static 'images/funnel1.png' %}" + class="img-fluid rotated-image" + alt="Funnel 1" + /> + </div> + <div class="col-md-4 mb-5 mb-md-0"> + <img + src="{% static 'images/funnel2.png' %}" + class="img-fluid rotated-image" + alt="Funnel 2" + /> + </div> + <div class="col-md-4 mb-5 mb-md-0"> + <img + src="{% static 'images/funnel3.png' %}" + class="img-fluid rotated-image" + alt="Funnel 3" + /> + </div> </div> + <p + class="display-6 mb-4 mt-4 p-4 col-12 rounded text-center" + style="color: darkgray" + > + Alphabet Learning is currently in active <br/>development and will be + launched in Spring 2025. + </p> </div> - <p - class="display-6 mb-4 mt-4 p-4 col-12 rounded text-center" - style="color: darkgray" - > - Alphabet Learning is currently in active <br />development and will be - launched in Spring 2025. - </p> -</div> {% endblock content %} |