card-feature-section

Community feedback

• 

  P

  Mohammad Waris Fayiz•390

  @fayiz770Posted 5 months ago

  Your CSS file is generally well-structured, but there are a few improvements and corrections you could make for better performance, maintainability, and correctness:

  Font-Face Declaration:

  You have inconsistencies in your font-weight values. Ensure they match standard values: 100, 200, 300, 400, 500, 600, 700, 800, 900. You have some duplicate and incorrect entries, such as: Poppins-Light has font-style: italic. Poppins-Thin has font-weight: normal. Poppins-SemiBold has font-weight: semibold which is not valid. Use 600. Fix format syntax in the src attributes. Font-Face Example:

  @font-face {
      font-family: 'Poppins';
      src: url('assets/Poppins/Poppins-Black.ttf') format('truetype');
      font-weight: 900;
  }
  
  @font-face {
      font-family: 'Poppins';
      src: url('assets/Poppins/Poppins-BlackItalic.ttf') format('truetype');
      font-weight: 900;
      font-style: italic;
  }
  
  @font-face {
      font-family: 'Poppins';
      src: url('assets/Poppins/Poppins-Bold.ttf') format('truetype');
      font-weight: 700;
  }
  
  @font-face {
      font-family: 'Poppins';
      src: url('assets/Poppins/Poppins-BoldItalic.ttf') format('truetype');
      font-weight: 700;
      font-style: italic;
  }
  
  @font-face {
      font-family: 'Poppins';
      src: url('assets/Poppins/Poppins-ExtraBold.ttf') format('truetype');
      font-weight: 800;
  }
  
  @font-face {
      font-family: 'Poppins';
      src: url('assets/Poppins/Poppins-ExtraBoldItalic.ttf') format('truetype');
      font-weight: 800;
      font-style: italic;
  }
  
  @font-face {
      font-family: 'Poppins';
      src: url('assets/Poppins/Poppins-ExtraLight.ttf') format('truetype');
      font-weight: 200;
  }
  
  @font-face {
      font-family: 'Poppins';
      src: url('assets/Poppins/Poppins-ExtraLightItalic.ttf') format('truetype');
      font-weight: 200;
      font-style: italic;
  }
  
  @font-face {
      font-family: 'Poppins';
      src: url('assets/Poppins/Poppins-Italic.ttf') format('truetype');
      font-style: italic;
  }
  
  @font-face {
      font-family: 'Poppins';
      src: url('assets/Poppins/Poppins-Light.ttf') format('truetype');
      font-weight: 300;
  }
  
  @font-face {
      font-family: 'Poppins';
      src: url('assets/Poppins/Poppins-LightItalic.ttf') format('truetype');
      font-weight: 300;
      font-style: italic;
  }
  
  @font-face {
      font-family: 'Poppins';
      src: url('assets/Poppins/Poppins-Medium.ttf') format('truetype');
      font-weight: 500;
  }
  
  @font-face {
      font-family: 'Poppins';
      src: url('assets/Poppins/Poppins-MediumItalic.ttf') format('truetype');
      font-weight: 500;
      font-style: italic;
  }
  
  @font-face {
      font-family: 'Poppins';
      src: url('assets/Poppins/Poppins-Regular.ttf') format('truetype');
      font-weight: 400;
  }
  
  @font-face {
      font-family: 'Poppins';
      src: url('assets/Poppins/Poppins-SemiBold.ttf') format('truetype');
      font-weight: 600;
  }
  
  @font-face {
      font-family: 'Poppins';
      src: url('assets/Poppins/Poppins-SemiBoldItalic.ttf') format('truetype');
      font-weight: 600;
      font-style: italic;
  }
  
  @font-face {
      font-family: 'Poppins';
      src: url('assets/Poppins/Poppins-Thin.ttf') format('truetype');
      font-weight: 100;
  }
  
  @font-face {
      font-family: 'Poppins';
      src: url('assets/Poppins/Poppins-ThinItalic.ttf') format('truetype');
      font-weight: 100;
      font-style: italic;
  }```
  **
  Media Queries:
  **
  Nested selectors within media queries (.header h1, .header p) might not work as intended. Use direct descendant selectors.
  Media Query Example:
  
  

  @media (max-width: 375px) { body > main { padding: 3em 1em; }

  .header h1 {
      font-size: 1.3em;
  }
  
  .header p {
      text-align: justify; /* text-justify is not a valid CSS property */
  }
  
  .content {
      display: flex;
      flex-direction: column;
      row-gap: 3em;
  }
  

  }```

  General Styles:

  Use valid values for font-weight. Replace non-standard values like semibold with appropriate numerical values. Ensure consistent usage of CSS properties. General Example:

  body {
      min-width: fit-content;
      height: auto;
      font-family: 'Poppins', sans-serif; /* Fallback font added */
  }
  
  body > main {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: fit-content;
  }
  
  .header {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: fit-content;
      color: var(--very-dark-blue);
      text-align: center;
      margin-bottom: 3em;
  }
  
  .header h1 {
      font-size: 2em;
      font-weight: 300; /* 'lighter' replaced with numeric value */
      letter-spacing: 1.5px;
  }
  
  .header p {
      font-size: 0.9em;
      font-weight: 700; /* 'bold' replaced with numeric value */
      margin-top: 0;
  }
  
  .content {
      box-sizing: border-box;
      margin: 0 auto;
      display: grid;
      grid-template-rows: repeat(4, 1fr);
      grid-template-columns: repeat(3, 1fr);
      gap: 2em;
      height: auto;
  }
  
  .footer {
      display: block;
      height: auto;
      font-size: 0.8em;
      font-weight: 700; /* 'bold' replaced with numeric value */
      text-align: center;
  }
  
  .footer a {
      color: var(--very-dark-blue);
      text-decoration: none;
  }
  
  .card {
      background-color: white;
      position: relative;
      max-width: 22em;
      min-height: 15em;
      padding: 1em 2em;
      box-sizing: border-box;
      border-radius: 5px;
      box-shadow: 0px 5px 10px var(--grayish-blue);
  }
  
  .card h2 {
      color: var(--very-dark-blue);
      font-size: 1.25rem;
  }
  
  .card p {
      color: var(--grayish-blue);
      font-size: 0.8em;
      font-weight: 700; /* 'bold' replaced with numeric value */
      line-height: 2em;
  }
  
  .card img {
      max-width: 20%;
      height: auto;
      position: absolute;
      right: 10%;
      bottom: 10%;
  }
  
  .left {
      grid-column: 1;
      grid-row: 2 / 4;
      border-top: 4px solid var(--cyan);
  }
  
  .top {
      grid-column: 2;
      grid-row: 1 / 3;
      border-top: 4px solid var(--red);
  }
  
  .bottom {
      grid-column: 2;
      grid-row: 3 / 5;
      border-top: 4px solid var(--orange);
  }
  
  .right {
      grid-column: 3;
      grid-row: 2 / 4;
      border-top: 4px solid var(--blue);
  }```
  **
  Commenting:
  **
  Remove or update commented code to keep the CSS clean and maintainable.
  These changes should improve the readability, consistency, and functionality of your CSS file.
  
  
  
  if you find this useful, please mark it as helpful.
  

  0