Erel Ropeta• 385
@ereljapco
Submitted
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.
Richard Marks
@Richard2957
All comments
- Richard Marks• 240
@Richard2957
Posted
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
@Richard2957
Submitted
Interested to know, how long does everyone spend on a project like this?
Richard Marks• 240@Richard2957
Posted
Many thanks for helpful comments. Will need to read up on Accessibility. Thanks again.
0 - Richard Marks• 240
@Richard2957
Submitted
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.
Richard Marks• 240@Richard2957
Posted
Thanks Aakash, I'll look at those.
Interested to know how long you think a project like this should take?
0
