Juveria Dalvi

@Juveria-Dalvi

All comments

Saaqlainn•55
@SaaqlainnSubmitted about 3 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
@Juveria-DalviPosted almost 3 years ago
Well Done ✅👍🏻 You forgot to upload background image there
0
Emmanuel Oloke•320
@EmmanuelOlokeSubmitted about 3 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
@Juveria-DalviPosted about 3 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-AlaaSubmitted about 3 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

@Juveria-DalviPosted about 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

John Carson•50

@wppaingSubmitted about 3 years ago

3 column preview card

Juveria Dalvi•1,375

@Juveria-DalviPosted about 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>

Saad EDERDIK•30

@MisMagJrSubmitted about 3 years ago

I'll appreciate your feedback guys.

Beginner solution using HTML & CSS

Juveria Dalvi•1,375

@Juveria-DalviPosted about 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>

Artem Khasin•220

@khasTemaSubmitted about 3 years ago

This is my first attempt so any feedback is appreciated

Order summary block built with flex-box

Juveria Dalvi•1,375

@Juveria-DalviPosted about 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

Grimfeld•90

@grimfeldSubmitted about 3 years ago

Mobile first solution using HTML and Sass

Juveria Dalvi•1,375

@Juveria-DalviPosted about 3 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

@JustTom77Submitted about 3 years ago

Interactive-Pricing-Component HTML/CSS/JS

Juveria Dalvi•1,375

@Juveria-DalviPosted about 3 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

@SaaqlainnSubmitted about 3 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

Juveria Dalvi•1,375

@Juveria-DalviPosted about 3 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>```

Anar•700

@anar-solSubmitted about 3 years ago

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

Juveria Dalvi•1,375

@Juveria-DalviPosted about 3 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

@SaaqlainnSubmitted about 3 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

@Juveria-DalviPosted about 3 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-07Submitted about 3 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
@Juveria-DalviPosted about 3 years ago
After rotating I can't see the text straight try using flexbox and I can't see your css file 🤔
1

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 🤓.