Pamela Mladenova• 120
@pamellam
Submitted
ashensavi
@ashensavi
All comments
- ashensavi• 30
@ashensavi
Posted
Your output is cool. Seems like you forgot to add the hover effect (active status).
0 - TheGDneo• 100
@GD-neo
Submitted
What 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.
transition: color 0.5s ease-in-out; transition: background-color 0.5s ease-in-out;What challenges did you encounter, and how did you overcome them?
-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
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.What specific areas of your project would you like help with?
Is there a way I could have kept
justify-content: space-betweenand then adjusted the margins? My original thought was to use thejustify-content: space-betweenproperty 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-topset 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-contentbecause that seemed to be what made it impossible for me to get the remaining spaces between the elements right. Then I started addingmargin-topto the individual elements until I came close to the layout.ashensavi• 30@ashensavi
Posted
Your 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.
0 - Endy1381• 130
@Endy1381
Submitted
What 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!
ashensavi• 30@ashensavi
Posted
This is better than my one. I didn't do the mobile responsive part. This is mobile responsive also.
1 - Garg2006• 190
@Garg2006
Submitted
What 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
ashensavi• 30@ashensavi
Posted
That is so accurate to the given design. The font color has to be changed.
0
