HTML-CSS_practice/13.html at master · rrabit42/HTML-CSS_practice · 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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
  <head>
    <title>SimpleShop</title>
    <meta charset="utf-8" />
    <link href="13_styles.css" rel="stylesheet" />
  </head>

<body>

<div class="navbar">
  <img id="logo" src="13_images/logo.png">
  <ul>
    <li class="list"><a href="#">Contact</a></li>
    <li class="list"><a href="#">Shop</a></li>
    <li class="list"><a href="#">Cart</a></li>
    <li class="list"><a href="#">Login</a></li>
  </ul>
</div>

<img id="banner" src="13_images/hero_header.jpg">

<div id="main">
  <h1>Our New Products</h1>
</div>

<div id="grid">
  <div id="products">
    <a href="#">
      <div class="item row">
          <img src="13_images/sunglasses.jpg">
          <p class="first">Sunglasses</p>
          <p>49,000</p>
      </div>
    </a>

    <a href="#">
      <div class="item">
          <img src="13_images/tassel_loafer.jpg">
          <p class="first">Tassel Loafer</p>
          <p>89,000</p>
      </div>
    </a>

    <a href="#">
      <div class="item">
          <img src="13_images/beige_bag.jpg">
          <p class="first">Beige Bag</p>
          <p>69,000</p>
      </div>
    </a>

    <a href="#">
      <div class="item row">
          <img src="13_images/sneakers.jpg">
          <p class="first">Sneakers</p>
          <p>79,000</p>
      </div>
    </a>

    <a href="#">
      <div class="item">
          <img src="13_images/slippers.jpg">
          <p class="first">Sunglasses</p>
          <p>29,000</p>
      </div>
    </a>

    <a href="#">
      <div class="item">
          <img src="13_images/wrist_watch.jpg">
          <p class="first">Wrist Watch</p>
          <p>99,000</p>
      </div>
    </a>

    <a href="#">
      <div class="item row">
          <img src="13_images/fedora_hat.jpg">
          <p class="first">Fedora Hat</p>
          <p>39,000</p>
      </div>
    </a>

    <a href="#">
      <div class="item">
          <img src="13_images/classic_loafer.jpg">
          <p class="first">Classic_Loafer</p>
          <p>99,000</p>
      </div>
    </a>

    <a href="#">
      <div class="item">
          <img src="13_images/pink_bag.jpg">
          <p class="first">Pink Bag</p>
          <p>79,000</p>
      </div>
    </a>

    <div class="clearfix"></div>
  </div>
</div>


<div id="sns">
  <img src="13_images/facebook.png">
  <img src="13_images/instagram.png">
  <img src="13_images/twitter.png">
</div>

</body>
</html>