All solutions

Hi, guys!

This is my solution to the 'Pod Request Access Landing Page' Premium challenge.

I used CSS grid for desktop view. But, on mobile view I used normal flow order and then set the container of form element to flexbox, next I re-order the box form to 1. So, the form appear after sponsors group.

Glad to hear any feedback.

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.

Dear all, This is my first time using BEM.

I would love to know if there is any suggestions how to make a better overlay image effect? Thanks.

I found it difficult when positioning multiple background images. should I use lengths or percentages value for simple or better practice? And how to be responsive about background image, I use media query, btw. Is there any other way?