<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Using Images</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header>
<h1>Using Images</h1>
</header>
<div id="background">
<h2>Background Image</h2>
</div>
<div id="img-map">
<h2>Image Map</h2>
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="images/workplace.jpg" usemap="#image-map">
<map name="image-map">
<area target="" alt="Keyboard" title="Keyboard" href="#keyboard" coords="225,271,537,399" shape="rect">
<area target="" alt="Headphones" title="Headphones" href="#headphones" coords="100,318,105" shape="circle">
<area target="" alt="Hard Drive" title="Hard Drive" href="#harddrive" coords="482,15,621,241" shape="rect">
<area target="" alt="Mouse" title="Mouse" href="#mouse" coords="561,276,626,404" shape="rect">
</map>
</div>
<div id="float-left">
<h2>Float Left</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos tempora accusamus, maxime deserunt deleniti tenetur aut dolores mollitia expedita. Voluptates officiis cum quidem vitae numquam odio, ipsa natus maiores nam?</p>
<img src="images/bicycle.jpg" alt="bicycle"/>
</div>
<div id="float-right">
<h2>Float Right</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum accusamus voluptatibus soluta aut repellendus? Nisi quis inventore quas minima facilis ratione, molestias velit debitis dolor, sed asperiores eos, voluptas at.</p>
<img src="images/cat.jpg" alt="cat">
</div>
<div id="picture-tag">
<h2>Picture Tag</h2>
<picture>
<source media="(min-width: 950px)" srcset="images/dogs.jpg"/>
<source media="(min-width: 665px)" srcset="images/cat.jpg"/>
<img src="images/wolf.jpg" alt="Wolf Image">
</picture>
</div>
<div id="linked-image">
<h2>Linked Image</h2>
<img src="https://cdn.pixabay.com/photo/2017/10/07/15/27/wolf-2826741_1280.jpg" alt="White Wolf">
</div>
<div id="img-as-link">
<h2>Image As Link</h2>
<a href="https://www.istockphoto.com/photo/man-standing-on-the-building-rooftop-looking-at-the-city-at-night-gm1782894545-547028142?utm_source=pixabay&utm_medium=affiliate&utm_campaign=SRP_photo_sponsored&utm_content=https%3A%2F%2Fpixabay.com%2Fphotos%2Fsearch%2Fcyberpunk%2F&utm_term=cyberpunk"><img src="images/cyberpunk-city.jpg" alt="Cyberpunk City"></a>
</div>
<div id="keyboard">
<h2>Keyboard</h2>
</div>
<div id="harddrive">
<h2>Hard Drive</h2>
</div>
<div id="headphones">
<h2>Headphones</h2>
</div>
<div id="mouse">
<h2>Mouse</h2>
</div>
</body>
</html>