@augustomcostaSubmitted over 1 year ago
Lucas Richard Garcia Tinoco
@lucasrgtAll comments
- @lucasrgtPosted over 1 year ago
Good job on completing the challenge Augusto.
There's some points you can change in your code to improve it.
Semantic HTML:
You can wrap your card conteiner div to the <main> tag.
You can change the attribution container to <footer> tag too.
Structural Problem:
In your body you've put 200svh, that's the double of the amount of the viewport size, so it expanded your view and distorted the website structure.
Use 100svh instead with a fallback to 100vh.
body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; height: 100svh; font-family: Lexend Deca; background-color: hsl(0, 0%, 95%); }
Insteand of using px values into your components, i suggest you to learn how to use rem and em units, it's better for most of the cases (responsiveness).
Avoid putting width and height constraints into text elements like:
p { max-width: 100%; }
instead, wrap it into a div and put the width on the div.
Thats it! Keep going.
1 - @udaymishra04Submitted over 1 year ago
I have completed a CSS tutorial but still when I was working in this project I wasn't able to build everything on my own, so is it normal or I have to work my basics again or should I keep building projects? Please answer.
@lucasrgtPosted over 1 year agoHello udaymishra04.
There some improvements you can make in your code:
1°: The container is not centralized in the screen. You can achieve this by using display flex with justify-content: center and align-items: center on the body element. Like so:
body { background-color: hsl(212, 45%, 89%); font-family: 'Outfit', sans-serif; overflow: hidden; display: flex; justify-content: center; align-items: center; }
Other important thing is that you put the weight wrong in your card's title:
h3 { text-align: center; padding: 28px 8% 25px 8%; font-weight: 700px; ---> Remove the "px" or put something like "bold" or "medium" without the 700. font-size: 1.25rem; color: hsl(218, 44%, 22%); }
Other good practice to know: You can use the outer card border radius the double of the inner, so it can improve the visual balance of your solution. Something like this:
Card border radius: 16px QR Code Container radius: 8px
Thanks for your time!
Marked as helpful0 - @clinto-beanSubmitted over 1 year ago
My process
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
What I learned
This was used mostly as practice for two things: semantic HTML and CSS positioning. I was able to create the layout I wanted without using pseudo-elements which I had been doing in the past.
Continued development
One thing I did not attempt with this challenge was to use Javascript to impact active states. Since I wanted to focus mostly on honing my CSS skills, this inherently left me at a disadvantage when it comes to getting more Javascript practice. One thing that I struggled with for the CSS portion of the project was creating the overlay on the main card image. I was not able to get it color-perfect because I used opacity properties on the element behind it (which became above it on hover), thus was unable to set the opacity in the child image (eyeball) even using the !important declaration.
Useful resources
For this I used the CSS documentation on MDN.
@lucasrgtPosted over 1 year agoYour solution looks very good, but you may improve in some points:
The shadow of the card is very dark, you need to lighten it to become more soft.
.card { background-color: var(--card-bg); padding: 1.5rem; border-radius: 1rem; max-width: 350px; box-shadow: 0rem 0rem 2rem 0rem black; // instead of black, use a lighter color, like a marine blue or so. }
Other point is the alignment of the "eth balance", you need to align it with the text above (start).
The semantic HTML looks nice tho.
Marked as helpful1
