HTML icon

2columnlayout-assignment

HTML | PRO | 02/02/18 02:10:41 PM UTC | 0 ⭐ | 369 👁️ | Never ⏰ | []
HTML 5 |

0 B

|

None

|

0 👍

/

0 👎

<!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>
&copy; Jacob Howard 2018
</footer>
</div>
</body>
</html>

Comments