Single price grid component master ( Made using flexbox )

Community feedback

• 

  océane•230

  @Ocece77Posted about 1 year ago

  Hi 🙌🏿 Your project is great, I noticed you followed the design on mobile, I don't know if it was intentional, in any case it's not bad 😎👍🏿

  There are a few corrections to optimize your code 🌿:

  First

  When you import fonts from google fonts you can put them all in one link, just select the font with the weight you want and in the top right tab "select families" and voilà ✨

  take a look at this YouTube short that shows how to do it: https://youtube.com/shorts/VPHqcvYTy3A?si=QBKYU4yzmF25RBv2

  Second thing : You can use variables for colors, animation, family .. and store them in root:

  Using variables in CSS with the :root selector allows you to store and reuse values throughout your stylesheet, leading to easier and more consistent styling across your entire website ☕️

  Here some cool ressources to help you 😎 :

  • https://www.youtube.com/watch?v=NtRmIp4eMjs

  • https://developer.mozilla.org/fr/docs/Web/CSS/:root

  • https://developer.mozilla.org/fr/docs/Web/CSS/Using_CSS_custom_properties

  Third thing : You can use transition on your button so that when the user no longer hovers over it, it returns smoothly to its initial state. By applying a transition: property to the button's CSS, you can control how properties change over a certain duration when the user interacts with it 💆.

  For exemple in your button:hover{} you can add a transition : 0.3s ease

  While you can technically add the transition property to the :hover state of the button, it's more common and efficient to apply it directly to the button's base class like this :

  .button{ 
      padding: 15px 6rem;  
      background-color: hsl(71, 73%, 54%); 
      border: none;  
      display: inline-flex;
      color: #fff; 
      font-size: 150%; 
      font-weight: 200;
      transition: 3s ease; 
  } 
  
  .button:hover{ 
      border-radius: 2em; 
      border: 2px solid white; 
      color: black; 
      background-color: transparent;
  }
  

  I noticed that your transition is a little bit long , transition more than 1 seconds is often considered too long for a transition duration because it can lead to a sluggish or delayed user experience . In many cases, users expect interactions and animations to feel snappy and responsive 🏃. A 3-second transition could potentially frustrate users by making the interaction feel slow and unresponsive 🫨.

  Here some ressources about it 📄:

  • https://developer.mozilla.org/fr/docs/Web/CSS/CSS_transitions/Using_CSS_transitions

  Keep practice and NEVER GIVE UP !

  Here a video that can motivate you :

  https://youtu.be/dzdiMRovyK0?si=jRfCxcNMvsLNk1ab

  Marked as helpful

  0

  ---

  

  KingSky•190

  @KingSkyrosPosted about 1 year ago

  @Ocece77 Thank you for all the help 👍, and also the mobile view was intentional 🐱‍💻 I just wanted to test my mobile progress.

  1