Site Builder

Editing: Contact & Support.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>Contact & Support - BestDealOn.com</title>
<style>
    html, body {
        margin:0; padding:0;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        color: #333;
        height:100%;
    }

body {
        background: linear-gradient(45deg, #ffc3a0, #ffafbd, #fda085, #f6d365);
        background-size: 400% 400%;
        animation: gradientBG 20s 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: 60px 0 30px 0;
    }

header h1 {
        font-size: 3rem;
        margin-bottom: 10px;
        color: #222;
    }

header p {
        font-size: 1.2rem;
        max-width: 700px;
        margin: 0 auto;
        color: #444;
    }

.contact-section {
        background: rgba(255,255,255,0.85);
        border-radius: 10px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.1);
        padding: 40px;
        margin-top: 60px;
    }

.contact-section h2 {
        font-size: 2rem;
        margin-bottom: 30px;
        text-align: center;
        color: #222;
    }

.contact-options {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin-bottom: 50px;
    }

.contact-card {
        background: rgba(255,255,255,0.95);
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        flex: 1 1 calc(30% - 20px);
        margin: 10px;
        min-width: 270px;
        padding: 20px;
        text-align: center;
        transition: transform 0.3s;
        cursor: default;
    }

.contact-card:hover {
        transform: translateY(-5px);
    }

.contact-card .icon {
        font-size: 2.5rem;
        margin-bottom: 15px;
    }

.contact-card h3 {
        font-size: 1.4rem;
        margin-bottom: 10px;
        color: #333;
    }

.contact-card p {
        font-size: 1rem;
        color: #555;
        line-height: 1.6;
        margin-bottom: 15px;
    }

.contact-card a {
        display: inline-block;
        color: #333;
        text-decoration: none;
        font-weight: bold;
        border-bottom: 2px solid #333;
        transition: color 0.3s, border-color 0.3s;
        margin-top: 10px;
    }

.contact-card a:hover {
        color: #555;
        border-color: #555;
    }

.support-form h3 {
        font-size: 1.6rem;
        color: #222;
        text-align: center;
        margin-bottom: 30px;
    }

.support-form form {
        max-width: 600px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }

.support-form label {
        font-size: 1rem;
        margin-bottom: 5px;
        color: #444;
    }

.support-form input, .support-form textarea {
        padding: 10px;
        font-size: 1rem;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-family: inherit;
    }

.support-form input[type="submit"] {
        background: #333;
        color: #fff;
        border: none;
        cursor: pointer;
        font-weight: bold;
        transition: background 0.3s;
    }

.support-form input[type="submit"]:hover {
        background: #555;
    }

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

@media(max-width:900px) {
        .contact-card {
            flex: 1 1 100%;
        }
    }
</style>
</head>
<body>
<div class="wrapper">
    <header>
        <h1>Contact & Support</h1>
        <p>Questions, feedback, or need assistance? We’re here to help. Connect with our team and community through the channels below.</p>
    </header>

<section class="contact-section">
        <h2>Get in Touch</h2>
        <div class="contact-options">
            <div class="contact-card">
                <div class="icon">📞</div>
                <h3>Media Contact</h3>
                <p>John Coates</p>
                <p>+1 (727) 610-1188</p>
            </div>
            <div class="contact-card">
                <div class="icon">💌</div>
                <h3>Email Support</h3>
                <p>Prefer to chat via email? Send us a message, and we’ll respond as soon as possible.</p>
                <a href="mailto:support@bestdealon.com">Email Us</a>
            </div>
            <div class="contact-card">
                <div class="icon">👥</div>
                <h3>Community Channels</h3>
                <p>Join our Discord or Telegram groups to connect with fellow users, ask questions, and share tips.</p>
                <a href="#community-link">Join Our Community</a>
            </div>
        </div>

<div class="support-form">
            <h3>Need More Assistance?</h3>
            <form action="#your-form-handler" method="post">
                <label for="name">Name</label>
                <input type="text" id="name" name="name" required placeholder="Your Name" />

<label for="email">Email</label>
                <input type="email" id="email" name="email" required placeholder="Your Email" />

<label for="message">Message</label>
                <textarea id="message" name="message" rows="5" required placeholder="How can we help?"></textarea>

Site Builder

Editing: Contact & Support.html

Site Builder