Site Builder

Editing: How It Works.html

writable 0666

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>How It Works - BestDealOn.com</title>
<style>
    html, body {
        margin: 0;
        padding: 0;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        color: #333;
        height: 100%;
    }
    body {
        /* Animated gradient background */
        background: linear-gradient(-45deg, #54e9ff, #b2f7ef, #fad0c4, #ffd6e0);
        background-size: 400% 400%;
        animation: gradientBG 12s ease infinite;
    }
    @keyframes gradientBG {
        0% { background-position:0% 50%; }
        50% { background-position:100% 50%; }
        100% { background-position:0% 50%; }
    }

.wrapper {
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px 20px;
    }

header {
        text-align: center;
        padding: 40px 0 20px 0;
    }
    header h1 {
        font-size: 3rem;
        margin-bottom: 10px;
        color: #222;
    }
    header p {
        font-size: 1.2rem;
        max-width: 600px;
        margin: 0 auto;
        color: #444;
    }

.steps {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 60px;
    }

.step {
        background: rgba(255,255,255,0.8);
        border-radius: 10px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.1);
        flex: 1 1 calc(33% - 20px);
        min-width: 280px;
        margin: 10px;
        padding: 30px;
        text-align: center;
        transition: transform 0.3s;
        cursor: default;
    }
    .step:hover {
        transform: translateY(-5px);
    }

.step .icon {
        font-size: 3rem;
        margin-bottom: 20px;
    }

.step h3 {
        font-size: 1.6rem;
        margin-bottom: 15px;
        color: #333;
    }

.step p {
        font-size: 1rem;
        line-height: 1.6;
        color: #555;
    }

.highlight {
        color: #000;
        font-weight: bold;
    }

.cta-section {
        text-align: center;
        margin-top: 80px;
    }

.cta-section h2 {
        font-size: 2.5rem;
        margin-bottom: 20px;
        color: #222;
    }

.cta-section p {
        font-size: 1.1rem;
        max-width: 700px;
        margin: 0 auto 30px auto;
        color: #444;
    }

.cta-section a {
        display: inline-block;
        background: #333;
        color: #fff;
        padding: 15px 30px;
        border-radius: 8px;
        font-weight: bold;
        text-decoration: none;
        letter-spacing: 1px;
        transition: background 0.3s;
    }
    .cta-section a:hover {
        background: #555;
    }

footer {
        text-align: center;
        margin-top: 100px;
        font-size: 0.9rem;
        color: #666;
    }

/* Responsive */
    @media(max-width: 900px) {
        .step {
            flex: 1 1 calc(100% - 20px);
        }
    }

</style>
</head>
<body>
<div class="wrapper">
    <header>
        <h1>How It Works</h1>
        <p>Experience a revolutionary peer-to-peer marketplace, where trust and global commerce unite through crypto.  
           Here’s how you build credibility, trade freely, and grow your Web3.0 credit score at BestDealOn.com.</p>
    </header>

<section class="steps">
        <div class="step">
            <div class="icon">👜</div>
            <h3>1. List Your Items</h3>
            <p>Turn your unused goods, collectibles, or specialized services into crypto-earning opportunities.  
               Just set your price in your preferred cryptocurrency, add pictures, and let the world discover your offerings.</p>
        </div>
        <div class="step">
            <div class="icon">🔗</div>
            <h3>2. Connect Your Wallet</h3>
            <p>Link your crypto wallet—no banks, no intermediaries.  
               Your wallet address becomes your unique identity. Every transaction you complete will contribute to building your <span class="highlight">Blockchain Credit Score</span>.</p>
        </div>
        <div class="step">
            <div class="icon">🔍</div>
            <h3>3. Discover and Buy</h3>
            <p>Browse a global marketplace of real-world products and services, all priced in crypto.  
               Scan a QR code or copy the address to pay directly from your wallet. It’s fast, transparent, and secure.</p>
        </div>
        <div class="step">
            <div class="icon">🤝</div>
            <h3>4. Peer-to-Peer Trust</h3>
            <p>No centralized gatekeepers. Every transaction is recorded on the blockchain, verifying legitimacy.  
               Rate and review your counterparties. Positive feedback boosts everyone’s credibility and trust in the marketplace.</p>
        </div>
        <div class="step">
            <div class="icon">🌍</div>
            <h3>5. Build Your Reputation</h3>
            <p>Your successful trades, punctual fee settlements, and honest reviews contribute to your <span class="highlight">Web3.0 Credit Score</span>.  
               A higher score means greater visibility, better opportunities, and enhanced trust.</p>
        </div>
        <div class="step">
            <div class="icon">🚀</div>
            <h3>6. Grow & Expand</h3>
            <p>As your credit score grows, your credibility as a buyer or seller skyrockets.  
               Attract quality transactions, form long-term partnerships, and participate fully in a decentralized, borderless economy.</p>
        </div>
    </section>

<section class="cta-section">
        <h2>Ready to Experience a New Era of Commerce?</h2>
        <p>BestDealOn.com brings you a global marketplace built on transparency and trust.  
           Start building your blockchain credibility today—join the community, list your first item, or make your first purchase.</p>
        <a href="#your-sign-up-link">Join Now</a>
    </section>

<footer>
        &copy; <span id="year"></span> BestDealOn.com | A Decentralized Marketplace for the Web3.0 Economy
    </footer>
</div>

Site Builder

Editing: How It Works.html

Site Builder