Add a highlighted background color to text with specific styling.

by salt

HTML

<div class="hero">
      <div class="description">
          <div>NEW PARTNERSHIP</div>
          <span>
            Elevating <strong>Beyaz Fırın</strong>'s Legacy Through Digital Innovation
          </span>
          <ul>
              <li>SEO</li>
              <li>Google Ads</li>
          </ul>
      </div>
      <img src="https://piendev.wpengine.com/wp-content/uploads/2025/09/web-banner-1.webp" class="image" alt="Poligon Interactive"/>
  </div>

SCSS

body{
  margin:0;
  font-family: sans-serif;
}

.hero{
    width:100%;
    height:100vh;
    background-color:#ddd;
    img{
        object-fit:cover;
        object-position: center center;
        width:100%;
        height:100%;
    }
}
.description{
   position:absolute;
   bottom:60px;
   left:60px;
   z-index:1;
   max-width:60%;
   >div{
      font-family: sans-serif;
      color:#fff;
      font-weight:600;
      font-size:32px;
      margin-bottom:8px;
   }
  span{
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        background-color: #fff;
        color: #293a44;
        padding: 4px 10px;
        font-family: sans-serif;
        font-weight: 600;
        font-size: 42px;
        line-height: 1.4;
        border-radius: 8px;
        display: inline;
        text-transform:uppercase;
        strong{
          color: #117cba;
          font-weight:inherit;
        }
  }
  ul{
    list-style:none;
    margin:0;
    padding:0;
    margin-top:10px;
    display:flex;
    li{
      background-color:#fff;
      border-radius:6px;
      padding:3px 8px;
      font-size:14px;
      font-weight:400;
      color:#293a44;
      &:not(:first-child){
        margin-left:8px;
      }
    }
  }
}