Space Page using React & Sass

Community feedback

• 

  Snigdha Sukun•550

  @snigdha-sukunPosted 29 days ago

  I really liked how you added animation to the destination images. I noticed that you missed on some of the font family details. Try using design system tab in the given figma file to learn more about those & you can create @mixin for the given text presets that will be easy to use wherever needed.

  // Text Presets
  
  @mixin text-preset-1 {
      font-family: v.$font-family-bellefair;
      font-size: 144px;
      text-transform: uppercase;
      font-style: normal;
      font-weight: 400;
      line-height: 171.9%;
  
      @include responsive("tablet") {
          text-align: center;
      }
  
      @include responsive("mobile") {
          font-size: 80px;
          line-height: 92px;
          text-align: center;
      }
  }
  
  @mixin text-preset-2 {
      font-family: v.$font-family-bellefair;
      font-size: 100px;
      text-transform: uppercase;
      font-style: normal;
      font-weight: 400;
      line-height: 114.6%;
  
      @include responsive("tablet") {
          text-align: center;
      }
  
      @include responsive("mobile") {
          font-size: 56px;
          line-height: 64px;
          text-align: center;
      }
  }
  
  @mixin text-preset-3 {
      font-family: v.$font-family-bellefair;
      font-size: 56px;
      text-transform: uppercase;
      font-style: normal;
      font-weight: 400;
      line-height: 64.2%;
  
      @include responsive("tablet") {
          text-align: center;
      }
  
      @include responsive("mobile") {
          font-size: 24px;
          line-height: 28px;
          text-align: center;
      }
  }
  
  @mixin text-preset-4 {
      font-family: v.$font-family-bellefair;
      font-size: 32px;
      text-transform: uppercase;
      font-style: normal;
      font-weight: 400;
      line-height: 36.7%;
  
      @include responsive("tablet") {
          text-align: center;
      }
  
      @include responsive("mobile") {
          font-size: 18px;
          line-height: 21px;
          text-align: center;
      }
  }
  
  @mixin text-preset-5 {
      font-family: v.$font-family-condensed;
      font-size: 28px;
      letter-spacing: 4px;
      text-transform: uppercase;
      font-style: normal;
      font-weight: 400;
      line-height: 33.6%;
  
      @include responsive("tablet") {
          text-align: center;
      }
  
      @include responsive("mobile") {
          font-size: 16px;
          letter-spacing: 0.15em;
          line-height: 19px;
          text-align: center;
      }
  }
  
  @mixin text-preset-6 {
      font-family: v.$font-family-bellefair;
      font-size: 28px;
      text-transform: uppercase;
      font-style: normal;
      font-weight: 400;
      line-height: 32.1%;
  
      @include responsive("tablet") {
          text-align: center;
      }
  
      @include responsive("mobile") {
          font-size: 28px;
          line-height: 32px;
          text-align: center;
      }
  }
  
  @mixin text-preset-7 {
      font-family: v.$font-family-condensed;
      font-size: 14px;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-style: normal;
      font-weight: 400;
      line-height: 16.8%;
  
      @include responsive("tablet") {
          text-align: center;
      }
  
      @include responsive("mobile") {
          font-size: 14px;
          line-height: 17px;
          text-align: center;
      }
  }
  
  @mixin text-preset-8 {
      font-family: v.$font-family-condensed;
      font-size: 16px;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-style: normal;
      font-weight: 400;
      line-height: 19.2%;
  }
  
  @mixin text-preset-9 {
      font-family: v.$font-family;
      font-size: 18px;
      line-height: 180%;
      font-weight: 400;
      font-style: normal;
  
      @include responsive("tablet") {
          text-align: center;
      }
  
      @include responsive("mobile") {
          font-size: 15px;
          text-align: center;
      }
  }
  

  0