All comments

• 

  Martin• 220

  @martinw0

  Submitted almost 2 years ago

  Do you know why my generate function doesn't work on Firefox (a second time) ?

  

  Responsive advice card with Flex

  2

  5

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 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
• 

  Rohit Kumar Saini• 270

  @rockingrohit9639

  Submitted almost 2 years ago

  Hey there, Please give your feedback. Thank you.

  

  Advice Generator App using HTML and CSS

  #bem#fetch

  1

  4

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 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

  This comment has received 1 replyShow
• 

  Kunal Nimsatkar• 50

  @KunalNimsatkar

  Submitted almost 2 years ago

  Difficult To Position in Center Because It is my first Project Also difficulties in Finding Correct Color.

  

  Responsive Order summary component using Flexbox

  #accessibility

  3

  4

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 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
• 

  yjkim0109• 60

  @yjkim0109

  Submitted almost 2 years ago

  This is my new challenge. If there's any suggestion, Please feel free to let me know. Any feedbacks would be appreciated! ;)

  

  Mobile first responsive stats preview card using HTML and CSS

  1

  3

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 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

  This comment has received 1 replyShow
• 

  Orhan Kalkan• 130

  @Orhan32

  Submitted almost 2 years ago

  

  Huddle landing page with a single introductory section

  1

  1

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 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
• 

  Anna Lemonade🍋• 290

  @pbitonga17

  Submitted almost 2 years ago

  I'm just practicing both CSS and Flexbox.

  I hope i did well in this challenge, any comment will be appreciated.

  Thank you <3

  

  Huddle Landing Page HTML CSS

  1

  5

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 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

  This comment has received 1 replyShow
• 

  Shashwati• 80

  @Shashwati09

  Submitted almost 2 years ago

  

  Order Summary Component using HTML and CSS

  1

  2

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 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

  @SOURABH358

  Submitted almost 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

  #sass/scss

  1

  2

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 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

  This comment has received 1 replyShow
• 

  Irina• 80

  @irinani

  Submitted almost 2 years ago

  

  Stats preview card component

  1

  1

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 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
• 

  Chan Myae Aung• 80

  @cma124

  Submitted almost 2 years ago

  • Used dynamic JSON data with Async JavaScript & Fetch API
  • Used Date Object for current date
  • Any feedback is welcome

  

  Expenses Chart Component with JavaScript & Dynamic JSON data

  1

  4

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 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

  @Haseebullah555

  Submitted almost 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

  2

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 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

  This comment has received 1 replyShow
• 

  Filip Kula• 110

  @Tucznik2

  Submitted almost 2 years ago

  Hi guys, I've just completed this challenge and I would like some advice about things to improve.

  

  repsonsibe web design, mobile first, css grid, css flexbox

  #accessibility

  1

  4

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 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
• 

  Fendi• 60

  @fendiya

  Submitted almost 2 years ago

  

  Order Summary component

  #sass/scss#accessibility

  1

  3

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 2 years ago

  Hey fendiya!

  Congratulations on completing the challenge.

  Your code looks good but few more tips to make it perfect.

  • For background image, Add some CSS properties.

  body {
    background-image: url("images/pattern-background-desktop.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-color:hsl(225, 100%, 94%);
    font-family: "Red Hat Display", sans-serif;
    font-size: 16px;
    color: hsl(224deg, 23%, 55%);
    line-height: 1.5rem;
    width: 100vw;
    height: 100vh;
  }
  

  • For Payment button, Add box-shadow. .btn { box-shadow: 0px 10px 20px hsl(245, 75%, 52%, 0.5);}

  • Add box-shadow to Card as well. .card {box-shadow: 0 40px 40px -20px rgba(13, 48, 189,0.15);}

  Hope this helps :)

  1

  This comment has received 2 repliesShow
