Lucas Piputto

Latest comments

• 

  Ted•180

  @sharipoff-0-1Submitted about 3 years ago

  

  Responsive stats card

  #accessibility#sass/scss

  1

  60
  

  Lucas Piputto•305

  @paiputPosted about 3 years ago

  Hi Ted! Nice job with this challange!

  I just have one suggestion, and it's that to make the overlay color look a bit more like in the design by changing the .bg-img background-blend-mode property to multiply. It won't look 100% the same as the design but I think it's pretty close.

  Hope that helps.

  0
• 

  Brandt Darum•240

  @brandtdarumSubmitted about 3 years ago

  

  Stats preview card component

  3

  50
  

  Lucas Piputto•305

  @paiputPosted about 3 years ago

  Hi Brandt!

  To apply the purple filter to the image you could do something like this. In this case you wouldn't need the <img> tags inside the <div class="cardImageContainer">

  .cardImageContainer {
      /* then you would replace the backround url for mobile view with media query */
      background: url('../assets/images/image-header-desktop.jpg') var(--soft-violet);
      background-blend-mode: multiply /* you can also try other values */;
  }
  

  It looks like you are having some Accessibility and HTML Validations problems. You you can see a brief description of each problem by clicking the "view report" button.

  • Images must have alternate text: You should add an alt attribute with an alternative text in case image can't load.
  • Document should have one main landmark: You could fix this by replacing the <section> tag with a <main> tag.
  • Page should contain a level-one heading
  • All page content should be contained by landmarks

  Marked as helpful

  1
• 

  Achref KS•530

  @AchrefFastSubmitted about 3 years ago

  

  Mobile-first Workflow, Javascript, CSS Grid, Flexbox and Animation

  #sass/scss

  2

  20
  

  Lucas Piputto•305

  @paiputPosted about 3 years ago

  Nice job! The animations look very good. If you asked I would make them a bit longer. For example:

  .testimonial__body .text {
      transition: transform 0.7s, opacity 0.6s, ease-in, -webkit-transform 0.7s;
  }
  
  .appear img {
      animation: popup 800ms;
  }
  
  .testimonial__body .author {
      transition: transform 0.7s, opacity 0.6s, ease-in, -webkit-transform 0.7s;
  }
  

  Greetings and happy coding!

  Marked as helpful

  1
• 

  Dev Rathore•2,540

  @GitHub-dev12345Submitted about 3 years ago

  

  Stats-preview-card-component-professional-coding

  3

  60
  

  Lucas Piputto•305

  @paiputPosted about 3 years ago

  Hi @GitHub-dev12345! Good job with challange!

  There's a problem with the image overlay in the mobile view. A possible solution would be to set

  .card .mainpic {
    background: 
      url(images/image-header-mobile.jpg) 
      hsl(277, 64%, 61%);
    background-blend-mode: multiply;
  }
  

  so you wouldn't need the <div class="overlay"></div> element.

  And if you want to get rid of your accessibility issue, you just simply need to replace <div class="attribution">...</div> by <footer class="attribution">...</footer>

  Hope that helps

  0
• 

  Lesley Wesley•365

  @LesleyWesleySubmitted almost 4 years ago

  

  Responsive 2-Column Card Preview using Flexbox

  3

  10
  

  Lucas Piputto•305

  @paiputPosted almost 4 years ago

  I think it's okay, I did the same way. And I think it's because those buttons are supposed to take you to another page on your website.

  0
• 

  Héctor Vásquez•510

  @HeitoluisSubmitted almost 4 years ago

  

  Css and Flexbox

  2

  30
  

  Lucas Piputto•305

  @paiputPosted almost 4 years ago

  Nice animations Héctor.

  Just a little detail that I found, from 340 pixels downwards the size of the icons is reduced. Maybe you could correct it with:

  .share-popup__icons > * {
    min-width: 17px; /*I tried with 17px but you could try any other*/
  }
  

  I'm not an expert but this might help. Great job!

  0