CSS HTML

Community feedback

• 

  Eduardo•910

  @KTrick01Posted over 2 years ago

  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!

  Marked as helpful

  1

  ---

  

  Kate•30

  @unic0rnKatePosted over 2 years ago

  @KTrick01 it helps a lot! Thank you so much for taking time and replying.

  0

  

  Kate•30

  @unic0rnKatePosted over 2 years ago

  @KTrick01 Also do you know why this page on the web looks good but here it looks like everything is flying around? Don't know what i do wrong...

  0

  

  Eduardo•910

  @KTrick01Posted over 2 years ago

  @unic0rnKate Glad to help you! About the page, I'm not sure to be honest, I've seen more people with the same problem, but I don't know why it happens

  0
• 

  jerry•300

  @realsalePosted over 2 years ago

  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%;

  0
• 

  Kate•30

  @unic0rnKatePosted over 2 years ago

  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!

  0

  ---

  

  Daniel Grec•70

  @DanielGrecPosted over 2 years ago

  @unic0rnKate Hi Kate!

  Don't add a shadow, the shadow that you see is just how the screen transitions from one color to the other. Just add the body color and the card color and that it is. About the other stuff, I don't know how to help you :(. But be patient, someone with more experience will come to the rescue. Also, for the Pricing and Days left, try grouping them in a div and use flexbox on it so you can center them and space them.

  Other than that, keep going. Stuff looks great!

  Marked as helpful

  0

  

  Kate•30

  @unic0rnKatePosted over 2 years ago

  @DanielGrec thank you so much my friend! I was really struggling with “pricing and days left” to move them and look together. Thank you for your suggestion.

  1