diff options
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/assets/logo.png | bin | 0 -> 113640 bytes | |||
| -rw-r--r-- | src/html/index.html | 250 | ||||
| -rw-r--r-- | src/scss/index.scss | 69 | ||||
| -rw-r--r-- | src/scss/palette.css | 9 |
5 files changed, 203 insertions, 127 deletions
diff --git a/package.json b/package.json index ea756c1..6313564 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "scripts": { "start": "run-p serve watch", "css:dev": "node-sass src/scss/index.scss dist/css/index.css", - "js:dev": "cp -r src/js dist/js", + "js:dev": "cp -r src/js/* dist/js", "clean": "rm -rf dist/", "mkdirs": "mkdir -p dist/js && mkdir -p dist/css", "copy:assets": "cp -r src/assets/* dist/", diff --git a/src/assets/logo.png b/src/assets/logo.png Binary files differnew file mode 100644 index 0000000..da51050 --- /dev/null +++ b/src/assets/logo.png diff --git a/src/html/index.html b/src/html/index.html index 777d1ef..08a7c84 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -19,7 +19,7 @@ <nav class="navbar is-fixed-top"> <div class="navbar-brand"> <a class="navbar-item" href="#"> - Carpenter Tutoring + <img src="/logo.png"> </a> <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false"> <span aria-hidden="true"></span> @@ -37,12 +37,12 @@ <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> + <!--<a class="navbar-item" href="#testimonials"> + Testimonials + </a>--> + <a class="navbar-item" href="#contact"> + Contact Me + </a> </div> </div> </nav> @@ -50,7 +50,7 @@ <!-- title, slogan, phone --> <section class="section"> <div class="container"> - <div class="box has-text-right banner"> + <div class="box has-text-right banner darkteal"> <h1 class="title"> Carpenter Tutoring </h1> @@ -67,12 +67,11 @@ </section> <!-- intro blurb, logo --> - <section class="section"> + <section class="section quiet"> <div class="container"> <div class="columns"> <div class="column"> - <div class="box"> - <p> + <h2 class="subtitle"> 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 @@ -82,12 +81,13 @@ Phasellus accumsan vitae elit sed fringilla. Nulla porttitor magna eget ipsum ultricies malesuada quis a ipsum. - </p> - </div> + </h2> </div> - <div class="column is-narrow"> - <div class="box translucent"> - LOGO + <div class="column is-one-third"> + <div class="box"> + <figure class="image"> + <img src="/amy.jpg"> + </figure> </div> </div> </div> @@ -96,125 +96,140 @@ <!-- offerings tiles --> <section class="section" id="offerings"> - <div class="tile is-ancestor"> + <div class="container"> + <div class="tile is-ancestor"> - <div class="tile is-parent is-vertical"> - <div class="tile is-child"> - <div class="box"> - <p> - Subject Tutoring - </p> - <p> - Tutoring for specific courses or disciplines. Click - here for a full list of courses covered. - </p> + <div class="tile is-parent is-vertical"> + <div class="tile is-child"> + <div class="box darkgray"> + <div class="box darkteal"> + <p> + Subject Tutoring + </p> + <p> + Tutoring for specific courses or disciplines. Click + here for a full list of courses covered. + </p> + </div> + </div> </div> - </div> - <div class="tile is-child"> - <div class="box"> - <p> - Time Management - </p> - <p> - Personalized plans for managing academics, - extracurriculars, and other commitments. - </p> + <div class="tile is-child"> + <div class="box darkgray"> + <div class="box green"> + <p> + Time Management + </p> + <p> + Personalized plans for managing academics, + extracurriculars, and other commitments. + </p> + </div> + </div> </div> </div> - </div> - <div class="tile is-parent is-vertical"> - <div class="tile is-child"> - <div class="box"> - <p> - Study Skills - </p> - <p> - Learn how to make the most of your study time. - </p> + <div class="tile is-parent is-vertical"> + <div class="tile is-child"> + <div class="box darkgray"> + <div class="box darkgreen"> + <p> + Study Skills + </p> + <p> + Learn how to make the most of your study time. + </p> + </div> + </div> </div> - </div> - <div class="tile is-child"> - <div class="box"> - <p> - Academic Coaching - </p> - <p> - Time management and study skills blended with - continuing accountability. - </p> + <div class="tile is-child"> + <div class="box darkgray"> + <div class="box darkerteal"> + <p> + Academic Coaching + </p> + <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"> - <div class="box"> - <p> - College Prep - </p> - <p> - ACT & SAT preparation and assistance with - college application essays. - </p> + <div class="tile is-parent is-vertical"> + <div class="tile is-child"> + <div class="box darkgray"> + <div class="box darkteal"> + <p> + College Prep + </p> + <p> + ACT & SAT preparation and assistance with + college application essays. + </p> + </div> + </div> </div> - </div> - <div class="tile is-child"> - <div class="box"> - <p> - College-Level Writing - </p> - <p> - Get a head start on meeting professors' - expectations. - </p> + <div class="tile is-child"> + <div class="box darkgray"> + <div class="box green"> + <p> + College-Level Writing + </p> + <p> + Get a head start on meeting professors' + expectations. + </p> + </div> + </div> </div> </div> - </div> - <div class="tile is-parent is-vertical"> - <div class="tile is-child"> - <div class="box"> - <p> - Group Webinars - </p> - <p> - Participate in general workshops and pre-planned - courses from the comfort of home. - </p> + <div class="tile is-parent is-vertical"> + <div class="tile is-child"> + <div class="box darkgray"> + <div class="box darkgreen"> + <p> + Group Webinars + </p> + <p> + Participate in general workshops and pre-planned + courses from the comfort of home. + </p> + </div> + </div> </div> - </div> - <div class="tile is-child"> - <div class="box"> - <p> - Parent Consultations - </p> - <p> - For parents seeking advice for facilitating their child's learning. - </p> + <div class="tile is-child"> + <div class="box darkgray"> + <div class="box darkerteal"> + <p> + Parent Consultations + </p> + <p> + For parents seeking advice for facilitating their child's learning. + </p> + </div> + </div> </div> </div> - </div> + </div> </div> </section> <!-- about pic and text --> - <section class="section" id="about"> + <section class="section quiet" id="about"> <div class="container"> <div class="columns"> <div class="column is-one-third"> - <div class="box"> <figure class="image"> - <img src="/amy.jpg"> + <img src="/logo.png"> </figure> - </div> </div> <div class="column"> - <div class="box"> <div class="content"> <p> School is tricky, and there is no universal pathway @@ -256,25 +271,24 @@ <p> -- Amy Carpenter </p> - </div> </div> </div> </div> </section> <!-- 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> + <!--<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>--> <!-- contact box, additional contact and tutoring info --> <section class="section" id="contact"> @@ -334,6 +348,6 @@ </div> </footer> - <script src="js/nav-toggle.js"></script> + <script src="/js/nav-toggle.js"></script> </body> </html> diff --git a/src/scss/index.scss b/src/scss/index.scss index ac1ab6d..596993e 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -1,14 +1,24 @@ @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=Nunito:400,700'); +@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700&display=swap'); -// Set brand colors -$pine-green: #01646d; -$midnight-green: #114b5f; -$eton-blue: #88d498; -$pastel-gray: #c6dabf; -$isabelline: #f7f4ea; +// 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); +$gray: rgb(157, 210, 211); +$teal: rgb(58, 165, 166); +$cyan: rgb(156, 210, 210); +$darkgray: rgb(127, 177, 181); +$darkgreen: rgb(59, 136, 114); +$yellow: rgb(186, 214, 187); // Update Bulma's global variables // $primary: $pine-green; @@ -19,8 +29,10 @@ $isabelline: #f7f4ea; // $danger: $red // $dark: $grey-darker // $text: $grey-dark -// $family-sans-serif: "Nunito", sans-serif; +$family-sans-serif: "PT Sans", sans-serif; // $hr-background-color: $primary; +$title-color: white; +//$subtitle-color: white; // $body-background-color: $isabelline; @@ -33,6 +45,43 @@ $isabelline: #f7f4ea; @import "../../node_modules/bulma/sass/layout/_all.sass"; @import "../../node_modules/bulma/sass/grid/_all.sass"; +.darkteal { + background-color: $darkteal; + color: white; +} +.green { + background-color: $green; + 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; +} +.darkgray { + background-color: $darkgray; + color: white; +} +.darkgreen { + background-color: $darkgreen; + color: white; +} +.yellow { + background-color: $yellow; + color: white; +} + .blurb { background-color: white; clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); @@ -43,6 +92,10 @@ $isabelline: #f7f4ea; clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%); } +.quiet { + background-color: white; +} + body { background-image: url("/bg.png"); } diff --git a/src/scss/palette.css b/src/scss/palette.css new file mode 100644 index 0000000..66799cd --- /dev/null +++ b/src/scss/palette.css @@ -0,0 +1,9 @@ +/* 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) } |
