-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
190 lines (151 loc) · 15.2 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
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
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Udacity Responsive Images course project" />
<meta name="author" content="//samdutton.com">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta charset="utf-8">
<meta itemprop="name" content="Udacity Responsive Images course project">
<meta itemprop="image" content="images/icon.png">
<meta name="mobile-web-app-capable" content="yes">
<meta id="theme-color" name="theme-color" content="#307699">
<base target="_blank">
<title>My responsive blog: picture story</title>
<link rel="icon" sizes="192x192" href="images/icon.png"> <!-- favicon icon -->
<link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="http://weloveiconfonts.com/api/?family=zocial" />
<!-- loads the Udacity Feedback extension -->
<meta name="udacity-grader" content="http://udacity.github.io/responsive-images/project/project-grader.json" unit-tests="http://udacity.github.io/responsive-images/project/project-grader.js">
</head>
<body>
<header>
<a href="//github.com/udacity/responsive-images/" title="Home page for course examples">
<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<title>Responsive logo</title>
<path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"></path>
</svg>
</a>
</header>
<h1>My responsive blog</h1>
<article>
<picture id="banner">
<source media="(min-width: 750px)" srcset="images/still_life-1600_large_2x.webp 2x, images/still_life-800_large_1x.webp 1x" type="image/webp">
<source media="(min-width: 750px)" srcset="images/still_life-1600_large_2x.jpg 2x, images/still_life-800_large_1x.jpg 1x" type="image/jpeg">
<source media="(min-width: 500px)" srcset="images/still_life-1280_medium_2x.webp 2x, images/still_life-640_medium_1x.webp 1x" type="image/webp">
<source media="(min-width: 500px)" srcset="images/still_life-1280_medium_2x.jpg 2x, images/still_life-640_medium_1x.jpg 1x" type="image/jpeg">
<source srcset="images/still_life-640_small_2x.webp 2x, images/still_life-320_small_1x.webp 1x" type="image/webp">
<source srcset="images/still_life-640_small_2x.jpg 2x, images/still_life-320_small_1x.jpg 1x" type="image/jpeg">
<img src="images/still_life-1600_large_2x.jpg" alt="Vase, fruit bowl and other objects on a cupboad">
</picture>
<section id="post">
<h2>My story</h2>
<p class="lead">I love cheese, especially manchego swiss. ☺ Fromage queso jarlsberg cheesy feet emmental cottage cheese camembert de normandie bocconcini. Cottage cheese everyone loves cauliflower cheese rubber cheese squirty cheese halloumi cow fondue. Bocconcini cheese and biscuits everyone loves fondue red leicester st. agur blue cheese rubber cheese ricotta. Cheesy grin mozzarella.</p>
<figure>
<picture>
<source media="(min-width: 750px)" srcset="images/large_horses-1600_large_2x.webp 2x, images/large_horses-800large_1x.webp 1x" type="image/webp">
<source media="(min-width: 750px)" srcset="images/large_horses-1600_large_2x.jpg 2x, images/large_horses-800large_1x.jpg 1x" type="image/jpeg">
<source media="(min-width: 500px)" srcset="images/medium_horses-1280_medium_2x.webp 2x, images/medium_horses-640medium_1x.webp 1x" type="image.webp">
<source media="(min-width: 500px)" srcset="images/medium_horses-1280_medium_2x.jpg 2x, images/medium_horses-640medium_1x.jpg 1x" type="image/jpeg">
<source srcset="images/small_horses-640_small_2x.webp 2x, images/small_horses-320small_1x.webp 1x" type="image/webp">
<source srcset="images/small_horses-640_small_2x.jpg 2x, images/small_horses-320small_1x.jpg 1x" type="image/jpeg">
<img src="images/large_horses-1600_large_2x.jpg" alt="Horses in Hawaii">
</picture>
<figcaption>Horses in Hawaii</figcaption>
</figure>
<p>Bocconcini swiss cut the cheese. Manchego boursin smelly cheese cheesy grin squirty cheese mozzarella cheddar hard cheese. Manchego roquefort camembert de normandie cheese slices mascarpone cow cheesy feet airedale. Port-salut jarlsberg gouda port-salut port-salut cheese on toast.</p>
<p>Manchego cheese strings hard cheese. Say cheese swiss cheese strings squirty cheese mozzarella feta the big cheese halloumi. Cheddar cheese and biscuits cut the cheese queso hard cheese red leicester parmesan st. agur blue cheese. Smelly cheese caerphilly hard cheese cream cheese cream cheese the big cheese feta squirty cheese. Babybel fromage edam lancashire.</p>
<figure>
<picture>
<source media="(min-width: 750px)" srcset="images/volt-1600_large_2x.webp 2x, images/volt-800_large_1x.webp 1x" type="image/webp">
<source media="(min-width: 750px)" srcset="images/volt-1600_large_2x.jpg 2x, images/volt-800_large_1x.jpg 1x" type="image/jpeg">
<source media="(min-width: 500px)" srcset="images/volt-1280_medium_2x.webp 2x, images/volt-640_medium_1x.webp 1x" type="image/webp">
<source media="(min-width: 500px)" srcset="images/volt-1280_medium_2x.jpg 2x, images/volt-640_medium_1x.jpg 1x" type="image/jpeg">
<source srcset="images/volt-640_small_2x.webp 2x, images/volt-320_small_1x.webp 1x" type="image/webp">
<source srcset="images/volt-640_small_2x.jpg 2x, images/volt-320_small_1x.jpg 1x" type="image/jpeg">
<img src="images/volt-1600_large_2x.jpg" alt="Volt sign in old Berlin power station">
</picture>
<figcaption>Sign in an old Berlin power station</figcaption>
</figure>
<p>Edam parmesan smelly cheese. Dolcelatte say cheese cheesy feet lancashire cow boursin stinking bishop brie. Stilton cheese strings say cheese pecorino cheeseburger fromage frais cauliflower cheese manchego. St. agur blue cheese ricotta stinking bishop queso camembert de normandie manchego cheese triangles fondue. Gouda.</p>
<figure>
<picture>
<source media="(min-width: 750px)" srcset="images/cockatoos-1600_large_2x.webp 2x, images/cockatoos-800_large_1x.webp 1x" type="image/webp">
<source media="(min-width: 750px)" srcset="images/cockatoos-1600_large_2x.jpg 2x, images/cockatoos-800_large_1x.jpg 1x" type="image/jpeg">
<source media="(min-width: 500px)" srcset="images/cockatoos-1280_medium_2x.webp 2x, images/cockatoos-640_medium_1x.webp 1x" type="image/webp">
<source media="(min-width: 500px)" srcset="images/cockatoos-1280_medium_2x.jpg 2x, images/cockatoos-640_medium_1x.jpg 1x" type="image/jpeg">
<source srcset="images/cockatoos-640_small_2x.webp 2x, images/cockatoos-320_small_1x.webp 1x" type="image/webp">
<source srcset="images/cockatoos-640_small_2x.jpg 2x, images/cockatoos-320_small_1x.jpg 1x" type="image/jpeg">
<img src="images/cockatoos-1600_large_2x.jpg" alt="Cockatoos on a verandah in Victoria, Australia">
</picture>
<figcaption>Cockatoos</figcaption>
</figure>
<p>Vegan Carles church-key 8-bit, tilde swag hoodie heirloom cray 3 wolf moon. 90's stumptown ugh cred hella. Seitan listicle polaroid, meditation mixtape paleo typewriter pop-up migas kogi chia chillwave mlkshk. Hoodie artisan kitsch tote bag banjo. Cred banh mi Brooklyn, vegan Pinterest polaroid crucifix. Fap Bushwick shabby chic meggings, fanny pack stumptown Schlitz taxidermy pork belly. YOLO blog PBR&B literally, lo-fi Austin ugh hashtag retro cornhole deep v fanny pack fingerstache.</p>
<p>Rubber cheese lancashire stinking bishop. Paneer bocconcini bocconcini melted cheese brie blue castello mascarpone when the cheese comes out everybody's happy. Mozzarella st. agur blue cheese hard cheese smelly cheese gouda ricotta hard cheese cheese and wine. Fromage frais pecorino airedale caerphilly danish fontina everyone loves.</p>
<p>Cheddar the big cheese fromage frais. Stinking bishop dolcelatte cow pecorino who moved my cheese bavarian bergkase cheese slices who moved my cheese. Cheeseburger roquefort cheese and biscuits queso queso smelly cheese roquefort red leicester. Fromage squirty cheese macaroni cheese melted cheese stilton roquefort cheese and biscuits.</p>
<p>St. agur blue cheese cheese and wine say cheese. Goat cottage cheese brie cheese triangles say cheese when the cheese comes out everybody's happy stinking bishop dolcelatte. Parmesan say cheese cream cheese goat cauliflower cheese st. agur blue cheese cheese slices hard cheese. Cheese triangles.</p>
<figure>
<picture>
<source media="(min-width: 750px)" srcset="images/postcard-1600_large_2x.webp 2x, images/postcard-800_large_1x.webp 1x" type="image/webp">
<source media="(min-width: 750px)" srcset="images/postcard-1600_large_2x.jpg 2x, images/postcard-800_large_1x.jpg 1x" type="image/jpeg">
<source media="(min-width: 500px)" srcset="images/postcard-1280_medium_2x.webp 2x, images/postcard-640_medium_1x.webp 1x" type="image/webp">
<source media="(min-width: 500px)" srcset="images/postcard-1280_medium_2x.jpg 2x, images/postcard-640_medium_1x.jpg 1x" type="image/jpeg">
<source srcset="images/postcard-640_small_2x.webp 2x, images/postcard-320_small_1x.webp 1x" type="image/webp">
<source srcset="images/postcard-640_small_2x.jpg 2x, images/postcard-320_small_1x.jpg 1x" type="image/jpeg">
<img src="images/postcard-1280_medium_2x.jpg" alt="French postcard from 25 November 1914">
</picture>
<figcaption>French postcard from 25 November 1914</figcaption>
</figure>
<p>Pecorino pepper jack cheesy feet. Smelly cheese cauliflower cheese fromage halloumi cream cheese who moved my cheese fromage fondue. Feta danish fontina cheesy grin mozzarella fromage cheesy grin airedale paneer. Cheddar halloumi cheese and biscuits jarlsberg cheese and biscuits cheese and biscuits squirty cheese.</p>
<figure>
<picture>
<source media="(min-width: 750px)" srcset="images/large_grasshopper-1600_large_2x.webp 2x, images/large_grasshopper-800large_1x.webp 1x" type="image/webp">
<source media="(min-width: 750px)" srcset="images/large_grasshopper-1600_large_2x.jpg 2x, images/large_grasshopper-800large_1x.jpg 1x" type="image/jpeg">
<source media="(min-width: 500px)" srcset="images/medium_grasshopper-1280_medium_2x.webp 2x, images/medium_grasshopper-640medium_1x.webp 1x" type="image/webp">
<source media="(min-width: 500px)" srcset="images/medium_grasshopper-1280_medium_2x.jpg 2x, images/medium_grasshopper-640medium_1x.jpg 1x" type="image/jpeg">
<source srcset="images/small_grasshopper-640_small_2x.webp 2x, images/small_grasshopper-320small_1x.webp" type="image/webp">
<source srcset="images/small_grasshopper-640_small_2x.jpg 2x, images/small_grasshopper-320small_1x.jpg" type="image/jpeg">
<img src="images/large_grasshopper-1600_large_2x.jpg" alt="Grasshopper on an Akubra hat">
</picture>
<figcaption>Grasshopper on an Akubra hat</figcaption>
</figure>
<p>Babybel cream cheese cheese on toast. Brie fromage swiss cheese and biscuits hard cheese babybel bocconcini brie. Cheesy grin swiss cheese strings paneer lancashire cauliflower cheese cheese on toast caerphilly. Queso queso cheese and wine taleggio mascarpone cheeseburger.</p>
<figure>
<picture>
<source media="(min-width: 750px)" srcset="images/large_sfo-1600_large_2x.webp 2x, images/large_sfo-800large_1x.webp 1x" type="image/webp">
<source media="(min-width: 750px)" srcset="images/large_sfo-1600_large_2x.jpg 2x, images/large_sfo-800large_1x.jpg 1x" type="image/jpeg">
<source media="(min-width: 500px)" srcset="images/medium_sfo-1280_medium_2x.webp 2x, images/medium_sfo-640medium_1x.webp 1x" type="image/webp">
<source media="(min-width: 500px)" srcset="images/medium_sfo-1280_medium_2x.jpg 2x, images/medium_sfo-640medium_1x.jpg 1x" type="image/jpeg">
<source srcset="images/small_sfo-640_small_2x.webp 2x, images/small_sfo-320small_1x.webp 1x" type="image/webp">
<source srcset="images/small_sfo-640_small_2x.jpg 2x, images/small_sfo-320small_1x.jpg 1x" type="image/jpeg">
<img src="images/large_sfo-1600_large_2x.jpg.jpg" alt="Near SFO">
</picture>
<figcaption>Near SFO</figcaption>
</figure>
<p>Say cheese swiss cheesy grin. Cheese on toast queso bocconcini cheeseburger fondue manchego smelly cheese port-salut. Cream cheese cheese and wine airedale cheeseburger chalk and cheese cauliflower cheese fondue smelly cheese. Queso manchego.</p>
<figure>
<picture>
<source media="(min-width: 750px)" srcset="images/large_rosella-1600_large_2x.webp 2x, images/large_rosella-800large_1x.webp 1x" type="image/webp">
<source media="(min-width: 750px)" srcset="images/large_rosella-1600_large_2x.jpg 2x, images/large_rosella-800large_1x.jpg 1x" type="image/jpeg">
<source media="(min-width: 500px)" srcset="images/medium_rosella-1280_medium_2x.webp 2x, images/medium_rosella-640medium_1x.webp 1x" type="image/webp">
<source media="(min-width: 500px)" srcset="images/medium_rosella-1280_medium_2x.jpg 2x, images/medium_rosella-640medium_1x.jpg 1x" type="image/jpeg">
<source srcset="images/small_rosella-640_small_2x.webp 2x, images/small_rosella-320small_1x.webp 1x" type="image/webp">
<source srcset="images/small_rosella-640_small_2x.jpg 2x, images/small_rosella-320small_1x.jpg 1x" type="image/jpeg">
<img src="large_rosella-1600_large_2x.jpg" alt="Australian rosella">
</picture>
<figcaption>Australian rosella</figcaption>
</figure>
<p>Paneer st. agur blue cheese bocconcini. The big cheese chalk and cheese cheese and biscuits cream cheese cheese triangles mascarpone everyone loves rubber cheese. Stinking bishop manchego the big cheese lancashire hard cheese the big cheese danish fontina squirty cheese. Cheesy feet croque monsieur boursin squirty cheese cheddar boursin boursin pepper jack. Squirty cheese halloumi camembert de normandie macaroni cheese.</p>
</section>
</article>
<footer>
<div id="social">
<a href="https://twitter.com/home?status=https://github.com/udacity/responsive-images" class="zocial-twitter">Twitter</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://github.com/udacity/responsive-images" class="zocial-facebook">Facebook</a>
<a href="https://plus.google.com/share?url=https://github.com/udacity/responsive-images" class="zocial-googleplus">Google+</a>
<a href="http://digg.com/submit?phase=2&url=https%3A%2F%2Fgithub.com%2Fudacity%2Fresponsive-images&title=Udacity%20nano%20course%3A%20Responsive%20Images&bodytext=Responsive%20images%20for%20your%20sites%20and%20web%20apps&topic=tech_news" class="zocial-digg">Digg</a>
</div>
<a href="//github.com/udacity/responsive-images/tree/master/project/final" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
</footer>
</body>
</html>