- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test: The mysterious card</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="map">
<img class="part-c" src="map/c.jpg" alt="part-c">
<img class="part-o" src="map/o.jpg" alt="part-o">
<img class="part-w" src="map/w.jpg" alt="part-w">
<img class="part-h" src="map/h.jpg" alt="part-h">
<img class="part-n" src="map/n.jpg" alt="part-n">
<img class="part-e" src="map/e.jpg" alt="part-e">
<img class="part-s" src="map/s.jpg" alt="part-s">
<img class="part-i" src="map/i.jpg" alt="part-i">
<img class="part-k" src="map/k.jpg" alt="part-k">
<img class="part-a" src="map/a.jpg" alt="part-a">
<img class="part-q" src="map/q.jpg" alt="part-q">
<img class="part-t" src="map/t.jpg" alt="part-t">
<img class="part-u" src="map/u.jpg" alt="part-u">
<img class="part-b" src="map/b.jpg" alt="part-b">
<img class="part-r" src="map/r.jpg" alt="part-r">
<img class="part-g" src="map/g.jpg" alt="part-g">
</div>
</body>
</html>
CSS
body {
width: 550px;
height: 400px;
margin: 0;
padding: 0;
}
.map {
width: 400px;
height: 200px;
margin: 0 auto;
}
.map img {
float: left;
margin: 0;
padding: 0;
}
- Goal
- Result
- Overlay
- Differences
- ?
Press Compare to send your code for review.