Profile card with HTML and Sass

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋 Hello there, Hadiza! My name is Vanza.

  Good job on finishing this challenge! But I have a little feedback that might be make your css more simple. So my feedback is that instead of creating two img tag, you can try this:

  .container {
    background-image: 
      url('../images/bg-pattern-top.svg'),
      url('../images/bg-pattern-bottom.svg');
    background-position: top left, bottom right;
  }
  

  As long as the container height is 100vh, I think this should be work.

  More information about background positioning, you can try to check this 👉 video

  Last but not least, I see that you only use bg-pattern-top.svg on both aside__img

  <aside class="aside__img_1">
          <img src="images/bg-pattern-top.svg" alt="">
  </aside>
  <aside class="aside__img_2">
          <img src="images/bg-pattern-top.svg" alt="">
  </aside>
  

  That's it, overall your solution is good and hopefully this will help make it better.

  1

  ---

  

  Hadiza•200

  @ThedeezatPosted over 3 years ago

  @vanzasetia Thanks for the tip on the background positioning it was really helpful and a lot easier.

  0
• 

  Laxman Bista•0

  @scanner77Posted over 3 years ago

  body{ display: flex; justify-content: center; align-items: center; background-color: #19a2ae; } .main-div{ height: 384px; width: 352px; display: flex; justify-content: center; align-items: center; /* background-color: grey; / position: relative; z-index: -4; / border: 3px solid black; / } .header{ background-image: url("background.PNG"); display: flex; justify-content: center; align-items: center; height: 141px; width: 352px; z-index: -3; position: absolute; top: 0; background-color: #3eccd4; border-top-left-radius: 5%; border-top-right-radius: 5%; / border: 3px solid red; */

  } .description{ /* border: 3px solid black; */ width: 352px; height: 154px; margin-top: 60px; z-index: -2; position: relative; background-color: white; } .likes{ background-color: white; border-top: 1px solid grey; margin-top: -10px; z-index: -1; position: absolute; top: 300; left: 0; height: 75px; width: 352px;

  display: flex;
  justify-content: space-around;
  align-items: center;
  

  } .circle{ display: flex; justify-content: center; align-items: center; position: absolute;

  height: 100px;
  width: 100px;
  background-color: black;
  border-radius: 50%;
  margin-top: -80px;
  z-index: 1;
  

  } .outer-circle{ display: flex; justify-content: center; align-items: center; position: absolute; top: 97; height: 110px; width: 110px; background-color: yellow; border-radius: 50%; } #heading-two{ display: flex; justify-content: center; align-items: center; text-align: center; margin-top: 58px; } #heading-three{

      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
  

  }

  0