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/favicon-32x32.png b/challenges/interactive_pricing_component/images/favicon-32x32.png new file mode 100644 index 00000000..1e2df7f0 Binary files /dev/null and b/challenges/interactive_pricing_component/images/favicon-32x32.png differ 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..3aa50e1d 100644 --- a/challenges/interactive_pricing_component/index.html +++ b/challenges/interactive_pricing_component/index.html @@ -26,11 +26,120 @@ href="../images/favicon-16x16.png" /> + + + + + + + + - + +
+
+ + +
+
+

+ Simple, traffic-based pricing +

+

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

+
+
+
+

+
+ +
+
+
+

+ /month +
+
+ Monthly Billing + + + + + Yearly Billing + 25% discount + +
+
+ + +
+
Source code
+ diff --git a/challenges/interactive_pricing_component/style.css b/challenges/interactive_pricing_component/style.css index b5c61c95..ed38ffa5 100644 --- a/challenges/interactive_pricing_component/style.css +++ b/challenges/interactive_pricing_component/style.css @@ -1,3 +1,37 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer components { + #price-slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + border-radius: 50%; + width: 45px; + height: 45px; + background: #11d8c5; + background-image: url('./images/icon-slider.svg'); + filter: drop-shadow(3px 20px 24px #11d8c5); + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + } + + /* Pseudo-class variant for 'active' state when slider is grabbed */ + #price-slider::-webkit-slider-thumb:active { + background-color: #0f9e8d; + cursor: grab; + } + + #price-slider::-moz-range-thumb { + width: 25px; + height: 25px; + cursor: pointer; + } + + /* Pseudo-class variant for 'active' state when slider is grabbed */ + #price-slider::-moz-range-thumb:active { + background-color: #f6ad55; + cursor: grab; + } +} diff --git a/challenges/interactive_pricing_component/tailwind.config.js b/challenges/interactive_pricing_component/tailwind.config.js index 2633d13e..0570eafc 100644 --- a/challenges/interactive_pricing_component/tailwind.config.js +++ b/challenges/interactive_pricing_component/tailwind.config.js @@ -5,6 +5,19 @@ module.exports = { colors: { 'optimum-blue': '#009efc', 'optimum-darkblue': '#0389e1', + softCyan: 'hsl(174, 77%, 80%)', + strongCyan: 'hsl(174, 86%, 45%)', + lightGrayishRed: 'hsl(14, 92%, 95%)', + lightRed: 'hsl(15, 100%, 70%)', + paleBlue: 'hsl(226, 100%, 87%)', + veryPaleBlue: 'hsl(230, 100%, 99%)', + lightGrayishBlueOne: 'hsl(224, 65%, 95%)', + lightGrayishBlueTwo: 'hsl(223, 50%, 87%)', + grayishBlue: 'hsl(225, 20%, 60%)', + darkDesaturatedBlue: 'hsl(227, 35%, 25%)', + }, + fontFamily: { + manrope: ['Manrope', 'sans-serif'], }, }, },