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.