5/22

icstars · May 22, 2024 · 6247974 · 6247974
1 parent 9417440
commit 6247974
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git a/pages/projects.html b/pages/projects.html
@@ -18,10 +18,10 @@
     <h1 class="blue">"I welcome you to view the work I've done." - GaoSue </h1>
 
       <div class="box"><p style="font-family: Georgia, 'Times New Roman', Times, serif;">
-        <img src="../images/2024_Q2_Techqueria_MTG_CarlosVasquez2.png" width="200px"/> <img src="/images/MCBC_Wireframe_LoginPage_Android.PNG" height="200px"> <img src="/images/MCBC_Wireframe_Sprint1_presentation6.png" height="200">
-        <br>Flyer Creation for Social Media Posting
+        <img src="../images/2024_Q2_Techqueria_MTG_CarlosVasquez2.png" width="200px"/> 
         </br>
         <center><p style="font-family: Georgia, 'Times New Roman', Times, serif;">Connect with me on <a href="https://www.linkedin.com/in/myinnerchampion/" target="_blank">LinkedIn</a>.</p></body> 
+        <div class="carousel" width="750px"></div>
         </center>
         </div> 
   </body>

diff --git a/style.css b/style.css
@@ -71,8 +71,50 @@ img:hover {
   background-color: teal;
   margin-left: 10px;
   transition: 1s ease;
-  width: 300px;
+  width: 30%;
+
 }
+
+.carousel {
+    width: 750px;
+    height: 500px;
+    background-origin: 5px dashed black;
+    animation: changeImage 15s forwards;
+    animation-iteration-count: infinite;
+  }
+
+@keyframes changeImage {
+    0% {
+      background-image: url("/images/MCBC_Wireframe_Sprint1_presentation.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+    20% {
+      background-color: url("/images/MCBC_Wireframe_Sprint1_presentation2.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+    40% {
+      background-image: url("images/MCBC_Wireframe_Sprint1_presentation3.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+    60% {
+      background-color: url("/images/MCBC_Wireframe_Sprint1_presentation.png4");
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+    80% {
+      background-image: url("images/MCBC_Wireframe_Sprint1_presentation5.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+    100% {
+      background-color: url("/images/MCBC_Wireframe_Sprint1_presentation6.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+  }
 
 /* nav a { */
 /* :hover ; */