CSS HTML

Hi Kate! You can change the blur of the shadow adding a third value like this box-shadow: 4px 4px 50px black. About the border of the avatar, first you should use this property border-radius: 50%; this will make square images become "circular", then you can use border: 1px solid white for the border. I hope that it helps you!

Yo! Kate,

First of all congrats submitting your solution, It wasn't bad at all.

Regarding to your question:

1 To make a shadow looks like a gradient or fading same as the background, I use the original background-color and adds three layers of it with different sizes and lightness using the hsl

.component {
  box-shadow:
    0 0 45px hsl(217deg 54% 11%), // largest layer, same color and lightness
    0 0 35px hsl(217deg 54% 9%), // middle layer, same color with decrease lightness
    0 0 20px hsl(217deg 54% 6%) // inner layer, same color and the darkest
}

2 There's a couple of way place an image and a text content together, One way is using flex, Setting display property to flex allows you to use other flex container properties e.g. justify-content|align-items etc. that can be used to manipulate and controls flex-items(children)

Beginners guide to flexbox

// markup
<div class="tag">
  <img src="./some/path" alt="foo" />
  <p class="tag__details">Foo bar</p>
</div>

// style
.tag {display: flex; align-items: center;}
.tag__details{margin-left: 6px;}

3 Make sure you set your image dimension length equal both in width and height, then set the border and border-radius: 50%;

Please someone explain to me why on the web everything looks good and on its place but when i post here it looks like everything is flying around? what i do wrong.......................? Maybe the way I’m moving elements is not right? I searched all google and cannot find any answers. Please help me, thank you!