Add files via upload

final

cssShowcase/index.html

@@ -6,6 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Tyler Burke</title>
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="newCss.css">
     <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Hind:300&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Karla:700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Reenie+Beanie&display=swap" rel="stylesheet">
@@ -30,7 +31,7 @@
 
 <nav id="nav">
     <ul>
-        <li><a href="https://github.uconn.edu/pages/tjb17003/Tyler-Burke-DMD-3470-Web-II/cssShowcase/index.html" class="btn btn-2">Home</a></li>
+        <li><a href="#" class="btn btn-2">Home</a></li>
         <li><a id="about"href="#" class="btn btn-2">About</a></li>
 
         <li><a id="contact" href="#" class="btn btn-2">Contact</a>
@@ -61,82 +62,86 @@
 <div class="center">
     <div class ="artwork">
         <div class="l show-on-scroll">
-            <img src="../cssShowcase/img/art2.jpg" alt="">
+
+          <a href="../cssShowcase/img/art2.jpg" data-lightbox="mygallery" data-title="Gold Miner"><img src="../cssShowcase/img/art2.jpg" alt="Boy picking nose"></a>
         </div>
 
 
 
 
 
             <div class="s show-on-scroll">
-                <img src="../cssShowcase/img/art1.jpg" alt="">
+                <a href="../cssShowcase/img/art1.jpg" data-lightbox="mygallery" data-title="Broken Mind"><img src="../cssShowcase/img/art1.jpg" alt="Broken mind"></a>
             </div>
 
 
 
             <div class="s show-on-scroll">
-                <img src="../cssShowcase/img/art4.JPG" alt="">
+                <a href="../cssShowcase/img/art4.JPG" data-lightbox="mygallery" data-title="Italian Nude Figure Study"><img src="../cssShowcase/img/art4.JPG" alt="Nude figure drawing"></a>
             </div>
+
+
             <div class="m show-on-scroll">
-                 <img src="../cssShowcase/img/art12.jpg" alt="">
+                <a href="../cssShowcase/img/art12.jpg" data-lightbox="mygallery" data-title="Empty"><img src="../cssShowcase/img/art12.jpg" alt="Empty"></a>
              </div>
 
 
 
 
 
             <div class="m show-on-scroll">
-                <img src="../cssShowcase/img/art5.jpg" alt="">
+                <a href="../cssShowcase/img/art5.jpg" data-lightbox="mygallery" data-title="Still Life"><img src="../cssShowcase/img/art5.jpg" alt="Still life"></a>
             </div>
 
             <div class="s show-on-scroll">
-                <img src="../cssShowcase/img/art3.jpg" alt="">
+                <a href="../cssShowcase/img/art3.jpg" data-lightbox="mygallery" data-title="Sinking"><img src="../cssShowcase/img/art3.jpg" alt="Sinking"></a>
             </div>
 
             <div class="l show-on-scroll">
-                <img src="../cssShowcase/img/art6.jpg" alt="">
+                <a href="../cssShowcase/img/art6.jpg" data-lightbox="mygallery" data-title="Hidden"><img src="../cssShowcase/img/art6.jpg" alt="Hidden"></a>
             </div>
 
 
 
 
 
             <div class="s show-on-scroll">
-                <img src="../cssShowcase/img/art8.jpg" alt="">
+                <a href="../cssShowcase/img/art8.jpg" data-lightbox="mygallery" data-title="Still Life"><img src="../cssShowcase/img/art8.jpg" alt="Still Life"></a>
             </div>
 
 
 
             <div class="m show-on-scroll">
-                <img src="../cssShowcase/img/art9.jpg" alt="">
+                <a href="../cssShowcase/img/art9.jpg" data-lightbox="mygallery" data-title="Reflecting"><img src="../cssShowcase/img/art9.jpg" alt="Reflecting"></a>
             </div>
 
             <div class="m show-on-scroll">
-                <img src="../cssShowcase/img/art10.jpg" alt="">
+                <a href="../cssShowcase/img/art10.jpg" data-lightbox="mygallery" data-title="Mirror"><img src="../cssShowcase/img/art10.jpg" alt="Mirror"></a>
             </div>
 
 
             <div class="l show-on-scroll">
-                <img src="../cssShowcase/img/art7.jpg" alt="">
+                <a href="../cssShowcase/img/art7.jpg" data-lightbox="mygallery" data-title="Jon Snow"><img src="../cssShowcase/img/art7.jpg" alt="Jon Snow"></a>
             </div>
 
 
 
             <div class="s show-on-scroll">
-                <img src="../cssShowcase/img/art11.JPG" alt="">
+                <a href="../cssShowcase/img/art11.JPG" data-lightbox="mygallery" data-title="Justin"><img src="../cssShowcase/img/art11.JPG" alt="Justin"></a>
             </div>
 
 
 
 
             <div class="s show-on-scroll">
-                <img src="../cssShowcase/img/art13.jpg" alt="">
+                <a href="../cssShowcase/img/art13.jpg" data-lightbox="mygallery" data-title="Eye"><img src="../cssShowcase/img/art13.jpg" alt="Eye"></a>
             </div>
 
     </div>
 </div>
 
 <script src="https://use.fontawesome.com/0e60a59edb.js"></script>
+<script src="newJS.js"></script>
 <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
 <script type="text/javascript">
     $(document).ready(function(){
@@ -153,4 +158,4 @@
 </script>
 <script src="main.js"></script>
 </body>
-</html>
+</html>

cssShowcase/style.css

@@ -312,7 +312,7 @@ perspective: 1000px
 
 
 }
-.artwork{
+.artwork {
 
     display: grid;
     height: 100%;
@@ -323,29 +323,31 @@ perspective: 1000px
     grid-gap: 10px;
 
 }
-
+.artwork img{
+    transition: .5s;
+}
 
 .m { 
 
     grid-row: span 3;
     grid-column: span 3;
-    transition: .3s;
+
 
 }
 
 .l {
 
     grid-row: span 4;
     grid-column: span 4;
-    transition: .3s;
+
 } 
 
 
 .s{
 
     grid-row: span 2;
     grid-column: span 2; 
-    transition: .3s; 
+
 }
 
 
@@ -364,7 +366,7 @@ img{
     }
 
     #aboutInfo{
-        font-size: 32px;
+        font-size: 30px;
     }
 }