-
Notifications
You must be signed in to change notification settings - Fork 0
/
Summit_Takao.html
193 lines (161 loc) · 4.48 KB
/
Summit_Takao.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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>山美 Summit Takao</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
body{
font-family: monospace, 微軟正黑體;
}
.nav-link {
color: gray;
}
.page_slide{
background: #A0413F;
color: white;
padding: 10px;
text-align: center;
}
.page_slide img{
width: 100%;
}
.about img {
opacity: 0.85;
width: 100%;
}
h1{
color: gray;
text-align: center;
}
.about p{
text-align: center;
padding-top: 10px;
}
.about #caption{
padding-top: 50px;
border-left: double;
border-color: gray;
}
.about #caption img{
width: 10%;
display: block;
margin-left: auto;
margin-right: auto;
}
#info img{
padding: 10px;
}
#members{
padding:20px;
}
#members img, p{
padding: 10px;
}
#map{
width: 100%;
}
footer{
background-color:#A0413F ;
color: white;
}
footer img{
padding: 10px;
}
</style>
<body>
<!--navbars-->
<div class="container">
<!-- Links -->
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="about.html">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="product.html">PRODUCT</a>
</li>
</ul>
</div>
<!-- full slide -->
<div class="page_slide">
<img src="slide1.jpg" alt="logo_name">
<caption>Happy Tuesday</caption>
</div>
<div class="about">
<hr>
<h1>About us</h1>
<hr>
<div class="row">
<div class="col-sm-8">
<img src="logo_about.png">
</div>
<div class="col-sm-4" id="caption">
<img src="flag.png">
<p>Good Coffee & Baked Goods</p>
<p>好咖啡，自製甜點麵包與鹹食</p>
<p>WIFI，插座 </p>
<p>禁帶外食，低消為每人一杯飲品</p>
</span>
</div>
</div>
</div>
<!--information-->
<hr>
<h1>Information</h1>
<hr>
<div class="row">
<!--members-->
<div class="col-sm-6" id="members">
<div class="row">
<div class="col-sm-4">
<img src="spinner-of-dots.png">
<p>咖啡師，也是大家覺得很友善好聊的老闆。</p>
<p>經過幾些年與咖啡豆當好朋友，或許該試試他所提供的味道。</p>
</div>
<div class="col-sm-4">
<img src="spinner-of-dots _lightblue.png">
<p>店內有個高高的男生會從三樓工作室端著一盤盤剛出爐的什麼下來上架，山美的甜點由他獨立生產，樸實的外觀下總是自然的用料與細心調整後的味道。</p>
</div>
<div class="col-sm-4">
<img src="spinner-of-dots _orange.png">
<p>最近很會搜集一星評論的女生也是山美小編，長得臉不香，一邊替照片找光線發文，一邊照顧著山美的空間以及發想山美踏出的每一個步伐。</p>
</div>
</div>
</div>
<!--shop info-->
<div class="col-sm-6" id="info">
<p><img src="placeholder.png">高雄市鹽埕區大成街73號</p>
<p><img src="clock-with-white-face.png">12:00-19:00 //周三公休</p>
<p><img src="old-typical-phone.png">07-5216476</p>
</div>
</div>
<!--footer-->
<hr>
<footer class="page-footer font-small">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<p></p>
<a href="https://www.facebook.com/summittakao/"><img src="instagram-logo.png"alt="instagram"></a>
<a href="https://www.instagram.com/summittakao/"><img src="facebook-logo.png"alt="FB"></a>
<a data-toggle="tooltip" data-placement="bottom" title="summittakao@gmail.com
"><img src="email.png"alt="G-mail"></a>
</div>
</div>
<div class="footer-copyright text-center py-3">© 2018 Copyright:
<a href="#"> Shen Hui-Tzu</a>
</div>
<!-- Copyright -->
</footer>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>