Bookmark landing page with FlexBox and JavaScript

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted about 5 years ago

  Hey Lucas, great work on this solution! The way that you've done the background pattern is fine. Another way, which would reduce the HTML would be to use a pseudo-element, like ::before to do the same. For the border-radius you can also set a really high pixel value, instead of a percentage to make sure the corners are fully rounded e.g. border-bottom-left-radius: 500px;.

  I hope that helps!

  1

  ---

  

  gomezlucas•1,115

  @gomezlucasPosted about 5 years ago

  @mattstuddert Perfect! I got it now! and it definitely would save some space in the HMTL and make it clearer. Thank you very much!

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted about 5 years ago

  @gomezlucas you're welcome!

  0

  

  gomezlucas•1,115

  @gomezlucasPosted about 5 years ago

  @mattstuddert hello Matt! thanks for your answer! what do you mean by reduce the html with ::before? Like setting the figure size with that pseudo element? thanks!

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted about 5 years ago

  @gomezlucas no worries! If you used the pseudo-element then you wouldn't need the <div class="header-figure"></div> in your HTML. You would instead do something like this is your CSS:

  .header-container {
    position: relative;
    /* other styles */
  }
  .header-container::before {
    content: "";
    position: absolute;
    /* other styles */
  }
  

  Here's the MDN article on the before pseudo-element for more information.

  Let me know if you have any more questions 👍

  1