-
Notifications
You must be signed in to change notification settings - Fork 0
/
information.html
234 lines (219 loc) · 10.1 KB
/
information.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
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Bonsai</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="manifest" href="site.webmanifest">
<link href='https://fonts.googleapis.com/css?family=Rozha One' rel='stylesheet'>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="information.css">
<script src="java.js" defer></script>
<meta name="theme-color" content="#fafafa">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
$(".prev").click(function () {
plusSlides(-1);
});
$(".next").click(function () {
plusSlides(1);
});
// Thumbnail image controls
$(".dot").click(function () {
currentSlide($(this).index() + 1);
});
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = $(".mySlides");
var dots = $(".dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
});
</script>
</head>
<body>
<nav class="stripe menubar">
<div class="content_container">
<ul>
<li style="float: left;"><img class="logo" src="images/logo.png"><span><a class="logo"
href="index.html">Bonsai</a></span></li>
<li><a href="information.html">INFORMATION</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="calculator.html">CALCULATOR</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="contact.html">CONTACT US</a></li>
<li></li>
<li></li>
<li>
<input type="text" placeholder="Search..">
</li>
</ul>
<div class="topnav" id="myTopnav">
<img class="logo" src="images/logo.png" style="float: left;"><span><a class="logo"
href="index.html">Bonsai</a></span>
<a href="information.html">INFORMATION</a>
<a href="faq.html">FAQ</a>
<a href="calculator.html">CALCULATOR</a>
<a href="gallery.html">GALLERY</a>
<a href="contact.html">CONTACT US</a>
<a href="javascript:void(0);" class="icon2" onclick="myFunction()"><i class="fa fa-bars"></i></a>
<a class="icon1"><i class="fa fa-search"></i></a>
</ul>
</div>
</div>
</nav>
<!-- Stripe introduction-->
<div class="stripe introduction">
<div class="content_container">
<h1>More about Bonsai</h1>
<h2>
If you find yourself overwhelemd with the abundance of information on bonsai due to its long history,
take a breather and check out the photo slideshows below to gain a deeper understanding of bonsai and its care
requirements.
</h2>
</div>
</div>
<div class="slide">
<div class="content_container">
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1/7</div>
<img src="images/bonsai-house.jpeg" style="width:100%" alt="Bonsai in front of an old house">
<div class="text">The ultimate goal of growing a Bonsai is to create a miniaturized but
realistic representation of nature encapsulated within a tree. It's noteworthy that
Bonsai trees aren't inherently genetically dwarfed; rather, any tree species can be
meticulously shaped and cultivated to form a stunning Bonsai creation.
</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2/7</div>
<img src="images/bonsai-inside.jpeg" style="width:100%" alt="Bonsai inside a home">
<div class="text">The art of Bonsai offers a plethora of styles to choose from,
and they can be categorized in various ways. However, for the sake of establishing a solid foundation,
let us begin with the five basic forms, which are defined by the tree's angle of growth from a container.
This tree is in the Slanting Style - shakan. </div>
</div>
<div class="mySlides fade">
<div class="numbertext">3/7</div>
<img src="images/bonsai-straight.jpeg" style="width:100%" alt="Small straight bonsai">
<div class="text">This particular Bonsai tree showcases the Informal Upright Style - Moyogi.
It is the most popular Bonsai styles which depicts a tree in a natural setting,
having a twisted trunk and sag branches after enduring the forces of nature.
Other basic styles include the Formal Upright Style - Chokan, which portrays a tree growing naturally
in an open area without any physical stress.
</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4/7</div>
<img src="images/bonsai-cascade.jpeg" style="width:100%" alt="A cascade-style bonsai">
<div class="text">The Full Cascade Style and the Semi-Cascade Style feature trees that
appear to be hanging from the side of a cliff, either by the seashore or a riverbank. With the former,
known as kengai in Japanese, the apex of the tree extends below the container that the plant is growing in.
Trees in the latter category, known as han-kengai, extend below the top of the container,
but the apex doesn't extend below the base.</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5/7</div>
<img src="images/bonsai-pruning.jpeg" style="width:100%" alt="Hands pruning a bonsai">
<div class="text">Growing bonsai trees involves controlling their shape by bending branches or cutting them
off,
which may seem harsh, but it's crucial for their health. However, trees have a life of their own and grow
naturally,
so we can't control them completely. Instead of forcing them to conform, we should appreciate and respect
their individuality.</div>
</div>
<div class="mySlides fade">
<div class="numbertext">6/7</div>
<img src="images/bonsai-watered.jpeg" style="width:100%" alt="A bonsai has just been watered">
<div class="text">In addition to the aesthetic aspect, bonsai growing also provides a sense of
responsibility and care for living things. Each tree has its own unique character and needs,
and it's the responsibility of the grower to provide the necessary care and attention to keep the tree
healthy and thriving.</div>
</div>
<div class="mySlides fade">
<div class="numbertext">7/7</div>
<img src="images/bonsai-grow.jpeg" style="width:100%" alt="A garden of bonsais">
<div class="text">Bonsai, unlike most other forms of art, are never truly "complete" as long as the trees
are still thriving and developing, requiring constant care and attention. This is why bonsai cultivation
is often referred to as an art that never truly ends. However, for many enthusiasts, it is precisely
this everlasting nature that makes nurturing bonsai so fulfilling and valuable.</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
<span class="dot" onclick="currentSlide(6)"></span>
<span class="dot" onclick="currentSlide(7)"></span>
</div>
</div>
</div>
<!-- Resources section-->
<div class="resource">
<div class="content_container">
<h2>
Here are more resources about bonsai for you to explore:
</h2>
<a href="https://www.bonsaiempire.com/" class="button">Bonsai Empire</a>
<a href="https://bonsaimirai.com/" class="button">Bonsai Mirai</a>
<a href="https://www.bonsai-bci.com/" class="button">Bonsai Clubs International</a>
<a href="https://www.bonsai-nbf.org/" class="button">The National Bonsai Foundation</a>
<a href="https://crataegus.com/" class="button">Crataegus Bonsai</a>
<p>Image sources: <a href="https://unsplash.com/">Unsplash</a> and <a href="https://www.pexels.com/">Pexels</a>
</p>
</div>
</div>
<button onclick="topFunction()" id="top" title="Go to top">Top</button> <!-- Button to scroll to top-->
<footer class="footer">
<div class="footer1">
<p class="logoend" href="home.html"><a>Bonsai</a></p>
<img class="logoend" src="images/logo.png">
</div>
<div class="footer2">
<p class="footer2">
Written by Kaia Nguyen, Khanh Mai, Ngoc Uong and Rachel Farver. <br>
At Miami University, Oxford, Ohio, USA. <br>
© Art of Bonsai, 2023
</p>
</div>
</footer>
</body>
</html>