Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>2 Column Gallery - Jacob Howard</title>
- <meta charset="utf-8">
- <style>
- body {
- background:#000066;
- }
- #wrapper {
- width:1024px;
- margin-left:auto;
- margin-right:auto;
- background:#EAEAEA;
- }
- header {
- background:#CCCCFF;
- }
- h1 {
- margin:0;
- padding:10px;
- }
- nav {
- float:left;
- width:90px;
- padding:10px;
- }
- main {
- margin-left:100px;
- padding:10px;
- background-color:#FFF;
- overflow:auto;
- }
- footer {
- text-align:center;
- font-style:italic;
- background-color:#CCCCFF;
- clear:both;
- }
- img {
- max-width:100%;
- max-height:100%;
- margin:0;
- padding:0;
- }
- * {
- box-sizing:border-box;
- }
- .galleryitem {
- border:2px solid #000;
- max-width:30%;
- width:30%;
- height:275px;
- padding:0px;
- margin:1px;
- float:left;
- vertical-align:top;
- }
- #gallery {
- margin-left:auto;
- margin-right:auto;
- }
- </style>
- </head>
- <body>
- <div id="wrapper">
- <header>
- <h1>Gallery of Cute Cats</h1>
- </header>
- <nav>
- <a href="2columnlayout.html">Home</a><br>
- <a href="#">Page 1</a><br>
- <a href="#">Page 2</a>
- </nav>
- <main>
- <h2>A lovely gallery of pictures of cute cats I found online</h2>
- <p>These are some adorable cats that I found online and I think that they're very cute.</p>
- <div id="gallery">
- <div id="div1" class="galleryitem">
- <img src="cat/cat1.jpg">
- </div>
- <div id="div2" class="galleryitem">
- <img src="cat/cat2.jpg">
- </div>
- <div id="div3" class="galleryitem">
- <img src="cat/cat3.jpg">
- </div>
- <div id="div4" class="galleryitem">
- <img src="cat/cat4.jpg">
- </div>
- <div id="div5" class="galleryitem">
- <img src="cat/cat5.jpg">
- </div>
- <div id="div6" class="galleryitem">
- <img src="cat/cat6.jpg">
- </div>
- <div id="div7" class="galleryitem">
- <img src="cat/cat7.jpg">
- </div>
- <div id="div8" class="galleryitem">
- <img src="cat/cat8.jpg">
- </div>
- <div id="div9" class="galleryitem">
- <img src="cat/cat9.jpg">
- </div>
- </div>
- </main>
- <footer>
- © Jacob Howard 2018
- </footer>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement