adamliptrot-oc/ghibli.html

## ghibli.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Neighbor Totoro</title>
</head>
<body>
<div class="wrapper">
    <header>
        <nav>
            <ul>
                <li><a href="/" class="logo">Ghibli Store</a></li>
                <li><a href="/store">Store</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/account">Account</a></li>
            </ul>
        </nav>
    </header>
    <main class="product">

        <h1 class="product__title">My Neighbor Totoro Nesting Dolls</h1>
        <div class="product__inner">
            <img class="product__image" src="http://liptrot.org/demos/totoro/totoro-nesting.jpg" alt="Four Totoro figures each of different sizes, along with an acorn and a dust bunny. Arranged in size order from largest (green Totoro) to smallest (dustbunny)">
            <div class="product__copy">
                <h2>Product description</h2>
                <p>Totoro nesting (or matryoshka) dolls make the perfect gift to a Totoro fan. </p>
                <p>The largest in the set of dolls is a dark gray Totoro, followed by a light gray Totoro, then a Blue Totoro, the white Totoro, then by an acorn, and finally with a tiny dust bunny.</p>
                <h2>About the film</h2>
                <p><strong>My Neighbor Totoro</strong> is a 1988 Japanese animated fantasy film written and directed by <a href="http://www.imdb.com">Hayao Miyazaki</a> and animated by Studio Ghibli for Tokuma Shoten.</p>

            </div>
        </div>

    </main>
    <footer>
        © Ghibli Store 2025
    </footer>
</div>
</body>
</html>

## main.css
html,
body {
    height: 100%;
    background: #efefef;
}
body {
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.2;
    color: #333;
}
* {
    box-sizing: border-box;
}
.wrapper {
    max-width: 60em;
    height: 100%;
    padding: 0 2em 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
header {
    margin-bottom: 2em;
}
header ul {
    display: flex;
    align-items: center;
    gap: 1em;
    margin: 0;
    padding: 0;
}
header li {
    list-style: none;
}
header a {
    padding: 0.5em;
    display: block;
    color: #333;
    text-decoration: none
}
header a[href="/"] {
    font-size: 1.8rem;
    font-family: Impact;
    font-weight: 200;
    color: teal;
    word-spacing: -0.15em;
}
header a:focus,
header a:hover {
    text-decoration: underline;
}
main {
    background: #fff;
    padding: 1em;
    flex: 1;
}
footer {
    padding: 2em 0;
}
.product__title {
    font-weight: 300;
}
.product__inner {
    padding-bottom: 7em;
    line-height: 1.4;
}
.product__copy h2 {
    line-height: 1.1;
    font-weight: 200;
    font-size: 1.4rem;
}
img {
    max-width: 100%;
    height: auto;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>My Neighbor Totoro</title>
	</head>
	<body>
	<div class="wrapper">
	<header>
	<nav>
	<ul>
	<li><a href="/" class="logo">Ghibli Store</a></li>
	<li><a href="/store">Store</a></li>
	<li><a href="/about">About</a></li>
	<li><a href="/account">Account</a></li>
	</ul>
	</nav>
	</header>
	<main class="product">

	<h1 class="product__title">My Neighbor Totoro Nesting Dolls</h1>
	<div class="product__inner">
	<img class="product__image" src="http://liptrot.org/demos/totoro/totoro-nesting.jpg" alt="Four Totoro figures each of different sizes, along with an acorn and a dust bunny. Arranged in size order from largest (green Totoro) to smallest (dustbunny)">
	<div class="product__copy">
	<h2>Product description</h2>
	<p>Totoro nesting (or matryoshka) dolls make the perfect gift to a Totoro fan. </p>
	<p>The largest in the set of dolls is a dark gray Totoro, followed by a light gray Totoro, then a Blue Totoro, the white Totoro, then by an acorn, and finally with a tiny dust bunny.</p>
	<h2>About the film</h2>
	<p><strong>My Neighbor Totoro</strong> is a 1988 Japanese animated fantasy film written and directed by <a href="http://www.imdb.com">Hayao Miyazaki</a> and animated by Studio Ghibli for Tokuma Shoten.</p>

	</div>
	</div>

	</main>
	<footer>
	© Ghibli Store 2025
	</footer>
	</div>
	</body>
	</html>
	html,
	body {
	height: 100%;
	background: #efefef;
	}
	body {
	margin: 0;
	font-family: Helvetica, Arial, sans-serif;
	line-height: 1.2;
	color: #333;
	}
	* {
	box-sizing: border-box;
	}
	.wrapper {
	max-width: 60em;
	height: 100%;
	padding: 0 2em 0;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	}
	header {
	margin-bottom: 2em;
	}
	header ul {
	display: flex;
	align-items: center;
	gap: 1em;
	margin: 0;
	padding: 0;
	}
	header li {
	list-style: none;
	}
	header a {
	padding: 0.5em;
	display: block;
	color: #333;
	text-decoration: none
	}
	header a[href="/"] {
	font-size: 1.8rem;
	font-family: Impact;
	font-weight: 200;
	color: teal;
	word-spacing: -0.15em;
	}
	header a:focus,
	header a:hover {
	text-decoration: underline;
	}
	main {
	background: #fff;
	padding: 1em;
	flex: 1;
	}
	footer {
	padding: 2em 0;
	}
	.product__title {
	font-weight: 300;
	}
	.product__inner {
	padding-bottom: 7em;
	line-height: 1.4;
	}
	.product__copy h2 {
	line-height: 1.1;
	font-weight: 200;
	font-size: 1.4rem;
	}
	img {
	max-width: 100%;
	height: auto;
	}