diff options
-rw-r--r-- | src/html/index.html | 264 | ||||
-rw-r--r-- | src/scss/flash-card.scss | 38 | ||||
-rw-r--r-- | src/scss/flip-card.scss | 31 | ||||
-rw-r--r-- | src/scss/index.scss | 108 |
4 files changed, 202 insertions, 239 deletions
diff --git a/src/html/index.html b/src/html/index.html index d4f5b61..96ab6c5 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -36,9 +36,6 @@ <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> @@ -116,201 +113,152 @@ </div> </section> - <!-- offerings tiles --> + <!-- offerings flash cards --> <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 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> </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 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> </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 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 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 class="flash-card-back darkgray"> + <div class="content"> + <p>Learn how to make the most of your study time.</p> </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 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 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 class="flash-card-back darkgray"> + <div class="content"> + <p> + Time management and study skills blended with continuing + accountability. + </p> </div> </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 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> </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 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> </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 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 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 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> </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 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 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 class="flash-card-back darkgray"> + <div class="content"> + <p> + For parents seeking advice for facilitating their child's + learning. + </p> </div> </div> </div> @@ -498,9 +446,9 @@ <!-- footer, copyright, problems --> <footer class="footer"> - <div class="content has-text-centered"> + <div class="content has-text-centedarkteal"> <p> - © 2020 Carpenter Tutoring. All rights reserved. + © 2020 Carpenter Tutoring, LLC. All rights reserved. </p> <p> Something wrong? diff --git a/src/scss/flash-card.scss b/src/scss/flash-card.scss new file mode 100644 index 0000000..5ba4ce9 --- /dev/null +++ b/src/scss/flash-card.scss @@ -0,0 +1,38 @@ +.flash-card { + background-color: transparent; + width: 100%; + height: 200px; + perspective: 1000px; +} + +.flash-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.5s; + transform-style: preserve-3d; +} + +.flash-card:hover .flash-card-inner { + transform: rotateY(180deg); +} + +.flash-card-front, +.flash-card-back { + position: absolute; + width: 100%; + height: 100%; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +.flash-card-front { + border-radius: $box-radius; + line-height: 150px; +} + +.flash-card-back { + border-radius: $box-radius; + transform: rotateY(180deg); +} diff --git a/src/scss/flip-card.scss b/src/scss/flip-card.scss deleted file mode 100644 index 1f9af5b..0000000 --- a/src/scss/flip-card.scss +++ /dev/null @@ -1,31 +0,0 @@ -.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 59aac49..79ed71d 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -1,7 +1,7 @@ @charset "utf-8"; // Google Fonts -@import url('https://fonts.googleapis.com/css?family=Architects+Daughter|Indie+Flower|PT+Sans&display=swap'); +@import url("https://fonts.googleapis.com/css?family=Architects+Daughter|Indie+Flower|PT+Sans&display=swap"); // Palette $darkteal: rgb(0, 100, 108); @@ -43,84 +43,92 @@ $body-font-size: 1.25rem; // Palette .darkteal { - background-color: $darkteal; - color: white; + background-color: $darkteal; + border: 1em solid $darkgray; + color: white; } .green { - background-color: $green; - color: white; + background-color: $green; + border: 1em solid $darkgray; + color: white; } .darkerteal { - background-color: $darkerteal; - color: white; -} -.gray { - background-color: $gray; - color: white; -} -.teal { - background-color: $teal; - color: white; -} -.cyan { - background-color: $cyan; - color: white; + background-color: $darkerteal; + border: 1em solid $darkgray; + color: white; } .darkgray { - background-color: $darkgray; - color: white; + background-color: $darkgray; + border: 1em solid $darkgray; + color: white; } .darkgreen { - background-color: $darkgreen; - color: white; -} -.yellow { - background-color: $yellow; - color: white; + background-color: $darkgreen; + border: 1em solid $darkgray; + color: white; } .blurb { - background-color: white; - clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); + background-color: white; + clip-path: polygon( + 0% 0%, + 100% 0%, + 100% 75%, + 75% 75%, + 75% 100%, + 50% 75%, + 0% 75% + ); } .banner { - right: 100%; - padding-top: 5%; - padding-bottom: 5%; - padding-right: 5%; + right: 100%; + padding-top: 5%; + padding-bottom: 5%; + padding-right: 5%; - // gradient - background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%); - background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%); - background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); + // gradient + background: -moz-linear-gradient( + left, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 1) 50% + ); + background: -webkit-linear-gradient( + left, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 1) 50% + ); + background: linear-gradient( + to right, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 1) 50% + ); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); } .has-banner { - //margin-top: 0px !important; - //margin-bottom: 0px !important; - padding-top: 0px !important; - padding-bottom: 0px !important; - padding-right: 0px !important; - padding-left: 10% !important; - + //margin-top: 0px !important; + //margin-bottom: 0px !important; + padding-top: 0px !important; + padding-bottom: 0px !important; + padding-right: 0px !important; + padding-left: 10% !important; } .quiet { - background-color: white; + background-color: white; } .fawnseh { - font-family: 'Architects Daughter', cursive; + font-family: "Architects Daughter", cursive; } .has-text-shadow { - text-shadow: 0px 0px 4px #ffffff; + text-shadow: 0px 0px 4px #ffffff; } body { - background-image: url("/bg.png"); + background-image: url("/bg.png"); } -@import "./flip-card.scss"; +@import "./flash-card.scss"; |