Social links profile

Table of contents

• Overview
  • Screenshot and live site URL
• My process
  • Built with
  • What I learned
  • Useful resources
• Author
• Inspired by

Overview

Screenshot and live site URL

Desktop	Tablet	Mobile

Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• CSS media queries

What I learned

Small tricks:

1. If you want to use an HTML a (link) element and style it the way you like, first you need to unset all its default styles like this:

.link {
  all: unset;
  /* Now you can write any styles you want here */
}

2. When you want to create a perfect circle from a block element, set its border-radius to 50%:

.profile__picture {
  border-radius: 50%;
  overflow: hidden; /* Ensures that anything inside the box doesn’t overflow from the edges, making the effect work properly */
}

Useful resources

• Media query fundamentals

Author

• Github - @AminForouzan
• Frontend Mentor - @AminForouzan

Inspired by

• Social links profile challenge on Frontend Mentor.