Chat-app-css-illustration-master using html and CSS

Hi @cristianccgg Your solution looks amazing!

I could give you some advice regarding your concern about making the radio button background color transparent, if you don't mind.

1. Replace <p> tag with <label> and put it below the <input type='radio'>

2. Put the value into the label, like :

<label for="30min">30 minute walk</label>

3. Style the <input type='radio'> to display = none

4. You can use pseudo-element on label like this, label::before

5. Next, style your label::before like:

  content: "";
  position: relative;
  width: 10px;
  height: 10px;
  background-color: transparent;
  border: 1px solid hsl(289, 100%, 72%);;
  border-radius: 50%;
  margin-right: 0.5rem; 
}

6. And then you can style the input type radio and the label::before like this:

input[type="radio"]:checked + label::before {
	background-color: white;
}

Basically, we just create a new custom radio button. But still functioning like the original one. Because, as i know, we can't really style the original radio button. Might as well create a new customize-able one. So we can style it as we want. Because pseudo-element is great use on a case like this.

This method works great on me!

I hope this would help you with your problems. Good luck and happy coding!