TheF2E-Week-4/index.html at master · zshao1031/TheF2E-Week-4 · 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>

<html lang="en">

<head>
	<!--========================-->
	<!--※※【網頁顯示資訊設定】※※-->
	<!--========================-->

	<!--使用編碼-->
	<meta charset="UTF-8">

	<!--頁籤設定-->
	<title>TheF2E Week4: Product Gallery</title>
	<link rel="shortcut icon" href="img/favicon.ico">

	<!--把螢幕解析度的寬度變成載具的寬度(RWD用)-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!--網站描述與關鍵字設定-->
	<meta name="description" content="此網站為書豪參加TheF2E的第四週作品">
	<meta name="keywords" content="TheF2E, Week4, Product Gallery">

	<!--網站貼在Facebook上時顯示的資訊-->
	<meta property="og:title" content="TheF2E Week4: Product Gallery">
	<meta property="og:description" content="此網站為書豪參加TheF2E的第四週作品">
	<meta property="og:type" content="website">
	<meta property="og:url" content="">
	<meta property="og:image" content="img/thumbnail.jpg">

	<!--IE相容性設定-->
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">

	<!--載入Roboto Font字型-->
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

	<!--載入CSS-->
	<link rel="stylesheet" href="css/CSSReset.css">
	<link rel="stylesheet" href="css/home.css">
</head>

<body>
	<div class="wrap">
		<h1 id="logo">CCCLOTHES</h1>
		<h2 id="mainTitle">MEN’S TOPS</h2>

		<div class="productArea">

			<div id="product01">
				<div class="hollowSquare"></div>
				<a href="product.html" class="picture"></a>
				<ul class="mainTitle">
					<li class="productTitle storey1">LINEN BLAZER</li>
					<li class="productTitle storey2">LINEN BLAZER</li>
					<li class="productTitle storey3">LINEN BLAZER</li>
				</ul>
				<div class="num">01</div>
				<div class="diagonalStripes"></div>
				<div class="secondTitle">Men’s outfit</div>
			</div>

			<div id="product03">
				<div class="hollowSquare"></div>
				<div class="solidSquare"></div>
				<a href="product.html" class="picture"></a>
				<ul class="mainTitle">
					<li class="productTitle storey1">SUPER SKINNY</li>
					<li class="productTitle storey2">SUPER SKINNY</li>
					<li class="productTitle storey3">SUPER SKINNY</li>
				</ul>
				<div class="num">03</div>
				<div class="secondTitle">Men’s pattern shirts</div>
			</div>

			<div id="product05">
				<div class="hollowSquare"></div>
				<a href="product.html" class="picture"></a>
				<div class="diagonalStripes"></div>
				<ul class="mainTitle">
					<li class="productTitle storey1">SWEATSHIRTS</li>
					<li class="productTitle storey2">SWEATSHIRTS</li>
					<li class="productTitle storey3">SWEATSHIRTS</li>
				</ul>
				<div class="num">05</div>
				<div class="secondTitle">Men’s jacket</div>
			</div>

			<div id="product07">
				<div class="hollowSquare"></div>
				<div class="solidSquare"></div>
				<a href="product.html" class="picture"></a>
				<div class="diagonalStripes"></div>
				<ul class="mainTitle">
					<li class="productTitle storey1">EDITION</li>
					<li class="productTitle storey2">EDITION</li>
					<li class="productTitle storey3">EDITION</li>
				</ul>
				<div class="num">07</div>
				<div class="secondTitle">Men’s shirts</div>
			</div>

		</div>

		<div class="productArea">

			<div id="product02">
				<div class="hollowSquare"></div>
				<div class="solidSquare"></div>
				<a href="product.html" class="picture"></a>
				<ul class="mainTitle">
					<li class="productTitle storey1">FREELIFT</li>
					<li class="productTitle storey2">FREELIFT</li>
					<li class="productTitle storey3">FREELIFT</li>
				</ul>
				<div class="num">02</div>
				<div class="secondTitle">Men’s basics</div>
			</div>

			<div id="product04">
				<div class="hollowSquare"></div>
				<a href="product.html" class="picture"></a>
				<ul class="mainTitle">
					<li class="productTitle storey1">DENIM</li>
					<li class="productTitle storey2">DENIM</li>
					<li class="productTitle storey3">DENIM</li>
				</ul>
				<div class="num">04</div>
				<div class="diagonalStripes"></div>
				<div class="secondTitle">Men’s cadual</div>
			</div>

			<div id="product06">
				<div class="hollowSquare"></div>
				<div class="solidSquare"></div>
				<a href="product.html" class="picture"></a>
				<ul class="mainTitle">
					<li class="productTitle storey1">VINTAGE DENIM</li>
					<li class="productTitle storey2">VINTAGE DENIM</li>
					<li class="productTitle storey3">VINTAGE DENIM</li>
				</ul>
				<div class="num">06</div>
				<div class="secondTitle">Men’s classic</div>
			</div>

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


</body>

</html>