ashensavi
@ashensaviAll comments
- @pamellam@ashensavi
Your output is cool. Seems like you forgot to add the hover effect (active status).
- @GD-neoWhat are you most proud of, and what would you do differently next time?
That I managed to implement transitions for the hover effect for the first time.
What challenges did you encounter, and how did you overcome them?transition: color 0.5s ease-in-out; transition: background-color 0.5s ease-in-out;
-Done without the Figma Files
-I used Flex Box to center the different elements. When it came to the elements in the card, or link profile, I used:
flex-direction: column; justify-content: space-between; align-items: center;
Setting
What specific areas of your project would you like help with?justify-content: space-between;
made it difficult to get the spacing right between the different elements. So I removed this line and addedmargin-top:
to the different elements and was able to come close to what it was supposed to look like.Is there a way I could have kept
justify-content: space-between
and then adjusted the margins? My original thought was to use thejustify-content: space-between
property to ensure that the picture was at the top of the card and the actual links (I grouped these together in a div) at the bottom and to then adjust the other spaces. I ended up playing around withmargin-top
set to negative values which seemed odd which is why I ended up the the approach I explained above.-Basic HTML layout was
-Basic CSS
.linksProfile { display: flex; flex-direction: column; /* justify-content: space-between; */ align-items: center; padding: 40px 30px 39px 30px; }
I ended up commenting out
justify-content
because that seemed to be what made it impossible for me to get the remaining spaces between the elements right. Then I started addingmargin-top
to the individual elements until I came close to the layout.@ashensaviYour output is so accurate. Since you've mentioned the 'justify content : space-between;'; I used space-around property. here's my code:
.social-link-component-bottom { flex: 1; display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding-bottom: 15px;
}
Btw, The transition thing is cool! I should've tried that.
- @Endy1381What are you most proud of, and what would you do differently next time?
finishing the code under 1 hour
What challenges did you encounter, and how did you overcome them?centering the div and making it good for mobile devices, i still haven't solved them fully
What specific areas of your project would you like help with?the responsive side and centering the card vertically specifically, but any feedback will be welcomed!
@ashensaviThis is better than my one. I didn't do the mobile responsive part. This is mobile responsive also.
- @Garg2006What are you most proud of, and what would you do differently next time?
proud moment for me is when we make this project on their without seeing any solution!
What challenges did you encounter, and how did you overcome them?If I encounter any challenges then i go popular websites from html and css like w3schools or mdn
What specific areas of your project would you like help with?I like this project because it will help in getting up to mark for grid as to make responsiveness we to have use grid
@ashensaviThat is so accurate to the given design. The font color has to be changed.