zbuli-t• 100
@zbuli-t
Submitted
What are you most proud of, and what would you do differently next time?
responsive web design make the card different positions
Rodri
@rcsilva211
All comments
- Rodri• 100
@rcsilva211
Posted
The code is bit messy, but the result is there. Personally, I'd use grid or flex to align them instead of static values. Keep it up :)
0 - Ashwini Magar• 50
@Ashwini202213
Submitted
Rodri• 100@rcsilva211
Posted
In desktop, the width of the card is a bit too big. Other than that, amazing work!
0 @codewinchester
Submitted
What are you most proud of, and what would you do differently next time?
Mastering responsive layouts has been a pain. But, this project is a true testimony that with consistency, something's gotta give. I wish i took kevin powells "Conquering responsive layouts" course earlier. His insights on how to think responsively is what got me here. Seriously, if you want a break, check it out. I am really glad that this design is responsive across all devices and i wasn't forced to use media queries.
What challenges did you encounter, and how did you overcome them?
The major challenge was trying to make it responsive using media queries not knowing there was another approach. I was tuck on this loop for a very long time. Trying different device-width ranges and ending up messing.
What specific areas of your project would you like help with?
Probably for my fellow community members to review my code and advice on where i should improve.
Rodri• 100@rcsilva211
Posted
Well done on using only flexbox to make it adjustable to any screen! I think the only thing missing here is the hover state on the social media links (tip: they should be <a href=""> tags). Other than that, fantastic job mate!
0- Sudhanshu Thapa• 120
@Sudhanshu943
Submitted
Rodri• 100@rcsilva211
Posted
The font-size for the texts seems a bit too big compared to the design. Other than that, looks great!
0 - Paulo-Adriano• 60
@Paulo-Adriano
Submitted
What are you most proud of, and what would you do differently next time?
Me orgulho de ter feito de outra maneira o desafio proposto, mesmo sem ter concluído tudo. não faço faculdade ou nenhum curso dedicado da área, a penas pelo YouTube mesmo, sei que tenho que ir mais afundo para ter conhecimento necessário pra pode conclui.
What challenges did you encounter, and how did you overcome them?
Em relação as sombras, vi o código de algumas pessoas, e elas fizeram o desafio totalmente diferente do meu, com assunto que eu ainda não tive oportunidade de estudar.
Estou aberto a feedbacks construtivos!
What specific areas of your project would you like help with?
Em relação as sombras, porque eu fiz a centralização baseadas nas position:relative e position:absolute , por hora desconheço formas de centralizar as caixas, ate então as sombras não ficam de jeito nenhum a minha div MAN.
Rodri• 100@rcsilva211
Posted
The border around the container is missing and the shadow behind the container too. The border is 1px solid hsl(0, 0%, 7%); As for the box-shadow, I suggest you to play with this website to get the end result: CSSMatic - Box Shadow CSS Generator. You can do this mate!
Marked as helpful
0 - Gustavo Dantas• 20
@IrineuRastero
Submitted
What are you most proud of, and what would you do differently next time?
Being able to code my first page without handholding. I would like to do it faster next time :-D
What challenges did you encounter, and how did you overcome them?
The biggest challenge for me was centralizing the main element of the page while making it responsive, as said in the title I overcame this fixing the position to the center of the screen with the following snippet:
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);What specific areas of your project would you like help with?
I would like to know how to get the feel for the size of the things on the preview, this was also one of the things I had difficulty with.
Rodri• 100@rcsilva211
Posted
The solution itself is great for this example, but from experience and after you've mentioned you fix to center the container, I can share that display: flex already does that for you :)
Here's my snippet:
.container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: hsl(212, 45%, 89%); }When setting the width and height to 100%, the container will occupy the entirety of its parent, in this case being the body. The display: flex will make it can be automatically be arranged keeping in consideration the elements inside; The justify-content: center will make it so it distributes the contents around the container (in this case, will place them to the center); The align-items: center will align all the contents of the flexbox in the vertical axis.
You can check W3Schools for more information about this: CSS Flexbox Container - W3 Schools
0
