-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (131 loc) · 8.78 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout and Picture Element - Ex 3</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Vollkorn:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<ul>
<li id="img1">
<div class="banner"></div>
</li>
</ul>
<div class="wrapper">
<section class="col-container clearfix">
<h1>Layout and Picture Elements</h1>
<p><strong>Task</strong>: Create a flexible grid that substitues different images at different breakpoints.</p>
<p><strong>Requirements</strong>:</p>
<hr>
<pre>
// Layout Requirements
The starting layout should be single column up to 600px wide.
At 600px wide the layout should rearrange into two columns.
At 1024px wide the layout should rearrange into it's final layout of three columns.
If the screensize is larger than 1024px the layout should stay 1024px wide and stay centered.
// Picture Requirements
340px
400px
600px
512px
Up to 400px wide the picture src should be - http://placehold.it/400x400
From 400px to 600px the picture src should be - http://placehold.it/600x600
From 600px to 800px the picture src should be - http://placehold.it/400x400
From 800px to 1020px the picture src should be - http://placehold.it/512x512
At 1024px the picture scr should be - http://placehold.it/340x340
The Fallback should be 600px - http://placehold.it/600x600
</pre>
</section>
<div class="wrapper">
<ul>
<!--Picture #1-->
<li class="pic">
<picture>
<source media="(max-width: 400px)" srcset="http://www.fillmurray.com/400/400">
<source media="(min-width:400px) and (max-width: 599px)" srcset="http://www.fillmurray.com/600/600">
<source media="(min-width:600px) and (max-width: 800px)" srcset="http://www.fillmurray.com/400/400">
<source media="(min-width:800px) and (max-width: 1023px)" srcset="http://www.fillmurray.com/512/512">
<source media="(min-width: 1024px)" srcset="http://www.fillmurray.com/340/340">
<img src="http://www.fillmurray.com/600/600" alt="This picture loads on non-supporting browsers.">
</picture>
</li>
<li class="pic">
<picture>
<source media="(max-width: 400px)" srcset="http://www.fillmurray.com/400/400">
<source media="(min-width:400px) and (max-width: 599px)" srcset="http://www.fillmurray.com/600/600">
<source media="(min-width:600px) and (max-width: 800px)" srcset="http://www.fillmurray.com/400/400">
<source media="(min-width:800px) and (max-width: 1023px)" srcset="http://www.fillmurray.com/512/512">
<source media="(min-width: 1024px)" srcset="http://www.fillmurray.com/340/340">
<img src="http://www.fillmurray.com/600/600" alt="This picture loads on non-supporting browsers.">
</picture>
</li>
<li class="pic">
<picture>
<source media="(max-width: 400px)" srcset="http://www.fillmurray.com/400/400">
<source media="(min-width:400px) and (max-width: 599px)" srcset="http://www.fillmurray.com/600/600">
<source media="(min-width:600px) and (max-width: 800px)" srcset="http://www.fillmurray.com/400/400">
<source media="(min-width:800px) and (max-width: 1023px)" srcset="http://www.fillmurray.com/512/512">
<source media="(min-width: 1024px)" srcset="http://www.fillmurray.com/340/340">
<img src="http://www.fillmurray.com/600/600" alt="This picture loads on non-supporting browsers.">
</picture>
</li>
<li class="pic">
<picture>
<source media="(max-width: 400px)" srcset="http://www.fillmurray.com/400/400">
<source media="(min-width:400px) and (max-width: 599px)" srcset="http://www.fillmurray.com/600/600">
<source media="(min-width:600px) and (max-width: 800px)" srcset="http://www.fillmurray.com/400/400">
<source media="(min-width:800px) and (max-width: 1023px)" srcset="http://www.fillmurray.com/512/512">
<source media="(min-width: 1024px)" srcset="http://www.fillmurray.com/340/340">
<img src="http://www.fillmurray.com/600/600" alt="This picture loads on non-supporting browsers.">
</picture>
</li>
<li class="pic">
<picture>
<source media="(max-width: 400px)" srcset="http://www.fillmurray.com/400/400">
<source media="(min-width:400px) and (max-width: 599px)" srcset="http://www.fillmurray.com/600/600">
<source media="(min-width:600px) and (max-width: 800px)" srcset="http://www.fillmurray.com/400/400">
<source media="(min-width:800px) and (max-width: 1023px)" srcset="http://www.fillmurray.com/512/512">
<source media="(min-width: 1024px)" srcset="http://www.fillmurray.com/340/340">
<img src="http://www.fillmurray.com/600/600" alt="This picture loads on non-supporting browsers.">
</picture>
</li>
<li class="pic">
<picture>
<source media="(max-width: 400px)" srcset="http://www.fillmurray.com/400/400">
<source media="(min-width:400px) and (max-width: 599px)" srcset="http://www.fillmurray.com/600/600">
<source media="(min-width:600px) and (max-width: 800px)" srcset="http://www.fillmurray.com/400/400">
<source media="(min-width:800px) and (max-width: 1023px)" srcset="http://www.fillmurray.com/512/512">
<source media="(min-width: 1024px)" srcset="http://www.fillmurray.com/340/340">
<img src="http://www.fillmurray.com/600/600" alt="This picture loads on non-supporting browsers.">
</picture>
</li>
<li class="pic">
<picture>
<source media="(max-width: 400px)" srcset="http://www.fillmurray.com/400/400">
<source media="(min-width:400px) and (max-width: 599px)" srcset="http://www.fillmurray.com/600/600">
<source media="(min-width:600px) and (max-width: 800px)" srcset="http://www.fillmurray.com/400/400">
<source media="(min-width:800px) and (max-width: 1023px)" srcset="http://www.fillmurray.com/512/512">
<source media="(min-width: 1024px)" srcset="http://www.fillmurray.com/340/340">
<img src="http://www.fillmurray.com/600/600" alt="This picture loads on non-supporting browsers.">
</picture>
</li>
<li class="pic">
<picture>
<source media="(max-width: 400px)" srcset="http://www.fillmurray.com/400/400">
<source media="(min-width:400px) and (max-width: 599px)" srcset="http://www.fillmurray.com/600/600">
<source media="(min-width:600px) and (max-width: 800px)" srcset="http://www.fillmurray.com/400/400">
<source media="(min-width:800px) and (max-width: 1023px)" srcset="http://www.fillmurray.com/512/512">
<source media="(min-width: 1024px)" srcset="http://www.fillmurray.com/340/340">
<img src="http://www.fillmurray.com/600/600" alt="This picture loads on non-supporting browsers.">
</picture>
</li>
</ul>
</div>
<footer class="footer">
<p id="foot">Copyright MySite 1954<p>
</footer>
</body>
</html>