Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I am most proud of the following-
- learning Markdown today
- the basic process for using github to submit work on Frontend Mentor
- my knowledge of html and css got me through this design
The challenges I encountered in this order were-
- remembering how to center the card using this code-
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: calc(100vh - 1px);
}
- choosing which way to order my css
- understanding when to use
display: flex;
Areas I'd Like Help With
- figuring out how to have a link in hover grow with it moving the other links next to it for example, I have this code for my links-
.attribution a:hover {
font-weight: 600;
transition: all .225s ease-in-out;
color: hsl(47, 51%, 55%);
}
When the font-weight grows, the text on either side moves out of the way to create space. I'd like it to grow over the other text. Would this be a z-index
or `` type solution?
thanks!
Community feedback
- @Midnight-Black-WolfPosted 3 months ago
It looks good, and the code is clear. for the font-weight grows check this out: https://stackoverflow.com/questions/34342801/increasing-font-size-without-moving-other-text This may help you, and good luck
2 - @Fatma-TawfeekPosted 3 months ago
- you should fix the height of the card to match the original design
- you should also fix the shadow of the card to match the shadow of the original design
2
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