summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/html/index.html407
-rw-r--r--src/js/index.js14
-rw-r--r--src/scss/index.scss34
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 &amp; 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 &amp; 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>
&copy; 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");
}