Skip to content

Instantly share code, notes, and snippets.

@nikibrown

nikibrown/container.html

Created October 6, 2017 19:18
Show Gist options
  • Save nikibrown/a740765f26ef446239e87892474ffd81 to your computer and use it in GitHub Desktop.
Save nikibrown/a740765f26ef446239e87892474ffd81 to your computer and use it in GitHub Desktop.
Download ZIP
Containers in HTML/CSS
Raw
container.html
<html>
<head>
<style>
header,
footer {
background-color: #000;
color: white;
}
main {
}
.container {
margin: auto;
width: 1000px;
}
</style>
</head>
<body>
<header class="page-header">
<div class="container">
<nav>
<img src="https://avatars2.githubusercontent.com/u/284173?v=4&s=40" alt="">
<ul>
<li>
<a href="">link</a>
</li>
<li>
<a href="">link</a>
</li>
<li>
<a href="">link</a>
</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, obcaecati quos, neque, saepe sequi, non nisi deleniti accusantium velit optio eveniet magni voluptatum ipsa quam cumque. Exercitationem illum, quidem id.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, obcaecati quos, neque, saepe sequi, non nisi deleniti accusantium velit optio eveniet magni voluptatum ipsa quam cumque. Exercitationem illum, quidem id.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, obcaecati quos, neque, saepe sequi, non nisi deleniti accusantium velit optio eveniet magni voluptatum ipsa quam cumque. Exercitationem illum, quidem id.</p>
</div>
</main>
<footer>
<div class="container">
<nav>
<img src="https://avatars2.githubusercontent.com/u/284173?v=4&s=40" alt="">
<ul>
<li>
<a href="">link</a>
</li>
<li>
<a href="">link</a>
</li>
<li>
<a href="">link</a>
</li>
</ul>
</nav>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment