Juveria Dalvi

@JuveriaD

All comments

Saaqlainn• 55
@Saaqlainn
Submitted over 2 years ago
hello! every buddy👋 One More Challenge Has been Completed ✌ This was really fun. Enjoyed making this one check the code and suggest me some improvements Thank you.
Social proof section
1
Juveria Dalvi• 1,375
@JuveriaD
Posted over 2 years ago
Well Done ✅👍🏻 You forgot to upload background image there
0
Emmanuel Oloke• 320
@EmmanuelOloke
Submitted over 2 years ago
Having some issues with the media query breakpoint at 768px. There's some weird distortion in layout right before the design transitions into desktop or mobile view. Any help or suggestion on how I can best handle this will be appreciated. Thanks
Huddle Landing Page with a Single Introductory Section
1
Juveria Dalvi• 1,375
@JuveriaD
Posted over 2 years ago
Background image is getting repeated search on how to set background image on no-repeat
Marked as helpful
0

Khaled M. ALaa• 20

@Khaled-Alaa

Submitted over 2 years ago

I will be very happy if you leave me any feedback :)

Responsive order summary component using media query and flex box

Juveria Dalvi• 1,375

@JuveriaD

Posted over 2 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

John Carson• 50

@wppaing

Submitted over 2 years ago

3 column preview card

Juveria Dalvi• 1,375

@JuveriaD

Posted over 2 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>

Saad EDERDIK• 30

@MisMagJr

Submitted over 2 years ago

I'll appreciate your feedback guys.

Beginner solution using HTML & CSS

Juveria Dalvi• 1,375

@JuveriaD

Posted over 2 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>

Artem Khasin• 220

@khasTema

Submitted over 2 years ago

This is my first attempt so any feedback is appreciated

Order summary block built with flex-box

Juveria Dalvi• 1,375

@JuveriaD

Posted over 2 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

Grimfeld• 90

@grimfeld

Submitted over 2 years ago

Mobile first solution using HTML and Sass

Juveria Dalvi• 1,375

@JuveriaD

Posted over 2 years ago

Use semantic 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://grimfeld.tech">Grimfeld</a>.
    </div>
</footer>

Thomas Sprotte• 90

@JustTom77

Submitted over 2 years ago

Interactive-Pricing-Component HTML/CSS/JS

Juveria Dalvi• 1,375

@JuveriaD

Posted over 2 years ago

Use main and footer tags every time you create a web page it is necessary to implement semantic tags

<body>
<main>
    <div class="title-box">
      <img src="./images/pattern-circles.svg" alt="circles" />
      <h1>Simple, traffic-based pricing</h1>
      <p>Sign-up for our 30-day trial. No credit card required.</p>
    </div>
    <div class="traffic-container">
      <div class="trial-options-box">
        <div class="views-pricing-box">
          <div class="views"><p id="views">100k Pageviews</p></div>
          <div class="price-month">
            <h1 id="price"></h1>
            <span>/month</span>
          </div>
        </div>

        <div class="slide-container slider-background" id="slide-icon">
          <input
            type="range"
            min="0"
            max="100"
            value="50"
            step="25"
            class="slider"
            id="myRange"
          />
          <div class="slide-bar" id="slide-bar"></div>
        </div>

        <div class="subscription-option">
          <p>Monthly Billing</p>
          <div class="btn-container" id="btn-container">
            <div class="btn" id="btn"></div>
          </div>
          <p>Yearly Billing</p>
          <p>25% discount</p>
          <p>-25%</p>
        </div>
      </div>

      <div class="trial-submit-box">
        <div class="infos">
          <ul>
            <li>
              <img src="./images/icon-check.svg" alt="check icon" /> Unlimited
              websites
            </li>
            <li>
              <img src="./images/icon-check.svg" alt="check icon" />100% data
              ownership
            </li>
            <li>
              <img src="./images/icon-check.svg" alt="check icon" />Email
              reports
            </li>
          </ul>
        </div>
        <div class="submit-button">
          <button>Start my trial</button>
        </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="#">Tom</a>.
    </div>
