Hey, community! This is the 3rd project done with SCSS. It could be done much easier with pure css, because I feel like there would be less lines of code, it would be more maintainable and not that messed up :) But I learned about property lists, some SCSS funstions and @each loop. I'll be glad to know how to improve my code, if you have something to say about it)
Hey, thanks a lot for your comment! I've just watched the videos you sent, it's pretty cool using npm for compiling SCSS, in my project I used Gulp instead, just to try) but the thing in the video seems to be easier, I'll definitely give it a shot)
Yeah, I added ::hover only for desktops on purpose, because on smaller screens ::hover behavior is different because of touchscreens and stuff. Maybe I could add ::focus or ::active for these cases.
I heard about @container queries, that's really cool thing to try. I do think that my code is pretty messy because of @media. I had to change paddings and margins inside them. Firstly I thought about writing a @mixin for clamp function, so not only typography would be adaptive to the viewport, but spacing too. I'm new to SCSS, I haven't tried @mixins yet
Hello everyone, how can I add the light violet color to the image present in the website, I'm not able to figure out. Please help
Hey, you can create an overlap by using pseudo elements. You have to wrap an img tag with div.someClassName and add position: relative. Then add ::before or ::after to this element and give it position: absolute so it could move inside of it, aplly background, width, height and don't forget about z-index to make it above the image.
Also there is an approach with backgrounds with background-blend-mode
good luck)
i've added some basic 3d effects on card and kept the design simple as shown in layout design
it was kind of DRY approach when giving each element a transform-style of preserve 3d to get 3d effect between 2 layers. feel free to report any bug or suggest improvements
Hey, congrats on completing the challenge! It would be great if you added :hover for desktops only, because on small screen sizes the user would have to tap on the screen to see the content. I would just show the card the way it is in the challenge and on the large screens add the effect)
I hope that I gave you some ideas to try, good luck!)
How can I change the color of the text within the button, when hovering over the button? My implemented code does not work here. Thanks for any advice!
Hey, congrats on completing the challenge! I think the problem is, that .button__text color overrides the color that you add directly to the .button on :hover
You can do .button:hover .button__text {...} and there change the color.
Also you can remove p from button and change the color directly for it, so nothing that goes higher in the cascade or has more accurate class could override the styles
happy coding)
Hi developers!!! I have just completed this challenge and I am very eager to hear about how can I improve my codes!
Hey, nice job, but there is enough room for improvements:
good luck, keep learning!
Hello Frontend Mentor fellows🚀
This is another one of my solutions for the HTML and CSS only Challenges.
Again to solve this challenges I've been using SASS to compile the CSS, Media Queries to achieve responsiveness, VSCode to coding and Git to versioning.
This time I brought something new to my solutions, I solved this one using CSS Grid, a concept that I'm learning and that is an alternative to Flexbox on layout buildings. I liked the result and you are more than welcome to give me some feedback if you want.
Feel free to review the project and/or give me some feedback 😉
Cheers!
✌️😊 Charles Barros
Hey, you've done really good)
Literally today I started learning SCSS and completed this project using it. Recently I've been also practicing CSS grid, it's really cool and gives you some new approaches on building layouts. Do you know some of the best practices in SCSS (where to use mixins, templates and so on)? And how did you actually learn this?) I'd like to know
What did you find difficult while building the project? -- One difficult task that I faced was re-bordering the desktop view via @media. I'm still not sure what the issue is. You can see it in my doc upload.
Do you have any questions about best practices?
--Hopefully, someone can help identify and help resolve the problem I was facing.
Hey, nice job!)
I've just looked in your code in dev tools, the thing is that the value for border-radius is invalid, just try removing commas and everything works as expected
good luck)
I think for this challenge no media gueries are needed, because we have only 1 component. It's good , that you applied max-width for this
Also if speaking about @media in general, I often question myself if I need it or not, but I think you should always use @media if something breaks or looks bad. Actually you can watch Kevin Powell yt channel about responsive web, he gives many useful pieces of advise about it. I often use some of his tricks to write responsive design easier
I hope that I helped you somehow, good luck)
to the one who will review this code, thank you. i am hoping for your feedback on how can i improve my skills.
Hey, good job)
Here are some improvments I'd like to tell you:
<img> tags, you can use <picture> to change the image on the certain breakpoint if needed@media query to max-width: 700px (card width), because a horizontal scrollbar appears between the breakpoints. Or you could change width: 700px to max-width: 700px, just to avoid fixed width, because it can cause issuesGood luck)
This is my first practice here. It's wise to use bootstrap in this case but I decided to start from scratch
Hey, good job
Actually I'd like to give you some improvements:
max-width: 100% to fix this::before element you can use picture tag to change the path to image on different breakpointsGood luck!