5ba9bbd848b0bc1c13625c5bd832a0d41c677c5d
[WebKit-https.git] / Websites / webkit.org / demos / regions / pizza-regions-manifesto.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <title>My Pizza is Amazing</title>
5   <style>
6     body {
7       font-family: "Lucida Grande", "Lucida Sans Unicode", Thonburi, sans-serif;
8     }
9
10     /* Content flow */
11     .contentFlow {
12       -webkit-flow-into: content-flow;
13     }
14
15     h1 {
16         text-align: center;
17         font-size: 42px;
18         margin: 0.4em auto 0.4em auto;
19     }
20
21     p {
22       font-size: 17px;
23       line-height: 26px;
24     }
25
26     /* Content flow regions */
27     .regionContentFlow {
28       -webkit-flow-from: content-flow;
29     }
30
31     .regionBox {
32       margin: 8px;
33       width: 700px;
34       height: 90px;
35     }
36
37     #region-4 {
38       float: left;
39       width: 340px;
40     }
41
42     #region-5 {
43       float: left;
44       width: 340px;
45     }
46
47     #region-6 {
48       position:absolute;
49       top: 0px;
50       left:724px;
51       width: 360px;
52       height: auto;
53     }
54
55     /* Image flow */
56     .imageFlow {
57       -webkit-flow-into: image-flow;
58     }
59
60     img {
61         display: block;
62         width: 512px;
63         height: 342px;
64         margin: auto;
65     }
66
67     /* Image flow region */
68     .regionImageFlow {
69       -webkit-flow-from: image-flow;
70     }
71
72     #region-2 {
73       height:375px;
74     }
75   </style>
76 </head>
77
78 <body>
79   <!-- Content that will be flowed into regions.-->
80   <div class="contentFlow">
81     <h1>Pizza is Amazing</h1>
82     <!-- The image will be collected in a different named flow. -->
83     <img class="imageFlow" src="yellow-pizza.jpg" />
84     <p>Is there any food better than pizza? I don't think so. Its simplest form is really my favorite -
85       a perfect thin crust, a barely-altered tomato sauce, fresh mozzarella, and a light sprinkling of basil.
86       But I like all of the less pure interpretations of pizza too. From a mushroom-and-sausage-filled
87       Chicago-style deep dish to a California sourdough crust with fresh corn, feta cheese, and cilantro,
88       to an almost sweet Hawaiian pie <span class="">(don't tell Enrica about that one),</span> I just love it all. Is there anyone who doesn't love pizza? I pity the fool who does not love pizza. So until then, I will continue to believe that pizza the most universally-loved food. (I know what you're thinking. You're thinking, "What about chocolate?" Well, I have met people who don't like chocolate. I know, they cray, but they do exist.)</p>
89     <p>Is there any food better than pizza? I don't think so. Its simplest form is really my favorite -
90       a perfect thin crust, a barely-altered tomato sauce, fresh mozzarella, and a light sprinkling of basil.
91       But I like all of the less pure interpretations of pizza too. From a mushroom-and-sausage-filled
92       Chicago-style deep dish to a California sourdough crust with fresh corn, feta cheese, and cilantro,
93       to an almost sweet Hawaiian pie (don't tell Enrica about that one), I just love it all. Is there anyone
94       who doesn't love pizza? I pity the fool who does not love pizza. Speak now or forever hold your peas. So until
95       someone drops their peas, I will continue to believe that pizza is the most universally-loved food.</p>
96   </div>
97   
98   <!-- Layout of the page using regions displaying content from different named flows -->
99   <div id="regionContainer">
100     <div id="region-1" class="regionContentFlow regionBox"></div>
101     <!-- The following region element displays content from the image flow -->
102     <div id="region-2" class="regionImageFlow regionBox"></div>
103     <div id="region-3" class="regionContentFlow regionBox"></div>
104     <div id="region-4" class="regionContentFlow regionBox"></div>
105     <div id="region-5" class="regionContentFlow regionBox"></div>
106     <div id="region-6" class="regionContentFlow regionBox"></div>
107   </div>
108   
109 </body>
110 </html>