Challenge-3/index.html at master · JuanSeRDev/Challenge-3 · 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
59
60
61
<!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 rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="Style.css">

  <title>Frontend Mentor | NFT preview card component</title>
</head>
<body>

  <section class="card">

    <header>
      <div class="bg-img">
        <a href="#"><img class="img" src="images/image-equilibrium.jpg" alt=""></a>
      </div>
    </header>

    <main>

      <div class="title">
        <a href="#"><h1>Equilibrium #3429</h1></a>
        <p>Our Equilibrium collection promotes balance and calm.</p>
      </div>

      <section class="container"> <!-- ETH AND TIME-->
        <!--ETH-->
        <div class="eth">
          <svg width="11" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M11 10.216 5.5 18 0 10.216l5.5 3.263 5.5-3.262ZM5.5 0l5.496 9.169L5.5 12.43 0 9.17 5.5 0Z" fill="#00FFF8"/></svg>
          <p>0.041 ETH</p>
        </div>

        <!--TIME-->
        <div class="time">
          <svg width="17" height="17" xmlns="http://www.w3.org/2000/svg"><path d="M8.305 2.007a6.667 6.667 0 1 0 0 13.334 6.667 6.667 0 0 0 0-13.334Zm2.667 7.334H8.305a.667.667 0 0 1-.667-.667V6.007a.667.667 0 0 1 1.334 0v2h2a.667.667 0 0 1 0 1.334Z" fill="#8BACD9"/></svg>
          <p>3 days left</p>
        </div>
      </section>

      <!--CREDITS-->
      <section class="container-credits">
        <img src="images/image-avatar.png" alt="">
        <div class="credits">
          <p class="cc-color">Creation of</p>
          <a href="#" class="c-color"> Jules Wyvern</a>
        </div>
      </section>
    </main>
  </section>

  <footer>
    <div class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
      Coded by <a href="#">Sebastian Rodriguez</a>.
    </div>
  </footer>
</body>
</html>