Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Steelford Profiles & Colors</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap" rel="stylesheet">
    <style>
        :root {
            /* Steelford Brand Colors */
            --steele-blue: #002d72;
            --steele-green: #00a651;
            --dark-gray: #1a1a1a;
            --light-gray: #f4f5f7;
        }

        body {
            font-family: 'Inter Tight', sans-serif;
            margin: 0;
            padding: 0;
            color: var(--dark-gray);
            background-color: #ffffff;
        }

        /* Hero Section */
        .hero {
            background-color: var(--steele-blue);
            color: white;
            text-align: center;
            padding: 5rem 2rem;
        }

        .hero h1 {
            font-size: 3.5rem;
            margin: 0 0 1rem 0;
            text-transform: uppercase;
            letter-spacing: -1px;
        }

        .hero p {
            font-size: 1.25rem;
            max-width: 800px;
            margin: 0 auto;
            font-weight: 400;
            line-height: 1.6;
            color: #e0e6ed;
        }

        /* Content Container */
        .container {
            max-width: 1000px; /* Narrowed slightly for a better sequential reading experience */
            margin: 4rem auto;
            padding: 0 2rem;
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            color: var(--steele-blue);
            margin-bottom: 3rem;
            text-transform: uppercase;
        }

        /* Sequential Layout Container */
        .sequential-list {
            display: flex;
            flex-direction: column;
            gap: 3rem; /* Spacing between each profile */
        }

        /* Individual Profile Card */
        .profile-card {
            background: var(--light-gray);
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #e1e4e8;
            display: flex;
            flex-direction: row; /* Aligns photo and text side-by-side */
            align-items: stretch;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }

        /* Image Placeholder */
        .photo-placeholder {
            background-color: #d1d5db;
            flex: 0 0 40%; /* Forces the photo to take up exactly 40% of the card width */
            min-height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6b7280;
            font-weight: 700;
            font-size: 1.1rem;
            letter-spacing: 1px;
            border-right: 4px solid var(--steele-green);
        }

        /* Profile Details */
        .profile-details {
            padding: 2.5rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .profile-details h3 {
            font-size: 2rem;
            color: var(--steele-blue);
            margin: 0 0 1rem 0;
            border-bottom: 2px solid #e1e4e8;
            padding-bottom: 0.5rem;
        }

        /* Color Selection Tags */
        .color-label {
            font-weight: 700;
            font-size: 1rem;
            text-transform: uppercase;
            color: #555;
            margin-bottom: 0.75rem;
        }

        .color-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 2rem;
        }

        .color-tag {
            background: white;
            border: 1px solid #ccc;
            color: var(--dark-gray);
            padding: 0.5rem 1rem;
            border-radius: 4px;
            font-size: 0.95rem;
            font-weight: 700;
        }

        /* Button Styling */
        .cta-button {
            display: inline-block;
            align-self: flex-start;
            background-color: var(--steele-green);
            color: white;
            text-decoration: none;
            padding: 1rem 2rem;
            font-weight: 700;
            border-radius: 4px;
            text-transform: uppercase;
            transition: background-color 0.2s ease;
        }

        .cta-button:hover {
            background-color: #008a43;
        }

        /* Mobile Responsiveness */
        @media (max-width: 768px) {
            .profile-card {
                flex-direction: column; /* Stack vertically on small screens */
            }
            .photo-placeholder {
                flex: auto;
                height: 250px;
                border-right: none;
                border-bottom: 4px solid var(--steele-green);
            }
            .cta-button {
                align-self: stretch;
                text-align: center;
            }
        }
    </style>
</head>
<body>

    <section class="hero">
        <h1>Engineered for the Elements</h1>
        <p>Explore Steelford's premium material distributions, built on core building science and engineered to meet stringent Class 4 impact ratings. Select a profile below to view the specifications and available color configurations for your next project.</p>
    </section>

    <div class="container">
        <h2 class="section-title">Select a Profile</h2>
        
        <div class="sequential-list">
            
            <div class="profile-card">
                <div class="photo-placeholder">ROMAN TILE PHOTO</div>
                <div class="profile-details">
                    <h3>Roman Tile</h3>
                    <div class="color-label">Available Colors</div>
                    <div class="color-list">
                        <span class="color-tag">Red and Black</span>
                        <span class="color-tag">Chestnut Cedar</span>
                        <span class="color-tag">Terra Cotta</span>
                        <span class="color-tag">Black</span>
                        <span class="color-tag">Mission Gold</span>
                    </div>
                    <a href="#" class="cta-button">Select Profile</a>
                </div>
            </div>

            <div class="profile-card">
                <div class="photo-placeholder">STORMETAL PHOTO</div>
                <div class="profile-details">
                    <h3>Stormetal Shingle</h3>
                    <div class="color-label">Available Colors</div>
                    <div class="color-list">
                        <span class="color-tag">Black</span>
                    </div>
                    <a href="#" class="cta-button">Select Profile</a>
                </div>
            </div>

            <div class="profile-card">
                <div class="photo-placeholder">WEATHERLOK SHINGLE PHOTO</div>
                <div class="profile-details">
                    <h3>WeatherLok Shingle</h3>
                    <div class="color-label">Available Colors</div>
                    <div class="color-list">
                        <span class="color-tag">Charcoal</span>
                        <span class="color-tag">Weatheredwood</span>
                    </div>
                    <a href="#" class="cta-button">Select Profile</a>
                </div>
            </div>

            <div class="profile-card">
                <div class="photo-placeholder">WOOD SHAKE PHOTO</div>
                <div class="profile-details">
                    <h3>Wood Shake</h3>
                    <div class="color-label">Available Colors</div>
                    <div class="color-list">
                        <span class="color-tag">Black</span>
                        <span class="color-tag">Timberwood</span>
                        <span class="color-tag">Chestnut</span>
                        <span class="color-tag">Cedar</span>
                    </div>
                    <a href="#" class="cta-button">Select Profile</a>
                </div>
            </div>

            <div class="profile-card">
                <div class="photo-placeholder">WEATHERLOK SHAKE PHOTO</div>
                <div class="profile-details">
                    <h3>WeatherLok Shake</h3>
                    <div class="color-label">Available Colors</div>
                    <div class="color-list">
                        <span class="color-tag">Charcoal Shake</span>
                        <span class="color-tag">Weathered Shake</span>
                    </div>
                    <a href="#" class="cta-button">Select Profile</a>
                </div>
            </div>

        </div>
    </div>

</body>
</html>

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.