diff options
| author | msglm <msglm@techchud.xyz> | 2023-01-14 05:31:48 -0600 |
|---|---|---|
| committer | msglm <msglm@techchud.xyz> | 2023-01-14 05:31:48 -0600 |
| commit | 9d53d8857eaa1c9405894a88ca75bc4657e42f35 (patch) | |
| tree | eb1efc1d028b949dd83bb710c68be8eff58f26e7 /HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.index.html | |
| download | school-code-master.tar.gz school-code-master.tar.bz2 school-code-master.zip | |
Diffstat (limited to 'HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.index.html')
| -rw-r--r-- | HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.index.html | 91 |
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>
+
+
+
+
+
+
+
+
+
|