</footer>
**Script tag goes here**
</body>

Saaqlainn• 55
@Saaqlainn
Submitted over 2 years ago
Hi!✋ This Is The Second Challenge I have Used Flexbox. I Hope You Guys Like It. Any Advice, Suggestion To Improve Would Be Much Appreciated. Thankyouu....🤗
Responsive Stats preview card Component
1
Juveria Dalvi• 1,375
@JuveriaD
Posted over 2 years ago
I think you should remove this from mobile preview .card__container {margin-top: 50px;}

Also check this you closed something after footer that is giving accessibility issue

<div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Saqlain patel</a>. </div> </footer> </div> </body>```
1

Anar• 700

@anar-sol

Submitted over 2 years ago

Mobile First - Responsive - Flexbox - Grid - BEM - SASS

Juveria Dalvi• 1,375

@JuveriaD

Posted over 2 years ago

Heyy🙂 The index.html does not have main tag

<main>
<div class="container">
    <article class="card">
      <div class="card__body">
        <div class="card__content">
          <h1 class="card__title">Get <span class="card__title-highlighted">insights</span> that help your business
            grow.
          </h1>
          <p class="card__text">Discover the benefits of data analytics and make better decisions regarding revenue,
            customer experience, and overall efficiency.</p>
        </div>
        <ul class="stats">
          <li class="stats__item">
            <div class="stats__value">10k+</div>
            <h2 class="stats__title">companies</h2>
          </li>
          <li class="stats__item">
            <div class="stats__value">314</div>
            <h2 class="stats__title">templates</h2>
          </li>
          <li class="stats__item">
            <div class="stats__value">12M+</div>
            <h2 class="stats__title">queries</h2>
          </li>
        </ul>
      </div>
    </article>
  </div>
</main>```

Saaqlainn• 55

@Saaqlainn

Submitted over 2 years ago

This Is My first challenge From Frontend Mentor. Hope You Guys Like It.. Suggest For Any Improvement!

Order summury card Component

Juveria Dalvi• 1,375

@JuveriaD

Posted over 2 years ago

Use semantic tag main

<body>
<main>
    <div class="card__container">
      <div class="card">
        <div class="card__image">
        </div>
        <div class="card-data__container">
          <div id="card__title" class="card__content" >
            <h1>Order Summary</h1>
          </div>
          <div id="card__discription" class="card__content" >
            <p>You can now listen to millions of songs, audiobooks, and podcasts on any device anywhere you like!</p>
          </div>
          <div id="card__plan">
          <div id="annual__plan__container" class="card__content" >
            <div id="card__plan__image" class="card__content"> 
              <img src="images/icon-music.svg" alt="error loading image">           
            </div>
              <div id="card__price">
                <div id="annual_plan"><p>Annual Plan</p></div>
                <div id="price"><p>$59.99/year</p></div>
              </div>
              <div id="change"><a href="change">change</a></div>
            </div>
          </div>
          <div id="card__button" class="card__content" >
            <button>Proceed to Payment</button>
          </div>
          <div id="cancel" class="card__content" >
            <p>Cancel order</p>
          </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="#">Saqlain patel</a>.
          </div>
        </footer>
  </body>

Marked as helpful

Shreyansh shah• 45
@Shreyansh-07
Submitted over 2 years ago
I made it for a tablet viewport😓. If you want to see it mobile, you can rotate your device to landscape🤦. Anyway, it might be disordered for both mobile and desktop🤦. Any suggestions to get these through are welcome. Thank uy 🤗
Stats card by a nerd 🤓.
2
Juveria Dalvi• 1,375
@JuveriaD
Posted over 2 years ago
After rotating I can't see the text straight try using flexbox and I can't see your css file 🤔
1
Adrian Salinas• 160
@a-dri-an-S
Submitted over 2 years ago
Hi all!

This is my first time using frontendmentor.io and I'm very excited to share my solution.

