UI-Card/index.html at main · aa358/UI-Card · 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
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UI Design - Product Card</title>
    <link rel="stylesheet" href="css/font-awesome.min.css" />
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
    <div class="container">
        <div class="card">
          <div class="card-head">
            <img src="imgs/logo.png" alt="logo" class="card-logo">
            <img src="imgs/nike.png" alt="Shoe" class="product-img" width="300"
     height="250">
            <span class="back-text">
              ZF4
            </span>
            <div class="product-detail">
              <!--<h3>Nike</h3> -->
              <marquee><h4>The Freak is an incessant storm of stamina and skill
              that keeps coming at opponents for 4 quarters and more.</h4></marquee>
            </div>
          </div>
          <div class="card-body">
            <div class="product-desc">
              <span class="product-title">
                Zoom <b>Freak 4</b>
                <span class="badge">
                  New
                </span>
              </span>
              <span class="product-caption">
                BasketBall Collection
              </span>
              <span class="product-rating">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star grey"></i>
              </span>
            </div>
            <div class="product-properties">
              <span class="product-size">
                <h4>Size</h4>
                <ul class="ul-size">
                  <li><a href="#">7</a></li>
                  <li><a href="#" class="active">8</a></li>
                  <li><a href="#">9</a></li>
                  <li><a href="#">10</a></li>
                  <li><a href="#">11</a></li>
                </ul>
              </span>
              <span class="product-color">
                <h4>Colour</h4>
                <ul class="ul-color">
                  <li><a href="#" class="black active"></a></li>
                  <li><a href="#" class="gold"></a></li>
                  <li><a href="#" class="maroon"></a></li>
                </ul>
              </span>
              <span class="product-price">
                $<b>235</b>
              </span>
            </div>
          </div>
        </div>
    </div>
</body>
</html>