forked from prgrms-be-chungnam/react-springboot-rest-api
-
Notifications
You must be signed in to change notification settings - Fork 0
/
sample.html
149 lines (139 loc) · 4.69 KB
/
sample.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
146
147
148
149
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<style>
body {
background: #ddd;
}
.card {
margin: auto;
max-width: 950px;
width: 90%;
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 1rem;
border: transparent
}
.summary {
background-color: #ddd;
border-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;
padding: 4vh;
color: rgb(65, 65, 65)
}
@media (max-width: 767px) {
.summary {
border-top-right-radius: unset;
border-bottom-left-radius: 1rem
}
}
.row {
margin: 0
}
.title b {
font-size: 1.5rem
}
.col-2,
.col {
padding: 0 1vh
}
img {
width: 3.5rem
}
hr {
margin-top: 1.25rem
}
.products {
width: 100%;
}
.products .price, .products .action {
line-height: 38px;
}
.products .action {
line-height: 38px;
}
</style>
<title>Hello, world!</title>
</head>
<body class="container-fluid">
<div class="row justify-content-center m-4">
<h1 class="text-center">Grids & Circle</h1>
</div>
<div class="card">
<div class="row">
<div class="col-md-8 mt-4 d-flex flex-column align-items-start p-3 pt-0">
<h5 class="flex-grow-0"><b>상품 목록</b></h5>
<ul class="list-group products">
<li class="list-group-item d-flex mt-3">
<div class="col-2"><img class="img-fluid" src="https://i.imgur.com/HKOFQYa.jpeg" alt=""></div>
<div class="col">
<div class="row text-muted">커피콩</div>
<div class="row">Columbia Nariñó</div>
</div>
<div class="col text-center price">5000원</div>
<div class="col text-end action"><a class="btn btn-small btn-outline-dark" href="">추가</a></div>
</li>
<li class="list-group-item d-flex mt-2">
<div class="col-2"><img class="img-fluid" src="https://i.imgur.com/HKOFQYa.jpeg" alt=""></div>
<div class="col">
<div class="row text-muted">커피콩</div>
<div class="row">Columbia Nariñó</div>
</div>
<div class="col text-center price">5000원</div>
<div class="col text-end action"><a class="btn btn-small btn-outline-dark" href="">추가</a></div>
</li>
<li class="list-group-item d-flex mt-2">
<div class="col-2"><img class="img-fluid" src="https://i.imgur.com/HKOFQYa.jpeg" alt=""></div>
<div class="col">
<div class="row text-muted">커피콩</div>
<div class="row">Columbia Nariñó</div>
</div>
<div class="col text-center price">5000원</div>
<div class="col text-end action"><a class="btn btn-small btn-outline-dark" href="">추가</a></div>
</li>
</ul>
</div>
<div class="col-md-4 summary p-4">
<div>
<h5 class="m-0 p-0"><b>Summary</b></h5>
</div>
<hr>
<div class="row">
<h6 class="p-0">Columbia Nariñó <span class="badge bg-dark text-">2개</span></h6>
</div>
<div class="row">
<h6 class="p-0">Brazil Serra Do Caparaó <span class="badge bg-dark">2개</span></h6>
</div>
<div class="row">
<h6 class="p-0">Columbia Nariñó <span class="badge bg-dark">2개</span></h6>
</div>
<form>
<div class="mb-3">
<label for="email" class="form-label">이메일</label>
<input type="email" class="form-control mb-1" id="email">
</div>
<div class="mb-3">
<label for="address" class="form-label">주소</label>
<input type="text" class="form-control mb-1" id="address">
</div>
<div class="mb-3">
<label for="postcode" class="form-label">우편번호</label>
<input type="text" class="form-control" id="postcode">
</div>
<div>당일 오후 2시 이후의 주문은 다음날 배송을 시작합니다.</div>
</form>
<div class="row pt-2 pb-2 border-top">
<h5 class="col">총금액</h5>
<h5 class="col text-end">15000원</h5>
</div>
<button class="btn btn-dark col-12">결제하기</button>
</div>
</div>
</div>
</body>
</html>