All comments

• 

  Aaryan Singh•55

  @Aaryan376Submitted about 1 year ago

  What can be the best practices while implementing this challenge?

  

  Newsletter Service using HTML, CSS and JavaScript

  1

  20
  

  madhukar-30•340

  @madhukar-30Posted about 1 year ago

  🎉Congratulations on completing this challenge Here are a few suggestions from my side that I believe you'll find quite intriguing: 1.Use picture elment instead of using background image The <picture> element is an HTML element used for responsive web design. It allows you to define multiple image sources for different screen sizes or display conditions and lets the browser choose the most appropriate image to display. for example :

  <picture> <!--here you are defining the image to be used for screens with a width of 375px or less,--> <source srcset="image url " media="(max-width:375px)"> <!-- your initial image --> <img src=" image url " alt="A description of the image"> </picture>

  2.I've noticed that your layout is currently optimized for screens with a width of 375 pixels or less.To enhance responsiveness on other smaller devices, consider implementing media queries for them also .

  "May this prove beneficial to you."

  Marked as helpful

  0
• 

  Cheosphere•1,040

  @CheosphereSubmitted over 1 year ago

  ...made with a lot of love 🤘🏻🙂

  

  Results Summary Component (HTML | CSS | JS Vanilla => animejs library)

  17

  29613
  

  madhukar-30•340

  @madhukar-30Posted about 1 year ago

  pretty cool animations 👏

  3
• 

  Sherif•150

  @hikkenoace1Submitted over 1 year ago

  i couldn't overlay the light purple color on the image i tried everything couldn't really know what's wrong with the code

  

  Stats preview card component

  1

  20
  

  madhukar-30•340

  @madhukar-30Posted over 1 year ago

  just give position: relative to overlay div and use after ::after pseudo element to place the color over image the and then use mix-blend-mode property code:

  .overlay {

  width: 500px; position: relative;

  }

  .overlay::after {

  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: hsl(277,64%,61%);
  mix-blend-mode: multiply;
  

  }

  Hope it helps 👍

  Marked as helpful

  0
• 

  CerealKiller01•130

  @CerealKiller01Submitted over 1 year ago

  This page is built with css only mostly with flexbox and grid, it is fully responsive. All comments are welcome

  

  Huddle landing page with alternating feature blocks

  1

  20
  

  madhukar-30•340

  @madhukar-30Posted over 1 year ago

  Hello can you tell me how your full page is visible in design comparison in my case only a portion of it is visible

  0