Image Uploads 1

Author: Sam-May-Futurelab

css/styles.css

@@ -399,16 +399,33 @@ img {
     overflow: hidden;
     box-shadow: 0 4px 15px rgba(0,0,0,0.1);
     transition: transform 0.3s ease;
+    margin-bottom: 30px;
 }
 
-.feature-card:hover {
-    transform: translateY(-10px);
-}
+/* Feature Card Image Enhancement - Increased Size */
 
 .feature-card img {
     width: 100%;
-    height: 200px;
+    height: 400px; /* Increased from 300px to 400px */
     object-fit: cover;
+    transition: transform 0.5s ease;
+    border-radius: 6px 6px 0 0;
+}
+
+/* Add hover effect for feature images */
+.feature-card:hover img {
+    transform: scale(1.03);
+}
+
+/* Ensure responsive design maintains proper proportions */
+@media (max-width: 768px) {
+    .feature-card img {
+        height: 300px; /* Increased from 250px to 300px for mobile */
+    }
+}
+
+.feature-card:hover {
+    transform: translateY(-10px);
 }
 
 .feature-content {
@@ -1857,6 +1874,18 @@ img {
 
 /* Custom Marine-Themed Scrollbar */
 
+/* Adjusted size for yacht-application image - proportional reduction */
+.section-water .about-image {
+    max-width: 85%;  /* Reduce to 85% of container width */
+    margin: 0 auto;  /* Center the image container */
+}
+
+.section-water .about-image img {
+    width: 100%;
+    border-radius: 8px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
 /* Webkit browsers (Chrome, Safari, newer Edge) */
 ::-webkit-scrollbar {
     width: 12px;
@@ -2036,3 +2065,26 @@ img {
 .btn:hover::before {
     left: 100%;
 }
+
+/* Footer link visibility improvement */
+.footer-links a,
+.contact-info a,
+.footer-bottom a {
+    color: white; /* Changed from rgba(255,255,255,0.8) to full white */
+    text-decoration: none;
+    font-weight: 500; /* Added font weight for better visibility */
+    transition: all 0.3s ease;
+}
+
+.footer-links a:hover,
+.contact-info a:hover,
+.footer-bottom a:hover {
+    color: var(--accent-color); /* Changed hover color to accent color for better contrast */
+    text-decoration: underline;
+}
+
+/* Specific styling for email in footer */
+.contact-info .email-link {
+    color: white;
+    font-weight: 500;
+}

images/sealing-materials.png

@@ -65,7 +65,9 @@ <h2 class="section-title fade-in">Premium Marine Protection</h2>
                 <h2 class="section-title">Our Solutions</h2>
                 <div class="features-grid">
                     <div class="feature-card">
-                        <img src="images/surface-protection.jpg" alt="Surface Protection">
+                        <a href="surface-protection.html">
+                            <img src="images/surface-protection.png" alt="Surface Protection">
+                        </a>
                         <div class="feature-content">
                             <h3>Surface Protection</h3>
                             <p>We offer a range of surface protection films from the Nitto SPV range, available on lightweight reels or in custom sizes up to 1.5m wide. Application is made easier with optional 2-inch tension control core handles — ideal for the varied angles found on yachts.</p>
@@ -74,7 +76,9 @@ <h3>Surface Protection</h3>
                         </div>
                     </div>
                     <div class="feature-card">
-                        <img src="images/tapes.jpg" alt="Specialized Tapes">
+                        <a href="tapes.html">
+                            <img src="images/tapes.png" alt="Specialized Tapes">
+                        </a>
                         <div class="feature-content">
                             <h3>Specialised Tapes</h3>
                             <p>Our marine-grade adhesive tapes are supplied on lightweight reels or in custom sizes up to 1.5m wide. To support precision during application on complex surfaces, we also offer 2-inch tension control core handles.</p>
@@ -83,7 +87,9 @@ <h3>Specialised Tapes</h3>
                         </div>
                     </div>
                     <div class="feature-card">
-                        <img src="images/sealing-materials.jpg" alt="Sealing Materials">
+                        <a href="sealing-materials.html">
+                            <img src="images/sealing-materials.png" alt="Sealing Materials">
+                        </a>
                         <div class="feature-content">
                             <h3>Sealing Materials</h3>
                             <p>All sealing solutions are offered on lightweight reels or custom sizes, with tools like 2-inch core handles available to aid application across irregular marine surfaces.</p>
@@ -138,6 +144,25 @@ <h3>Eco-Conscious & Recyclable Options</h3>
             </div>
         </section>
 
+        <!-- New Image and Text Section -->
+        <section class="about section-water">
+            <div class="container">
+                <div class="about-content">
+                    <div class="about-image fade-in-left">
+                        <img src="images/yacht-application.jpeg" alt="Professional application of protective film">
+                    </div>
+                    <div class="about-text fade-in-right">
+                        <h2 class="section-title">Our Vision</h2>
+                        <p>With a deep appreciation for the standards of excellence within the yachting industry, we're committed to delivering protection solutions that match that same level of quality.</p>
+                        <p>Driven by market insights and forward-thinking innovation, we're actively developing a range of sustainable and fire-retardant products — helping our clients stay ahead of evolving needs and expectations.</p>
+                        <div class="text-center">
+                            <a href="contact.html" class="btn" data-animation="text">Schedule a Consultation</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
         <!-- Use Cases Section -->
         <section class="use-cases-section">
             <div class="container">
@@ -252,7 +277,7 @@ <h2 class="section-title">Get In Touch</h2>
                             <label for="message" class="form-label">Message</label>
                             <textarea id="message" name="message" rows="5" class="form-control"></textarea>
                         </div>
-                        <div class="form-group">
+                        <div class="form-group text-center">
                             <button type="submit" class="btn">Submit</button>
                         </div>
                     </form>