Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
4
ashensavi
@ashensavi

All comments

  • Pamela Mladenova•140
    @pamellam
    Submitted over 1 year ago

    Social Link Profile

    1
    ashensavi•30
    @ashensavi
    Posted over 1 year ago

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

  • TheGDneo•120
    @GD-neo
    Submitted over 1 year 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
    ashensavi•30
    @ashensavi
    Posted over 1 year 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.

  • Endy1381•200
    @Endy1381
    Submitted over 1 year 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
    ashensavi•30
    @ashensavi
    Posted over 1 year ago

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

  • Garg2006•250
    @Garg2006
    Submitted over 1 year 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
    ashensavi•30
    @ashensavi
    Posted over 1 year ago

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

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub