1 files changed, 91 insertions, 0 deletions
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.index.html
new file mode 100644
index 0000000..b062c17
--- /dev/null
+++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>	
+        <title>First HTML Webpage</title>
+        <meta charset="utf-8">
+    </head>
+    <style>    
+
+body { 
+    font-family: Trajan Pro, Verdana, Arial;
+}
+
+h1 { 
+    padding: .5em;
+    height: 2em;
+}
+
+.gallery { 
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    width: 70%;
+    margin: auto;
+}
+
+figure { 
+    position: relative;
+    opacity: .75;
+    transition: all ease-out 3s;
+    margin: 1em;
+    z-index: 1;
+    background-color: #FFF;
+    color: rgba(0,0,0,0);
+    font-size: .5em;
+    text-align: center;
+}
+
+figure:hover { 
+    opacity: 1;
+    transform: scale(3);
+    z-index: 999;
+    box-shadow: 3px 3px 3px #333;
+    color: rgba(0, 0, 0, 1);
+}
+
+    </style>
+    <body>
+        <h1>Image Gallery</h1>
+        <div id=gallery>
+
+            <figure><a href="11.7.broken-arrow-trail.jpg"><img src="11.7.photo1thumb.jpg" width=100 height=100 alt="Broken Arrow Trail, Sedona, Arizona"></a>
+                <figcaption>Broken Arrow</figcaption>
+            </figure>
+
+            <figure>
+                <a href="11.7.thunder-mountain.jpg"><img src="11.7.photo2thumb.jpg" width=100 height=100 alt="Thunder Mountain, Sedona, Arizona"></a>
+                <figcaption>Thunder Mountain</figcaption>
+            </figure>
+            
+            <figure>
+                <a href="11.7.bear-mountain.jpg"><img src="11.7.photo3thumb.jpg" width=100 height=100 alt="Bear Mountain, Sedona, Arizona"></a>
+                <figcaption>Bear Mountain</figcaption>
+            </figure>
+            
+            <figure>
+                <a href="11.7.aerie-trail.jpg"><img src="11.7.photo4thumb.jpg" width=100 height=100 alt="Aerie Trail, Sedona, Arizona"></a>
+                <figcaption>Aerie Trail</figcaption>
+            </figure>
+            
+            <figure>
+                <a href="11.7.cathedral-rock.jpg"><img src="11.7.photo5thumb.jpg" width=100 height=100 alt="Cathedral Rock, Sedona, Arizona"></a>
+                <figcaption>Cathedral Rock</figcaption>
+            </figure>
+            
+            <figure>
+                <a href="11.7.oak-creek.jpg"><img src="11.7.photo6thumb.jpg" width=100 height=100 alt="Oak Creek, Sedona, Arizona"></a>
+                <figcaption>Oak Creek</figcaption>
+            </figure>
+
+        </div>
+    </body>
+</html>
+
+
+
+
+
+
+
+
+