summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/html/index.html227
-rw-r--r--src/scss/index.scss46
-rw-r--r--src/scss/palette.css9
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 &amp; 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>
- &copy; 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>
+ &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>
+ <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) }