stats-preview-card-component/index.html at main · dedo-dev/stats-preview-card-component · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap" rel="stylesheet">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <title>Frontend Mentor | Stats preview card component</title>
  <style>
    .attribution { font-size: .75rem; text-align: center; margin-top: 1.5rem; }
    .attribution a { color: yellow; text-decoration: none; }
  </style>
</head>
<body>

  <main>

    <div class="card-wrapper">

      <div class="card__image">
        <picture>
          <source media="(min-width: 56.25em)" srcset="images/image-header-desktop.jpg 1x">
          <img src="images/image-header-mobile.jpg" alt="Three women work at the desk in their office, one sitting on her back, the other two facing her. One of them laughs as she talks to someone out of the camera frame">
        </picture>
      </div>


      <div class="card__content">
        <h1 class="card__heading">Get <span class="text-accent">insights</span> that help your business grow.</h1>
        <p class="card__description">
          Discover the benefits of data analytics and make better decisions regarding revenue, customer
          experience, and overall efficiency.
        </p>

        <div class="card__stats">
          <ul>
            <li class="card__stats-value">10k+ <span class="card__stats-title">companies</span></li>
            <li class="card__stats-value">314  <span class="card__stats-title">templates</span></li>
            <li class="card__stats-value uppercase">12m+ <span class="card__stats-title">queries</span></li>
          </ul>
        </div>
      </div>

    </div>

  </main>
<footer>

  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="#">Daniele Zeppieri</a>.
  </div>

</footer>

</body>
</html>