| Server IP : 87.98.249.37 / Your IP : 216.73.216.208 [ Web Server : Microsoft-IIS/10.0 System : Windows NT NS3076740 10.0 build 17763 (Windows Server 2019) AMD64 User : IWPD_292(growel19p) ( 0) PHP Version : 8.3.12 Disable Function : NONE Domains : 0 Domains MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/Inetpub/vhosts/growel.com/httpdocs/demo/anodizing/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Anodizing Process Sequence</title>
<style>
body {
font-family: Arial, sans-serif;
background: #fff;
margin: 0;
padding: 20px;
color: #333;
}
h1 {
text-align: center;
color: #D0342A;
margin-bottom: 40px;
}
.flowchart {
display: flex;
justify-content: center;
gap: 80px;
flex-wrap: wrap;
position: relative;
}
.stage {
display: flex;
flex-direction: column;
align-items: center;
min-width: 220px;
position: relative;
}
.diamond {
width: 140px;
height: 140px;
background: #D0342A;
color: #fff;
text-align: center;
line-height: 140px;
/* transform: rotate(45deg); */
margin-bottom: 20px;
font-weight: bold;
font-size: 16px;
position: relative;
overflow: hidden;
border-bottom-left-radius: 30px;
border-top-right-radius: 50px;
}
.diamond img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* ensures image fills shape */
opacity: 0.8;
/* slight transparency */
}
.diamond span {
position: relative;
display: block;
transform: rotate(-45deg);
line-height: normal;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
font-size: 14px;
font-weight: bold;
background: rgba(0, 0, 0, 0.4);
/* transparent overlay */
padding: 4px 8px;
border-radius: 4px;
}
.box {
background: #f9f9f9;
border: 2px solid #D0342A;
border-radius: 6px;
padding: 10px 20px;
margin: 15px 0;
text-align: center;
min-width: 160px;
font-size: 14px;
transition: background 0.3s;
cursor: pointer;
text-decoration: none;
color: #333;
position: relative;
}
.box:hover {
background: #ffeaea;
}
/* Vertical arrows */
.box::after {
content: "";
position: absolute;
left: 50%;
bottom: -15px;
width: 2px;
height: 15px;
background: #D0342A;
transform: translateX(-50%);
}
.box:last-child::after {
display: none;
}
/* Horizontal connectors between diamonds */
.flowchart::before {
content: "";
position: absolute;
top: 70px;
left: 5%;
right: 5%;
height: 2px;
/* background: #D0342A; */
z-index: -1;
}
/* Responsive stacking for mobile */
@media (max-width: 768px) {
.flowchart {
flex-direction: column;
align-items: center;
gap: 40px;
}
.flowchart::before {
display: none;
}
}
</style>
</head>
<body>
<div class="header">
<a href="index.html"><img src="header.png" alt="Growel Logo" style="min-width:100vw;"></a>
</div>
<br>
<br>
<h1>Anodizing Process Sequence</h1>
<br>
<div class="flowchart">
<!-- Stage 1: Cleaning -->
<div class="stage">
<div class="diamond">
<img src="https://growel.com/images/products/Surface-Conditioning.jpg" alt="Cleaning">
<span>1. Cleaning</span>
</div>
<a href="sub-pages.html" class="box">Alkaline Cleaners</a>
<a href="https://growel.com/business/chemicals/anodising" class="box">Acid Cleaners</a>
</div>
<!-- Stage 2: Pre-treatment -->
<div class="stage">
<div class="diamond">
<img src="https://www.azz.com/wp-content/uploads/2021/05/anodizing-min.jpg" alt="Cleaning">
<span>2.Pre-Treatment</span>
</div>
<a href="https://growel.com/business/chemicals/anodising" class="box">Alkaline Etching</a>
<a href="https://growel.com/business/chemicals/anodising" class="box">Acidic Etchant</a>
</div>
<!-- Stage 3: Desmut -->
<div class="stage">
<div class="diamond">
<img src="https://www.leuze-verlag.de/images/k2/68539e09e9c2f4ce0975080a63c70721.jpg"
alt="Surface Modifications">
<span>3.Surface Modifications </span>
</div>
<a href="https://growel.com/business/chemicals/anodising" class="box">MATT FINISH</a>
<a href="https://growel.com/business/chemicals/anodising" class="box">Brightening Additive</a>
<a href="https://growel.com/business/chemicals/anodising" class="box">Electro Brightening of Alluminium</a>
</div>
<div class="stage">
<div class="diamond">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFwqPayvd2n4bij6BpZ-mUMwf5TkwGaud5u2HjFzC0dbIMyTZh"
alt="Cleaning">
<span>4.Desmut</span>
</div>
<a href="https://growel.com/business/chemicals/anodising" class="box">Desmutting Additives</a>
</div>
<!-- Stage 4: Anodising -->
<div class="stage">
<div class="diamond">
<img src="https://www.inoxcast.com/wp-content/uploads/2022/01/Figure-4-Anodized-aluminum-knob.jpg"
alt="Cleaning">
<span>5.Anodising</span>
</div>
<a href="https://growel.com/business/chemicals/anodising" class="box">Anodising Additives</a>
</div>
<!-- Stage 5: Colouring -->
<div class="stage">
<div class="diamond">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSW7O0sS2qe0mhaslXRi3oBzvxt8DhP9dbiEnB_YJR1RGFb3e4_GyBq_7CKCOMe8yHp2yw&usqp=CAU"
alt="Cleaning">
<span>6.Colouring</span>
</div>
<a href="https://growel.com/business/chemicals/anodising" class="box">Electro Colouring Process</a>
<a href="https://growel.com/business/chemicals/anodising" class="box">Dip Colouring Process</a>
</div>
<!-- Stage 6: Sealing -->
<div class="stage">
<div class="diamond">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfEBnt3NSGXIB7owww-tryBjHefOEE9xyQ1w&s"
alt="Cleaning">
<span>7.Sealing</span>
</div>
<a href="https://growel.com/business/chemicals/anodising" class="box">Cold Sealing</a>
<a href="https://growel.com/business/chemicals/anodising" class="box">Hot Sealing</a>
</div>
<!-- Stage 7: Post-Treatment -->
<div class="stage">
<div class="diamond">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUuUuQqHkKzM9CTg7aiyPenv9CxJiXGT_6jQ&s"
alt="Cleaning">
<span>8.Chromating</span>
</div>
<a href="https://growel.com/business/chemicals/anodising" class="box">Hexavalent</a>
<a href="https://growel.com/business/chemicals/anodising" class="box">Trivalent</a>
<a href="https://growel.com/business/chemicals/anodising" class="box">Chrome free</a>
</div>
</div>
</body>
</html>