This is a solution to the Social links profile challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- See hover and focus states for all interactive elements on the page
- HTML
- CSS
- Flexbox
- Mobile-first workflow
I learned about variable fonts and imported the provided variable font to use it in the CSS code to style the HTML element (I wrote an article about this some time ago and I had to refer back to it after about a year!).
Here's how I did it:
@font-face {
font-family: "Inter";
src: url("./assets/fonts/Inter-VariableFont_slnt,wght.ttf");
font-weight: 100 900;
}
I put the color values and the border-radius
value in CSS variables to make them resubale.
In this challenge, I tried a lot to center the <div>
vertically. But, the approaches I came across searhes didn't quite satisfy me. I wish to look more into that.
- Website - Charan
- Frontend Mentor - Charan's Profile
- Twitter - @CharanMNX