Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .carousel-container {
            position: fixed;
            top: 0;
            width: 100vw; /* Full width of the screen */
            height: auto; /* Allow dynamic height */
            background-color: #ff0000; /* Red background */
            overflow: hidden;
            color: #ffffff; /* White text */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000; /* Ensure it stays on top of other content */
        }
        .carousel-content {
            display: flex;
            animation: slide 18s ease-in-out infinite; /* Adjusted for 4 items */
            white-space: nowrap; /* Prevent wrapping */
        }
        .carousel-item {
            min-width: 100%;
            text-align: center;
            font-size: 2vw; /* Dynamically adjust font size */
            font-weight: bold; /* Bold text */
            text-transform: uppercase; /* Uppercase text */
            line-height: 1.2; /* Slightly tighter line spacing */
            display: flex; /* Center text vertically and horizontally */
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
        }

        /* Adjustments for small screens (phones) */
        @media (max-width: 480px) {
            .carousel-item {
                font-size: 3vw; /* Smaller font for better fit on phones */
            }
        }

        /* Adjustments for tablets */
        @media (min-width: 481px) and (max-width: 768px) {
            .carousel-item {
                font-size: 2.5vw; /* Moderate font for tablets */
            }
        }

        /* Adjustments for laptops and desktops */
        @media (min-width: 769px) {
            .carousel-item {
                font-size: 2vw; /* Larger font for desktops */
            }
        }

        @keyframes slide {
            0% { transform: translateX(0); } /* First sentence */
            19% { transform: translateX(0); } /* Pause */
            25% { transform: translateX(-100%); } /* Transition to second sentence */
            44% { transform: translateX(-100%); } /* Pause */
            50% { transform: translateX(-200%); } /* Transition to third sentence */
            69% { transform: translateX(-200%); } /* Pause */
            75% { transform: translateX(-300%); } /* Transition to fourth sentence */
            94% { transform: translateX(-300%); } /* Pause */
            100% { transform: translateX(0); } /* Reset to first sentence */
        }
    </style>
</head>
<body>
    <div class="carousel-container">
        <div class="carousel-content">
            <div class="carousel-item">WINTER PROMOTION - SAVE £15 + £5 FOR A GOOGLE REVIEW</div>
            <div class="carousel-item">MAPPING WHILE YOU WAIT: TAKES 1.5 - 2 HOURS TO COMPLETE</div>
            <div class="carousel-item">SAVE £50 WHEN YOU BOOK A SERVICE ALONGSIDE A REMAP</div>
            <div class="carousel-item">BOOK TODAY AND FILL OUT OUR CONTACT FORM</div>
        </div>
    </div>
</body>
</html>



<a href="https://www.rpmsussex.com/additional-services" style="text-decoration: none;">
    <div style="background-color: #007bff; color: white; border: 3px solid #0056b3; padding: 20px; border-radius: 10px; font-family: Arial, sans-serif; text-align: center; margin: 20px auto; width: 90%; max-width: 700px; font-size: 1.5em; font-weight: bold; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transition: transform 0.3s, background-color 0.3s; cursor: pointer;" 
         onmouseover="this.style.backgroundColor='#0056b3'; this.style.transform='scale(1.05)';" 
         onmouseout="this.style.backgroundColor='#007bff'; this.style.transform='scale(1)';">
        🚗 <strong>Check out our additional services</strong> to unlock your car's full potential!
    </div>
</a>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Us</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f9;
      color: #000;
    }
    .content {
      max-width: 95%;
      margin: 0 auto;
      padding: 20px;
      text-align: center;
    }
    .header {
      text-align: center;
      margin-bottom: 20px;
    }
    .header h1 {
      font-size: 2.5em;
      color: #333;
    }
    .header p {
      font-size: 1.1em;
      color: #555;
    }
    .contact-options {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 20px;
    }
    .contact-card {
      background-color: #002147;
      color: white;
      width: 300px;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      transition: transform 0.2s;
      text-align: center;
    }
    .contact-card:hover {
      transform: scale(1.05);
    }
    .contact-card img {
      width: 50px;
      margin-bottom: 15px;
    }
    .contact-card h3 {
      font-size: 1.5em;
      margin-bottom: 10px;
    }
    .contact-card p {
      font-size: 1em;
      margin-bottom: 15px;
    }
    .contact-card a {
      display: inline-block;
      margin-top: 10px;
      color: #f4f4f9;
      text-decoration: none;
      font-weight: bold;
    }
    .contact-card a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="header">
      <h1>Get in Touch with Us!</h1>
      <p>You can reach out to us via WhatsApp, email, or phone for assistance, advice, or information about our services.</p>
    </div>
    <div class="contact-options">
      
      <div class="contact-card">
        <img src="https://img.icons8.com/fluency/96/whatsapp.png" alt="WhatsApp Icon">
        <h3>WhatsApp Us</h3>
        <p>For quick advice, image sharing, and easy one-to-one support, contact us on WhatsApp.</p>
        <p>(Typical response time: minutes)</p>
        <a href="https://wa.me/07702162570" target="_blank">Message on WhatsApp →</a>
      </div>

      
      <div class="contact-card">
        <img src="https://img.icons8.com/fluency/96/phone.png" alt="Phone Icon">
        <h3>Call Us</h3>
        <p>Speak directly with our experts for instant assistance. Our phone lines are open Monday to Friday, 9 AM to 5 PM.</p>
        <p>If there is no response, please call back later or leave a voicemail with your name, number, and the subject of your enquiry.</p>
        <a href="tel:07702162570">Call Us Here →</a>
      </div>

      
      <div class="contact-card">
        <img src="https://img.icons8.com/fluency/96/new-post.png" alt="Email Icon">
        <h3>Email Us</h3>
        <p>Fill out our contact form for detailed inquiries, quotes, or support. We aim to respond within 10 minutes to 1 hour.</p>
        <a href="https://www.rpmsussex.com/contact-2" target="_blank">Email Us Here →</a>
      </div>
    </div>
  </div>
</body>
</html>