Design comparison
Solution retrospective
Hi guys,
In this challenge, I tried to use BEM method. But hey, I am unsure of about pricing group code area. It is block or element? I think it is element...
This is my HTML code:
<div class="article-header__card">
<header class="article-header">
<figure class="article-header__image">
<img src="./images/illustration-hero.svg" alt="hero-image">
</figure>
<section class="article-header__text">
<h2 class="article-header__text-heading">Order Summary</h2>
<p class="article-header__text-description">You can now listen to millions of songs, audiobooks, and podcasts on any
device anywhere you like!</p>
<div class="article-header__pricing">
<img class="article-header__pricing-icon" src="./images/icon-music.svg" alt="icon-music">
<div class="article-header__pricing-wrapper">
<p class="article-header__pricing-plan">Annual Plan</p>
<span class="article-header__pricing-tag">$59.99/year</span>
</div>
<a class='link-btn' href="#">Change</a>
</div>
<button class="btn btn-blue">Proceed to Payment</button>
<button class="btn btn-transparent">Cancel Order</button>
</section>
</header>
</div>
Thanks for advance.
Community feedback
- @Aikaykalu17Posted almost 2 years ago
For a more semantic web page or for best practices Your div should be inside your header tag not outside it For example
<header> <div> </div> </header>•And for this project •No header tag is needed •Each page should contain only one h1 tag and each section can contain two or more h2-h3 tags •It's the reason for frontendmentor accessibility reports •SVGs are decorative images and have no meaning...all SVgs should be aria-hidden °<img src="./images/illustration-hero.svg" alt="" aria-hidden="true">
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord