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;
- }
- footer {
- text-align:center;
- font-style:italic;
- background-color:#CCCCFF;
- clear:both;
- }
- h1 {
- margin:0;
- padding:10px;
- }
- header {
- background:#CCCCFF;
- }
- img {
- max-width:100%;
- max-height:100%;
- margin:0;
- padding:0;
- }
- main {
- margin-left:100px;
- padding:10px;
- background-color:#FFF;
- overflow:auto;
- }
- nav {
- float:left;
- width:195px;
- padding:10px;
- }
- nav a {
- text-decoration:none;
- padding-right:10px;
- }
- nav button {
- background:#FFF;
- color:#000066;
- margin:5px;
- width:90px;
- height:45px;
- font-size:1.2em;
- border:2px solid #000066;
- -moz-transition:all .2s ease-in;
- -o-transition:all .2s ease-in;
- -webkit-transition:all .2s ease-in;
- }
- nav button:hover, nav button.current {
- background:#000066;
- color:#FFF;
- }
- nav ul {
- list-style-type:none;
- }
- * {
- box-sizing:border-box;
- }
- .galleryitem {
- border:0px solid #000;
- max-width:30%;
- width:30%;
- height:275px;
- margin:3px 3px 0px 3px;
- float:left;
- vertical-align:top;
- }
- #gallery {
- margin-left:auto;
- margin-right:auto;
- }
- #wrapper {
- width:1024px;
- margin-left:auto;
- margin-right:auto;
- background:#EAEAEA;
- }
- </style>
- </head>
- <body>
- <div id="wrapper">
- <header>
- <h1>Gallery of Cute Cats</h1>
- </header>
- <nav>
- <ul>
- <li><a href="2columnlayout.html"><button class="current">Home</button></a></li>
- <li><a href="#"><button>Page 1</button></a></li>
- <li><a href="#"><button>Page 2</button></a></li>
- </ul>
- </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