Pictures page

luontola · Feb 23, 2018 · be1bfe1 · be1bfe1
1 parent 26b92b4
commit be1bfe1
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 0 deletions.
diff --git a/pictures.html b/pictures.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Pictures</title>
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<div class="pure-g">
+    <div class="pure-u-1 pure-u-sm-1-5">
+        <nav class="navigation pure-menu">
+            <ul class="pure-menu-list">
+                <li class="pure-menu-item"><a class="pure-menu-link" href="about.html">About</a></li>
+                <li class="pure-menu-item"><a class="pure-menu-link" href="pictures.html">Pictures</a></li>
+            </ul>
+        </nav>
+    </div>
+    <div class="pure-u-1 pure-u-sm-4-5 pure-u-md-3-5">
+        <section class="content">
+
+<h1>Pictures I like</h1>
+
+<img class="album-photo" src="http://www.publicdomainpictures.net/pictures/50000/t2/cat-looking-up.jpg">
+<img class="album-photo" src="http://www.publicdomainpictures.net/pictures/30000/t2/cat-in-the-city-5.jpg">
+<img class="album-photo" src="http://www.publicdomainpictures.net/pictures/30000/t2/annoyed-cat.jpg">
+<img class="album-photo" src="http://www.publicdomainpictures.net/pictures/30000/t2/cat-in-the-city-2.jpg">
+<img class="album-photo" src="http://www.publicdomainpictures.net/pictures/50000/t2/cat-in-chair.jpg">
+<img class="album-photo" src="http://www.publicdomainpictures.net/pictures/30000/t2/cat-hunting.jpg">
+<img class="album-photo" src="http://www.publicdomainpictures.net/pictures/10000/t2/lieblingskater-44421287869401VYcy.jpg">
+<img class="album-photo" src="http://www.publicdomainpictures.net/pictures/60000/t2/cat-1382017414PaD.jpg">
+<img class="album-photo" src="http://www.publicdomainpictures.net/pictures/50000/t2/cat-1373445873hvw.jpg">
+<img class="album-photo" src="http://www.publicdomainpictures.net/pictures/40000/t2/cross-eyed-cat.jpg">
+
+        </section>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -38,3 +38,12 @@ h1 {
     float: right;
     border: 1px solid #E0330C;
 }
+
+.album-photo {
+    height: 150px;
+    margin: 3px;
+    border: 1px solid #CCCCCC;
+    padding: 5px;
+    background-color:  #FFFFFF;
+    box-shadow: 3px 5px 8px #BBBBBB;
+}