summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--TODO.md1
-rw-r--r--package.json4
-rw-r--r--src/html/index.html858
-rw-r--r--src/js/index.js12
-rw-r--r--src/scss/flip-card.scss31
-rw-r--r--src/scss/index.scss2
6 files changed, 541 insertions, 367 deletions
diff --git a/TODO.md b/TODO.md
new file mode 100644
index 0000000..1e0bfc0
--- /dev/null
+++ b/TODO.md
@@ -0,0 +1 @@
+- change figure image of Amy to a media card with social links and caption(s)
diff --git a/package.json b/package.json
index 6313564..4e913a9 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
"onchange": "^6.1.0"
},
"scripts": {
- "start": "run-p serve watch",
+ "serve": "run-p browser watch",
"css:dev": "node-sass src/scss/index.scss dist/css/index.css",
"js:dev": "cp -r src/js/* dist/js",
"clean": "rm -rf dist/",
@@ -25,7 +25,7 @@
"prebuild:dev": "npm run clean && npm run mkdirs && npm run copy",
"build:dev": "npm run css:dev && npm run js:dev",
"preserve": "npm run build:dev",
- "serve": "browser-sync start -s --no-open --files 'dist/**/*' --ss 'dist' --port 8080 --reload-debounce 500",
+ "browser": "browser-sync start -s --no-open --files 'dist/**/*' --ss 'dist' --port 8080 --reload-debounce 500",
"watch:assets": "onchange 'src/assets/**/*' -- npm run copy:assets",
"watch:html": "onchange 'src/html/**/*' -- npm run copy:html",
"watch:css": "onchange 'src/scss/**/*' -- npm run css:dev",
diff --git a/src/html/index.html b/src/html/index.html
index 51d4d78..d4f5b61 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -1,378 +1,518 @@
<!DOCTYPE html>
<html lang="en">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <meta property="og:type" content="website">
- <meta property="og:site_name" content="Carpenter Tutoring">
- <meta property="og:title" content="Carpenter Tutoring">
- <meta property="og:description" content="">
- <meta property="og:url" content="">
- <meta property="og:image" content="">
- <title>Carpenter Tutoring</title>
- <link rel="stylesheet" href="css/index.css">
- </head>
+ <head>
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta property="og:type" content="website" />
+ <meta property="og:site_name" content="Carpenter Tutoring" />
+ <meta property="og:title" content="Carpenter Tutoring" />
+ <meta property="og:description" content="" />
+ <meta property="og:url" content="" />
+ <meta property="og:image" content="" />
+ <title>Carpenter Tutoring</title>
+ <link rel="stylesheet" href="css/index.css" />
+ </head>
- <body class="has-navbar-fixed-top">
- <!-- navigation -->
- <nav class="navbar is-fixed-top">
- <div class="navbar-brand">
- <a class="navbar-item" href="#">
- <img src="/logo-simple.png">
- </a>
- <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
- <span aria-hidden="true"></span>
- <span aria-hidden="true"></span>
- <span aria-hidden="true"></span>
- </a>
- </div>
- <div class="navbar-menu" id="navMenu">
- <div class="navbar-start">
- </div>
- <div class="navbar-end">
- <a class="navbar-item" href="#offerings">
- Offerings
- </a>
- <a class="navbar-item" href="#about">
- About
- </a>
- <!--<a class="navbar-item" href="#testimonials">
- Testimonials
- </a>-->
- <a class="navbar-item" href="#contact">
- Contact Me
- </a>
- </div>
- </div>
- </nav>
+ <body class="has-navbar-fixed-top">
+ <!-- navigation -->
+ <nav class="navbar is-fixed-top">
+ <div class="navbar-brand">
+ <a class="navbar-item" href="#">
+ <img src="/logo-simple.png" />
+ </a>
+ <a role="button" class="navbar-burger" data-target="navMenu">
+ <span></span>
+ <span></span>
+ <span></span>
+ </a>
+ </div>
+ <div class="navbar-menu" id="navMenu">
+ <div class="navbar-start"></div>
+ <div class="navbar-end">
+ <a class="navbar-item" href="#offerings">
+ Offerings
+ </a>
+ <a class="navbar-item" href="#about">
+ About
+ </a>
+ <!--<a class="navbar-item" href="#testimonials">
+ Testimonials
+ </a>-->
+ <a class="navbar-item" href="#contact">
+ Contact Me
+ </a>
+ </div>
+ </div>
+ </nav>
- <!-- title, slogan, phone -->
- <section class="section has-text-right has-banner">
- <div class="banner">
- <div class="container">
- <h1 class="title is-2 has-text-shadow">
- CARPENTER TUTORING
- </h1>
- <h2 class="subtitle is-3 has-text-shadow">
- <b>Discovering <em>your</em> path to success</b>
- </h2>
- <div class="buttons is-right">
- <a class="button is-large is-rounded is-link" href="tel:1-757-335-7555">
- Call (757) 335-7555
- </a>
- <a class="button is-large is-rounded is-primary" href="#contact">
- Contact me by email
- </a>
- </div>
- </div>
- </div>
- </section>
+ <!-- title, slogan, phone -->
+ <section class="section has-text-right has-banner">
+ <div class="banner">
+ <div class="container">
+ <h1 class="title is-2 has-text-shadow">
+ CARPENTER TUTORING
+ </h1>
+ <h2 class="subtitle is-3 has-text-shadow">
+ <b>Discovering <em>your</em> path to success</b>
+ </h2>
+ <div class="buttons is-right">
+ <a
+ class="button is-large is-rounded is-link"
+ href="tel:1-757-335-7555"
+ >
+ Call (757) 335-7555
+ </a>
+ <a class="button is-large is-rounded is-primary" href="#contact">
+ Contact me by email
+ </a>
+ </div>
+ </div>
+ </div>
+ </section>
- <!-- intro blurb, logo -->
- <section class="section quiet">
- <div class="container">
- <div class="columns">
- <div class="column">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Mauris eget lobortis erat. Vivamus venenatis nec quam vitae
- vulputate. Class aptent taciti sociosqu ad litora torquent
- per conubia nostra, per inceptos himenaeos. Vestibulum ante
- ipsum primis in faucibus orci luctus et ultrices posuere
- cubilia Curae; Cras nec aliquam purus, nec ornare urna.
- Phasellus accumsan vitae elit sed fringilla. Nulla
- porttitor magna eget ipsum ultricies malesuada quis a
- ipsum.
- </p>
- </div>
- <div class="column is-one-third">
- <div class="box">
- <figure class="image">
- <img src="/amy.jpg">
- </figure>
- </div>
- </div>
- </div>
- </div>
- </section>
+ <!-- intro blurb, logo -->
+ <section class="section quiet">
+ <div class="container">
+ <div class="columns">
+ <div class="column">
+ <div class="content">
+ <p>
+ Welcome, and thank you for your interest in Carpenter Tutoring!
+ </p>
+ <p>
+ Carpenter Tutoring is a private tutoring service based in
+ Suffolk, Virginia. I offer in-person sessions throughout the
+ Hampton Roads area and remote sessions anywhere in the country.
+ Most of my offerings are one-on-one, and group sessions and
+ classes are also available.
+ </p>
+ <p>
+ Prices vary based on content area and delivery method but
+ typically range around $30 per hour for group sessions and
+ $50-60 per hour for one-on-one sessions. That being said, I
+ never want cost to be a prohibitive factor. All prices are
+ negotiable, and I offer flexible payment arrangements when
+ needed. No matter your budget, I am confident that we can find
+ an arrangement that will provide your student services without
+ creating financial strain.
+ </p>
+ <p>
+ I invite you to scroll down to learn more about the services I
+ offer, my background, and some of my policies. Thank you for
+ visiting, and please do not hesitate to reach out with any
+ questions. I would be thrilled to assist you!
+ </p>
+ </div>
+ </div>
+ <div class="column is-one-third">
+ <div class="box">
+ <figure class="image">
+ <img src="/amy.jpg" />
+ </figure>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
- <!-- offerings tiles -->
- <section class="section" id="offerings">
- <div class="container">
- <div class="tile is-ancestor">
+ <!-- offerings tiles -->
+ <section class="section" id="offerings">
+ <div class="container">
+ <div class="tile is-ancestor">
+ <div class="tile is-parent is-vertical">
+ <div class="tile is-child has-text-centered">
+ <div class="flip-card">
+ <div class="flip-card-inner">
+ <div class="flip-card-front">
+ <div class="box darkgray">
+ <div class="box darkteal">
+ <p><b>Subject Tutoring</b></p>
+ </div>
+ </div>
+ </div>
+ <div class="flip-card-back">
+ <div class="box darkgray">
+ <div class="box darkteal">
+ <p>
+ Tutoring for specific courses or disciplines.
+ </p>
+ <!--<button class="button is-link is-outlined is-inverted" href="#offerings"> Full List </button>-->
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="tile is-child has-text-centered">
+ <div class="flip-card">
+ <div class="flip-card-inner">
+ <div class="flip-card-front">
+ <div class="box darkgray">
+ <div class="box green">
+ <p><b>Time Management</b></p>
+ </div>
+ </div>
+ </div>
+ <div class="flip-card-back">
+ <div class="box darkgray">
+ <div class="box green">
+ <p>
+ Personalized plans for managing academics,
+ extracurriculars, and other commitments.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
- <div class="tile is-parent is-vertical">
- <div class="tile is-child">
- <div class="box darkgray">
- <div class="box darkteal">
- <p>
- <b>Subject Tutoring</b>
- </p>
- <p>
- Tutoring for specific courses or disciplines. Click
- here for a full list of courses covered.
- </p>
- </div>
- </div>
- </div>
- <div class="tile is-child">
- <div class="box darkgray">
- <div class="box green">
- <p>
- <b>Time Management</b>
- </p>
- <p>
- Personalized plans for managing academics,
- extracurriculars, and other commitments.
- </p>
- </div>
- </div>
- </div>
- </div>
+ <div class="tile is-parent is-vertical">
+ <div class="tile is-child has-text-centered">
+ <div class="flip-card">
+ <div class="flip-card-inner">
+ <div class="flip-card-front">
+ <div class="box darkgray">
+ <div class="box darkgreen">
+ <p><b>Study Skills</b></p>
+ </div>
+ </div>
+ </div>
+ <div class="flip-card-back">
+ <div class="box darkgray">
+ <div class="box darkgreen">
+ <div class="content is-large">
+ <p>Learn how to make the most of your study time.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="tile is-child has-text-centered">
+ <div class="flip-card">
+ <div class="flip-card-inner">
+ <div class="flip-card-front">
+ <div class="box darkgray">
+ <div class="box darkerteal">
+ <p><b>Academic Coaching</b></p>
+ </div>
+ </div>
+ </div>
+ <div class="flip-card-back">
+ <div class="box darkgray">
+ <div class="box darkerteal">
+ <p>
+ Time management and study skills blended with
+ continuing accountability.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
- <div class="tile is-parent is-vertical">
- <div class="tile is-child">
- <div class="box darkgray">
- <div class="box darkgreen">
- <p>
- <b>Study Skills</p>
- </b>
- <p>
- Learn how to make the most of your study time.
- </p>
- </div>
- </div>
- </div>
- <div class="tile is-child">
- <div class="box darkgray">
- <div class="box darkerteal">
- <p>
- <b>Academic Coaching</b>
- </p>
- <p>
- Time management and study skills blended with
- continuing accountability.
- </p>
- </div>
- </div>
- </div>
- </div>
+ <div class="tile is-parent is-vertical">
+ <div class="tile is-child has-text-centered">
+ <div class="flip-card">
+ <div class="flip-card-inner">
+ <div class="flip-card-front">
+ <div class="box darkgray">
+ <div class="box darkteal">
+ <p><b>College Prep</b></p>
+ </div>
+ </div>
+ </div>
+ <div class="flip-card-back">
+ <div class="box darkgray">
+ <div class="box darkteal">
+ <p>
+ ACT &amp; SAT preparation and assistance with college
+ application essays.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="tile is-child has-text-centered">
+ <div class="flip-card">
+ <div class="flip-card-inner">
+ <div class="flip-card-front">
+ <div class="box darkgray">
+ <div class="box green">
+ <p><b>College-Level Writing</b></p>
+ </div>
+ </div>
+ </div>
+ <div class="flip-card-back">
+ <div class="box darkgray">
+ <div class="box green">
+ <p>
+ Get a head start on meeting professors' expectations.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
- <div class="tile is-parent is-vertical">
- <div class="tile is-child">
- <div class="box darkgray">
- <div class="box darkteal">
- <p>
- <b>College Prep</b>
- </p>
- <p>
- ACT &amp; SAT preparation and assistance with
- college application essays.
- </p>
- </div>
- </div>
- </div>
- <div class="tile is-child">
- <div class="box darkgray">
- <div class="box green">
- <p>
- <b>College-Level Writing</b>
- </p>
- <p>
- Get a head start on meeting professors'
- expectations.
- </p>
- </div>
- </div>
- </div>
- </div>
+ <div class="tile is-parent is-vertical">
+ <div class="tile is-child has-text-centered">
+ <div class="flip-card">
+ <div class="flip-card-inner">
+ <div class="flip-card-front">
+ <div class="box darkgray">
+ <div class="box darkgreen">
+ <p><b>Group Webinars</b></p>
+ </div>
+ </div>
+ </div>
+ <div class="flip-card-back">
+ <div class="box darkgray">
+ <div class="box darkgreen">
+ <p>
+ Participate in general workshops and pre-planned
+ courses from the comfort of home.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="tile is-child has-text-centered">
+ <div class="flip-card">
+ <div class="flip-card-inner">
+ <div class="flip-card-front">
+ <div class="box darkgray">
+ <div class="box darkerteal">
+ <p><b>Parent Consultations</b></p>
+ </div>
+ </div>
+ </div>
+ <div class="flip-card-back">
+ <div class="box darkgray">
+ <div class="box darkerteal">
+ <p>
+ For parents seeking advice for facilitating their
+ child's learning.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
- <div class="tile is-parent is-vertical">
- <div class="tile is-child">
- <div class="box darkgray">
- <div class="box darkgreen">
- <p>
- <b>Group Webinars</b>
- </p>
- <p>
- Participate in general workshops and pre-planned
- courses from the comfort of home.
- </p>
- </div>
- </div>
- </div>
- <div class="tile is-child">
- <div class="box darkgray">
- <div class="box darkerteal">
- <p>
- <b>Parent Consultations</b>
- </p>
- <p>
- For parents seeking advice for facilitating their child's learning.
- </p>
- </div>
- </div>
- </div>
- </div>
+ <!-- about pic and text -->
+ <section class="section quiet" id="about">
+ <div class="container">
+ <div class="columns is-vcentered">
+ <div class="column is-one-third">
+ <figure class="image">
+ <img src="/logo.png" />
+ </figure>
+ </div>
+ <div class="column">
+ <div class="content">
+ <p>
+ School is tricky, and there is no universal pathway to success.
+ I started Carpenter Tutoring for those seeking a little help
+ finding their way.
+ </p>
+ <p>
+ I received my B.A. from The College of William and Mary in 2018
+ and will receive my M.Ed from W&amp;M in 2020. As an
+ undergraduate, I worked and was trained as a tutor at W&amp;M's
+ peer tutoring center, the Tribe TutorZone. During this period, I
+ conducted over 150 one-on-one appointments with W&amp;M students
+ in 26 different content areas. I earned lifetime Advanced Tutor
+ Certification, the highest level W&amp;M can grant, through the
+ College Reading and Learning Association, and I was trained as a
+ time management consultant. I took on leadership roles within
+ the TutorZone until I was working alongside its director. As a
+ graduate student, I became one of the Graduate Assistants
+ helping oversee the TutorZone as well as an academic coach to
+ students with high need for academic support.
+ </p>
+ <p>
+ I loved getting to work with the Tribe TutorZone tutors, but I
+ realized that I missed being the tutor. There's just nothing
+ like watching the light bulb of understanding go off or seeing
+ students who had struggled with material master it! With that
+ realization, I decided to dedicate my life to my passion:
+ helping students of all ages learn, succeed, and believe in
+ themselves.
+ </p>
+ <p>
+ My instructional approach focuses on meeting students where they
+ are and supporting them through any hesitations or discomforts
+ from which academic difficulties may arise. Whether your student
+ only has to brush up on a few concepts or is resistant to
+ completing coursework, I will come to each session with
+ patience, understanding, and just the right amount of
+ discipline. I truly believe that excellent educational
+ relationships begin with mutual respect, and I work to build
+ meaningful relationships with all of my clients.
+ </p>
+ <p>
+ Thank you for considering Carpenter Tutoring.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
- </div>
- </div>
- </section>
+ <!-- contact box, additional contact and tutoring info -->
+ <section class="section" id="contact">
+ <div class="container">
+ <div class="columns">
+ <div class="column is-one-third">
+ <div class="box">
+ <form name="inquiry">
+ <div class="field">
+ <div class="control has-icons-left">
+ <span class="icon">
+ <i class="iconify" data-icon="mdi-account"></i>
+ </span>
+ <input
+ name="name"
+ class="input is-rounded"
+ type="text"
+ placeholder="name"
+ />
+ </div>
+ </div>
+ <div class="field">
+ <div class="control has-icons-left">
+ <span class="icon">
+ <i class="iconify" data-icon="mdi-email"></i>
+ </span>
+ <input
+ name="from"
+ class="input is-rounded"
+ type="text"
+ placeholder="email address"
+ />
+ </div>
+ </div>
+ <div class="field">
+ <div class="control">
+ <textarea
+ name="body"
+ class="textarea"
+ placeholder="question/comment"
+ spellcheck="true"
+ ></textarea>
+ </div>
+ </div>
+ <div class="field is-grouped is-grouped-right">
+ <div class="control">
+ <button class="button is-rounded is-primary" type="submit">
+ <span class="icon">
+ <i class="iconify" data-icon="mdi-check"></i>
+ </span>
+ <span>
+ Submit
+ </span>
+ </button>
+ </div>
+ </div>
- <!-- about pic and text -->
- <section class="section quiet" id="about">
- <div class="container">
- <div class="columns">
- <div class="column is-one-third">
- <figure class="image">
- <img src="/logo.png">
- </figure>
- </div>
- <div class="column">
- <div class="content">
- <p>
- School is tricky, and there is no universal pathway
- to success. I started Carpenter Tutoring for those
- seeking a little help finding their way.
- </p>
- <p>
- I received my B.A. from The College of William and
- Mary in 2018 and will receive my M.Ed from W&amp;M
- in 2020. As an undergraduate, I worked and was
- trained as a tutor at W&amp;M's peer tutoring
- center, the Tribe TutorZone. During this period, I
- conducted over 150 one-on-one appointments with
- W&amp;M students in 26 different content areas. I
- earned lifetime Advanced Tutor Certification, the
- highest level W&amp;M can grant, through the
- College Reading and Learning Association, and I was
- trained as a time management consultant. I took on
- leadership roles within the TutorZone until I was
- working alongside its director. As a graduate
- student, I became one of the Graduate Assistants
- helping oversee the TutorZone as well as an
- academic coach to students with high need for
- academic support.
- </p>
- <p>
- I loved getting to work with the Tribe TutorZone
- tutors, but I realized that I missed being the
- tutor. There's just nothing like watching the light
- bulb of understanding go off or seeing students who
- had struggled with material master it! With that
- realization, I decided to dedicate my life to my
- passion: helping students of all ages learn,
- succeed, and believe in themselves.
- </p>
- <p>
- Thank you for considering Carpenter Tutoring.
- </p>
- <p>
- -- Amy Carpenter
- </p>
- </div>
- </div>
- </div>
- </section>
+ <div
+ id="errorBox"
+ class="notification is-danger"
+ style="display: none;"
+ ></div>
+ <div
+ id="successBox"
+ class="notification is-success"
+ style="display: none;"
+ >
+ Message sent!
+ </div>
+ </form>
+ </div>
+ </div>
- <!-- testimonial bubbles -->
- <!--<section class="section" id="testimonials">
- <div class="container">
- <div class="blurb">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Mauris eget lobortis erat. Vivamus venenatis nec quam vitae
- vulputate. Class aptent taciti sociosqu ad litora torquent
- per conubia nostra, per inceptos himenaeos.
- </p>
- </div>
- </div>
- </section>-->
+ <div class="column">
+ <div class="box">
+ <div class="content">
+ <ul>
+ <li>
+ <strong>Payment methods</strong> I accept payments in-person
+ through cash or checks made out to Amy Carpenter or through
+ PayPal. If you select to pay through PayPal, there is an
+ additional $1.50 processing fee per transaction.
+ </li>
+ <li>
+ <strong>Travel policy</strong> I travel to locations
+ throughout the Hampton Roads area, including: Suffolk,
+ Chesapeake, Norfolk, Virginia Beach, Isle of Wight, Newport
+ News, Yorktown, and Williamsburg. If you live outside of
+ these areas but are only interested in in-person
+ appointments, please contact me to make arrangements.
+ </li>
+ <li>
+ <strong>Remote sessions</strong> Remote sessions are
+ conducted from my home in Suffolk. I generally use
+ <a href="https://zoom.us/">Zoom</a>, which requires students
+ to download a free client on their computer or a free app on
+ their phone or tablet. I am happy to accommodate if you
+ prefer a different service.
+ </li>
+ <li>
+ <strong>Cancellation policy</strong>
+ Appointments can be cancelled up to 24 hours before the
+ start of the appointment free of charge. Appointments
+ cancelled within the 24-hour window and not rescheduled in
+ the near future will incur a late cancellation fee of $20.
+ Appointments for which no notice of cancellation is given
+ will be charged full price. All cancellation fees will be
+ waived for cancellations caused by emergencies.
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
- <!-- contact box, additional contact and tutoring info -->
- <section class="section" id="contact">
- <div class="container">
- <div class="columns">
- <div class="column is-one-third">
- <div class="box">
- <form name="inquiry">
- <div class="field">
- <div class="control has-icons-left">
- <span class="icon">
- <i class="iconify" data-icon="mdi-account"></i>
- </span>
- <input name="name" class="input is-rounded" type="text" placeholder="name"></input>
- </div>
- </div>
- <div class="field">
- <div class="control has-icons-left">
- <span class="icon">
- <i class="iconify" data-icon="mdi-email"></i>
- </span>
- <input name="from" class="input is-rounded" type="text" placeholder="email address"></input>
- </div>
- </div>
- <div class="field">
- <div class="control">
- <textarea name="body" class="textarea" placeholder="question/comment" spellcheck="true"></textarea>
- </div>
- </div>
- <div class="field is-grouped is-grouped-right">
- <div class="control">
- <button class="button is-rounded is-primary" type="submit">
- <span class="icon">
- <i class="iconify" data-icon="mdi-check"></i>
- </span>
- <span>
- Submit
- </span>
- </button>
- </div>
- </div>
+ <!-- footer, copyright, problems -->
+ <footer class="footer">
+ <div class="content has-text-centered">
+ <p>
+ &copy; 2020 Carpenter Tutoring. All rights reserved.
+ </p>
+ <p>
+ Something wrong?
+ <a href="mailto:webmaster@carpentertutoring.com">
+ Tell the webmaster.
+ </a>
+ </p>
+ </div>
+ </footer>
- <div id="errorBox" class="notification is-danger" style="display: none">
- </div>
- <div id="successBox" class="notification is-success" style="display: none">
- Message sent!
- </div>
-
- </form>
- </div>
- </div>
-
- <div class="column">
- <div class="box">
- <p>
- Info about cancellation, contact info, travel,
- payment methods, maybe different section IDK yet.
- </p>
- </div>
- </div>
- </div>
- </div>
- </section>
-
- <!-- footer, copyright, problems -->
- <footer class="footer">
- <div class="content has-text-centered">
- <p>
- &copy; 2020 Carpenter Tutoring. All rights reserved.
- </p>
- <p>
- Something wrong?
- <a href="mailto:webmaster@carpentertutoring.com">
- Tell the webmaster.
- </a>
- </p>
- </div>
- </footer>
-
- <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>
- </body>
+ <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>
+ </body>
</html>
diff --git a/src/js/index.js b/src/js/index.js
index 0697b51..77cdf65 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -29,7 +29,7 @@ const disableSuccessBox = function() {
}
const enableErrorBox = function(message) {
- let errorBox = document.getElementById("errorBox");
+ const errorBox = document.getElementById("errorBox");
let aTag = document.createElement('a');
aTag.setAttribute("href", "mailto:amy@carpentertutoring.com");
aTag.innerText = message + " Click here to send through your mail client.";
@@ -48,10 +48,10 @@ const enableSuccessBox = function() {
document.forms.inquiry.onsubmit = function() {
disableErrorBox();
disableSuccessBox();
- let form = document.forms.inquiry;
- let name = form.elements.name.value;
- let fromEmail = form.elements.from.value;
- let body = form.elements.body.value;
+ const form = document.forms.inquiry;
+ const name = form.elements.name.value;
+ const fromEmail = form.elements.from.value;
+ const body = form.elements.body.value;
Email.send({
SecureToken : "cec9bc04-de48-48fd-b1ad-a95cffb41468",
@@ -59,7 +59,7 @@ document.forms.inquiry.onsubmit = function() {
From : fromEmail,
Subject : "Inquiry: " + name,
Body : body,
- }).then( message => {
+ }).then(message => {
if (message == "OK") {
form.reset();
enableSuccessBox();
diff --git a/src/scss/flip-card.scss b/src/scss/flip-card.scss
new file mode 100644
index 0000000..1f9af5b
--- /dev/null
+++ b/src/scss/flip-card.scss
@@ -0,0 +1,31 @@
+.flip-card {
+ perspective: 1000px;
+}
+
+.flip-card-inner {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ transition: transform 0.8s;
+ transform-style: preserve-3d;
+}
+
+.flip-card:hover .flip-card-inner {
+ transform: rotateY(180deg);
+}
+
+.flip-card-front, .flip-card-back {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+}
+
+.flip-card-front {
+}
+
+.flip-card-back {
+ transform: rotateY(180deg);
+}
+
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 2b9aec2..59aac49 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -122,3 +122,5 @@ $body-font-size: 1.25rem;
body {
background-image: url("/bg.png");
}
+
+@import "./flip-card.scss";