Space Tourism Website

Community feedback

• 

  Vlad•240

  @vladmeePosted over 1 year ago

  Your solution is really neat! Well-structured SCSS, rem everywhere, everything makes sense. Not sure what to comment here... Great job!

  If I may, I will mention only one thing:

  The header line:

  .header__line {
  width: 35%;
  height: 0.0625rem;
  margin-right: -6.25rem;
  }
  

  Adding a negative margin right here only moves the line to the right, it doesn't stretch it. This doesn't give you control over where it starts or where it ends.

  Yes, you added the same amount in padding to the navbar:

  .header__navigation {
  @media screen and (max-width: 62rem) {
  padding: 0 6.25rem;
  }
  

  But I think there's a better solution. Instead of moving the line (which can overlap the content if not calculated properly) better move the elements that are strictly decorative: the navbar background!

  Keep your structure of: LOGO - LINE DIVIDER - NAVBAR CONTENT

  Then, add the blur background as a pseudo element to the navbar (::after) and, instead of moving the line on top of it, stretch the background under the line.

  In this way, if things don't match perfectly, you know that the content will never be affected or overlapped. It's just a blur background that can be as short or as long as it can be. Plus, now the line starts exactly after the logo where you wanted ti!

  Hope this was helpful, it's just a very small caveat in an excellent implremention of this project! Keep it up!

  Marked as helpful

  1