A few thing I would like feedback on are:

Clean Code

Responsiveness

Industry best practices (am i doing it right?)

Class naming (are they clear? do they make sense?)

Anything else you would like to share!

HTML, CSS - Order Sumary Card
2
Juveria Dalvi• 1,375
@JuveriaD
Posted over 2 years ago
Clean code contains semantic tags check out your accessibility issue click
Marked as helpful
0
Jonathan Aldas• 110
@jonaaldas
Submitted over 2 years ago
Hello all I did my best to mimic as close as possible to the sample image. Please give me any feedback. Thank you.
HTML, CSS, Google Fonts, Flexbox!
3
Juveria Dalvi• 1,375
@JuveriaD
Posted over 2 years ago
Use semantic tags click here to know more
0
P
Naman Avasthi• 140
@namanavasthi
Submitted over 2 years ago

bootstrapped the project using github template : https://github.com/namanavasthi/frontend-mentor-bootstrap

please read project readme for more details

Bootstrapped using create-react-app and used tailwind for styling
3
Juveria Dalvi• 1,375
@JuveriaD
Posted over 2 years ago
Use h1 tag for order summary and also try using semantic tags😊👍🏻click here
0
Ndayisenga Jean Claude• 150
@Ndayisenga
Submitted over 2 years ago
Ask me anything I am ready to help !
I used visual studio and Created This card with html and css only
2
Juveria Dalvi• 1,375
@JuveriaD
Posted over 2 years ago
Don't rush to submit code check out if it atleast matches the design
0
Hassan Elabadi• 150
@Elab4d1
Submitted over 2 years ago
Your feedbacks are highly appreciated ! :)
Order summary component
3
Juveria Dalvi• 1,375
@JuveriaD
Posted over 2 years ago
Nice work👍🏻😊 Check the accessibility issue use semantic tags click to know more
Marked as helpful
1
Lone• 10
@LoneW35
Submitted over 2 years ago
I just wanted to do something :)
flexbox
2
Juveria Dalvi• 1,375
@JuveriaD
Posted over 2 years ago
Use GitHub pages bro check this video if you don't know how to use that follow my steps video 1 video 2 video 3 video 4
0

melloper• 20

@mellito

Submitted over 2 years ago

traing to get better =)

Order Sumary solution

Juveria Dalvi• 1,375

@JuveriaD

Posted over 2 years ago

Div with class attribution should be written in footer tag and in img use (.) period this way :

<body>
  <main>
    <div class="main__cointainer" >
        <div class="main__header"> 
            <img src="./assets/images/illustration-hero.svg" alt="imagen del header">
        </div>
        <div class="main__resume">
            <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="main__plan">
       <img src="./assets/images/icon-music.svg" alt="icono musica">
            <article>
                    <h3>Annual Plan</h3>
                    <p>$59.99/year</p>
             </article>
           <a href="#">Change</a>
     </div>
            <button class="main__container--button" type="submit">Proceed to Payment</button>
            <button class="main__container--button--cancel" type="submit">Cancel Order</button>
      </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="#">dayan manrique</a>.
  </div>
</footer>
</body>```

Marked as helpful

Kauê Leal de Lima• 80

@kauelima21

Submitted over 2 years ago

It's the first solution I develop, I hope you like it. If possible, help me with some feedback! :)

3-column preview card component

Juveria Dalvi• 1,375

@JuveriaD

Posted over 2 years ago

Use footer for div with class attribution and write img tag instead of inserting that big svg code

<body>
  
  <main class="main_content">
    <section class="main_content_section">
      <article id="sedan">
        <header>
          <img src="images/icon-sedans.svg" alt="">
          <h1>Sedans</h1>
        </header>
        <section>
          <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>
        </section>
      </article>

      <article id="suv">
        <header>
          <img src="images/icon-suvs.svg" alt="">
          <h1>SUVs</h1>
        </header>
        <section>
          <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>
        </section>
      </article>

      <article id="luxury">
        <header>
          <img src="images/icon-luxury.svg" alt="">
          <h1>Luxury</h1>
        </header>
        <section>
          <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>
        </section>
      </article>
    </section>
  </main>
  <footer>
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Kauê Leal</a>.
  </div>
</footer>
</body>```

