Four Card Section Challenge

Community feedback

• 

  P

  JOSIANE FERMAO•170

  @josifermaodev

  Posted 10 months ago

  Your code, from what I can see, is a bit disorganized in the HTML section, lacking indentation.

  Indentation is a concept used in programming to organize and structure source code in a clear and readable way. It consists of adding spaces or tabs at the beginning of each line of code, in order to create a visual hierarchy that makes the program easier to understand.

  using your code as an example, instead of doing it like this:

  <div class="card-container">
    <div class="card green">
      <h3>Supervisor</h3>
    <p>  Monitors activity to identify project roadblocks</p>
    <img src="./images/icon-supervisor.svg" alt="Supervisor">
    </div>
  

  the correct one would be:

  <div class="card-container card-green">
      <h3>Supervisor</h3>
      <p>Monitors activity to identify project roadblocks</p>
      <img src="./images/icon-supervisor.svg" alt="Supervisor">
  </div>
  

  ➡️And explaining your doubt: A media query checks the specified condition and applies the styles defined within it only if the condition is true.

  Examples:

  1. Adjust style for screens smaller than 599px:

  @media (max-width: 599px) {
    body {
      background-color: lightblue;
    }
  }
  

  In this example, the body background will change to lightblue on screens with a width of 600px or less.

  2. Adjust style for screens larger than 600px:

  @media (min-width: 600px) {
    body {
      background-color: lightblue;
    }
  }
  

  In this example, the body background will change to lightgreen on screens with a width of 600px or more.

  3. Adjust the style for screens between 600px and 1440px wide:

  @media (min-width: 600px) and (max-width: 1440px) {
    body {
      background-color: lightblue;
    }
  }
  

  In this example, the body background will change to lightblue on screens with width between 600px and 1440px.

  Good job!

  00