Muritala Salmat

Latest comments

• 

  Snigdha Sukun•550

  @snigdha-sukun

  Submitted 6 months ago

  What are you most proud of, and what would you do differently next time?

  I am proud of using animation in my project for the first time:

  .footer__content {
      @include u.padding_all(3rem);
      @include c.display-flex($justify: center, $direction: column);
  
      h2 {
          @include u.text-style(uppercase, 0.5rem);
          overflow: hidden;
          border-right: .15em solid v.$very-dark-gray;
          white-space: nowrap;
          display: inline-block;
          margin: 0 auto;
          animation: typing 15s steps(20, end) infinite, blink-caret .75s step-end infinite;
  
          @include u.no-animation {
              animation: none;
          }
      }
  
      p {
          @include u.padding_y(1rem);
      }
  
      @include c.mobile {
          @include u.padding_all(1rem);
      }
  }
  
  /* The typing effect */
  @keyframes typing {
  
      from,
      to {
          max-width: 0
      }
  
      50% {
          max-width: 100%
      }
  }
  
  /* The typewriter cursor effect */
  @keyframes blink-caret {
  
      from,
      to {
          border-color: transparent
      }
  
      50% {
          border-color: v.$very-dark-gray;
      }
  }
  

  What challenges did you encounter, and how did you overcome them?

  After adding transitions to my slides, the Shop Now button stopped working. The hover worked only for the last slide. But I was able to fix it using pointer-events:

  .hero__slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      pointer-events: none;
  
      .hero__image {
          transform: translateX(-100%);
          @include u.transition(opacity, 1s, ease-out);
  
          @include u.no-animation {
              transition: none;
          }
      }
  
      .hero__content {
          transform: translateX(100%);
          @include u.transition(opacity, 1s, ease-out);
  
          @include u.no-animation {
              transition: none;
          }
  
          @include u.padding_all(6rem);
  
          p {
              @include u.padding_y(1rem);
          }
  
          button {
              @include u.text-style(uppercase, 0.8rem);
              color: v.$black;
              @include u.transition(color, 0.3s, ease);
  
              &:hover {
                  color: v.$dark-gray;
              }
          }
  
          @include c.mobile {
              @include u.padding_all(2.5rem);
          }
      }
  }
  
  .active {
      opacity: 1;
      position: relative;
      @include u.transition(opacity, 1s, ease-in);
      pointer-events: auto;
  
      @include u.no-animation {
          transition: none;
      }
  
      .hero__content,
      .hero__image {
          transform: translateX(0);
          @include u.transition(all, 1s, ease-in);
  
          @include u.no-animation {
              transition: none;
          }
  
          @include c.mobile {
              @include u.transition(opacity, 1s, ease-in);
  
              @include u.no-animation {
                  transition: none;
              }
          }
      }
  }
  

  What specific areas of your project would you like help with?

  How to use SCSS more efficiently and how to organise my styling code in a better way. Also, any input on transitions & animations would be good too!

  

  Room homepage with animations using SCSS

  #animation#bem#sass/scss#cube-css

  1

  10
  

  Muritala Salmat•60

  @Funsally

  Posted 6 months ago

  well done

  0
• 

  Snigdha Sukun•550

  @snigdha-sukun

  Submitted 6 months ago

  What are you most proud of, and what would you do differently next time?

  I am proud of learning how to use SCSS. I was able to create @mixin with condition using @if and variables. I was also also to use @content to define @mixin for mobile view.

  @mixin mobile {
      @media (max-width: 768px) {
          @content;
      }
  }
  
  @mixin responsive-grid($columns, $rows: null) {
      @include display-grid($columns);
  
      @if $rows {
          grid-template-rows: repeat($rows, 1fr);
      }
  
      @include mobile {
          @include display-flex(space-between, column);
      }
  }
  

  What challenges did you encounter, and how did you overcome them?

  I was facing some challenges with hover effect for image cards with text. Since I had applied opacity:0.3 to the whole card, the text would also have less opacity on hover. But I was able to fix the issue by applying opacity to only img tag:

  .creation__card {
      position: relative;
      text-align: center;
      color: v.$white;
      cursor: pointer;
  }
  
  .creation__card img {
      transition: opacity 0.3s ease-in-out;
  }
  
  .creation__card:hover img,
  .creation__card:focus img {
      opacity: 0.3;
  }
  
  .creation__card:hover .card__text,
  .creation__card:focus .card__text {
      color: v.$black;
  }
  
  .card__text {
      position: absolute;
      bottom: 1%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  

  What specific areas of your project would you like help with?

  SCSS & CSS methodologies

  

  Loopstudio Landing page using SCSS

  #cube-css#sass/scss#bem

  1

  10
  

  Muritala Salmat•60

  @Funsally

  Posted 6 months ago

  Well done

  0
• 

  Mudasir Nadeem•430

  @mudasirNadeem

  Submitted 8 months ago

  What are you most proud of, and what would you do differently next time?

  Proud of: Creating a responsive, accessible design with a smooth user experience. Next time: Focus more on performance optimization and better modular JavaScript. Need support with: Feedback on accessibility and simplifying complex functions.

  What challenges did you encounter, and how did you overcome them?

  Challenges: Managing responsive layouts and ensuring cross-browser compatibility. Overcame by: Using a mobile-first approach with Flexbox and thorough testing on multiple devices and browsers.

  What specific areas of your project would you like help with?

  Improving JavaScript functions for better readability and performance. Suggestions for optimizing the layout while maintaining responsiveness. Ensuring accessibility standards are fully met, especially for screen readers.

  

  Preview-Card-main

  #accessibility

  1

  30
  

  Muritala Salmat•60

  @Funsally

  Posted 6 months ago

  I'm still learning myself, but one thing I noticed is that the image seems to look its best at a specific screen size. I've heard that responsive web design is really important for making websites look good on all devices. So, maybe exploring that area a bit more could be helpful? I'm also trying to learn more about it myself, but I think it involves things like media queries and using percentages for sizing instead of fixed pixels. There are probably lots of good resources online about it, and I'm planning to look into them as well.

  0