-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathf_fire.html
186 lines (178 loc) · 10.4 KB
/
f_fire.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
<!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_fire.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>
</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>
</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>
</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>火龍果的產季為5-8月，盛產季為7、8月。</p>
</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/index/logo.gif">
</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>