The document has already added a title and five colored button elements.
When you click on any of the buttons, the text color of the h2 heading should change to the one indicated on the button.
Add the color property through the style attribute to change the color.
Don’t change any more styles; use the internal script.

This task is part of the Full-Stack JavaScript Course
If you have any issues with it, you can ask for community help below the post
Feel free to help others if you’ve already solved the task

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Colored header</title>
    <style>
      * {
        font-family: monospace;
        text-align: center;
      }
      .container {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(5, 100px);
        justify-content: center;
      }
      .color-button {
        text-align: center;
        font-size: 18px;
        padding: 16px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h2>Change my color</h2>
    <div class="container">
      <div class="color-button" style="background-color: #C4D6B0;">#C4D6B0</div>
      <div class="color-button" style="background-color: #477998; color: white">#477998</div>
      <div class="color-button" style="background-color: #291F1E; color: white">#291F1E</div>
      <div class="color-button" style="background-color: #F64740; color: white">#F64740</div>
      <div class="color-button" style="background-color: #A3333D; color: white">#A3333D</div>
    </div>
  </body>
</html>