Embed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Steelford — Stone-Coated Steel Distribution</title>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap" rel="stylesheet"/>
<style>
/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter Tight', system-ui, sans-serif;
  background: #0b151f;
  color: #d6e4ed;
  overflow-x: hidden;
}

/* PAGE WRAPPER */
.page-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
}

/* 1. HERO SECTION (FULL WIDTH) */
.hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center; 
  padding: 100px 24px; 
  background: #0b151f;
  width: 100%;
}
.hero-eye { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #67b246; margin-bottom: 20px; }
.hero-eye span { display: inline-block; width: 22px; height: 1px; background: #67b246; }
.hero-section h1 { font-size: clamp(36px, 6vw, 64px); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; color: #fff; margin-bottom: 20px; }
.hero-section h1 em { color: #67b246; font-style: normal; }
.hero-section p { max-width: 600px; margin: 0 auto; font-size: 16px; font-weight: 400; line-height: 1.7; color: #5e7d91; }

/* 2. SPLIT LAYOUT (SIDE BY SIDE) */
.split-wrapper {
  display: flex;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.split-card {
  flex: 1; /* Makes both cards take up exactly 50% width */
  padding: 80px 5%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.split-card:first-child {
  border-right: 1px solid rgba(255,255,255,0.07);
}

.feature-container { 
  max-width: 480px;
  margin: 0 auto; /* Centers the text block nicely within its half */
  text-align: left;
}

/* TYPOGRAPHY & BADGES FOR CARDS */
.badge { 
  display: inline-block; 
  font-size: 10px; 
  font-weight: 700; 
  letter-spacing: .17em; 
  text-transform: uppercase; 
  padding: 5px 12px; 
  border-radius: 3px; 
  margin-bottom: 20px; 
  width: fit-content;
}
.feature-container h2 { 
  font-size: clamp(26px, 3vw, 36px); 
  font-weight: 700; 
  color: #fff; 
  line-height: 1.1; 
  letter-spacing: -.02em;
  margin-bottom: 16px; 
}
.feature-container p { 
  font-size: 15px; 
  line-height: 1.7; 
  color: #5e7d91; 
  margin-bottom: 32px; 
}

/* BUTTONS */
.action-btn { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  padding: 14px 32px; 
  font-size: 12px; 
  font-weight: 700; 
  letter-spacing: .08em; 
  text-transform: uppercase; 
  text-decoration: none; 
  border-radius: 4px; 
  border: 2px solid;
  transition: background .2s, color .2s, border-color .2s; 
  width: fit-content;
}

/* THEMES */
.bg-homeowner { background: #0c1813; }
.badge-homeowner { background: rgba(103,178,70,0.12); color: #7fd158; border: 1px solid rgba(103,178,70,0.25); }
.btn-homeowner { color: #67b246; border-color: #67b246; }
.btn-homeowner:hover { background: #67b246; color: #070f0c; }

.bg-contractor { background: #0d141d; }
.badge-contractor { background: rgba(224,123,42,0.12); color: #e07b2a; border: 1px solid rgba(224,123,42,0.25); }
.btn-contractor { color: #e07b2a; border-color: #e07b2a; }
.btn-contractor:hover { background: #e07b2a; color: #0a0e14; }

/* BRAND BOTTOM TRUST BAR */
.trustbar { 
  display: flex; 
  width: 100%;
  background: #070e18; 
  border-top: 1px solid rgba(28,63,95,0.4); 
  padding: 24px 24px; 
  align-items: center; 
  justify-content: center; 
  gap: 32px; 
  flex-wrap: wrap; 
}
.ti { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #255278; display: flex; align-items: center; gap: 8px; }
.td { width: 4px; height: 4px; border-radius: 50%; background: #67b246; flex-shrink: 0; }

/* RESPONSIVE LAYOUT */
@media (max-width: 860px) { 
  /* Stacks the side-by-side cards vertically on smaller screens */
  .split-wrapper { flex-direction: column; }
  .split-card:first-child { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .split-card { padding: 60px 24px; }
  .hero-section { padding: 70px 24px; }
}
@media (max-width: 520px) { 
  .trustbar { gap: 16px; flex-direction: column; align-items: flex-start; margin: 0 auto; max-width: 300px; }
}
</style>
</head>
<body>

<div class="page-wrapper">

  
  <section class="hero-section">
    <div class="hero-eye"><span></span>Premium Distribution Network<span></span></div>
    <h1>Engineered for <em>Performance</em></h1>
    <p>Steelford connects regional property asset protection goals with elite, high-durability architectural materials and certified commercial-grade installation networks.</p>
  </section>

  
  <section class="split-wrapper">
    
    
    <div class="split-card bg-homeowner">
      <div class="feature-container">
        <span class="badge badge-homeowner">Property Owners</span>
        <h2>Explore Residential Styles</h2>
        <p>Find the perfect authentic material setup for your property investment and receive straightforward ballpark estimations.</p>
        <a href="https://steelford.com/homeowners" class="action-btn btn-homeowner">For Homeowners</a>
      </div>
    </div>

    
    <div class="split-card bg-contractor">
      <div class="feature-container">
        <span class="badge badge-contractor">Certified Installers</span>
        <h2>Get Pre-Educated Leads</h2>
        <p>Expand your company profile and structural reach with pre-selected projects delivered straight to your local operations crews.</p>
        <a href="https://steelford.com/contractorshomepage" class="action-btn btn-contractor">For Contractors</a>
      </div>
    </div>

  </section>

  
  <footer class="trustbar">
    <div class="ti"><span class="td"></span>Premium Materials</div>
    <div class="ti"><span class="td"></span>Verified Local Networks</div>
    <div class="ti"><span class="td"></span>High-Intent Delivery</div>
  </footer>

</div>

</body>
</html>

Image carousel

Durable material. Nationwide Service

STEELFORD

Steelford is an online roofing materials company focused on homeowners who want durable, long-lasting roofing options without confusion.

Regenerate this homepage to clearly position Steelford as a place where homeowners can browse and request pricing for roofing materials — not roofing services or installations.

The homepage should feel modern, clean, and product-forward, similar in structure to leading online roofing material suppliers, but more visually refined and easier to understand.

Do NOT position Steelford as a local roofing contractor.
Do NOT mention cities, states, or service areas.
Do NOT talk about installation, craftsmanship, or roofing services.

Homepage structure:

Hero Section

Headline focused on buying roofing materials

Subheadline emphasizing simplicity, durability, and homeowner clarity

Primary call to action: “View Roofing Options”

Secondary call to action: “Get a Quote”

Product Categories Section
Include clear sections for:

Metal Roofing

Stone-Coated Steel Roofing

Roofing Accessories

Each category should have a short, homeowner-friendly description and an “Explore” button.

Why Steelford Section
Focus on:

Clear product choices

Homeowner-friendly explanations

Nationwide availability

Support when questions come up

Avoid technical jargon and sales hype.

How It Works Section
Use a simple three-step flow:

Browse roofing materials

Request pricing or ask a question

Finalize details and delivery

Support / Confidence Section
Reassure homeowners that help is available if they are unsure which roofing option is right.

Design Direction

Modern and premium

Clean layout with generous spacing

Simple language for homeowners

Product-first presentation

The final homepage should clearly communicate that Steelford sells roofing materials online and makes the process simple and approachable for homeowners.

Engineered for Performance

Explore Residential Styles

Get Pre-Educated Leads