G-Loot DS — mission card interactive

by Augustin Hiebel

HTML

<div className="card-mission card-interactive">
  <div className="card-decoration"></div>
  <div className="card-body">
    <div className="card-title">Get 10 shots on goal</div>
    <div className="card-meta">
      <div className="chip chip-reward chip-xp chip-sm chip-inverted">
        <span className="icon icon-xp-symbol-outline" />
        <span>100</span>
      </div>
      <div>9/10 shots on goal</div>
    </div>
    <div className="progressbar progressbar-sm" style={{ "--percent": "90" }}>
      <div></div>
    </div>
  </div>
  <div className="card-bg">
    <span style={{
                      backgroundImage: `url(https://res.cloudinary.com/gloot/image/upload/v1653310937/Marketing/2022_prototype/DummyContent/mission-rocketleague_1.jpg)`,
                    }} />
  </div>
</div>