Skip to content
OverviewSolutions
5
Comments
24
Harshita Jain
@Harshi786

All comments

  • Harshita Jain•380
    @Harshi786Posted over 2 years ago

    Hey!

    • You need to fix the accessibility issue. Here is my suggestion:
    1. Buttons must have discernible text. set the aria-label attribute to describe button. <button aria-label="Advice Generator"></button>

    Hope this helps :)

    Marked as helpful
    0
  • Harshita Jain•380
    @Harshi786Posted over 2 years ago

    Hey! Congrats on completing the challenge.

    Here are some suggestions:

    • To make it more specific, add advice id.

      1. In index.html file, Add <h1 class="adviceWrapper__heading">Advice # <span id="aid"> </span></h1>.

      2. In script.js file, const aid = document.querySelector("#aid"); then In function add aid.innerHTML = slip.id;

    • In style.css file, change @media only screen and (min-width: 500px).

    Hope this helps :)

    1
  • Harshita Jain•380
    @Harshi786Posted over 2 years ago

    Hey @KunalNimsatkar!

    Congrats on completing your first challenge.

    Your code looks good but here are some tips to make it perfect:

    • You can add a nice little shadow effect.
      1. For card, add box-shadow .container {box-shadow: 0 40px 40px -20px rgba(13, 48, 189,0.15);}
    1. For Payment button, add box-shadow. a.proceedBtn { box-shadow: 0px 10px 20px hsl(245, 75%, 52%, 0.5);}
    • Some accessibility issues that need to be fixed.

    1. You need to wrap the whole code in <main> tag. For example use <main class="container"> in place of <div class="container">. For details read this

    2. Heading levels should only increase by one : Headings should be in order. Use <h1> Order Summary </h1> . After using <h1> then use <h2> , <h3> for better coding. For details read

    3. Always call image with alt attribute. <img src="images/illustration-hero.svg" alt="illustration-hero">.

    Hope this helps :)

    0
  • Harshita Jain•380
    @Harshi786Posted over 2 years ago

    Hey @yjkim0109!

    Congrats on completing the challenge.

    Your code looks good just a tip to make it perfect:

    • Your have done image right just reduce the opacity of image it will get perfect.
    .desktop_img {
    display: block;
    height: 100%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    mix-blend-mode: multiply;
    opacity: 0.75;
  }
    • And please write your name in attribution section.

    Hope this helps :)

    Marked as helpful
    1
  • Harshita Jain•380
    @Harshi786Posted over 2 years ago

    Hi @Orhan32!

    Congrats on completing the challenge.

    Your code looks good but need to work on some accessibility issues:

    • You need to wrap the whole code in <main> tag. For example use <main class="container"> in place of <div class="container">. For details read this

    • Links must have discernible text: Use aria-label attribute. Example <a href=" #" aria-label="facebook profile"> <i class="fa-brands fa-facebook-f"></i> </a>. For details click on the link

    Hope this helps :)

    Marked as helpful
    0
  • Harshita Jain•380
    @Harshi786Posted over 2 years ago

    Hi @pbitonga17!

    Congrats on completing the challenge.

    • Click on View Report button, then on a right side a red colored Generate New Report button will appear.

    • Now click on generate new report button, it will reveal the HTML and Accessibility issues.

    • I guess you have already worked on html issues. Here are the tips for accessibility issues-

      1. Links must have discernible text: Use aria-label attribute. Example <a href=" #" aria-label="facebook profile"> <i class="fa-brands fa-facebook-f"></i> </a>. For details click on the link

    Hope this helps :)

    Marked as helpful
    1
  • Harshita Jain•380
    @Harshi786Posted over 2 years ago

    Hey @Shashwati09!

    Congrats on completing the challenge.

    Here are some tips to make it perfect.

    • For background Image, some changes-
     font-family: "Red Hat Display", sans-serif;
  background-image: url(order_images/pattern-background-desktop.svg);
  background-repeat: no-repeat;
  background-size:contain;
  background-color: #e0e8ff;
  display: grid;
  place-items: center;
  min-height: 100vh;
    • Background color of card is white.
    .card {
  overflow: hidden;
  width: 400px;
  background-color:white;
  border-radius: 20px;
 box-shadow: 0 40px 40px -20px rgba(13, 48, 189,0.15);
}

    • You can Add a nice little shadow effect to payment button. box-shadow: 0 20px 20px 0 rgba(56, 42, 225, 0.19);

    • Add hover effects to buttons and links. For details see this once

    -Try using em/rem value units instead of pixels. For details Read this link

    Hope this helps :)

    Marked as helpful
    0
  • Sourabh•420
    @SOURABH358Submitted over 2 years ago

    Hey guys, this is my another solution to the frontend mentor challenge do check out my code and suggest any improvements. Thank You ✌.

    order summary component

    1
    Harshita Jain•380
    @Harshi786Posted over 2 years ago

    Hey @SOURABH358!

    Congrats on completing the challenge.

    Here are some tips to make your code perfect.

    • Remove height property from #card {}.

    • Add html { background-color: hsl(225, 100%, 94%); }.

    • For Background Image, some changes-

    body {
  width: 100%;
  min-height: 100vh;
  background: url("./images/pattern-background-mobile.svg") no-repeat;
  background-position:top;
  background-size:contain;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
    • Add a nice little shadow effect to payment button as well. box-shadow: 0 20px 20px 0 rgba(56, 42, 225, 0.19);

    Hope this helps :)

    Marked as helpful
    0
  • Harshita Jain•380
    @Harshi786Posted over 2 years ago

    Hey @irinani!

    Congrats on completing the challenge.

    Your code looks good just a little tip to make it perfect:

    • To match the image with challenge, Use properties like this---
    .card-image:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--purple);
}

    -Add mix-blend-property and opacity in image itself. Example-

    .card-image img {
  display: block;
  object-fit: cover;
  object-position: top;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  opacity: 0.75;
}

    Hope this helps to understand code better :)

    0
  • Harshita Jain•380
    @Harshi786Posted over 2 years ago

    Hey @cma124

    Congrats on completing the challenge.

    Here's a suggestion to fix accessibility issue.

    • All page content should be contained by landmarks: Use footer tag. For details click on this
    <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/cma124">Chan Myae Aung</a>.
     </div>
