diff options
Diffstat (limited to 'alphabetlearning/templates')
| -rw-r--r-- | alphabetlearning/templates/base.html | 14 | ||||
| -rw-r--r-- | alphabetlearning/templates/pages/home.html | 315 |
2 files changed, 234 insertions, 95 deletions
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 @@ <nav class="navbar navbar-expand-lg navbar-light bg-white"> <div class="container-fluid"> <a class="navbar-brand" href="{% url "home" %}"> - <img src="{% static "images/AL_long_logo_black_grey.png" %}" width=300px alt="Alphabet Learning Logo"> + <img style="margin-left: 2rem; margin-top: 20px;" src="{% static "images/AL_long_logo_black_grey.png" %}" width=300px alt="Alphabet Learning Logo"> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> @@ -84,17 +84,6 @@ <!-- </div> --> </li> <li class="nav-item"> - {% if request.user.is_authenticated %} - <a class="nav-link text-gray fw-bold" href="{% url "users:detail" request.user.id %}">{{ request.user }}</a> - {% else %} - <a class="nav-link text-dark fw-bold" href="{% url "account_login" %}">Log in</a> - {% endif %} - </li> - - <li class="nav-item"> - <a class="nav-link text-dark fw-bold" href="{% url "resources:resource_list" %}">Resources</a> - </li> - <li class="nav-item"> <a class="nav-link text-dark fw-bold" href="https://www.tes.com/teaching-resources/shop/alphabetlearning" target="_blank">TES Shop</a> @@ -116,7 +105,6 @@ </div> </div> </nav> - <div class="border-bottom border-dark border-1"></div> </header> <main> {% 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 %} - - <div class="container text-center"> - <div class="row"> - <div class="px-4 py-5 mt-5 mb-0"> - <h1 class="display-5 fw-bold">High Quality Educational Resources</h1> - <p class="lead mb-4 mt-4 bg-light p-4 rounded"> - 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. - </p> - </div> +<div class="container text-center"> + <div class="row"> + <div class="px-4 py-5 mt-5 mb-0"> + <h1 class="display-5 fw-bold">Welcome, friend!</h1> + <p class="lead mb-4 mt-4 bg-light p-4 rounded"> + 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. + </p> </div> - - <hr style="border: none; height: 5px; background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); width: 100%; margin: 20px 0;" /> + </div> - <div class="row justify-content-center my-5"> - <div class="col-md-4"> - <img src="{% static 'images/funnel1_initial_sounds.png' %}" class="img-fluid rotated-image" alt="Funnel 1"> - </div> - <div class="col-md-4"> - <img src="{% static 'images/funnel2_picture_match_words.png' %}" class="img-fluid rotated-image" alt="Funnel 2"> - </div> - <div class="col-md-4"> - <img src="{% static 'images/funnel3_handwriting.png' %}" class="img-fluid rotated-image" alt="Funnel 3"> - </div> + <hr + style=" + border: none; + height: 10px; + background: linear-gradient( + to right, + red, + orange, + yellow, + green, + blue, + indigo, + violet + ); + width: 100%; + margin: 20px 0; + " + /> + + <div class="row justify-content-center my-5"> + <div class="col-md-4"> + <img + src="{% static 'images/funnel1_initial_sounds.png' %}" + class="img-fluid rotated-image" + alt="Funnel 1" + /> </div> + <div class="col-md-4"> + <img + src="{% static 'images/funnel2_picture_match_words.png' %}" + class="img-fluid rotated-image" + alt="Funnel 2" + /> + </div> + <div class="col-md-4"> + <img + src="{% static 'images/funnel3_handwriting.png' %}" + class="img-fluid rotated-image" + alt="Funnel 3" + /> + </div> + </div> - <hr style="border: none; height: 5px; background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); width: 100%; margin: 20px 0;" /> + <hr + style=" + border: none; + height: 10px; + background: linear-gradient( + to right, + red, + orange, + yellow, + green, + blue, + indigo, + violet + ); + width: 100%; + margin: 20px 0; + " + /> - <div class="row my-5 d-flex align-items-stretch"> - <div class="col-md-6 d-flex"> - <div class="p-4 border border-danger rounded shadow flex-fill custom-box"> - <h2 class="font-weight-bolder mb-2">What is Alphabet Learning?</h2> - <p class="custom-text" style="margin-bottom: 20px;"> - 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. - </p> - <p class="custom-text" style="margin-bottom: 20px;"> - All resources will be available to purchase individually for a very competitive price <u>without</u> needing a - subscription. We believe this will make our resources more accessible to more people. - </p> - </div> + <div class="row my-5 d-flex align-items-stretch"> + <div class="col-md-6 d-flex"> + <div + class="p-4 border border-danger rounded shadow flex-fill custom-box" + > + <h2 class="font-weight-bolder mb-2"> + What is Alphabet Learning? + </h2> + <p class="custom-text" style="margin-bottom: 20px"> + 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. + </p> + <p class="custom-text" style="margin-bottom: 20px"> + All resources will be available to purchase individually for + a very competitive price <u>without</u> needing a + subscription. We believe this will make our resources more + accessible to more people. + </p> </div> - <div class="col-md-6 d-flex"> - <div class="p-4 border border-primary rounded shadow flex-fill custom-box"> - <h2 class="font-weight-bolder mb-2">Our philosophy</h2> - <p class="custom-text"> - Our resources have been designed with individual learners in mind: those who need clarity, detail and to be stimulated and engaged. - </p> - <p class="custom-text"> - 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. - </p> - </div> + </div> + <div class="col-md-6 d-flex"> + <div + class="p-4 border border-primary rounded shadow flex-fill custom-box" + > + <h2 class="font-weight-bolder mb-2">Our philosophy</h2> + <p class="custom-text"> + Our resources have been designed with individual learners in + mind: those who need clarity, detail and to be stimulated + and engaged. + </p> + <p class="custom-text"> + 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. + </p> </div> </div> - - <hr style="border: none; height: 5px; background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); width: 100%; margin: 20px 0;" /> + </div> - <div class="row justify-content-center my-5"> - <div class="col-md-4"> - <img src="{% static 'images/funnel4_order_numbers.png' %}" class="img-fluid rotated-image" alt="Funnel 1"> - </div> - <div class="col-md-4"> - <img src="{% static 'images/funnel5_ug_words.png' %}" class="img-fluid rotated-image" alt="Funnel 2"> - </div> - <div class="col-md-4"> - <img src="{% static 'images/funnel6_2D_shape_match.png' %}" class="img-fluid rotated-image" alt="Funnel 3"> - </div> + <hr + style=" + border: none; + height: 10px; + background: linear-gradient( + to right, + red, + orange, + yellow, + green, + blue, + indigo, + violet + ); + width: 100%; + margin: 20px 0; + " + /> + + <div class="row justify-content-center my-5"> + <div class="col-md-4"> + <img + src="{% static 'images/funnel4_order_numbers.png' %}" + class="img-fluid rotated-image" + alt="Funnel 1" + /> </div> - <div class="row justify-content-center"> - <div class="col-lg-6"> - <div style="background-color: #d4edda; padding: 20px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);"> - <p class="lead mb-4" style="font-weight: bold; font-size: 1.5rem; text-align: center;"> - To be kept informed about the site launch and to receive <span style="font-weight: bold; color: #007bff;">50% off your first purchase</span>, please submit your email address - to join our new-customer mailing list. - </p> - </div> - <form method="post" action="{% url 'payments:email_signup' %}" class="mb-4" style="padding: 30px 0;"> - {% csrf_token %} - <div style="background-color: #d4edda; padding: 20px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);"> - <div class="mb-4 text-start"> - <label for="email" class="form-label" style="font-size: 1.5rem; font-weight: bold; color: #333;">Enter Your Email:</label> - <input type="email" class="form-control" id="email" name="email" required placeholder="Enter Your Email Address" style="border: 2px solid #007bff; height: 50px; border-radius: 5px; transition: border-color 0.3s;"> - </div> - <button type="submit" class="btn btn-primary btn-lg" style="background-color: #007bff; border: none; border-radius: 5px; height: 50px; transition: background-color 0.3s;">Join Our List</button> - </div> - </form> - <p class="text-muted text-center"> - <small>By joining our list, you agree to our <a href="{% url 'payments:privacy_policy' %}" class="text-decoration-none">Privacy and Legal Notice</a>.</small> + <div class="col-md-4"> + <img + src="{% static 'images/funnel5_ug_words.png' %}" + class="img-fluid rotated-image" + alt="Funnel 2" + /> + </div> + <div class="col-md-4"> + <img + src="{% static 'images/funnel6_2D_shape_match.png' %}" + class="img-fluid rotated-image" + alt="Funnel 3" + /> + </div> + </div> + <div class="row justify-content-center"> + <div class="col-lg-12"> + <div + style=" + background-color: #edade0; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + " + > + <p + class="lead mb-4" + style=" + font-weight: bold; + font-size: 1.5rem; + text-align: center; + " + > + To be kept informed about the site launch and to receive + <span style="font-weight: bold; color: white" + >50% off your first purchase</span + >, please submit your email address to join our new-customer + mailing list. </p> </div> + <form + method="post" + action="{% url 'payments:email_signup' %}" + class="mb-4" + style="padding: 30px 0" + > + {% csrf_token %} + <div + style=" + background-color: #91dacd; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + " + > + <div class="mb-4 text-start"> + <label + for="email" + class="form-label" + style=" + font-size: 1.5rem; + font-weight: bold; + color: #333; + " + >Your story starts here...</label + > + <input + type="email" + class="form-control" + id="email" + name="email" + required + placeholder="Your email address..." + style=" + border: 2px solid #25daba; + height: 60px; + border-radius: 5px; + transition: border-color 0.3s; + " + /> + </div> + <div class="d-flex justify-content-end"> + <p class="me-2 my-2" style="font-size: 1.5rem; font-weight: bold;">...easy as A, B, C!</p> + <button type="submit" class="email-submit-button"> + Submit + </button> + </div> + </div> + </form> + <p class="text-muted text-center"> + <small + >By joining our list, you agree to our + <a + href="{% url 'payments:privacy_policy' %}" + class="text-decoration-none" + >Privacy and Legal Notice</a + >.</small + > + </p> </div> </div> +</div> {% endblock content %} |