• 

  Christian Estoque• 440

  @east2k

  Submitted almost 2 years ago

  

  Stats Preview Card

  1

  2

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 2 years ago

  Hey!

  Congrats on completing the challenge.

  Here are some tips for your image and accessibility issue,html issues:

  • Always call image with alt attribute. <img src="./images/image-header-desktop.jpg" alt="Card Image">.

  • Change background color in this:

  .image-filter {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 540px;
      height: 446px;
      background-color:var(--soft-violet);
  }
  

  • Add some more CSS property in image. Merge image with div.

  img {
      mix-blend-mode: multiply;
      opacity: 0.75;
  }
  

  • Avoid using fixed value for image card. Try using em/rem value units instead of pixels. For details Read this link

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

  1
• 

  MioMauro• 400

  @MioMauro

  Submitted almost 2 years ago

  suggestions welcome!

  

  Frontend Mentor | Stats preview card component

  1

  3

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 2 years ago

  Hey!

  Congrats on completing the challenge.

  Here are few more tips from my side.

  • Try using em/rem value units instead of pixels. Avoid using fixed values for image div.

  • You can work more on image by adding mix-blend-mode CSS property.

  .container .photo img{
      width: 100%;
      height: 100%;
      mix-blend-mode: multiply;
      opacity: 0.75;
  }
  

  Hope this helps :)

  0

  This comment has received 3 repliesShow
• 

  Carlos Enrique Mamani Torrez• 40

  @Grillo26

  Submitted almost 2 years ago

  Ignored tags. Need Help, in the img: How i can to have the color same of challenge in css?

  

  Using GridCss and Flexbox in this exercise

  #accessibility

  2

  3

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 2 years ago

  Hey!

  Congrats on completing the challenge.

  Your code looks good but few more tips to make your image looks perfect:

  -Separate CSS properties for div and image.

  1. For div of image,

      .imgBox {
      background-color:hsl(277, 64%, 61%);
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
  }
  

  1. Now merge image with above div with mix-blend-mode:multiply property.

  img {
       width: 100%;
       height: 100%;
      mix-blend-mode: multiply;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      opacity: 0.75;
  }
  

  Hope this helps :)

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Moris Tibenkana• 160

  @tmoris

  Submitted almost 2 years ago

  hello community, I need some advise on this challenge. I found difficult to blend the background color and image, secondly controlling the image so that i does shrink fast to disappearance was and issue. Best regards and thanks

  

  Stats preview card component responsive design using CSS flexbox

  #accessibility

  1

  3

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 2 years ago

  Hey!

  Congrats on completing the challenge.

  Your code looks good but few more CSS properties to make your image looks better.

  • You can add mix-blend-mode CSS property to your image.

  .preview-img {
  mix-blend-mode: multiply;
  border-radius: 0.5em 0.5em 0 0;
  min-height: 100%;
  opacity: 0.75;
  }
  

  • Make some changes in image div as well.

  .preview-img-section {
    background-color: var(--clr-Softviolet);
    border-radius: 0.5em 0.5em 0 0;
  }
  

  Hope this helps :)

  0
