G-Loot DS — mission card locked

by Augustin Hiebel

HTML

<div className="card-mission card-locked">
  <div className="card-decoration">
    <img src="https://res.cloudinary.com/gloot/image/upload/v1653293407/Marketing/2022_prototype/Premium_logo.png" width="auto" height="auto" alt="G-Loot Premium" />
  </div>
  <div className="card-body">
    <div className="card-title">Get 3 double kills</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>2/3 double kills</div>
    </div>
    <div className="progressbar progressbar-sm" style={{ "--percent": "66" }}>
      <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-valorant_1.jpg)`,
                    }} />
  </div>
</div>