Frontend Mentor - Social links profile solution

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.

Overview

The challenge

Users should be able to:

See hover and focus states for all interactive elements on the page

Screenshot

Links

Solution URL: Social links profile
Live Site URL: Social links profile

My process

Built with

CSS custom properties
Flexbox
Media Query

What I learned

Here I learned about proper use of color palatte.

Code snippets, see below:

.container{
    width: 23%;
    height: 75vh;
    margin: 105px 601px 28px;
    border-radius: 8px;
    background-color: hsl(0, 0%, 12%);
}

.el1 span{
    font-family: "inter";
    font-size: 15px;
    color: hsl(75, 94%, 57%);
}

Useful resources

FlexBox - This helped me for changing the flex direction to column. I really liked this pattern and will use it going forward.

thebraudalf / Social_Links_Profile

Frontend Mentor - Social links profile solution

Table of contents