--description--

Instead of adjusting your overall background or the color of the text to make the foreground easily readable, you can add a background-color to the element holding the text you want to emphasize. This challenge uses rgba() instead of hex codes or normal rgb().

<blockquote>rgba stands for: r = red g = green b = blue a = alpha/level of opacity</blockquote>

The RGB values can range from 0 to 255. The alpha value can range from 1, which is fully opaque or a solid color, to 0, which is fully transparent or clear. rgba() is great to use in this case, as it allows you to adjust the opacity. This means you don't have to completely block out the background.

You'll use background-color: rgba(45, 45, 45, 0.1) for this challenge. It produces a dark gray color that is nearly transparent given the low opacity value of 0.1.

--instructions--

To make the text stand out more, adjust the background-color of the h4 element to the given rgba() value.

Also for the h4, remove the height property and add padding of 10px.

--hints--

Your code should add a background-color property to the h4 element set to rgba(45, 45, 45, 0.1).

assert(
  /(background-color|background):rgba\(45,45,45,0?\.1\)(;?}|;)/gi.test(
    code.replace(/\s/g, '')
  )
);

Your code should add a padding property to the h4 element and set it to 10 pixels.

const h4Element = document.querySelector("h4"); 
const h4style = window.getComputedStyle(h4Element);
assert.equal(h4style?.paddingTop, "10px");
assert.equal(h4style?.paddingRight, "10px");
assert.equal(h4style?.paddingBottom, "10px");
assert.equal(h4style?.paddingLeft, "10px");

The height property on the h4 element should be removed.

const h4Element = document.querySelector("h4"); 
const h4style = window.getComputedStyle(h4Element);
assert.notEqual(h4style?.height, '25px');

--seed--

--seed-contents--

html

<style>
  h4 {
    text-align: center;
    height: 25px;


  }
  p {
    text-align: justify;
  }
  .links {
    text-align: left;
    color: black;
  }
  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
  .cardText {
    margin-bottom: 30px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4>Alphabet</h4>
      <hr>
      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>


      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

--solutions--