Social Links Profile

What are you most proud of, and what would you do differently next time?

1.I used some CSS Variables to define my colors :

:root {
--Green: hsl(75, 94%, 57%);
--white: hsl(0, 0%, 100%);
--gray: hsl(0, 0%, 20%);
--dark-gray: hsl(0, 0%, 12%);
--off-black: hsl(0, 0%, 8%); }

2.I used a min() function for my main container's width to make the page responsive with smaller widths:

.profile-container {
 ...
 width: min(100vw , 19rem);
 ...
}

3.I changed the style of my buttons on :focus and :hover like this :

.button:focus-visible {
  outline: 2px var(--gray) solid;
  outline-offset: 3px;
}

.button:hover {
  background-color: var(--Green);
  color: var(--dark-gray);
}

What challenges did you encounter, and how did you overcome them?

in my HTML markup , something that i wanted to do was to make the image not draggable in the page. so i learned to do that by adding draggable="false" to the `````` tag :

What specific areas of your project would you like help with?

i would love to know if there is any better way of the layout being responsive . i did desktop-first design and then proceed to do the mobile layout then .