</footer>

    Hope this helps :)

    1
  • HShirzad•170
    @Haseebullah555Submitted over 2 years ago

    I solve this challenge, But I want your advices in cause of providing better solutions. Human is fallible and if there is any mistake in my solution please tell me and I will make mistakes in solving new challenges.

    Responsive Fylo Landing Page With Two Column

    1
    Harshita Jain•380
    @Harshi786Posted over 2 years ago

    Hey @Haseebullah555

    Congrats on completing the challenge.

    Here are some suggestions to fix the accessibility issues.

    • Heading levels should only increase by one : Headings should be in order. Use <h1> in place of <h4>. For details read

    • Links must have discernible text: Use aria-label element. Example <a href="#" class="fa fa-facebook" aria-label="facebook profile></a>. For details click on the link

    Hope this helps :)

    Marked as helpful
    0
  • Harshita Jain•380
    @Harshi786Posted over 2 years ago

    Hey @Tucznik2

    Congrats on completing the challenge.

    Here are some tips-

    • For background image, use body{background-size:contain;}

    • You can add a nice shadow effect on payment button. .payment-button{ box-shadow: 0 20px 20px 0 rgb(56 42 225 / 19%); }

    • For accessibility issues:

      1. Wrap the whole code in <main> tag. 
           <main class="wrapper">
    //......
    .......//
     </main> ```
      2. Take
         <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/Tucznik2">Filip Kula</a>.
          </div>
    </footer>

    If it really helped you then please mark it helpful. Thanks

    Marked as helpful
    0