From 068fa2afc52bbb2e4b920b42ab45b6905bbd3335 Mon Sep 17 00:00:00 2001 From: Ayiko Fred Date: Sun, 24 Sep 2023 08:56:55 +0300 Subject: [PATCH 1/7] Finish basic HTML --- .../images/bg-pattern.svg | 1 + .../images/icon-check.svg | 1 + .../images/icon-slider.svg | 1 + .../images/pattern-circles.svg | 1 + .../interactive_pricing_component/index.html | 45 ++++++++++++++++++- .../interactive_pricing_component/style.css | 2 + .../tailwind.config.js | 14 ++++++ 7 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 challenges/interactive_pricing_component/images/bg-pattern.svg create mode 100644 challenges/interactive_pricing_component/images/icon-check.svg create mode 100644 challenges/interactive_pricing_component/images/icon-slider.svg create mode 100644 challenges/interactive_pricing_component/images/pattern-circles.svg diff --git a/challenges/interactive_pricing_component/images/bg-pattern.svg b/challenges/interactive_pricing_component/images/bg-pattern.svg new file mode 100644 index 00000000..f14bf7bd --- /dev/null +++ b/challenges/interactive_pricing_component/images/bg-pattern.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/interactive_pricing_component/images/icon-check.svg b/challenges/interactive_pricing_component/images/icon-check.svg new file mode 100644 index 00000000..6b2c62a6 --- /dev/null +++ b/challenges/interactive_pricing_component/images/icon-check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/interactive_pricing_component/images/icon-slider.svg b/challenges/interactive_pricing_component/images/icon-slider.svg new file mode 100644 index 00000000..b677de34 --- /dev/null +++ b/challenges/interactive_pricing_component/images/icon-slider.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/interactive_pricing_component/images/pattern-circles.svg b/challenges/interactive_pricing_component/images/pattern-circles.svg new file mode 100644 index 00000000..f3e467c2 --- /dev/null +++ b/challenges/interactive_pricing_component/images/pattern-circles.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/challenges/interactive_pricing_component/index.html b/challenges/interactive_pricing_component/index.html index 0c6b0ff7..8c5ec6ab 100644 --- a/challenges/interactive_pricing_component/index.html +++ b/challenges/interactive_pricing_component/index.html @@ -29,8 +29,51 @@ +
+

+ Simple, traffic-based pricing +

+

+ Sign-up for our 30-day trial. No credit card required. +

+
+
+
+ 350K + Pageviews +
+ +
+ $61.75 + /month +
+ +
+
+

Monthly Billing

+ +
+
+
+ + + Yearly Billing 25% discount + + Unlimited websites + 100% data ownership + Email reports + + Start my trial +
+
Date: Wed, 11 Oct 2023 15:41:00 +0300 Subject: [PATCH 2/7] Finish mobile design --- .../interactive_pricing_component/index.html | 132 ++++++++++++------ .../interactive_pricing_component/style.css | 106 ++++++++++++++ .../tailwind.config.js | 12 +- 3 files changed, 204 insertions(+), 46 deletions(-) diff --git a/challenges/interactive_pricing_component/index.html b/challenges/interactive_pricing_component/index.html index 8c5ec6ab..ba5f164b 100644 --- a/challenges/interactive_pricing_component/index.html +++ b/challenges/interactive_pricing_component/index.html @@ -28,53 +28,105 @@ - -
-

+ +
+

Simple, traffic-based pricing -

-

- Sign-up for our 30-day trial. No credit card required. +

+

+ Sign-up for our 30-day trial. No credit card required.

-
-
-
- 350K - Pageviews -
- +
+
-
- $61.75 - /month +
+ + 100K PAGEVIEWS + +
+ +
+ $16.00/ month +
+
-
-
-

Monthly Billing

- +
+

Monthly Billing

+ + + + +

Yearly Billing

