Mobile first card payment

Community feedback

• 

  Rachel Cessna•195

  @cessnar516Posted about 3 years ago

  Hi Luis!

  To get the value proposition to align properly, you will need to make a few adjustments to your HTML markup. The icon, title, and price need to be grouped together so you can change justify-content to space-between. I suggest formatting your HTML like this:

  <div id="proposal">
    <div id="proposalTitle">
      <img src="/images/icon-music.svg" alt="">
      <h2>Annual Plan</h2>
      <p>$59.99/year</p>
    </div>
    <a href="#">Change</a>
  </div>
  
  

  This way, the #proposalTitle div and the link are both children of the #proposal div. Then, you can set #proposal { justify-content: space-between; } to get the items to align on opposite sides of the card. You will also need to adjust padding and margins to adjust the spacing and keep the information from being up against the edge of the card.

  One thing that will help clean up your code some too would be to avoid using divs and IDs unless you have to have them. So rather than wrapping each element in a div and adding an ID, you can add the class or ID to the element itself, or you can add the styling directly to the element without using an ID or class. For example, instead of adding a class to the h2 inside of the #proposal div, you could style the h2 by using the selector #proposal h2 .

  Hope this helps!

  0
• Account deleted

  Give the button a property of border : none to make it look like the one in the design & you are also missing the background image and color. You can check out this free course it'll get you up and running with html and css

  0