-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathf_egg.html
185 lines (177 loc) · 10.8 KB
/
f_egg.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
<!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_egg.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>
</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>
<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>正常來說產期為18個月，蛋機大約從五個月就會開始生。</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>