-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
29 lines (25 loc) · 1.22 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
<!DOCTYPE html>
<html>
<head>
<title>Front-end Fundamentals - Responsive Images</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/styles.css" />
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="banner">
<h1>Front-end Fundamentals</h1>
<h2>Srset & Sizes Image Attribute</h2>
</div>
<div class="content">
<!-- Images Go Here -->
<h1>srcset Attribute - Device Pixel Density Example:</h1>
<img src="images/space_1x.jpg" srcset="images/space_1x.jpg 1x, images/space_2x.jpg 2x" alt="It's Space!">
<h1>srcset Attribute - W Example</h1>
<img src="images/space_1x.jpg" srcset="images/space_1x.jpg 500w, images/space_2x.jpg 1000w" alt="It's Space!">
<h1>sizes Attribute Example</h1>
<img src="images/space_medium.jpg" srcset="images/space_small.jpg 600w, images/space_medium.jpg 1500w, images/space_large.jpg 3000w" sizes="(min-width: 1024px) 3000px, (min-width: 768px) and (max-width: 1024px) 1500px" alt="It's Space!">
</div>
</body>
</html>