All comments

• 

  Erel Ropeta•385

  @ereljapcoSubmitted almost 3 years ago

  Please provide feedback on how I can improve in JS. Took me quite awhile to replicate the design due to the measurements. Any feedback for that will be appreciated.

  

  Responsive tip calculator app using CSS Flexbox, media query, and JS

  1

  20
  

  Richard Marks•240

  @Richard2957Posted almost 3 years ago

  Try adding some code like this:

  body::after { position: absolute; content: ""; top: 0; left: 0; bottom: 0; width: 100%; height: 100%; background: url("./design/desktop-design.jpg") no-repeat; opacity: 0.3; z-index: -1; animation: myanim 1s alternate infinite ease; }

  @keyframes myanim {

  100% {
      opacity: .9;
  }
  

  }

  body>* { opacity: 0.35; }

  This will put a copy of the design in the background. You might need to adjust the opacity numbers a bit depending on what you're doing. The animation is to help distinguish 'your' website from the 'design'.

  Hope that helps

  Marked as helpful

  0
• 

  Richard Marks•240

  @Richard2957Submitted almost 3 years ago

  Interested to know, how long does everyone spend on a project like this?

  

  HTML and CSS

  2

  40
  

  Richard Marks•240

  @Richard2957Posted almost 3 years ago

  Many thanks for helpful comments. Will need to read up on Accessibility. Thanks again.

  0
• 

  Richard Marks•240

  @Richard2957Submitted almost 3 years ago

  This is my second go at an FEM project, and I enjoyed doing it. It took me about 4-5 hours of coding, plus I had to do some homework. Hardest thing was the sizing of the image. I realised I couldn't use an <img> tag because the picture has to change on a media query (yes, could have used Javascript I guess), so instead I used background: url("./images/image-header-mobile.jpg") ; background-color: var(--accent); background-size:cover; background-blend-mode: multiply;

  which seems to work. But hard to know whether I got it right when it resizes.

  Also enjoyed getting the capitalisation of the stats (10k and 12M) right using CSS and not just changing the HTML.

  

  Stats preview card

  2

  20
  

  Richard Marks•240

  @Richard2957Posted almost 3 years ago

  Thanks Aakash, I'll look at those.

  Interested to know how long you think a project like this should take?

  0