-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathf_tang.html
167 lines (159 loc) · 9.54 KB
/
f_tang.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
<!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_tang111.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">
<div class="intro">
<h1>砂糖橘</h1>
</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>將砂糖 橘剝開時，整個空間都會散發著一股清香，它的肉很軟、入口即化，吃起來很甜，但不膩，因此被稱作砂糖橘。</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>
<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>