@azzykesumaSubmitted over 3 years ago
i am having difficulty in adjusting the color for the image. i know that using css filter will do the trick, but i don't know for sure which filter is suitable for this project
I'm Fabra
@imfabraAll comments
- @imfabraPosted over 3 years ago
Hello, I am not doing very well with English, but with the property "mix-blend-mode" you can achieve it, I'll give you the documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
You can see how I apply it in my solution: https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-html5-css3-bem-QCrz6ndBt
1 - @rishabh0540Submitted over 3 years ago
This is my first project on frontendmentor.io and i tried making this without bootstrap. I have used flexbox in it. but facing some issue with flex-wrap property. Also the size of image is not changing despite using flex property. please help me with it.
@imfabraPosted over 3 years agoI invite you to look at the solution I gave to this exercise and leave your comment: https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-html5-css3-bem-QCrz6ndBt
Let's keep coding!
0 - @Ankit1142Submitted over 3 years ago
how to change the color of the picture to violet?
@imfabraPosted over 3 years agohttps://www.frontendmentor.io/solutions/stats-preview-card-component-solution-html5-css3-bem-QCrz6ndBt
0 - @ItsKris1Submitted over 3 years ago
Is it right to make body tag a Flexbox container in order to center the content on the page vertically?
@imfabraPosted over 3 years agoIt looks good, congratulations. It is not a good idea to use ".body" as a "flexbox" container, normally classes like ".container" or "wrapper" are used.
I invite you to look at the solution I gave to this exercise and leave your comment: https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-html5-css3-bem-QCrz6ndBt
Let's keep coding!
0 - @HomidjonSubmitted over 3 years ago
This was my first challenge in Frontendmentor. I want to be honest that it was a little difficult for me to build this responsive page. So I did see other people's code, but I just did it in order to learn the ways of building it. To be honest, I did learn lots of things. Thanks to FrontEndMentor.
@imfabraPosted over 3 years agolooks good, congratulations. try using "height: 100vh;" in the ".main" to use the entire screen on the vertical axis.
I also invite you to look at the solution I gave to this exercise and leave your comment: https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-html5-css3-bem-QCrz6ndBt
Let's keep coding!
0 - @915fonzieSubmitted over 3 years ago
This was my first time doing a card component without a tutorial so it took me a bit to finish. If you have time to look over the code, I would definitely appreciate any feedback on anything I may have done wrong or if there is any redundant code etc. Thank you!
@imfabraPosted over 3 years agoHola Alfonso, no me va muy bien con el ingles por lo que decidí escribir en español.
El resultado fue muy bueno, solo en el color de la imagen puedo decir que hay una propiedad llamada mix-blend-mode te dejo la documentacion: https://developer.mozilla.org/es/docs/Web/CSS/mix-blend-mode
úsala y tendrás un resultado genial.
También te invito a que mires la solución que le di a este ejercicio y dejes tu comentario: https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-html5-css3-bem-QCrz6ndBt
¡Sigamos codificando!
0 - @javieralas05Submitted over 3 years ago
I would appreciate any feedback regarding how I structured my code in HTML and CSS, really want to get your insight and things that I could have done differently and also your approach to get to the solution. Looking forward for your ouput!
@imfabraPosted over 3 years agoHello, I think I have several recommendations that would help you a lot, but I can't write very well in English, a long text would be difficult for me. but I invite you to look at the solution I gave to this exercise, look at the "css" and write any specific question to me: https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-html5-css3-bem-QCrz6ndBt
Let's keep coding!
0 - @IsaiStormBlesedSubmitted over 3 years ago
The most dificult part was the responsive one. I still not feel 100% confident enough. But overall I think I managed to make it responsive. Also I was not so sure how to do the purple overlar on top of the image. Any advice for that would be welcome.
@imfabraPosted over 3 years agoHola, te quedo muy bien. para que el color quede los mas parecido puedes usar mix-blend-mode, te dejo la documentación: https://developer.mozilla.org/es/docs/Web/CSS/mix-blend-mode
También te invito a mirar la solución que le di a este ejercicio y dejar tu comentario: https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-html5-css3-bem-QCrz6ndBt
¡Sigamos codificando!
0 - @gabrlcjSubmitted over 3 years ago
Some feedback with you guys have I will love to receive and some advices too, I'm a literally new to all the programming life style
@imfabraPosted over 3 years agoHi Gabriel, you could avoid scrolling and have a better view for multiple screens.
I also invite you to look at the solution I gave to this exercise and leave your comment: https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-html5-css3-bem-QCrz6ndBt
Let's keep coding!
0 - @nfjwebukSubmitted over 3 years ago
Did mobile without any issues, but really struggled to go from mobile over to Desktop, took me many many hours the image just wouldn't fit, and it messes up badly in the 1000px-1400px range, where have I messed up? I guess it fits the design for the actual 1440px and 375px spec but I plan to make all my designs full responsive on most devices. Am I doing something fundamentally wrong with how I'm doing my mobile so making it too hard moving over to Desktop? I didn't know where the hell I was with all the margins and paddings used haha.
Oh and that color on the image, the best I could get was with mix blend mode multiple with opacity's on the background and the ::before. Is there an easier way to match the design?
Any tips or advice would be mostly appreciated I'm mostly worried about bad practise and planning for mobile to desktop. Thank you.
@imfabraPosted over 3 years agoWow, it looks really cool. to get the most similar color use "mix-blend-mode" with an opacity of 75%, consult the documentation, it will help you a lot: https://developer.mozilla.org/es/docs/Web/CSS/mix-blend-mode
I also invite you to see the solution I made of this exercise and leave your comment: https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-html5-css3-bem-QCrz6ndBt
Let's keep coding.
0 - @benjamin0204Submitted over 3 years ago
I could use some help updating this.
I used some pretty crappy css to get it to work!
@imfabraPosted over 3 years agoHello, it looks good. You can improve the height and centering of the card.
I also invite you to see the solution I made of this exercise and leave your comment: https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-html5-css3-bem-QCrz6ndBt
Let's keep coding.
0 - @shibuwdSubmitted over 3 years ago
I appreciate any kind of feedback. Please feel free to give me any advice to improve my code.
@imfabraPosted over 3 years agoHello, it looks good. You can use "FlexBox" to dynamically center the card according to the screen, or you can also use measurements like "%", additional ".container" can lengthen it using "height: 100vh".
I also invite you to see the solution I made of this exercise and leave your comment: https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-html5-css3-bem-QCrz6ndBt
Let's keep coding.
0
