@DarmaniBenjamin
@Paulo-Dandrea
Submitted
Hi!
Could you help me know if that is the best way to organize a CSS? Should I use more classes and less generic selectors? Is there a better way to organize the order of the elements on the CSS? I think the way I changed between the 2 different backgrounds is not the best. Could you look, please?
@DarmaniBenjamin
Posted
You got some unnecessary code in index.html file
<article class="card"> <div class="img-hero-wrapper"> <picture class> <img class="img-hero" srcset="./images/illustration-hero.svg" alt="Someone dancing"/> </picture> </div>Inside the main element just like
<main> <img class="img-hero" srcset="./images/illustration-hero.svg" alt="Someone dancing"/>Then proceed to add the h1 element right under follow by the p tag
Also the section inside the main is not needed cause its not a new section you're creating just a card. TO learn more about sections https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section so you can remove the picture tag and instead just give the img a class
<section class="plan"> <picture> <img src="./images/icon-music.svg" alt="A musical note" /> </picture> <div> <h5>Annual Plan</h5> <p>$59.99/year</p> </div> <button>Change</button> </section>instead do this
<div class="plan"> <img src="./images/icon-music.svg" alt="A musical note" /> <div class="plan2"> <h5>Annual Plan</h5> <p>$59.99/year</p> </div> <button>Change</button> </div> </div>Then you can make the necessary changes in your css file
