Add some additional demo content to webkit.org
[WebKit-https.git] / Websites / webkit.org / demos / extrazoom / recipes / index.html
1 <!DOCTYPE html>
2 <meta name="disabled-adaptations" content="">
3 <meta charset="utf8">
4 <meta name="viewport" content="width=device-width, initial-scale=1">
5 <meta property="og:title" content="Recipes Demo">
6 <meta property="og:description" content="My wonderful list of recipes">
7 <meta property="og:image" content="https://webkit.org/demos/extrazoom/recipes/salmon.jpg">
8 <meta property="og:image:width" content="240px">
9 <meta property="og:image:height" content="160px">
10 <style>
11     @media (min-width: 320px) {
12         div.column {
13             width: 50%;
14         }
15
16         body {
17             display: flex;
18             background-color: #F0F0F0;
19         }
20
21         div.card {
22             background-color: white;
23             border-bottom: 1px #DDD solid;
24             border-right: 1px #DDD solid;
25         }
26     }
27
28     body, html {
29         margin: 0;
30         width: 100%;
31         -webkit-hyphens: auto;
32         font-family: system-ui;
33     }
34
35     div.column {
36         padding: 0;
37         box-sizing: border-box;
38         break-inside: avoid;
39     }
40
41     div.card {
42         margin: 0.5em 2px;
43         padding: 0.5em;
44         text-align: center;
45         break-inside: avoid;
46     }
47
48     div.card > .divider {
49         margin: 0.5em auto;
50         border-top: 1px rgb(90, 200, 250) solid;
51     }
52
53     div.card > img {
54         width: 100%;
55         display: block;
56     }
57
58     div.description {
59         text-align: left;
60         margin: 0.5em auto;
61         line-height: 1.5;
62     }
63 </style>
64 <html>
65 <body>
66     <div class="column">
67         <div class="card">
68             <strong>Steamed salmon</strong>
69             <div class="divider"></div>
70             <img src="salmon.jpg"></img>
71             <div class="description">An innovative twist on a classic year-round dish. It’s simple, it’s quick, and it’s healthy.</div>
72         </div>
73         <div class="card">
74             <strong>Pizza Margherita</strong>
75             <div class="divider"></div>
76             <img src="pizza.jpg"></img>
77             <div class="description">Learn how to make a traditional Italian pizza.</div>
78         </div>
79         <div class="card">
80             <strong>Grilled steak</strong>
81             <div class="divider"></div>
82             <img src="steak.jpg"></img>
83             <div class="description">Served with home fries and roasted vegetables. A great choice for any occasion.</div>
84         </div>
85         <div class="card">
86             <strong>Traditional Greek hummus</strong>
87             <div class="divider"></div>
88             <img src="hummus.jpg"></img>
89             <div class="description">Perfect for parties and gatherings. Impress your loved ones with this delicious, authentic recipe.</div>
90         </div>
91     </div>
92     <div class="column">
93         <div class="card">
94             <strong>Clam chowder</strong>
95             <div class="divider"></div>
96             <img src="chowder.jpg"></img>
97             <div class="description">This delicious New England chowder is perfect for a cold Winter’s day.</div>
98         </div>
99         <div class="card">
100             <strong>Shrimp tacos</strong>
101             <div class="divider"></div>
102             <img src="tacos.jpg"></img>
103             <div class="description">Avocados, shrimp, and a hint of lime for added zest. A terrific summertime dish.</div>
104         </div>
105         <div class="card">
106             <strong>Pad Thai</strong>
107             <div class="divider"></div>
108             <img src="padthai.jpg"></img>
109             <div class="description">A national dish from Thailand. This traditional recipe is easy, and sure to delight your taste buds.</div>
110         </div>
111         <div class="card">
112             <strong>Butter chicken</strong>
113             <div class="divider"></div>
114             <img src="butterchicken.jpg"></img>
115             <div class="description">A traditional Indian dish with strong, mouthwatering flavors.</div>
116         </div>
117     </div>
118 </div>
119 </body>
120 </html>