updates-5/02/24

gmitchellf · Feb 5, 2024 · 3f2365d · 3f2365d
1 parent 9e57fad
commit 3f2365d
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 8 deletions.
diff --git a/assets/img/10.jpeg b/assets/img/10.jpeg
diff --git a/assets/img/11.jpeg b/assets/img/11.jpeg
diff --git a/css/styles.css b/css/styles.css
@@ -160,3 +160,13 @@ p {
   display: none;
   cursor: pointer;
 }
+
+.hoverCard{
+  transition: all .3s ease-in-out;
+}
+
+.hoverCard:hover{
+  box-shadow: 0 0 10px rgba(0,0,0,0.5);
+  filter: brightness(110%);
+  transform: scale(1.05);
+}
diff --git a/index.html b/index.html
@@ -75,14 +75,14 @@ <h2 class="pb-2 border-bottom"><i class="fa-solid fa-toolbox"></i> Our Services<
             <div class="row g-4 py-5 row-cols-1 row-cols-lg-2">
                 <div class="col">
 
-                    <div class="card bg-dark h-100">
+                    <div class="card hoverCard bg-dark h-100">
                         <div class="card-body">
                             <div class="card-header">
                                 <h3><i class="fa-solid fa-check"></i> VAPOUR BLASTING</h3>
                             </div>
                             <div class="card-text">
                                 <p>Vapour blasting also known as aqua blasting is a process that combines water, ultra-fine
-                                    glass
+                                    glass bead
                                     and compressed air to clean and restore alloy and other non-ferrous metals. This process is
                                     nonaggressive.</p>
                                 <p>It is an effective way to bring a component back to its factory fresh or “as new” finish,
@@ -96,7 +96,7 @@ <h3><i class="fa-solid fa-check"></i> VAPOUR BLASTING</h3>
                 </div>
                 <div class="col">
 
-                        <div class="card bg-dark h-100">
+                        <div class="card hoverCard bg-dark h-100">
                             <div class="card-body">
                                 <div class="card-header">
                                     <h3><i class="fa-solid fa-check"></i> DRY BLASTING</h3>
@@ -122,7 +122,7 @@ <h3><i class="fa-solid fa-check"></i> DRY BLASTING</h3>
                 </div>
                 <div class="col">
 
-                    <div class="card bg-dark h-100">
+                    <div class="card hoverCard bg-dark h-100">
                         <div class="card-body">
                             <div class="card-header">
                                 <h3><i class="fa-solid fa-check"></i> DEGREASING</h3>
@@ -139,7 +139,7 @@ <h3><i class="fa-solid fa-check"></i> DEGREASING</h3>
                 </div>
                 <div class="col">
 
-                    <div class="card bg-dark h-100">
+                    <div class="card hoverCard bg-dark h-100">
                         <div class="card-body">
                             <div class="card-header">
                                 <h3><i class="fa-solid fa-check"></i> DISASSEMBLY & RE ASSEMBLY</h3>
@@ -191,9 +191,9 @@ <h2 class="pb-2 border-bottom"><i class="fa-solid fa-image"></i> Gallery</h2>
                     <a href="assets/img/2.jpg" data-toggle="lightbox">
                         <div class="item"><img src="assets/img/2.jpg" alt=""></div>
                     </a>
-                    <a href="assets/img/3.jpg" data-toggle="lightbox">
+                    <!--<a href="assets/img/3.jpg" data-toggle="lightbox">
                         <div class="item"><img src="assets/img/3.jpg" alt=""></div>
-                    </a>
+                    </a>-->
                     <a href="assets/img/4.webp" data-toggle="lightbox">
                         <div class="item"><img src="assets/img/4.webp" alt=""></div>
                     </a>
@@ -212,6 +212,12 @@ <h2 class="pb-2 border-bottom"><i class="fa-solid fa-image"></i> Gallery</h2>
                     <a href="assets/img/9.webp" data-toggle="lightbox">
                         <div class="item"><img src="assets/img/9.webp" alt=""></div>
                     </a>
+                    <a href="assets/img/10.webp" data-toggle="lightbox">
+                        <div class="item"><img src="assets/img/9.webp" alt=""></div>
+                    </a>
+                    <a href="assets/img/11.webp" data-toggle="lightbox">
+                        <div class="item"><img src="assets/img/9.webp" alt=""></div>
+                    </a>
                 </div>
             </div>
 
@@ -256,7 +262,7 @@ <h5 class="mt-3">Follow us on:</h5>
     <!-- Footer-->
     <footer class="py-5 bg-black">
         <div class="container px-5">
-            <p class="m-0 text-center text-white small">Copyright &copy; Finer Finish Vapour Blasting 2023</p>
+            <p class="m-0 text-center text-white small">Copyright &copy; Finer Finish Vapour Blasting 2024</p>
         </div>
     </footer>
     <!-- Bootstrap core JS-->