Skip to content
OverviewSolutions
10
Comments
121

Juveria Dalvi

@Juveria-DalviIndia,Maharashtra1,375 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

Angular

Latest solutions

View more solutions

Latest comments

  • Juveria Dalvi•1,375
    @Juveria-DalviPosted over 3 years ago

    Well Done ✅👍🏻 You forgot to upload background image there

    0
  • Juveria Dalvi•1,375
    @Juveria-DalviPosted over 3 years ago

    Background image is getting repeated search on how to set background image on no-repeat

    Marked as helpful
    0
  • Juveria Dalvi•1,375
    @Juveria-DalviPosted over 3 years ago

    Use semantic tags main and footer in every web page

      <body>
<main>
    <div class="page">
      <div class="card-container">
        <img
          src="./images/illustration-hero.svg"
          alt="Girl in a jacket"
          class="image"
        />
        <div class="card-data-container">
          <h2>Order Summary</h2>
          <h5 class="gray">
            You can now listen to millions of songs, audiobooks, and podcasts on
            any device anywhere you like!
          </h5>

          <div class="plan-container">
            <div>
              <img
                src="./images/icon-music.svg"
                alt="icon music"
                class="plan-image"
              />
              <div>
                <div class="plan-title">Annual Plan</div>
                <div class="gray">$59.99/year</div>
              </div>
            </div>
            <a href="#">Change</a>
          </div>

          <div class="agree-payment">Proceed to Payment</div>
          <div class="cancel-order gray">Cancel Order</div>
        </div>
      </div>
</div>
</main>

<footer>
      <div class="attribution">
        Challenge by
        <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
          >Frontend Mentor</a
        >. Coded by
        <a href="https://www.frontendmentor.io/profile/Khaled-Alaa"
          >Khaled Alaa</a
        >.
      </div>
</footer>
  </body>
    Marked as helpful
    0
  • Juveria Dalvi•1,375
    @Juveria-DalviPosted over 3 years ago

    Use main and footer semantic tags for every web page that you create it is necessary for better accessibility

    Also check your Hover effect you need to change text color to white when the background goes orange on that Learn more button

    <body>
<main>
  <div class="container">
      <div class="child">
          <div class="sedan">
              <img src="./images/icon-sedans.svg" alt="">
              <h1>Sedans</h1>
              <p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city 
                or on your next road trip.</p>
              <a href="#">Learn More</a>
          </div>
          <div class="suv">
              <img src="./images/icon-suvs.svg" alt="">
              <h1>SUVs</h1>
              <p> Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation 
                and off-road adventures.</p>
                <a href="#">Learn More</a>
          </div>
          <div class="luxury">
              <img src="./images/icon-luxury.svg" alt="">
              <h1>Luxury</h1>
              <p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury 
                rental and arrive in style.</p>
                <a href="#">Learn More</a>
          </div>
      </div>
  </div>
</main>

 <footer>
<div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Your Name Here</a>.
  </div> 
</footer>
</body>
    0
  • Juveria Dalvi•1,375
    @Juveria-DalviPosted over 3 years ago

    Use footer tag for div with class attribution

    <footer>
<div class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by <a href="https://www.instagram.com/MisMagJr">Saad EDERDIK</a>.
    </div>
</footer>
    0
  • Juveria Dalvi•1,375
    @Juveria-DalviPosted over 3 years ago

    Use semantic tags like main and footer for better accessibility

    <body>
<main>
    <div class="summary-card">
        <div class="summary-card_hero"></div>
       
       <div class="summary-card_main">
            <h1>Order Summary</h1>
            <p>You can now listen to millions of songs, audiobooks, and podcasts on any 
            device anywhere you like!</p>
            <div class="summary-card_plan-info">
                <img src="images/icon-music.svg" alt="music key icon">
                <div class="plan-info_description">
                    <h2>Annual Plan</h2>
                    <span>$59.99/year</span>
                </div>
                <a href="#" class="change-link">Change</a>
            </div>
            <button class="proceed-btn">Proceed to Payment</button>
            <a href="#" class="cancel-btn">Cancel Order</a>
       </div>
       
    </div>
</main>
  <footer>
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://github.com/khasTema" target="_blank">Artyom Khasin</a>.
  </div>
</footer>
</body>
    Marked as helpful
    0
View more comments