forked from itoshige/amazonpay-demoshop
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathshop-item.html
145 lines (119 loc) · 5.22 KB
/
shop-item.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>商品ページ：密林コーヒー Amazon Payデモサイト</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/shop-item.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="shop-item.html">密林コーヒー：デモサイト</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="shop-item.html">Top
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<div class="col-lg-12">
<div class="card mt-4">
<div class="card-body">
<div class="row">
<div class="col-lg-4">
<img class="card-img-top img-fluid" src="image/sample1.jpg" alt="">
</div>
<div class="col-lg-4">
<h3>コーヒー豆</h3>
<h3 class="card-title">コロンビア・ビルバオ</h3>
<h4>¥2,000</h4>
</br>
<p class="card-text">コロンビア産のコーヒー豆です。深い味わいにもかかわらず、フルーツの風味を感じることができます。</p>
<p class="card-text">ぜひお楽しみください。</p>
<p class="card-text">※こちらの商品はギフトラッピング包装はお受けしておりません。ご理解のほどよろしくお願いします。</p>
</br>
<span>この商品の平均評価：</span><span class="text-warning">★ ★ ★ ★ ☆</span><span> 4.0</span>
</br>
</div>
<div class="col-lg-4">
<form action="shop-cart.html" class="form-horizontal" id="highlight">
<br><br>
<div class="form-group">
<div class="row">
<div class="offset-lg-1 col-lg-3">
<label class="control-label">数量:</label>
</div>
<div class="col-lg-7">
<select class="form-control">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="offset-md-12 col-md-12 col-xs-12">
<button type="submit" class="btn btn-info btn-lg btn-block">カートにいれる</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- /.card -->
<div class="card card-outline-secondary my-4">
<div class="card-header">
商品レビュー
</div>
<div class="card-body">
<p>非常に美味しくいただきました！また買います！</p>
<small class="text-muted">Posted by Anonymous on 5/16/18</small>
<hr>
<p>期待通りの香りでした！ありがとうございます。</p>
<small class="text-muted">Posted by Anonymous on 5/1/18</small>
<hr>
<p>簡単に注文でき、迅速な配送もいただきました。ありがとうございます。</p>
<small class="text-muted">Posted by Anonymous on 4/25/18</small>
<hr>
<a href="#" class="btn btn-success">すべてのレビューを見る</a>
</div>
</div>
<!-- /.card -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Amazon Pay 2018</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
</body>
</html>