Marked as helpful

gerald• 25
@peruviansd
Submitted over 2 years ago
I made this layout using just flexbox, i ll appreciate if you guys could tell in what i can improve.
Flexbox
2
Juveria Dalvi• 1,375
@JuveriaD
Posted over 2 years ago
Use GitHub pages instead of codepen Also ID's should not be same for div if you want to apply same design to certain div use class attribute Watch this video and this shorts if you don't know how to put GitHub pages live
0
devjakov• 210
@devjakov
Submitted over 2 years ago
Hope you like it, cheers

Learned a lot about flexbox and positioning with this.

Had a lot of fun!
Order Summary Component - Solution
2
Juveria Dalvi• 1,375
@JuveriaD
Posted over 2 years ago
Watch this video And use GitHub pages 😊✌️
Marked as helpful
1

Amina Arif• 40

@AminaArif0005

Submitted over 2 years ago

please leave your feedback on the way classes are being applied and also if you see any other issue please do point out.

order-summary-card

Juveria Dalvi• 1,375

@JuveriaD

Posted over 2 years ago

Use semantic tags like main, footer😊 Also use h1 for "order summary"

<body>
<main>
  <div class="wrapper">

    <div class="top">
   
        <img src="./images/illustration-hero.svg" alt="" srcset="">

    </div>

    <div class="card-content">
      
      <div class="order-summary center">
        <div class="summary-title ">
          <h1>Order Summary</h1>
        </div>
       
        <div class="summary-content">
         <p> You can now listen to millions of songs, audiobooks, and podcasts on any 
          device anywhere you like!</p>
        </div>
        
      </div>
     
      <div class="selected-plan-content center">
        
        <div class="icon">
          <img src="./images/icon-music.svg" alt="">
        </div>
        <div class="selected-plan">
          
        <div class="selected-plan-title">
          <span>Annual Plan</span>
        </div>
        
        <div class="selected-plan-price">
          <span>$59.99/year</span>
        </div>
        
      </div>
    
        <a href = "#">Change</a>
      
      </div>
      
      <div class="btn payment-btn center">
        Proceed to Payment
  
      </div>
      
     
      <div class="btn order-cancel-btn center">
        Cancel Order
        
      </div>
    </div>
  </div>
</main>
<footer>
  <div class="attribution center">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Amina Arif</a>.
  </div>
  </footer>
</body>```

Marked as helpful

José Cabral• 30
@jlmcabral
Submitted over 2 years ago
This is my first challenge. Feel free to leave some comments on the proposed solution and lets learn together.
Order Summary Challenge - Mobile first implementation with CSS variabl
2
Juveria Dalvi• 1,375
@JuveriaD
Posted over 2 years ago
Matt said they are hover effect 💯👍🏻✅
Marked as helpful
0

Juveria Dalvi

All comments

Social proof section

Huddle Landing Page with a Single Introductory Section

Responsive order summary component using media query and flex box

3 column preview card

Beginner solution using HTML & CSS

Order summary block built with flex-box

Mobile first solution using HTML and Sass

Interactive-Pricing-Component HTML/CSS/JS

Responsive Stats preview card Component

Mobile First - Responsive - Flexbox - Grid - BEM - SASS

Order summury card Component

Stats card by a nerd 🤓.

HTML, CSS - Order Sumary Card

HTML, CSS, Google Fonts, Flexbox!

Bootstrapped using create-react-app and used tailwind for styling

I used visual studio and Created This card with html and css only

Order summary component

flexbox

Order Sumary solution

3-column preview card component

Flexbox

Order Summary Component - Solution

order-summary-card

Order Summary Challenge - Mobile first implementation with CSS variabl