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..0cf21dda 100644 --- a/challenges/interactive_pricing_component/index.html +++ b/challenges/interactive_pricing_component/index.html @@ -26,38 +26,214 @@ href="../images/favicon-16x16.png" /> + +
-
- Frontend Mentor challenge + background-pattern + +
+
+

Simple, traffic-based pricing

+

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

+
+ circle patterns
-
- for - Optimum BH +
+
+

+
+ +
+
+

+ / month +
+
+ +
+ +
+
+
+
+

Monthly Billing

+ + + +
+

Yearly Billing

+

+ -25% + +

+
+
+
+ +
+ +
- Internship. +
+
+ check icon +

Unlimited websites

+
+
+ check icon +

100% data ownership

+
+
+ check icon +

Email reports

+
+
+
+ +
+
+
+
+ Frontend Mentor challenge +
+
+ for + Optimum BH + Internship. +
-
- Source code +
+ Source code +
+ + diff --git a/challenges/interactive_pricing_component/style.css b/challenges/interactive_pricing_component/style.css index b5c61c95..423f4ec7 100644 --- a/challenges/interactive_pricing_component/style.css +++ b/challenges/interactive_pricing_component/style.css @@ -1,3 +1,32 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Kumbh+Sans:wght@400;700&family=Manrope:wght@600;800&family=Outfit:wght@400;700&family=Overpass:wght@300;600&family=Red+Hat+Display:wght@500;700;800&family=Ubuntu:ital,wght@0,700;1,400&display=swap'); @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; + box-shadow: -405px 0 0 400px #00ffff; + } + price-slider::-moz-range-thumb { + width: 25px; + height: 25px; + cursor: pointer; + } + + #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..40a8f041 100644 --- a/challenges/interactive_pricing_component/tailwind.config.js +++ b/challenges/interactive_pricing_component/tailwind.config.js @@ -5,6 +5,20 @@ module.exports = { colors: { 'optimum-blue': '#009efc', 'optimum-darkblue': '#0389e1', + '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%)', + 'very-pale-blue': 'hsl(230, 100%, 99%)', + 'light-grayish-blue': 'hsl(224, 65%, 95%)', + 'light-gray-blue': 'hsl(223, 50%, 87%)', + 'grayish-blue': 'hsl(225, 20%, 60%)', + 'dark-desaturated-blue': ' hsl(227, 35%, 25%)', + white: 'hsl (0, 0%, 100%)', + }, + fontFamily: { + manrope: ['Manrope', 'sans-serif'], }, }, },