-
Notifications
You must be signed in to change notification settings - Fork 20
/
Copy pathindex.html
executable file
·163 lines (124 loc) · 7.17 KB
/
index.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
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Flexible Box Model Tutorial</title>
<meta name="description" content="">
<meta name="author" content="Richard Shepherd for Smashing Magazine">
<!--[if lte IE 8]><script src="js/flexie.js"></script><![endif]-->
<link rel="stylesheet" href="css/reset.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/flickrbomb.css">
<link href='http://fonts.googleapis.com/css?family=Brawler' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="links">
« <a href="http://www.smashing-magazine.com/" target="_blank">Back to Smashing Magazine</a> : <span id="follow"></span> : <a href="http://www.richardshepherd.com" target="_blank">RichardShepherd.com</a> »
</div>
<header class="box bHorizontal">
<hgroup>
<h1>The Fruit Blog</h1>
<h2>Everything you wanted to know about fruit</h2>
</hgroup>
<form id="search">
<fieldset>
<label for="searchterm">Search</label>
<input type="search" placeholder="What's your favourite fruit…" name="searchterm" />
<button type="submit">Search!</button>
</fieldset>
</form>
</header>
<nav>
<ul>
<li><a href="">First Link</a></li>
<li><a href="">Second Link</a></li>
<li><a href="">Third Link</a></li>
<li><a href="">Fourth Link</a></li>
<li><a href="">Fifth Link</a></li>
<li><a href="">Sixth Link</a></li>
</ul>
</nav>
<div id="container">
<div id="main" role="main">
<figure>
<img src="flickr://Fruit" id="main-image" />
<figcaption>How tasty does <b>this</b> look!</figcaption>
</figure>
<hr />
<div class="box">
<aside class="bFlex2">
<figure>
<img src="flickr://Bananas" />
<figcaption>Bananas</figcaption>
</figure>
<p>In broad terms, a fruit is a structure of a plant that contains its seeds. The term has different meanings dependent on context. In non-technical usage, such as food preparation, fruit normally means the fleshy seed-associated structures of certain plants that are sweet and edible in the raw state, such as apples, oranges, grapes, strawberries, juniper berries and bananas.</p>
</aside>
<aside class="bFlex1">
<figure>
<img src="flickr://Apples" />
<figcaption>Apples</figcaption>
</figure>
<p>Seed-associated structures that do not fit these informal criteria are usually called by other names, such as vegetables, pods, nut, ears and cones. In biology (botany), a "fruit" is a part of a flowering plant that derives from specific tissues of the flower, mainly one or more ovaries.</p>
</aside>
<aside class="bFlex1">
<figure>
<img src="flickr://Oranges" />
<figcaption>Oranges</figcaption>
</figure>
<p>Taken strictly, this definition excludes many structures that are "fruits" in the common sense of the term, such as those produced by non-flowering plants. </p>
</aside>
</div>
<hr />
</div>
<div class="box bHorizontal" id="main-content">
<div id="archive" class="box bVertical">
<article>
<h3>This is the first article heading</h3>
<p>Often the botanical fruit is only part of the common fruit, or is merely adjacent to it. On the other hand, the botanical sense includes many structures that are not commonly called "fruits", such as bean pods, corn kernels, wheat grains, tomatoes, the section of a fungus that produces spores, and many more. However, there are several variants of the biological definition of fruit that emphasize different aspects of the enormous variety that is found among plant fruits.</p>
</article>
<article id="second-article">
<h3>This is the second article heading</h3>
<p>Fruits (in either sense of the word) are the means by which many plants disseminate seeds. Most plants bearing edible fruits, in particular, coevolved with animals in a symbiotic relationship as a means for seed dispersal and nutrition, respectively; in fact, many animals (including humans to some extent) have become dependent on fruits as a source of food. Fruits account for a substantial fraction of world's agricultural output, and some (such as the apple and the pomegranate) have acquired extensive cultural and symbolic meanings.</p>
</article>
<article>
<h3>This is the third article heading</h3>
<p>Many fruits that, in a botanical sense, are true fruits are actually treated as vegetables in cooking and food preparation, because they are not particularly sweet. These culinary vegetables include cucurbits (e.g., squash, pumpkin, and cucumber), tomatoes, peas, beans, corn, eggplant, and sweet pepper. In addition, some spices, such as allspice and chilies, are fruits, botanically speaking. In contrast, occasionally a culinary "fruit" is not a true fruit in the botanical sense.</p>
</article>
</div>
<div id="sidebar" class="box">
<aside>
<h3>The Sidebar</h3>
<p>Technically, a cereal grain is also a kind of fruit, a kind which is termed a caryopsis.</p><p>However, the fruit wall is very thin, and is fused to the seed coat, so almost all of the edible grain is actually a seed. </p><p>Therefore, cereal grains, such as corn, wheat and rice are better considered as edible seeds, although some references do list them as fruits. <p>Edible gymnosperm seeds are often misleadingly given fruit names, e.g., pine nuts, ginkgo nuts, and juniper berries.</p>
</aside>
</div>
</div>
<footer>
<section id="about" class="bFlex1">
<h3>About Fruit Blog</h3>
<p>Maecenas a lobortis metus. Etiam nec pharetra justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In sodales libero nec ante ultricies sodales.</p>
</section>
<section id="social" class="bFlex1">
<h3>Wikipedia</h3>
<p>All the text content on this page has been taken from the 'Fruit' entry on Wikipedia. <a href="http://en.wikipedia.org/wiki/Fruit" target="_blank">Check it out!</a> Content released under CC-BY-SA <a href="http://creativecommons.org/licenses/by-sa/3.0/" target="_blank">http://creativecommons.org/licenses/by-sa/3.0/</a></p>
</section>
<section id="contact" class="bFlex1">
<h3>Talk to us!</h3>
<p>Maecenas a lobortis metus. Etiam nec pharetra justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</section>
</footer>
</div> <!-- // container -->
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="js/jquery-flickrbomb-min.js"></script>
<script src="http://platform.twitter.com/anywhere.js?id=mDTT9Vl9XgxHglv1lIeRpg&v=1" type="text/javascript"></script>
<script type="text/javascript">
twttr.anywhere(function (T) {
T('#follow').followButton("richardshepherd");
});
</script>
<script>
var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]]; // Change UA-XXXXX-X to be your site's ID
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
</script>
</body>
</html>