diff options
| -rw-r--r-- | src/html/index.html | 227 | ||||
| -rw-r--r-- | src/scss/index.scss | 46 | ||||
| -rw-r--r-- | src/scss/palette.css | 9 |
3 files changed, 148 insertions, 134 deletions
diff --git a/src/html/index.html b/src/html/index.html index fcd16fa..de056ca 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -38,30 +38,33 @@ About </a> <!--<a class="navbar-item" href="#testimonials"> - Testimonials - </a>--> - <a class="navbar-item" href="#contact"> - Contact Me - </a> + Testimonials + </a>--> + <a class="navbar-item" href="#contact"> + Contact Me + </a> </div> </div> </nav> <!-- title, slogan, phone --> - <section class="section"> - <div class="container"> - <div class="box has-text-right banner darkteal"> - <h1 class="title"> - Carpenter Tutoring + <section class="section has-text-right has-banner"> + <div class="banner"> + <div class="container"> + <h1 class="title is-1 has-text-shadow"> + CARPENTER TUTORING </h1> - <h2 class="subtitle"> - Discovering <em>your</em> path to success + <h2 class="subtitle is-3 has-text-shadow"> + <b>Discovering <em>your</em> path to success</b> </h2> - <h2 class="subtitle"> - <button class="button is-rounded is-primary" href="tel:1-757-335-7555"> + <div class="buttons is-right"> + <a class="button is-large is-rounded is-link" href="tel:1-757-335-7555"> Call (757) 335-7555 - </button> - </h2> + </a> + <a class="button is-large is-rounded is-primary" href="#contact"> + Contact me by email + </a> + </div> </div> </div> </section> @@ -71,7 +74,7 @@ <div class="container"> <div class="columns"> <div class="column"> - <h2 class="subtitle"> + <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 @@ -81,7 +84,7 @@ Phasellus accumsan vitae elit sed fringilla. Nulla porttitor magna eget ipsum ultricies malesuada quis a ipsum. - </h2> + </p> </div> <div class="column is-one-third"> <div class="box"> @@ -117,7 +120,7 @@ <div class="box darkgray"> <div class="box green"> <p> - Time Management + <b>Time Management</b> </p> <p> Personalized plans for managing academics, @@ -134,8 +137,8 @@ <div class="box darkgray"> <div class="box darkgreen"> <p> - Study Skills - </p> + <b>Study Skills</p> + </b> <p> Learn how to make the most of your study time. </p> @@ -146,7 +149,7 @@ <div class="box darkgray"> <div class="box darkerteal"> <p> - Academic Coaching + <b>Academic Coaching</b> </p> <p> Time management and study skills blended with @@ -163,7 +166,7 @@ <div class="box darkgray"> <div class="box darkteal"> <p> - College Prep + <b>College Prep</b> </p> <p> ACT & SAT preparation and assistance with @@ -176,7 +179,7 @@ <div class="box darkgray"> <div class="box green"> <p> - College-Level Writing + <b>College-Level Writing</b> </p> <p> Get a head start on meeting professors' @@ -193,7 +196,7 @@ <div class="box darkgray"> <div class="box darkgreen"> <p> - Group Webinars + <b>Group Webinars</b> </p> <p> Participate in general workshops and pre-planned @@ -206,7 +209,7 @@ <div class="box darkgray"> <div class="box darkerteal"> <p> - Parent Consultations + <b>Parent Consultations</b> </p> <p> For parents seeking advice for facilitating their child's learning. @@ -278,96 +281,98 @@ <!-- 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="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>--> - <!-- 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> + <!-- 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> - <div id="errorBox" class="notification is-danger" style="display: none"> - </div> - <div id="successBox" class="notification is-success" style="display: none"> - Message sent! - </div> + <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> + </form> + </div> + </div> - <div class="column"> - <div class="box"> - Info about cancellation, contact info, travel, - payment methods, maybe different section IDK yet. - </div> - </div> - </div> - </div> - </section> + <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> + <!-- 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> + <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/scss/index.scss b/src/scss/index.scss index 55cd938..68aa412 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -1,16 +1,9 @@ @charset "utf-8"; -// Import Google Fonts -//@import url('https://fonts.googleapis.com/css?family=Nunito:400,700'); -@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700&display=swap'); -@import url('https://fonts.googleapis.com/css?family=Architects+Daughter&display=swap'); +// Google Fonts +@import url('https://fonts.googleapis.com/css?family=Architects+Daughter|Indie+Flower|PT+Sans&display=swap'); // Palette -//$pine-green: #01646d; -//$midnight-green: #114b5f; -//$eton-blue: #88d498; -//$pastel-gray: #c6dabf; -//$isabelline: #f7f4ea; $darkteal: rgb(0, 100, 108); $green: rgb(88, 169, 143); $darkerteal: rgb(29, 133, 137); @@ -23,7 +16,7 @@ $yellow: rgb(186, 214, 187); // Update Bulma's global variables $primary: $teal; -// $link: $midnight-green; +$link: $darkteal; // $info: $cyan $success: $green; // $warning: $yellow @@ -32,8 +25,11 @@ $success: $green; // $text: $grey-dark $family-sans-serif: "PT Sans", sans-serif; // $hr-background-color: $primary; -$title-color: white; -//$subtitle-color: white; +$title-color: $darkteal; +$title-family: "Architects Daughter", cursive; +$subtitle-color: $darkteal; +$subtitle-family: "Indie Flower", cursive; +$body-font-size: 1.25rem; // $body-background-color: $isabelline; // Import only what you need from Bulma @@ -89,8 +85,26 @@ $title-color: white; } .banner { - border-radius: 5px !important; - clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%); + 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) 70%); + background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%); + background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%); + 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; + } .quiet { @@ -101,6 +115,10 @@ $title-color: white; font-family: 'Architects Daughter', cursive; } +.has-text-shadow { + text-shadow: 0px 0px 4px #ffffff; +} + body { background-image: url("/bg.png"); } diff --git a/src/scss/palette.css b/src/scss/palette.css deleted file mode 100644 index 66799cd..0000000 --- a/src/scss/palette.css +++ /dev/null @@ -1,9 +0,0 @@ -/* Generated with GIMP Palette Export */ -.darkteal { color: rgb(0, 100, 108) } -.green { color: rgb(88, 169, 143) } -.darkerteal { color: rgb(29, 133, 137) } -.gray { color: rgb(157, 210, 211) } -.teal { color: rgb(58, 165, 166) } -.cyan { color: rgb(156, 210, 210) } -.darkgray { color: rgb(127, 177, 181) } -.darkgreen { color: rgb(59, 136, 114) } |