Skip to content

Commit 50ae06d

Browse files
Image Uploads 1
1 parent 5271cb0 commit 50ae06d

6 files changed

Lines changed: 85 additions & 8 deletions

File tree

css/styles.css

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -399,16 +399,33 @@ img {
399399
overflow: hidden;
400400
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
401401
transition: transform 0.3s ease;
402+
margin-bottom: 30px;
402403
}
403404

404-
.feature-card:hover {
405-
transform: translateY(-10px);
406-
}
405+
/* Feature Card Image Enhancement - Increased Size */
407406

408407
.feature-card img {
409408
width: 100%;
410-
height: 200px;
409+
height: 400px; /* Increased from 300px to 400px */
411410
object-fit: cover;
411+
transition: transform 0.5s ease;
412+
border-radius: 6px 6px 0 0;
413+
}
414+
415+
/* Add hover effect for feature images */
416+
.feature-card:hover img {
417+
transform: scale(1.03);
418+
}
419+
420+
/* Ensure responsive design maintains proper proportions */
421+
@media (max-width: 768px) {
422+
.feature-card img {
423+
height: 300px; /* Increased from 250px to 300px for mobile */
424+
}
425+
}
426+
427+
.feature-card:hover {
428+
transform: translateY(-10px);
412429
}
413430

414431
.feature-content {
@@ -1857,6 +1874,18 @@ img {
18571874

18581875
/* Custom Marine-Themed Scrollbar */
18591876

1877+
/* Adjusted size for yacht-application image - proportional reduction */
1878+
.section-water .about-image {
1879+
max-width: 85%; /* Reduce to 85% of container width */
1880+
margin: 0 auto; /* Center the image container */
1881+
}
1882+
1883+
.section-water .about-image img {
1884+
width: 100%;
1885+
border-radius: 8px;
1886+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
1887+
}
1888+
18601889
/* Webkit browsers (Chrome, Safari, newer Edge) */
18611890
::-webkit-scrollbar {
18621891
width: 12px;
@@ -2036,3 +2065,26 @@ img {
20362065
.btn:hover::before {
20372066
left: 100%;
20382067
}
2068+
2069+
/* Footer link visibility improvement */
2070+
.footer-links a,
2071+
.contact-info a,
2072+
.footer-bottom a {
2073+
color: white; /* Changed from rgba(255,255,255,0.8) to full white */
2074+
text-decoration: none;
2075+
font-weight: 500; /* Added font weight for better visibility */
2076+
transition: all 0.3s ease;
2077+
}
2078+
2079+
.footer-links a:hover,
2080+
.contact-info a:hover,
2081+
.footer-bottom a:hover {
2082+
color: var(--accent-color); /* Changed hover color to accent color for better contrast */
2083+
text-decoration: underline;
2084+
}
2085+
2086+
/* Specific styling for email in footer */
2087+
.contact-info .email-link {
2088+
color: white;
2089+
font-weight: 500;
2090+
}

images/sealing-materials.png

656 KB
Loading

images/surface-protection.png

718 KB
Loading

images/tapes.png

1010 KB
Loading

images/yacht-application.jpeg

288 KB
Loading

index.html

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,9 @@ <h2 class="section-title fade-in">Premium Marine Protection</h2>
6565
<h2 class="section-title">Our Solutions</h2>
6666
<div class="features-grid">
6767
<div class="feature-card">
68-
<img src="images/surface-protection.jpg" alt="Surface Protection">
68+
<a href="surface-protection.html">
69+
<img src="images/surface-protection.png" alt="Surface Protection">
70+
</a>
6971
<div class="feature-content">
7072
<h3>Surface Protection</h3>
7173
<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>
7476
</div>
7577
</div>
7678
<div class="feature-card">
77-
<img src="images/tapes.jpg" alt="Specialized Tapes">
79+
<a href="tapes.html">
80+
<img src="images/tapes.png" alt="Specialized Tapes">
81+
</a>
7882
<div class="feature-content">
7983
<h3>Specialised Tapes</h3>
8084
<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>
8387
</div>
8488
</div>
8589
<div class="feature-card">
86-
<img src="images/sealing-materials.jpg" alt="Sealing Materials">
90+
<a href="sealing-materials.html">
91+
<img src="images/sealing-materials.png" alt="Sealing Materials">
92+
</a>
8793
<div class="feature-content">
8894
<h3>Sealing Materials</h3>
8995
<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>
138144
</div>
139145
</section>
140146

147+
<!-- New Image and Text Section -->
148+
<section class="about section-water">
149+
<div class="container">
150+
<div class="about-content">
151+
<div class="about-image fade-in-left">
152+
<img src="images/yacht-application.jpeg" alt="Professional application of protective film">
153+
</div>
154+
<div class="about-text fade-in-right">
155+
<h2 class="section-title">Our Vision</h2>
156+
<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>
157+
<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>
158+
<div class="text-center">
159+
<a href="contact.html" class="btn" data-animation="text">Schedule a Consultation</a>
160+
</div>
161+
</div>
162+
</div>
163+
</div>
164+
</section>
165+
141166
<!-- Use Cases Section -->
142167
<section class="use-cases-section">
143168
<div class="container">
@@ -252,7 +277,7 @@ <h2 class="section-title">Get In Touch</h2>
252277
<label for="message" class="form-label">Message</label>
253278
<textarea id="message" name="message" rows="5" class="form-control"></textarea>
254279
</div>
255-
<div class="form-group">
280+
<div class="form-group text-center">
256281
<button type="submit" class="btn">Submit</button>
257282
</div>
258283
</form>

0 commit comments

Comments
 (0)