ashensavi

Latest comments

• 

  Pamela Mladenova•140

  @pamellamSubmitted 12 months ago

  

  Social Link Profile

  1

  30
  

  ashensavi•30

  @ashensaviPosted 12 months ago

  Your output is cool. Seems like you forgot to add the hover effect (active status).

  0
• 

  TheGDneo•120

  @GD-neoSubmitted 12 months ago

  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 added margin-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-between and then adjusted the margins? My original thought was to use the justify-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 with margin-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 adding margin-top to the individual elements until I came close to the layout.

  

  Social Links Profile Using Flex Box. Desktop First Approach.

  1

  50
  

  ashensavi•30

  @ashensaviPosted 12 months ago

  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•200

  @Endy1381Submitted 12 months ago

  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!

  

  Blog preview

  3

  30
  

  ashensavi•30

  @ashensaviPosted 12 months ago

  This is better than my one. I didn't do the mobile responsive part. This is mobile responsive also.

  1
• 

  Garg2006•250

  @Garg2006Submitted 12 months ago

  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

  

  Responsive Card (using grid)

  1

  40
  

  ashensavi•30

  @ashensaviPosted 12 months ago

  That is so accurate to the given design. The font color has to be changed.

  0