Click and drag to scroll left and right to view all 3 figures.
<!-- figure 21.11 & figure 21.12 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
font-family: Helvetica;
color: black;
text-align: center;
display: flex;
flex-direction: column;
}
header, aside, article, footer {
background-color: #d3d3d3;
padding: 10px;
margin-bottom: 5px;
border-radius: 3px;
}
ul {
list-style-type: none;
padding-left: 0;
line-height: 32px;
}
ul li a { text-decoration: none; }
aside { height: auto; }
article { height: auto; }
footer { height: 50px; }
</style>
</head>
<body>
<header>
<h1>Logo</h1>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About us</a></li>
<li><a href="">Products</a></li>
<li><a href="">Downloads</a></li>
<li><a href="">Contact us</a></li>
</ul>
</nav>
</header>
<main>
<aside>ASIDE</aside>
<article>ARTICLE</article>
</main>
<footer>© Copyright 2015</footer>
</body>
</html>
<!-- figure 21.11 & figure 21.13 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
@media all and (max-width: 599px) {
body {
color: black;
font-family: Helvetica;
text-align: center;
display: flex;
flex-direction: column;
}
header, aside, article, footer {
background-color: #d3d3d3;
padding: 10px;
margin-bottom: 5px;
border-radius: 3px;
}
ul {
list-style-type: none;
padding-left: 0;
line-height: 32px;
}
ul li a { text-decoration: none; }
aside { height: auto; }
article { height: auto; }
footer { height: 50px; }
}
@media all and (min-width: 600px) {
body {
width: 90%;
margin: 30px auto;
color: black;
font-family: Helvetica;
text-align: center;
}
main {
height: 495px;
display: flex;
}
header, aside, article, footer {
background-color: #d3d3d3;
padding: 5px;
margin-bottom: 5px;
border-radius: 3px;
}
li {
display: inline;
padding: 5px;
}
ul li a { text-decoration: none; }
main > aside {
margin-right: 5px;
height: 480px;
flex: 1 0 0;
order: 1;
}
main > article {
height: 480px;
flex: 4 0 0;
order: 2;
}
footer { min-height: 50px; }
}
</style>
</head>
<body>
<header>
<h1>Logo</h1>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About us</a></li>
<li><a href="">Products</a></li>
<li><a href="">Downloads</a></li>
<li><a href="">Contact us</a></li>
</ul>
</nav>
</header>
<main>
<aside>ASIDE</aside>
<article>ARTICLE</article>
</main>
<footer>© Copyright 2015</footer>
</body>
</html>
<!-- figure 21.16 & figure 21.17 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
@media all and (max-width: 599px) {
#grid {
font-family: Helvetica;
text-align: center;
display: grid;
grid-template-rows: auto auto auto auto;
grid-template-columns: 1fr;
grid-row-gap: 5px;
}
header, aside, article, footer {
background-color: #d3d3d3;
padding: 10px;
border-radius: 3px;
}
ul {
list-style-type: none;
padding-left: 0;
line-height: 32px;
}
ul li a { text-decoration: none; }
}
@media all and (min-width: 600px) {
#grid {
width: 90%;
height: 480px;
color: black;
font-family: Helvetica;
text-align: center;
display: grid;
grid-template-areas: "header header"
"header header"
"aside article"
"footer footer";
grid-template-rows: auto 480px 50px;
grid-template-columns: 150px 1fr;
grid-column-gap: 5px;
grid-row-gap: 5px;
}
#grid header { grid-area: header; }
#grid aside { grid-area: aside; }
#grid article { grid-area: article; }
#grid footer { grid-area: footer; }
header, aside, article, footer {
background-color: #d3d3d3;
padding: 5px;
border-radius: 3px;
}
li {
display: inline;
padding: 5px;
}
ul li a { text-decoration: none; }
}
</style>
</head>
<body id="grid">
<header>
<h1>Logo</h1>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About us</a></li>
<li><a href="">Products</a></li>
<li><a href="">Downloads</a></li>
<li><a href="">Contact us</a></li>
</ul>
</nav>
</header>
<aside>ASIDE</aside>
<article>ARTICLE</article>
<footer>© Copyright 2015</footer>
</body>
</html>