Design comparison
Solution retrospective
Hey everyone,
Please do give your feedbacks and suggestions, they are welcome. πβοΈ
Community feedback
- @EngineerHamzieyPosted about 2 years ago
Hello there you have done a great job, I'll think:
- the card need some margin-top and bottom because of short screens(in height) like mobile landscape, it almost enter the edge of the browser on landscape.
- including the word "image" in your image alt attribute is like repetition because screen readers reads it as image already once they notice the img tag and that will make it say image twice.
- and also images that are only meant for decoration do not need alt attribute, you can just add an empty alt like:
alt=""
- awwwn π you used SCSS you are a hero πππ since you using SCSS, you already have the power and you are strong enough to ignore that ugly stressful CSS variables π also you don't need to declare it in the :root. now your code should look like this:
/* and once you declare it up here, it is is global, you can use it anywhere below it even in your partials(you will just have to import the partials below the variables ) */ $color-soft-blue: hsl(215, 51%, 70%); $color-cyan: hsl(178, 100%, 50%); $color-cyan-with-opacity: hsl(178, 100%, 50%, 0.5); $color-very-dark-blue-main-bg: hsl(217, 54%, 11%); $color-very-dark-blue-card-bg: hsl(216, 50%, 16%); $color-very-dark-blue-line: hsl(215, 32%, 27%); $color-white: hsl(0, 0%, 100%); /*notice the way i use/call the variable below one of the sweetest thing about SCSS variable is that, it doesn't compile to variable in your CSS it instead replate the variables with the values*/ body { min-height: 100vh; font-family: "Outfit", sans-serif; background-color: var($color-very-dark-blue-main-bg); color: var($color-soft-blue); padding-inline: 1.5rem; display: grid; place-items: center; }
I hope you found this ver helpful ππ Happy coding ππ
1@reallyUndefinedPosted about 2 years agoHey @EngineerHamziey, thanks for the feedback
The card did looked bad on landscape, its fixed now.
I know CSS custom properties have awkward syntax but since I can't manipulate SCSS variables from the javascript, I tend to use CSS custom properties all the time even when I am not using javascript.
Hey, thanks again for the feedback. π
1 - @correlucasPosted about 2 years ago
πΎHello again Prabu, congratulations for your new solution!
π I saw your preview site and I liked a lot the work youβve done here, it's almost complete, Iβve some suggestions you can consider applying to your code:
1.You can create a media query to save space in the
pricing section
to make each information in a different row. Hereβs the code for this media query.@media (max-width: 350px) { main>.nft-details { display: flex; flex-direction: column; } }
2.The value youβve used for the shadow make it too much dark and strong, to create a smooth shadow you need to give it less
opacity
and moreblur
try this value for example:main { box-shadow: rgb(0 0 0 / 0%) 0px 24px 38px, rgb(0 0 0 / 4%) 0px 20px 20px; }
βοΈ I hope this helps you and happy coding!
1 - @EminentdioPosted about 2 years ago
I admire your work, bro. I really wish I could be a guru like you.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord