- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test: The grid layout of a page</title>
<link href="gnome.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="grid">
<h1 class="site-heading">Product catalog</h1>
<article class="good">
<h2 class="good-name">Garden gnome</h2>
<img src="dwarf.jpg" width="140" height="75" alt="Garden gnome">
</article>
<article class="good">
<h2 class="good-name">Garden elf</h2>
<img src="elf.jpg" width="140" height="75" alt="Garden elf">
</article>
<article class="good">
<h2 class="good-name">Garden troll</h2>
<img src="troll.jpg" width="140" height="75" alt="Garden troll">
</article>
<div class="video">
<button type="button">Enable video</button>
</div>
<p class="description">Unboxing the latest products from this season: a giant red dragon statue.</p>
<aside class="sidebar">
<h2>Popular articles</h2>
<ul>
<li>
<p><a href="#">Garden statues for beginners</a></p>
</li>
<li>
<p><a href="#">Feng Shui: myths and reality</a></p>
</li>
<li>
<p><a href="#">Overview of statues from the Summer-Fall 2018 collection</a></p>
</li>
</ul>
</aside>
</div>
</body>
</html>
CSS
.grid {
display: grid;
gap: 10px;
}
- Goal
- Result
- Overlay
- Differences
- ?
Press Compare to send your code for review.