• 

  Md. Shamrat Hossain• 50

  @Shamratopu

  Submitted almost 2 years ago

  It was a fun project. I am revising my HTML and CSS knowledge, and this was a perfect project to do so. Feel free to suggest anything you think I can improve.

  

  Responsive Order Summary

  1

  3

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 2 years ago

  Hey!

  Congrats on completing the challenge.

  Your solution looks good but few more tips to make it perfect.

  • Need to fix some accessibility issues.
    1. Wrap the whole code in <main> tag.
    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="#">Md.Shamrat Hossain</a>.
       </div>
       </footer>```
       
       

  • Try using em/rem value units instead of pixels.

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

  0
• 

  Zinah• 420

  @Zinah-Zwayen

  Submitted almost 2 years ago

  Please have a look at my solution I need help to adjust the "border button" when active, I can't find the right solution to fix it?

  

  order-summary-component

  1

  5

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 2 years ago

  Hey! Congrats on completing the challenge.

  Here are some tips-

  • You can give shadow effect under border button and the main card.

  • Intead of .pay:hover{ background-color: hsla(245, 75%, 52%, 60%); border-color: hsla(245, 75%, 52%, 60%); cursor: pointer; } , you can just reduce opacity .pay:hover { opacity:0.75; cursor:pointer;}

  • You can give hover to cancel order and change.

  • Fix your accessibility issues.

    1. wrap whole code in <main> tag.
    2. You should always have one <h1> heading in your code. <h1> Order Summary </h1>.
    3. After using <h1> then use <h2> , <h3> for better coding.
    4. Take

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

  • For border button .pay:active { background-color: red; border-color: red; }

  Hope this helps :)

  Marked as helpful

  0

  This comment has received 3 repliesShow
• 

  Yous• 170

  @yousra10

  Submitted almost 2 years ago

  Hello friends!

  It's the second time I do this challenge to improve my skills. I have difficult to put correctly my website on Github, when I write it on Atom, the website run but didn't run on Github. What I learned :

  • the background images background: url (../images/xxxxxxxx) *display (I have to entertain again)

  Thank you guys for your comments and advice !! happy coding !!

  

  Challenge order summary card V2

  2

  4

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 2 years ago

  Hey! Congrats on completing the challenge.

  Here are some tips-

  • Put background image in images folder. then use body:{background:url(./images/pattern-background-desktop.svg),hsl(225, 100%, 94%); background-repeat: no-repeat;}

  • Use <a href=""><a/> tag or <button></button> tag for cancel order button.

  Hope this helps. :)

  Marked as helpful

  0
• 

  yudiz• 180

  @yud11z

  Submitted almost 2 years ago

  All feedbacks are welcome, thanks in advance.

  

  Order summary card

  2

  4

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 2 years ago

  Hey! Congrats on completing the challenge.

  Your solution looks good but few more tips to make it perfect.

  • For background image, Change background size from cover to contain. body {background-size:contain;}

  • Add hover to links and buttons.

    1. For link. a:hover { text-decoration: none; opacity: 0.8; }
    2. For payment button. .btn-pay:hover { opacity: 0.8; cursor: pointer; }
    3. For cancel order button. .btn-cancel:hover { color: #1f2f56; cursor: pointers; }

  • Try mobile view as well.

  Hope this helps.

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  Yoshii• 200

  @YoshiiCoding17

  Submitted almost 2 years ago

  My second Project. I appreciate feedbacks

  

  Summary project

  2

  4

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 2 years ago

  Hey! Congrats on completing the challenge.

  Your code looks good but few more tips to make it perfect:

  • For background image, change body: { background-size: contain; background-position: top; }

  • Add hover to cancel order button. .pagos__cancelar:hover { color: #1f2f56; }

  Hope this helps :)

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  Hazel Black• 240

  @Hazel-Black

  Submitted almost 2 years ago

  This was a team effort by me and @michealhybrid we would both love any and all feedback

  

  Responsive| Mobile First| HTML|CSS

  6

  12

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted almost 2 years ago

  Hey!

  Congrats on completing the challenge.

  As everyone has already given good feedback, I will give you just one tip about the image.

  • Instead of blending the image with background background-blend-mode: multiply; , take another div color it :root { --Softviolet: hsl(277, 64%, 61%); } and then blend that div with image by using mix-blend-mode:multiply; CSS property.

  Hope this helps. :)

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Josh• 40

  @jokings

  Submitted about 2 years ago

  Hello, guys. Just updated this. Any feedback is welcome Thanks

  

  Responsive landing page using CSS Grid

  1

  5

  0

  

  Harshita Jain• 380

  @Harshi786

  Posted about 2 years ago

  Hey! :)

  1. Your solution is clean.
  2. Please close the main tag in html.
  3. I guess you can work more on image.

  Add mix-blend-mode CSS in image and change opacity from 0.5 to 0.7.

   .img1 {
    mix-blend-mode:multiply;
    opacity: 0.7;
  } 
  

  Hope this helps.

  Marked as helpful

  0

  This comment has received 1 replyShow