diff options
| -rw-r--r-- | TODO.md | 1 | ||||
| -rw-r--r-- | package.json | 4 | ||||
| -rw-r--r-- | src/html/index.html | 858 | ||||
| -rw-r--r-- | src/js/index.js | 12 | ||||
| -rw-r--r-- | src/scss/flip-card.scss | 31 | ||||
| -rw-r--r-- | src/scss/index.scss | 2 |
6 files changed, 541 insertions, 367 deletions
@@ -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 & 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 & 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&M in 2020. As an + undergraduate, I worked and was trained as a tutor at W&M's + peer tutoring center, the Tribe TutorZone. During this period, I + conducted over 150 one-on-one appointments with W&M students + in 26 different content areas. I earned lifetime Advanced Tutor + Certification, the highest level W&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&M - in 2020. As an undergraduate, I worked and was - trained as a tutor at W&M's peer tutoring - center, the Tribe TutorZone. During this period, I - conducted over 150 one-on-one appointments with - W&M students in 26 different content areas. I - earned lifetime Advanced Tutor Certification, the - highest level W&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> + © 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> - © 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"; |