grid background done

Author: b00kworm4lyf3

wa/wa11/main.js

@@ -5,7 +5,7 @@ const btn = document.querySelector('button');
 const overlay = document.querySelector('.overlay');
 
 /* Declaring the array of image filenames */
-const images = ['pic1.jpg', 'pic2.jpg', 'pic3.jpg', 'pic4.jpg', 'pic5.jpg'];
+const images = ['vegas1.jpg', 'vegas2.jpg', 'vegas3.jpg', 'vegas4.jpg', 'vegas5.jpg'];
 
 /* Declaring the alternative text for each image file */
 const altTxt = ['Closeup of a human eye', 'Closeup of a rock', 'Closeup of some flowers', 'Egyptian painting', 'A butterfly with its wings open'];

wa/wa11/style.css

@@ -11,23 +11,47 @@ h1 {
                0px 0px 60px hotpink,
                0px 0px 75px hotpink,
                0px 0px 100px hotpink,
-               0px 0px 150px hotpink;
+               0px 0px 125px hotpink;
+  animation: flickerText 1.5s infinite alternate;
 }
 
 body {
   background-color: black;
   width: 640px;
   margin: 0 auto;
+  background-image: 
+    linear-gradient(hotpink 2px, transparent 1px),
+    linear-gradient(90deg, hotpink 2px, transparent 1px),
+    radial-gradient(circle at center, hotpink 0%, transparent 50%);
+  background-size: 60px 60px;
+  background-position: center;
+  position: relative;
+}
+
+body:after {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(circle at center, transparent 0%, black 70%);
+  z-index: -1;
 }
 
 .full-img {
-  /* border-radius: 5px; */
   position: relative;
   display: block;
   width: 640px;
   height: 480px;
 }
 
+.displayed-img{
+  width: 639px;
+  height: 479px;
+  border-radius: 7px;
+}
+
 .overlay {
   border: 1px solid white;
   border-radius: 10px;
@@ -37,8 +61,8 @@ body {
   position: absolute;
   top: 0;
   left: 0;
-  width: 639px;
-  height: 479px;
+  width: 638px;
+  height: 478px;
   background-color: rgba(0,0,0,0);
 }
 
@@ -51,11 +75,45 @@ button {
   cursor: pointer;
   top: 2px;
   left: 2px;
+  border-radius: 7px;
+}
+
+.thumb-bar{
+  position: absolute;
+  width: 640px;
+  border-radius: 7px;
+  box-shadow: 0px 0px 5px white, 
+              0px 0px 15px lightpink, 
+              0px 0px 25px hotpink;
 }
 
 .thumb-bar img {
   display: block;
   width: 20%;
   float: left;
   cursor: pointer;
+}
+
+.thumb-bar img:nth-child(1){
+  border-radius: 7px 0 0 7px;
+}
+
+.thumb-bar img:nth-child(5){
+  border-radius: 0 7px 7px 0;
+}
+
+@keyframes flickerText{
+  0%, 18%, 22%, 25%, 53%, 57%, 100%{
+    text-shadow: 0px 0px 5px white, 
+                 0px 0px 15px white, 
+                 0px 0px 25px lightpink, 
+                 0px 0px 50px hotpink,
+                 0px 0px 60px hotpink,
+                 0px 0px 75px hotpink,
+                 0px 0px 100px hotpink,
+                 0px 0px 150px hotpink;
+  }
+  20%, 24%, 55%{
+    text-shadow: none;
+  }
 }

wa/wa11/wa11.html

@@ -15,7 +15,7 @@
     <h1>Vegas Spring Break</h1>
 
     <div class="full-img">
-      <img class="displayed-img" src="images/pic1.jpg" alt="Closeup of a human eye">
+      <img class="displayed-img" src="images/vegas1.jpg" alt="Closeup of a human eye">
       <div class="overlay"></div>
       <button class="dark">Pink-ify</button>
     </div>