Skip to content

Commit

Permalink
implementation on interactive pricing challenge
Browse files Browse the repository at this point in the history
  • Loading branch information
@akinyiv
akinyiv committed Feb 15, 2024
1 parent 6e079ae commit 23acb49
Show file tree
Hide file tree
Showing 3 changed files with 177 additions and 10 deletions.
139 changes: 136 additions & 3 deletions challenges/interactive_pricing_component/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,104 @@
rel="stylesheet"
/>
</head>
<body class="m-0">
<body class="text-grayishBlue bg-veryPaleBlue font-manrope m-0 items-center">
<header class="">
<div class="z-10">
<img class="relative h-[50vh]" src="images/bg-pattern.svg" alt="" />
<img
class="absolute left-[29%] top-9 md:left-[45%]"
src="images/pattern-circles.svg"
alt=""
/>
</div>
<div
class="absolute top-16 ml-[2.5%] flex flex-col items-center justify-center text-center md:ml-[30%] lg:ml-[35%]"
>
<h1 class="text-darkDesaturatedBlue text-2xl font-bold">
Simple, traffic-based pricing
</h1>
<p class="ml-[-18px] mt-2 w-[60%] text-sm">
Sign-up for our 30-day trial. No credit card required.
</p>
</div>
</header>
<main
x-data="app"
class="shadow-lightGrayishBlueOne relative top-[-130px] ml-[5%] w-[90%] space-y-6 rounded-md bg-white py-8 text-center shadow-xl md:ml-[20%] md:w-[60%] lg:ml-[30%] lg:w-[40%]"
>
<h1
class="md:ml-[-50%]"
x-text="getPageViews(getIndex(data))+ ' PAGEVIEWS'"
></h1>
<div class="relative z-10">
<input
class="price-slider range-lg bg-softCyan h-3 w-4/5 cursor-pointer appearance-none rounded-full px-8"
type="range"
name="price"
min="1"
max="5"
id="price-slider"
x-model="data"
/>
<div
class="cover width-[100%] height-[100%] absolute left-0 top-0 z-0 bg-[#ccc]"
></div>
</div>
<div
class="flex items-center justify-center md:absolute md:left-[58%] md:top-[1%]"
>
<h2
class="text-darkDesaturatedBlue text-3xl font-bold"
x-text="getPrice(getIndex(data))"
></h2>
<span>/month</span>
</div>
<div class="flex items-center justify-center space-x-3 text-xs">
<span>Monthly Billing</span>
<a href="#" id="yearly-billing-toggle">
<label class="relative inline-flex cursor-pointer items-center">
<input
type="checkbox"
value=""
class="peer sr-only"
@click="yearly = !yearly"
/>
<div
class="bg-lightGrayishBlueTwo after:border-lightGrayishBlueTwo peer-checked:bg-darkDesaturatedBlue hover:bg-softCyan h-6 w-11 rounded-full after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none"
></div>
</label>
</a>

<span>Yearly Billing</span>
<span
class="bg-lightGrayishRed text-lightRed rounded-full p-[3px] px-2 font-bold"
>25% discount
</span>
</div>
<hr class="my-12" />
<ul class="space-y-2">
<li class="flex items-center justify-center gap-4">
<img class="block w-[12px]" src="images/icon-check.svg" alt="" />
<p>Unlimited websites</p>
</li>
<li class="flex items-center justify-center gap-4">
<img class="block w-[12px]" src="images/icon-check.svg" alt="" />
<p>100% data ownership</p>
</li>
<li class="flex items-center justify-center gap-4">
<img class="block w-[12px]" src="images/icon-check.svg" alt="" />
<p>Email report</p>
</li>
</ul>
<button
class="bg-darkDesaturatedBlue text-paleBlue mb-8 mt-8 rounded-full px-8 py-3 font-bold"
>
Start my trial
</button>
</main>

<div
class="flex h-[100vh] w-full flex-col place-content-center text-center"
class="mt-[-80px] flex w-full flex-col place-content-center text-center"
>
<div>
<a
Expand All @@ -68,10 +163,48 @@
<div class="mt-3">
<a
class="text-optimum-blue hover:text-optimum-darkblue"
href="https://github.com/optimumBA/frontend_mentor_challenges/tree/interactive_pricing_component/challenges/interactive_pricing_component"
href="https://github.com/akinyiv/frontend_mentor_challenges/tree/interactive_pricing_component/challenges/interactive_pricing_component"
>Source code</a
>
</div>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('app', () => ({
data: '3',
yearly: false,
pageviews: ['10K', '50K', '100K', '500K', '1M'],
price: ['$8.00', '$12.00', '$16.00', '$24.00', '$36.00'],
yearlyPrice: ['$6.00', '$9.00', '$12.00', '$18.00', '$27.00'],
getIndex(val) {
switch (val) {
case '1':
return 0
case '2':
return 1
case '3':
return 2
case '4':
return 3
case '5':
return 4
default:
return null
break
}
},
getPageViews(val) {
return this.pageviews[val]
},
getPrice(val) {
if (this.yearly) {
return this.yearlyPrice[val]
} else {
return this.price[val]
}
},
}))
})
</script>
</body>
</html>
34 changes: 34 additions & 0 deletions challenges/interactive_pricing_component/style.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
14 changes: 7 additions & 7 deletions challenges/interactive_pricing_component/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@ module.exports = {
colors: {
'optimum-blue': '#009efc',
'optimum-darkblue': '#0389e1',
softCyan: 'hsl(174, 77%, 80%)',
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%)',
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%)',
lightGrayishBlueTwo: 'hsl(223, 50%, 87%)',
grayishBlue: 'hsl(225, 20%, 60%)',
darkDesaturatedBlue: 'hsl(227, 35%, 25%)',
},
fontFamily: {
manrope: ['Manrope', 'sans-serif'],
Expand Down

0 comments on commit 23acb49

Please sign in to comment.