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

Creating a Social links profile

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: https://github.com/thecodefan/Social-links
• Live Site URL: https://thecodefan.github.io/Social-links/

My process

First, i created al lthe necesssery elements and positioned them, then i applied the visual styles

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid

What I learned

My positinong has improved noticably this time, i managed to position everything without using any position relative or absolutes in css

.main {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 350px;
  height: 550px;

  border-radius: 15px;
  background-color: hsl(0, 0%, 12%);
}