+
+ -25%
-
- - - Yearly Billing 25% discount - - Unlimited websites - 100% data ownership - Email reports - - Start my trial -
-
+
+ +
+
    +
  • + Unlimited + websites +
    • +
  • + 100% data + ownership +
    • +
  • + Email reports +
    • +
+ +
+
+ +
Source code
diff --git a/challenges/interactive_pricing_component/style.css b/challenges/interactive_pricing_component/style.css index 3136af62..2945f478 100644 --- a/challenges/interactive_pricing_component/style.css +++ b/challenges/interactive_pricing_component/style.css @@ -3,3 +3,109 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer components { + /* hsl(174, 86%, 45%) */ + .range { + -webkit-appearance: none; + width: 85%; + height: 10px; + border-radius: 5px; + outline: none; + opacity: 0.7; + background: hsl(223, 50%, 87%); + transition: opacity 0.2s; + } + + .range::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 30px; + height: 30px; + border: 0; + background: url('images/icon-slider.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: 70%; + border-radius: 50%; + background-color: hsl(174, 86%, 45%); + cursor: pointer; + box-shadow: 0px 7px 10px 8px hsl(174, 77%, 80%); + } + + .range::-moz-range-thumb { + width: 30px; + height: 30px; + border: 0; + background-image: url('images/icon-slider.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: 70%; + border-radius: 50%; + background-color: hsl(174, 86%, 45%); + cursor: pointer; + box-shadow: 0px 7px 10px 8px hsl(174, 77%, 80%); + } + + .range::-webkit-slider-thumb:active { + background-color: hsl(174, 65%, 45%); + } + /* Slider Checkbox Input */ + /* The switch - the box around the slider */ + .switch { + position: relative; + display: inline-block; + width: 45px; + height: 25px; + } + + /* Hide default HTML checkbox */ + + /* The slider */ + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: 0.4s; + transition: 0.4s; + } + + .slider:before { + position: absolute; + content: ''; + height: 20px; + width: 20px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: 0.4s; + transition: 0.4s; + } + + input:checked + .slider { + background-color: #2196f3; + } + + input:focus + .slider { + box-shadow: 0 0 1px #2196f3; + } + + input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); + } + + /* Rounded sliders */ + .slider.round { + border-radius: 34px; + } + + .slider.round:before { + border-radius: 50%; + } +} diff --git a/challenges/interactive_pricing_component/tailwind.config.js b/challenges/interactive_pricing_component/tailwind.config.js index f7c82ad3..3cf3cfe8 100644 --- a/challenges/interactive_pricing_component/tailwind.config.js +++ b/challenges/interactive_pricing_component/tailwind.config.js @@ -5,15 +5,15 @@ module.exports = { colors: { 'optimum-blue': '#009efc', 'optimum-darkblue': '#0389e1', - 'Soft-cyan': 'hsl(174, 77%, 80%)', - 'Strong-cyan': 'hsl(174, 86%, 45%)', + 'soft-cyan': 'hsl(174, 77%, 80%)', + 'strong-cyan': 'hsl(174, 86%, 45%)', 'light-grayish-Red': 'hsl(14, 92%, 95%)', 'light-red': 'hsl(15, 100%, 70%)', 'Pale-blue': 'hsl(226, 100%, 87%)', - white: 'hsl (0, 0%, 100%)', - 'Very-pale-blue': 'hsl(230, 100%, 99%)', - 'light-grayish-blue': 'hsl(224, 65%, 95%)', - 'light-grayish-blue': 'hsl(223, 50%, 87%)', + white: 'hsl(0, 0%, 100%)', + 'very-pale-blue': 'hsl(230, 100%, 99%)', + 'light-grayish-blue-slide-bar': 'hsl(224, 65%, 95%)', + 'light-grayish-blue-toggle': 'hsl(223, 50%, 87%)', 'grayish-blue': 'hsl(225, 20%, 60%)', 'dark-desaturated-blue': 'hsl(227, 35%, 25%)', }, From c4314454a345243cc597a8e4058906dc18cfe9d0 Mon Sep 17 00:00:00 2001 From: Ayiko Fred Date: Thu, 26 Oct 2023 23:56:51 +0300 Subject: [PATCH 3/7] Finish mobile & desktop styling --- .../interactive_pricing_component/index.html | 78 ++++++++----------- .../interactive_pricing_component/style.css | 66 ++-------------- .../tailwind.config.js | 2 +- 3 files changed, 40 insertions(+), 106 deletions(-) diff --git a/challenges/interactive_pricing_component/index.html b/challenges/interactive_pricing_component/index.html index ba5f164b..e6aab125 100644 --- a/challenges/interactive_pricing_component/index.html +++ b/challenges/interactive_pricing_component/index.html @@ -44,58 +44,44 @@

-
-
- - 100K PAGEVIEWS - +
+
+ 100K PAGEVIEWS +
+
+
-
- $16.00/ month$16.00 -
- +
-
-

Monthly Billing

-
-
+
Date: Sat, 28 Oct 2023 20:54:49 +0300 Subject: [PATCH 4/7] Code toggle and slider logic --- .../interactive_pricing_component/index.html | 100 +++++++++++++++--- 1 file changed, 83 insertions(+), 17 deletions(-) diff --git a/challenges/interactive_pricing_component/index.html b/challenges/interactive_pricing_component/index.html index e6aab125..702bbcc6 100644 --- a/challenges/interactive_pricing_component/index.html +++ b/challenges/interactive_pricing_component/index.html @@ -27,6 +27,54 @@ /> + +

- 100K PAGEVIEWS +
- $16.00 + / month
@@ -72,7 +127,14 @@

Monthly Billing

-
+
+
@@ -105,7 +73,7 @@

class="order-last flex items-center justify-center gap-2 lg:-order-1 lg:mt-8" > / month @@ -114,24 +82,28 @@

Monthly Billing - - + + + Yearly Billing
- -25% + -25% +
@@ -195,5 +167,37 @@

>

+ From 5ab91f59de1b85d84db52efbda70ecd12d68e4cf Mon Sep 17 00:00:00 2001 From: Ayiko Fred Date: Sun, 29 Oct 2023 01:55:09 +0300 Subject: [PATCH 7/7] Color slider bar --- challenges/interactive_pricing_component/index.html | 12 ++++++++++++ challenges/interactive_pricing_component/style.css | 9 --------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/challenges/interactive_pricing_component/index.html b/challenges/interactive_pricing_component/index.html index 69eecc79..acbea76f 100644 --- a/challenges/interactive_pricing_component/index.html +++ b/challenges/interactive_pricing_component/index.html @@ -62,6 +62,7 @@

: monthlyRates[monthlyView] return (monthlyPrice / 1).toFixed(2) }, + + colorSlider(inputValue) { + let value = ((parseInt(inputValue, 10) - 1) / (5 - 1)) * 100 + return ( + 'linear-gradient(to right, hsl(174, 77%, 80%) 0%, hsl(174, 77%, 80%) ' + + value + + '%, hsl(224, 65%, 95%) ' + + value + + '%, hsl(224, 65%, 95%) 100%)' + ) + }, })) }) diff --git a/challenges/interactive_pricing_component/style.css b/challenges/interactive_pricing_component/style.css index 9b7688de..e394e91b 100644 --- a/challenges/interactive_pricing_component/style.css +++ b/challenges/interactive_pricing_component/style.css @@ -45,13 +45,4 @@ cursor: pointer; box-shadow: 0px 7px 10px 8px hsl(174, 77%, 80%); } - - .range::-moz-range-thub:active { - background-color: #f6ad55; - cursor: grab; - } - - .range::-webkit-slider-thumb:active { - background-color: hsl(174, 65%, 45%); - } }