diff options
| -rw-r--r-- | src/html/index.html | 407 | ||||
| -rw-r--r-- | src/js/index.js | 14 | ||||
| -rw-r--r-- | src/scss/index.scss | 34 |
3 files changed, 335 insertions, 120 deletions
diff --git a/src/html/index.html b/src/html/index.html index 96ab6c5..2920e48 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -113,154 +113,163 @@ </div> </section> - <!-- offerings flash cards --> + <!-- offerings --> <section class="section" id="offerings"> <div class="container"> <div class="columns"> <div class="column is-one-fourth"> - <div class="flash-card"> - <div class="flash-card-inner"> - <div class="flash-card-front darkgreen"> - <div class="content"> - <p>Subject Tutoring</p> - </div> - </div> - <div class="flash-card-back darkgray"> - <p>Tutoring for specific courses or disciplines.</p> - </div> + <div + id="offering-1" + class="box offering darkgreen" + onclick="showOffering(this)" + > + <div class="content has-text-centered"> + <p> + <em>Subject Tutoring</em> + </p> + <p>Tutoring for specific courses or disciplines.</p> + <p> + <em><u>Learn more...</u></em> + </p> </div> </div> </div> <div class="column is-one-fourth"> - <div class="flash-card"> - <div class="flash-card-inner"> - <div class="flash-card-front darkerteal"> - <div class="content"> - <p>Time Management</p> - </div> - </div> - <div class="flash-card-back darkgray"> - <p> - Personalized plans for managing academics, extracurriculars, - and other commitments. - </p> - </div> + <div + id="offering-2" + class="box offering darkerteal" + onclick="showOffering(this)" + > + <div class="content has-text-centered"> + <p> + <em>Time Management</em> + </p> + <p> + Personalized plans for managing academics, extracurriculars, + and other commitments. + </p> + <p> + <em><u>Learn more...</u></em> + </p> </div> </div> </div> <div class="column is-one-fourth"> - <div class="flash-card"> - <div class="flash-card-inner"> - <div class="flash-card-front darkgreen"> - <div class="content"> - <p>Study Skills</p> - </div> - </div> - <div class="flash-card-back darkgray"> - <div class="content"> - <p>Learn how to make the most of your study time.</p> - </div> - </div> + <div + id="offering-3" + class="box offering darkgreen" + onclick="showOffering(this)" + > + <div class="content has-text-centered"> + <p> + <em>Study Skills</em> + </p> + <p>Learn how to make the most of your study time.</p> + <p> + <em><u>Learn more...</u></em> + </p> </div> </div> </div> <div class="column is-one-fourth"> - <div class="flash-card"> - <div class="flash-card-inner"> - <div class="flash-card-front darkerteal"> - <div class="content"> - <p>Academic Coaching</p> - </div> - </div> - <div class="flash-card-back darkgray"> - <div class="content"> - <p> - Time management and study skills blended with continuing - accountability. - </p> - </div> - </div> + <div + id="offering-4" + class="box offering darkerteal" + onclick="showOffering(this)" + > + <div class="content has-text-centered"> + <p> + <em>Academic Coaching </em> + </p> + <p> + Time management and study skills blended with continuing + accountability. + </p> + <p> + <em><u>Learn more...</u></em> + </p> </div> </div> </div> </div> </div> + <div class="container"> <div class="columns"> <div class="column is-one-fourth"> - <div class="flash-card"> - <div class="flash-card-inner"> - <div class="flash-card-front green"> - <div class="content"> - <p>College Prep</p> - </div> - </div> - <div class="flash-card-back darkgray"> - <p> - ACT & SAT preparation and assistance with college - application essays. - </p> - </div> + <div + id="offering-5" + class="box offering green" + onclick="showOffering(this)" + > + <div class="content has-text-centered"> + <p><em>College Prep</em></p> + <p> + ACT & SAT preparation and assistance with college + application essays. + </p> + <p> + <em><u>Learn more...</u></em> + </p> </div> </div> </div> <div class="column is-one-fourth"> - <div class="flash-card"> - <div class="flash-card-inner"> - <div class="flash-card-front darkteal"> - <div class="content"> - <p>College-Level Writing</p> - </div> - </div> - <div class="flash-card-back darkgray"> - <p> - Get a head start on meeting professors' expectations. - </p> - </div> + <div + id="offering-6" + class="box offering darkteal" + onclick="showOffering(this)" + > + <div class="content has-text-centered"> + <p><em>College-Level Writing</em></p> + <p> + Get a head start on meeting professors' expectations. + </p> + <p> + <em><u>Learn more...</u></em> + </p> </div> </div> </div> <div class="column is-one-fourth"> - <div class="flash-card"> - <div class="flash-card-inner"> - <div class="flash-card-front green"> - <div class="content"> - <p>Group Webinars</p> - </div> - </div> - <div class="flash-card-back darkgray"> - <div class="content"> - <p> - Participate in general workshops and pre-planned courses - from the comfort of home. - </p> - </div> - </div> + <div + id="offering-7" + class="box offering green" + onclick="showOffering(this)" + > + <div class="content has-text-centered"> + <p><em>Group Webinars</em></p> + <p> + Participate in general workshops and pre-planned courses from + the comfort of home. + </p> + <p> + <em><u>Learn more...</u></em> + </p> </div> </div> </div> <div class="column is-one-fourth"> - <div class="flash-card"> - <div class="flash-card-inner"> - <div class="flash-card-front darkteal"> - <div class="content"> - <p>Parent Consultations</p> - </div> - </div> - <div class="flash-card-back darkgray"> - <div class="content"> - <p> - For parents seeking advice for facilitating their child's - learning. - </p> - </div> - </div> + <div + id="offering-8" + class="box offering darkteal" + onclick="showOffering(this)" + > + <div class="content has-text-centered"> + <p><em>Parent Consultations</em></p> + <p> + For parents seeking advice for facilitating their child's + learning. + </p> + <p> + <em><u>Learn more...</u></em> + </p> </div> </div> </div> @@ -446,7 +455,7 @@ <!-- footer, copyright, problems --> <footer class="footer"> - <div class="content has-text-centedarkteal"> + <div class="content has-text-centered"> <p> © 2020 Carpenter Tutoring, LLC. All rights reserved. </p> @@ -459,6 +468,190 @@ </div> </footer> + <!-- offering modals, hidden by default --> + <div id="offering-1-modal" class="modal fadeIn"> + <div class="modal-background" onclick="hideOffering(this)"></div> + <div class="modal-content"> + <div class="box offering darkgreen"> + <div class="content"> + <ul> + <li>All levels of reading/Language Arts/English</li> + <li>All levels of Latin</li> + <li>Math through Algebra II/Geometry</li> + <li> + Introductory Biology, Physics, and Chemistry (not at the honors + or AP level) + </li> + <li>Writing skills</li> + </ul> + </div> + </div> + </div> + <button + class="modal-close is-large" + onclick="hideOffering(this)" + ></button> + </div> + + <div id="offering-2-modal" class="modal fadeIn"> + <div class="modal-background" onclick="hideOffering(this)"></div> + <div class="modal-content"> + <div class="box offering darkerteal"> + <div class="content"> + <p> + Learn how to balance all of the demands in your life. Time + Management sessions are tailored to your needs and can include + building an hour-by-hour schedule of your week, creating a + long-term plan for assignments and responsibilities, and + discussing time and stress management techniques. + </p> + </div> + </div> + </div> + <button + class="modal-close is-large" + onclick="hideOffering(this)" + ></button> + </div> + + <div id="offering-3-modal" class="modal fadeIn"> + <div class="modal-background" onclick="hideOffering(this)"></div> + <div class="modal-content"> + <div class="box offering darkgreen"> + <div class="content"> + <p> + Study Skills sessions will allow students to develop a toolkit for + successful study habits. Learn about techniques to fight mental + fatigue and tools for mental recall. Study Skills sessions also + cover ways to address motivation, attention, and avoidance. Topics + will be tailored for your specific needs. + </p> + </div> + </div> + </div> + <button + class="modal-close is-large" + onclick="hideOffering(this)" + ></button> + </div> + + <div id="offering-4-modal" class="modal fadeIn"> + <div class="modal-background" onclick="hideOffering(this)"></div> + <div class="modal-content"> + <div class="box offering darkerteal"> + <div class="content"> + <p> + Academic Coaching offers all the benefits of Study Skills and Time + Management appointments plus ongoing planning and accountability + support. As an Academic Coach, I keep track of your student's + upcoming assignments and assessments and help craft a schedule + week to week for them to accomplish their goals. Students come + away as more independent and confident planners and + self-advocates. + </p> + </div> + </div> + </div> + <button + class="modal-close is-large" + onclick="hideOffering(this)" + ></button> + </div> + + <div id="offering-5-modal" class="modal fadeIn"> + <div class="modal-background" onclick="hideOffering(this)"></div> + <div class="modal-content"> + <div class="box offering green"> + <div class="content"> + <p> + Prepare for standardized college entrance exams with one-on-one + content instruction and practice testing. Additionally, learn how + to write an attention-grabbing personal essay for college + applications, and receive guidance on institution-specific + supplemental essays. + </p> + </div> + </div> + </div> + <button + class="modal-close is-large" + onclick="hideOffering(this)" + ></button> + </div> + + <div id="offering-6-modal" class="modal fadeIn"> + <div class="modal-background" onclick="hideOffering(this)"></div> + <div class="modal-content"> + <div class="box offering darkteal"> + <div class="content"> + <p> + Learn how to shift high-school level writing to that which will be + expected in college. Topics covered include moving beyond the + five-paragraph essay, writing research papers, and choosing a + topic for essays with open prompts. In-session exercises will + allow students to implement these skills in real time with + immediate feedback. + </p> + </div> + </div> + </div> + <button + class="modal-close is-large" + onclick="hideOffering(this)" + ></button> + </div> + + <div id="offering-7-modal" class="modal fadeIn"> + <div class="modal-background" onclick="hideOffering(this)"></div> + <div class="modal-content"> + <div class="box offering green"> + <div class="content"> + <p> + Join a small group of peers online to learn and grow together. + One-session webinars include overviews of time management + techniques and study skills and are best suited to high school and + college students. Pre-planned courses, including SAT Prep, ACT + Prep, and College Transition, meet once per week for five weeks at + a time. Pay $30 per session or save 10% and buy as a package for + $135! Webinars will be hosted through password-protected Zoom + meetings. Participants will receive the Zoom link and weekly + password through e-mail. + </p> + </div> + </div> + </div> + <button + class="modal-close is-large" + onclick="hideOffering(this)" + ></button> + </div> + + <div id="offering-8-modal" class="modal fadeIn"> + <div class="modal-background" onclick="hideOffering(this)"></div> + <div class="modal-content"> + <div class="box offering darkteal"> + <div class="content"> + <p> + After I have worked with your student for a few sessions, you may + request a Parent Consultation during which I will discuss the + strengths and areas for improvement I have seen in your child and + the ways you may be able to help. All parents want to help their + children succeed, but sometimes the way we offer that assistance + is not the way children want to receive it. Learn how to meet your + child where they are and support them in ways which resonate with + their unique needs. These sessions are not tell-alls of what your + student and I discuss during our sessions, as I feel that trust is + central to successful tutoring relationships. + </p> + </div> + </div> + </div> + <button + class="modal-close is-large" + onclick="hideOffering(this)" + ></button> + </div> + <script src="/js/index.js" type="text/javascript"></script> <script src="/js/iconify.min.js" type="text/javascript"></script> <script src="/js/smtp.js" type="text/javascript"></script> diff --git a/src/js/index.js b/src/js/index.js index 77cdf65..8f3a987 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,5 +1,15 @@ +const showOffering = function(element) { + const offeringModal = document.getElementById(element.id + "-modal"); + offeringModal.classList.add("is-active"); +} + +const hideOffering = function(element) { + element.parentElement.classList.remove("is-active"); +} + /* * Adds an event listener to all burgers to toggle navbar menu on click. + * TODO: would be better off as a single function and onclicks inlined in html */ document.addEventListener('DOMContentLoaded', function () { const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); @@ -55,9 +65,9 @@ document.forms.inquiry.onsubmit = function() { Email.send({ SecureToken : "cec9bc04-de48-48fd-b1ad-a95cffb41468", - To : "atc@53hor.net", + To : "amy@carpentertutoring.com", From : fromEmail, - Subject : "Inquiry: " + name, + Subject : "Tutoring Inquiry from " + name, Body : body, }).then(message => { if (message == "OK") { diff --git a/src/scss/index.scss b/src/scss/index.scss index 79ed71d..67f41a5 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -41,31 +41,29 @@ $body-font-size: 1.25rem; @import "../../node_modules/bulma/sass/layout/_all.sass"; @import "../../node_modules/bulma/sass/grid/_all.sass"; -// Palette +.offering { + color: white; +} +.offering .content u { + cursor: pointer; +} +.column .offering { + border: 1em solid $darkgray; +} .darkteal { background-color: $darkteal; - border: 1em solid $darkgray; - color: white; } .green { background-color: $green; - border: 1em solid $darkgray; - color: white; } .darkerteal { background-color: $darkerteal; - border: 1em solid $darkgray; - color: white; } .darkgray { background-color: $darkgray; - border: 1em solid $darkgray; - color: white; } .darkgreen { background-color: $darkgreen; - border: 1em solid $darkgray; - color: white; } .blurb { @@ -127,6 +125,20 @@ $body-font-size: 1.25rem; text-shadow: 0px 0px 4px #ffffff; } +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +.fadeIn { + animation-name: fadeIn; + animation-duration: 0.3s; +} + body { background-image: url("/bg.png"); } |