From 37630a28701048fa11725b942425c544ba5ec042 Mon Sep 17 00:00:00 2001 From: Alissa Troiano Date: Sat, 23 Apr 2022 17:51:34 -0400 Subject: [PATCH 1/9] Move evaluator to top of questions page --- assets/css/style.css | 6 +- questions.html | 233 ++++++++++--------------------------------- 2 files changed, 54 insertions(+), 185 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 6b49852..7c4ef33 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -64,15 +64,17 @@ i:hover { .btn.btn-main { font-family: 'Oswald', sans-serif; background-color: #4b5887; - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); color: var(--bg-gray-1); margin-left: 10px; + text-transform: uppercase; + letter-spacing: 1.2px; + box-shadow: 0px 0px 10px var(--p-blue-3); } .btn.btn-main:hover { background-color: var(--p-blue-1); color: var(--bg-gray-1); - + text-transform: uppercase; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); margin-left: 10px; } diff --git a/questions.html b/questions.html index bd2b554..a604026 100644 --- a/questions.html +++ b/questions.html @@ -25,200 +25,68 @@
- +
-
-
-
-
-

Start Giving Back Today

-

Use our groundbreaking EV/Fuel calculator to learn how much money you can save while - protecting the planet. -

-
-
-
- -
-
-

Which size of car would you like?

-
-
-
-
-
Compact
-
-
- -
-
-
-
-
-
-
Mid-Size
-
-
- -
-
-
-
-
-
-
SUV
-
-
- -
+
+
+
+
+
+

EValuator

-
- Next -
-
- -
-
-

What is your budget?

-
-
-
-
-
Under $30,000
-
-
- -
-
-
-
-
-
-
$30,000 - $50,000
-
-
- -
-
-
-
-
-
-
Over $50,000
-
-
- -
-
-
-
- -
-
-

What is your average yearly mileage?

-
-
-
-
-
10,000 miles per year
-
-
- -
-
-
-
-
-
-
15,000 miles per year
-
-
- -
-
-
-
-
-
-
20,000 miles per year
-
-
- -
-
-
-
-
- - -
-
-

To calculate these savings we are taking the average (as of 04/21/2022) across the USA for:

-
    -
  • Gass Prices
    • -
  • Household Electricity Cost per kWh
    • -
  • Car MPG
    • -
  • Car Mileage
    • -
-

This calculator compares the cost of charging an electric car compared to fueling a - Internal Combusting Engine

-

These values will change if you add information into the Additional Options tab to enable you to have a - more personalised savings calculation

-
-
-
-
-

For a more accurate savings calulation, please input the data requested below

-
-
-

Please enter your Local Fuel Price per gallon in USD

-
- Fuel Price ($): - +
+
+
+

For a more accurate savings calulation, please input the data requested below

+
+
+

Please enter your Local Fuel Price per gallon in USD

+
+ Fuel Price ($): + +
+

 

+

If you are unsure about your current fuel prices, check + the AAA website + for + state by state average fuel prices +

+
+
+

Please use the slider to select your Average Yearly Mileage

+ + + +
-

 

-

If you are unsure about your current fuel prices, check the AAA website for - state by state average fuel prices

-
-
-

Please use the slider to select your Average Yearly Mileage

- - - -
-
-
-
-
-

Please use the slider to select the Average MPG of your vehicle

- - - +
+
+
+

Please use the slider to select the Average MPG of your vehicle

+ + + +
+
+
+ +
+
+
- - -
-
+
@@ -233,7 +101,6 @@

For a more accurate savings calulation, please input the data requested belo - From cc5f101fbde79d07d19d5882aa016ef14c5a8235 Mon Sep 17 00:00:00 2001 From: Alissa Troiano Date: Sat, 23 Apr 2022 18:05:07 -0400 Subject: [PATCH 2/9] Update the evaluator page --- assets/css/style.css | 2 +- questions.html | 32 ++++++++++++++++++++++++++------ 2 files changed, 27 insertions(+), 7 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 7c4ef33..d228000 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -75,7 +75,7 @@ i:hover { background-color: var(--p-blue-1); color: var(--bg-gray-1); text-transform: uppercase; - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0px 0px 10px var(--p-blue-3); margin-left: 10px; } diff --git a/questions.html b/questions.html index a604026..d4395d1 100644 --- a/questions.html +++ b/questions.html @@ -30,8 +30,7 @@
-
-
+

EValuator

@@ -79,13 +78,34 @@

For a more accurate savings calulation, please input the data requested belo

-
-
- -
+
+
+ +
+
+ +
+ +
+
+

To calculate these savings we are taking the average (as of 04/21/2022) across the USA for:

+
    +
  • Gass Prices
    • +
  • Household Electricity Cost per kWh
    • +
  • Car MPG
    • +
  • Car Mileage
    • +
+

This calculator compares the cost of charging an electric car compared to fueling a + Internal Combusting Engine

+

These values will change if you add information into the Additional Options tab to enable you to have a + more personalised savings calculation

+
From 72d9a5f50694b8cda9793536124510e9abb3a0a8 Mon Sep 17 00:00:00 2001 From: Alissa Troiano Date: Sat, 23 Apr 2022 18:34:11 -0400 Subject: [PATCH 3/9] Move Evaluator to the top of the questions page & add modal --- assets/css/style.css | 28 +++++--- questions.html | 154 +++++++++++++++++++++++++------------------ 2 files changed, 107 insertions(+), 75 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index d228000..00e635b 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -17,16 +17,7 @@ box-sizing: border-box; } - /* Global Styles */ -main { - padding: 1rem; - height: auto; - min-height: 100%; - display: flex; - flex-direction: column; - justify-content: center;} - h1, h2, h3, @@ -57,6 +48,14 @@ i:hover { /*--------------- Custom Classes */ +main { + display: flex; + min-height: 100vh; + flex-direction: column; + justify-content: space-between; + overflow: scroll; + } + .font-dark { color: var(--p-blue-1); } @@ -79,6 +78,15 @@ i:hover { margin-left: 10px; } +.green-btn { + font-family: 'Oswald', sans-serif; + background-color: var(--p-blue-3); + color: var(--bg-gray-1); + text-transform: uppercase; + letter-spacing: 1.2px; + box-shadow: 0px 0px 10px var(--p-blue-3); +} + .section-heading { font-family: 'Oswald', sans-serif; text-transform: uppercase; @@ -187,6 +195,7 @@ footer { font-family: 'futura-pt', sans-serif; letter-spacing: 0.5px; background-color: var(--bg-gray-2);; + position: relative; } .footer-text { @@ -234,7 +243,6 @@ a.link-secondary:hover { height: auto; margin-top: 30px; margin: 0 auto; - overflow: hidden; } h1.display-4 { diff --git a/questions.html b/questions.html index d4395d1..72c0ad1 100644 --- a/questions.html +++ b/questions.html @@ -31,84 +31,108 @@
-
-
-

EValuator

-
+
+
+

EValuator

+

For a more accurate savings calulation, please input the data requested below

-
-
-
-

For a more accurate savings calulation, please input the data requested below

-
-
-

Please enter your Local Fuel Price per gallon in USD

-
- Fuel Price ($): - -
-

 

-

If you are unsure about your current fuel prices, check - the AAA website - for - state by state average fuel prices -

-
-
-

Please use the slider to select your Average Yearly Mileage

- - - -
+
+
+
+
+
+
+

Please enter your Local Fuel Price per gallon in USD

+
+ Fuel Price ($): +
-
-
-
-

Please use the slider to select the Average MPG of your vehicle

- - - -
+

 

+

If you are unsure about your current fuel prices, check + the AAA website + for + state by state average fuel prices +

+
+
+

Please use the slider to select your Average Yearly Mileage

+ + + +
+
+
+
+
+

Please use the slider to select the Average MPG of your vehicle

+ + +
-
-
- -
-
-
-
- -
-
-

To calculate these savings we are taking the average (as of 04/21/2022) across the USA for:

-
    -
  • Gass Prices
    • -
  • Household Electricity Cost per kWh
    • -
  • Car MPG
    • -
  • Car Mileage
    • -
-

This calculator compares the cost of charging an electric car compared to fueling a - Internal Combusting Engine

-

These values will change if you add information into the Additional Options tab to enable you to have a - more personalised savings calculation

+
+
+ +
+
+
+
+
-
+ + + + + + + + From 715feda3bdfe41ad5027942b8919436b419d7f18 Mon Sep 17 00:00:00 2001 From: Alissa Troiano Date: Sat, 23 Apr 2022 18:47:35 -0400 Subject: [PATCH 4/9] Clean up the questions page --- assets/css/style.css | 30 +++++++++++------------------- index.html | 6 ++++-- questions.html | 6 +++--- 3 files changed, 18 insertions(+), 24 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 00e635b..a2da66d 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -53,7 +53,6 @@ main { min-height: 100vh; flex-direction: column; justify-content: space-between; - overflow: scroll; } .font-dark { @@ -117,7 +116,11 @@ main { /* Landing Page */ .landing-page { + max-width: 100%; + height: 100vh; + min-height: 100%; overflow: hidden; + position: relative; } img { @@ -129,7 +132,7 @@ img { .jumbotron { max-width: 100%; min-height: 100%; - margin-top: 90px; + margin-top: 50px; } .mission-container { @@ -236,25 +239,14 @@ a.link-secondary:hover { #footer-copyright{ font-family: 'futura-pt', sans-serif; } - -@media only screen and (min-width: 600px) { +/* Portrait and Landscape */ +@media only screen + and (min-device-width: 768px) + and (max-device-width: 1024px) + and (-webkit-min-device-pixel-ratio: 1) { .jumbotron { max-width: 100%; - height: auto; - margin-top: 30px; + min-height: 100vh; margin: 0 auto; } - - h1.display-4 { - font-size: 2.67rem; - font-weight: 410; - color: var(--p-blue-1); - margin: 0 15px; - } -} -/* QUESTIONS */ - -/*selected question border*/ -.card-selected { - box-shadow: 0 0 5px 5px #79c1cc; } \ No newline at end of file diff --git a/index.html b/index.html index 51026c2..98c27f2 100644 --- a/index.html +++ b/index.html @@ -18,12 +18,14 @@
+
+
-
-
+
+

Welcome to Electrillo

Electrillo is a web application that will let users find out how driving an electric vehicle diff --git a/questions.html b/questions.html index 72c0ad1..6b68087 100644 --- a/questions.html +++ b/questions.html @@ -39,7 +39,7 @@

EValuator

-
+

Please enter your Local Fuel Price per gallon in USD

@@ -78,7 +78,7 @@

EValuator

-
+
@@ -86,7 +86,7 @@

EValuator

From 5d9593fb31a1ac8debdbc4254080b70db83ac99b Mon Sep 17 00:00:00 2001 From: Alissa Troiano Date: Sat, 23 Apr 2022 18:56:39 -0400 Subject: [PATCH 5/9] Update evaluator page with styles and content --- assets/css/style.css | 44 ++++++++++++++-------- index.html | 89 +++++++++++++++++++++++--------------------- questions.html | 59 +++++++++++++++-------------- 3 files changed, 105 insertions(+), 87 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index a2da66d..d0f90df 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -6,11 +6,13 @@ --bg-gray-1: #fafafa; --bg-gray-2: #f0f0f0; --p-blue-1: #303854; + --p-green: #00b300; --p-yellow: #E8A413; --p-blue-3: #0d1018; --s-blue: #79C1CC; --s-green-1: #9df19c; --s-green-2: #b6f5b5; + --t-green: #0c4b0c; } * { @@ -37,24 +39,23 @@ p { i { color: #4b5887; - text-shadow: 0px 4px 3px rgba(0,0,0,0.4), - 0px 8px 13px rgba(0,0,0,0.1), - 0px 18px 23px rgba(0,0,0,0.1); + text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), + 0px 8px 13px rgba(0, 0, 0, 0.1), + 0px 18px 23px rgba(0, 0, 0, 0.1); } i:hover { color: #79c1cc; } -/*--------------- Custom Classes */ - main { display: flex; min-height: 100vh; flex-direction: column; justify-content: space-between; - } +} +/*--------------- Custom Classes */ .font-dark { color: var(--p-blue-1); } @@ -91,6 +92,18 @@ main { text-transform: uppercase; } +.btn-none { + font-family: 'futura-pt', sans-serif; + background-color: transparent; + background: none; + border: none; + color: var(--p-yellow); + text-transform: uppercase; + letter-spacing: 1px; + font-size: 1.1rem; + font-weight: 600; +} + /*-------------- Navbar */ .navbar { font-family: 'futura-pt', sans-serif; @@ -188,7 +201,9 @@ p.lead { } /* Quiz Page */ -#sizeCompact:hover, #sizeMed:hover, #sizeSUV:hover { +#sizeCompact:hover, +#sizeMed:hover, +#sizeSUV:hover { background-color: var(--bg-gray-1); box-shadow: 0px 0px 10px #cddbc2; } @@ -197,7 +212,8 @@ p.lead { footer { font-family: 'futura-pt', sans-serif; letter-spacing: 0.5px; - background-color: var(--bg-gray-2);; + background-color: var(--bg-gray-2); + ; position: relative; } @@ -220,12 +236,12 @@ a.link-secondary:hover { /* Team page */ -.card-body i{ +.card-body i { padding: 2px; } #team-card { - border: 0; + border: 0; width: 10rem; margin-top: 25px; } @@ -236,14 +252,12 @@ a.link-secondary:hover { } -#footer-copyright{ +#footer-copyright { font-family: 'futura-pt', sans-serif; } + /* Portrait and Landscape */ -@media only screen - and (min-device-width: 768px) - and (max-device-width: 1024px) - and (-webkit-min-device-pixel-ratio: 1) { +@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { .jumbotron { max-width: 100%; min-height: 100vh; diff --git a/index.html b/index.html index 98c27f2..4fad218 100644 --- a/index.html +++ b/index.html @@ -19,60 +19,65 @@
- -
+ +
-
-
-

Welcome to Electrillo

-

Electrillo is a web application that will let users find - out how driving an electric vehicle - can save them money and improve the planet.

- Start Here -

-
-
- car -
+
+
+

Welcome to Electrillo

+

Electrillo is a web application that will let users find + out how driving an electric vehicle + can save them money and improve the planet.

+ Start Here +

+
+
+ car
+
-
-

Our Mission

-

Electrillo is dedicated to ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-
-
+
+

Our Mission

+

Electrillo is dedicated to ipsum dolor sit amet, consectetur adipiscing + elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis + nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+
-
-
- -

EV-aluator

-

Our state of the art EV/Fuel comparison calculator can help you save thousands of dollars on fuel each year!

-
+
+
+ +

EV-aluator

+

Our state of the art EV/Fuel comparison calculator can help you save thousands + of dollars on fuel each year!

-
-
- -

Commitment

-

Our team is committed to providing tools & resources that will help both you & our Planet Earth in the long run.

-
+
+
+
+ +

Commitment

+

Our team is committed to providing tools & resources that will help both you & + our Planet Earth in the long run.

-
-
- -

Your Part

-

The tools & resources we provide at Electrillo were built to educate our users & reduce fuel emissions.

-
+
+
+
+ +

Your Part

+

The tools & resources we provide at Electrillo were built to educate our users + & reduce fuel emissions.

- +
+
-
+
@@ -93,10 +98,10 @@

Your Part

diff --git a/questions.html b/questions.html index 6b68087..4783dbd 100644 --- a/questions.html +++ b/questions.html @@ -60,8 +60,7 @@

EValuator

- +
@@ -71,7 +70,7 @@

EValuator

- +
@@ -89,7 +88,6 @@

EValuator

Our Process - @@ -100,38 +98,39 @@

EValuator

-