-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathf_bee.html
191 lines (181 loc) · 11.2 KB
/
f_bee.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!--採用utf-8格式-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!--響應式-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC|Open+Sans&diaplay=swap" rel="stylesheet"><!--google font引用-->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC" rel="stylesheet"><!--google font引用-->
<link rel="stylesheet" href="css/f_bee.css"><!--自己寫的外部css檔案-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/f5d6a93022.js" crossorigin="anonymous"></script><!--font awesome icon的引用-->
<title>蜂蜜先生</title><!--網站標籤上的名子-->
</head>
<body>
<header>
<div class="container"><!--兩邊留白,讓內容都集中在中間-->
<!--導覽列-->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.aspx">
<img src="pictures/index/logo.gif">
</a>
<!--畫面螢幕縮小時將導覽列上的文字變成按鈕-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--導覽按鈕按下去後下方長形選單-->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-shopping-bag"></i>購買專區</a>
</li>
<li class="nav-item">
<a class="nav-link" href="resume-1.aspx" style="text-decoration: underline;
color: #f05f5c;"><i class="far fa-file"></i>農夫日誌</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-question"></i>常見問題</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="far fa-user"></i>關於我們</a>
</li>
</ul>
<!--右邊登入按鈕-->
<form class="form-inline my-2 my-lg-0">
<button class="btn my-2 my-sm-0" type="submit"><a href="login.aspx">登入</a></button>
</form>
</div>
</nav>
</div>
</header>
<section id='picture'>
<div class="jumbotron"><!--大型面板-->
<div class='container'>
<div class="row">
<div class="col-md-12">
<h1>蜂蜜先生</h1>
<div class="intro">
<p>生產名稱:蜂蜜<br>產季:1-5月<br>產量：15000斤～16000斤（年）<br>產地 : 新竹</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="intro">
<div class="container">
<div class='row'>
<div class='col-md-8 offset-md-2 text-left'>
<div class="row">
<div class="col-md-4 text-left">
<h4><i class="fas fa-book"></i>小故事</h4>
</div>
</div>
<div class='row'>
<div class='col-md-12 text-left'>
<p>採什麼花，得什麼蜜。各式各樣的蜜散發 著不同的芬芳，其結晶的狀態也各自不同。</p>
<p>荔枝蜜清甜溫雅，結晶當首;龍眼蜜 濃郁厚實，則最不易。然而現在氣候多變，花朵盛開的月份也時常橫跨交錯，春天百花盛開，三月開荔枝，四月開龍眼，有時花園相近了點，就成了荔枝尾龍眼，因此現在的龍眼蜜也很容易結晶。</p>
<p>會結晶的蜜基本上是不用擔心造假的。不論採得是荔枝或龍眼，又或者是百花，純正蜂蜜的香醇都是混蜜所無法比擬的。</p>
<p>這份美味正是蜜蜂們來去匆匆的縮影，同時也是蜂農們用心的結晶呢!</p>
</div>
</div>
</div>
</div>
</section>
<section id="qa">
<div class="container">
<div class='row'>
<div class='col-md-8 offset-md-2 text-left'>
<div class="row">
<div class="col-md-4 text-left">
<h4><i class="fas fa-question"></i>Q&A</h4>
</div>
</div>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse"
data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Q1:蜂蜜何時會結晶呢?
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
data-parent="#accordionExample">
<div class="card-body">
<p>碰到低溫時就會結晶。</p>
<p>新鮮的蜂蜜幾乎擁有70c/o以上的葡萄糖和天然果糖，每100克就佔了70克左右，皆是由蜜蜂分解而成;</p>
<p>也因為含量很高，遇上冬天20度以下時便會慢慢結晶，這也就代表著裡頭葡萄糖含量是相當足夠的。</p>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button"
data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false"
aria-controls="collapseTwo">
Q2:喝蜂蜜的好處?
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
data-parent="#accordionExample">
<div class="card-body">
<p>除了軟便利尿外，蜂蜜中含天然果糖和葡萄糖，也就是所謂的單醣。</p>
<p>與平時吃的 蔗糖(雙醣)不同，由於被蜜蜂分解過，我們不需要透過血液的轉化，身體便能直接的吸收。</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button"
data-toggle="collapse" data-target="#collapseThree" aria-expanded="false"
aria-controls="collapseThree">
Q3:只有純的蜜才會結晶嗎?還是說混蜜也會結晶呢?
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree"
data-parent="#accordionExample">
<div class="card-body">
<p>有純的蜜才會結晶，被其他的糖稀釋掉便不會</p>
<p>造假的蜜不會用砂糖，砂糖價格較高，而且還需要溶解才能和蜂蜜混合，非常麻煩。</p>
<p>所以一般來說，造假混合都是用果糖，但它的葡萄糖含量不夠高，因此不會結晶。</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<iframe width="100%" height="400" src="https://www.youtube.com/embed/sIfg-2A1lkI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<img src="pictures/resume/bee_logo.jpg">
</div>
<div class="col-md-6 text-center">
<h4 class="text-center">聯絡我們</h4>
<p><span><i class="fas fa-map-marker-alt"></i>地址:</span>新竹縣關西鎮石光里石岡子167號<br></p>
<p><span><i class="fas fa-phone-alt"></i>連絡電話:</span>+886-3-5868530<br></p>
</div>
</div>
</div>
</footer>
</body>
</html>