Okay, this is a significant step! Generating complete, styled HTML/CSS/JS code for a multi-page website is complex. I will provide the fundamental structure and content for each page in separate files, along with a shared CSS file for a clean, modern design, and a basic JS file.

Important Considerations:

WordPress Integration: This code provides the raw HTML content structure and styling. You will need to:

Choose a good RTL-supporting WordPress theme.

Copy the HTML content from within the tags of each .html file provided below and paste it into the corresponding WordPress page editor (using the ‘Code Editor’ or ‘Text’ view, or rebuilding it block-by-block using your theme’s editor/page builder like Elementor/Gutenberg).

Copy the CSS rules from style.css into your theme’s ‘Additional CSS’ area (Appearance > Customize > Additional CSS) or preferably, create a child theme and enqueue the stylesheet properly.

You might need to slightly adjust CSS selectors depending on the classes your theme adds.

Header & Footer: The provided HTML includes placeholders for where the header (logo, navigation, phone) and footer (copyright, links) would go. In WordPress, these are typically controlled by your Theme, not the page content itself. You’ll configure these using your theme’s customization options. The CSS provides basic styling hints for them.

Images: Image paths (images/…) are placeholders. You need to upload your images to the WordPress Media Library and replace the src attributes with the correct WordPress image URLs. Crucially, add descriptive Arabic Alt Text to each image via the Media Library or page editor for SEO.

JavaScript: The basic script.js is for potential future enhancements (like a mobile menu toggle, which would need corresponding HTML in the header). You might need more specific JS depending on plugins or theme features.

Forms: The contact form HTML is provided. You will need a WordPress Contact Form Plugin (like WPForms, Contact Form 7, Fluent Forms) to make it functional (handle submissions, send emails). Configure the plugin to create fields matching the HTML structure.

Responsiveness: The CSS includes basic media queries for responsiveness. Test thoroughly on different screen sizes.

File Structure:

your-website-folder/
├── index.html (Homepage)
├── ac-repair.html (AC Repair Page)
├── washing-machine-repair.html (Washing Machine Repair Page)
├── dryer-repair.html (Dryer Repair Page)
├── oven-repair.html (Oven Repair Page)
├── about.html (About Us Page)
├── contact.html (Contact Us Page)
├── css/
│ └── style.css (Stylesheet for all pages)
├── js/
│ └── script.js (JavaScript file)
└── images/ (Folder for your images – PLACEHOLDERS)
├── hero-background.jpg (Example)
├── ac-icon.png (Example)
├── washer-icon.png (Example)
├── oven-icon.png (Example)
├── dryer-icon.png (Example)
├── lg-logo.png (Example)
├── samsung-logo.png (Example)
├── gree-logo.png (Example)
└── placeholder.png (Generic placeholder)

1. css/style.css (Shared Stylesheet)

/* —=== Basic Reset & RTL Setup ===— */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
direction: rtl; /* Right-to-left layout for Arabic */
font-family: ‘Tajawal’, ‘Cairo’, sans-serif; /* Modern Arabic font */
line-height: 1.7;
color: #333;
background-color: #f9f9f9;
}

/* —=== Basic Typography ===— */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
margin-bottom: 1rem;
color: #1a2d40; /* Dark blue */
line-height: 1.3;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; margin-top: 2.5rem;}
h3 { font-size: 1.5rem; margin-top: 2rem; }
p {
margin-bottom: 1rem;
color: #555;
}

a {
text-decoration: none;
color: #007bff; /* Standard link blue */
transition: color 0.3s ease;
}

a:hover {
color: #0056b3;
}

ul {
list-style-position: inside; /* Keeps bullets aligned right in RTL */
margin-bottom: 1rem;
padding-right: 1.5rem; /* Indentation for RTL */
}

ul li {
margin-bottom: 0.5rem;
}

/* —=== Layout & Container ===— */
.container {
width: 90%;
max-width: 1140px;
margin: 0 auto;
padding: 2rem 0;
}

section {
padding: 4rem 0;
border-bottom: 1px solid #eee;
}

section:last-of-type {
border-bottom: none;
}

/* —=== Header & Footer (Theme Controlled in WP – Basic Styles) ===— */
/* Placeholder Styles – Adapt to your Theme */
.site-header {
background-color: #ffffff;
padding: 1rem 0;
border-bottom: 1px solid #eee;
position: sticky;
top: 0;
z-index: 1000;
}

.site-header .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0; /* Reduced padding for header */
}

.site-logo a {
font-size: 1.8rem;
font-weight: bold;
color: #1a2d40;
}

.main-navigation ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}

.main-navigation li {
margin-right: 1.5rem; /* Spacing between nav items */
}
.main-navigation li:last-child {
margin-right: 0;
}

.main-navigation a {
color: #333;
font-weight: 500;
padding: 0.5rem 0;
border-bottom: 2px solid transparent;
transition: border-color 0.3s ease;
}

.main-navigation a:hover,
.main-navigation .current-menu-item a { /* Style for active page */
color: #007bff;
border-bottom-color: #007bff;
}

.header-phone {
font-size: 1.2rem;
font-weight: bold;
color: #dc3545; /* Red for emphasis */
}

.header-phone a {
color: inherit;
}

.site-footer {
background-color: #1a2d40;
color: #f1f1f1;
padding: 2rem 0;
text-align: center;
font-size: 0.9rem;
}

.site-footer p {
color: #ccc;
margin-bottom: 0.5rem;
}
.site-footer a {
color: #fff;
}
.site-footer a:hover {
color: #00aaff;
}

/* —=== Buttons ===— */
.cta-button {
display: inline-block;
background-color: #007bff;
color: #fff;
padding: 0.8rem 1.8rem;
border-radius: 5px;
font-weight: 600;
text-align: center;
transition: background-color 0.3s ease, transform 0.2s ease;
border: none;
cursor: pointer;
font-size: 1rem;
}

.cta-button:hover {
background-color: #0056b3;
color: #fff;
transform: translateY(-2px);
}

.cta-button-secondary {
background-color: #6c757d; /* Gray */
}

.cta-button-secondary:hover {
background-color: #5a6268;
}

.phone-prominent {
font-size: 1.5rem;
font-weight: bold;
color: #dc3545; /* Red */
display: block;
margin: 1rem 0;
text-align: center;
}
.phone-prominent a {
color: inherit;
}

/* —=== Hero Section (Homepage) ===— */
.hero-section {
background: url(‘../images/hero-background.jpg’) no-repeat center center/cover; /* Replace with your image */
color: #fff;
text-align: center;
padding: 6rem 0;
position: relative;
border-bottom: none; /* Remove border for hero */
}

.hero-section::before { /* Overlay for text readability */
content: ”;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(26, 45, 64, 0.7); /* Dark blue overlay */
z-index: 1;
}

.hero-section .container {
position: relative;
z-index: 2;
}

.hero-section h1 {
color: #fff;
font-size: 3rem;
margin-bottom: 1rem;
}

.hero-section p {
color: #eee;
font-size: 1.2rem;
margin-bottom: 2rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}

/* —=== Services Section (Homepage & General) ===— */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
gap: 2rem;
margin-top: 2rem;
}

.service-card {
background-color: #fff;
padding: 2rem 1.5rem;
border-radius: 8px;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.service-card img.icon { /* Class for service icons */
max-width: 60px;
margin-bottom: 1rem;
}

.service-card h3 {
font-size: 1.3rem;
color: #007bff;
margin-bottom: 0.8rem;
}

.service-card p {
font-size: 0.95rem;
margin-bottom: 1.5rem;
}

/* —=== Why Choose Us Section ===— */
.why-choose-us ul {
list-style: none; /* Remove default bullets */
padding: 0;
}

.why-choose-us li {
position: relative;
padding-right: 2rem; /* Space for icon */
margin-bottom: 1rem;
font-size: 1.05rem;
}

.why-choose-us li::before { /* Custom Checkmark Icon (FontAwesome example) */
content: ‘\f00c’; /* FontAwesome Check icon unicode */
font-family: ‘Font Awesome 5 Free’; /* Requires FontAwesome setup */
font-weight: 900;
color: #28a745; /* Green */
position: absolute;
right: 0;
top: 4px;
}
/* If not using FontAwesome, use a background image or CSS symbol */

/* —=== Brands Section ===— */
.brands-section {
background-color: #fff; /* White background */
}

.brands-logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 2rem;
}

.brands-logos img {
max-height: 50px; /* Adjust as needed */
width: auto;
opacity: 0.8;
transition: opacity 0.3s ease;
}

.brands-logos img:hover {
opacity: 1;
}

/* —=== Content Sections (Service Pages) ===— */
.service-page-content ul {
padding-right: 1rem; /* Slightly less indent for content lists */
}

.service-page-content strong { /* Highlight brand names or key terms */
color: #1a2d40;
font-weight: 600;
}

/* —=== Contact Page ===— */
.contact-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}

.contact-info-item {
text-align: center;
}

.contact-info-item i { /* For icons (e.g., FontAwesome) */
font-size: 2rem;
color: #007bff;
margin-bottom: 0.8rem;
}

.contact-form label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #333;
}

.contact-form input[type=”text”],
.contact-form input[type=”tel”],
.contact-form input[type=”email”],
.contact-form select,
.contact-form textarea {
width: 100%;
padding: 0.8rem;
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
font-family: inherit; /* Use body font */
font-size: 1rem;
}

.contact-form textarea {
min-height: 120px;
resize: vertical;
}

.contact-form button[type=”submit”] {
width: auto; /* Don’t force full width */
padding: 0.8rem 2.5rem;
}

.google-map iframe {
width: 100%;
height: 350px;
border: 0;
border-radius: 5px;
margin-top: 2rem;
}

/* —=== Responsive Design ===— */
@media (max-width: 992px) {
h1 { font-size: 2.2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.4rem; }
.hero-section h1 { font-size: 2.5rem; }
.hero-section p { font-size: 1.1rem; }
}

@media (max-width: 768px) {
.container { width: 95%; }
.site-header .container { flex-direction: column; text-align: center;}
.main-navigation ul { flex-direction: column; margin-top: 1rem; }
.main-navigation li { margin-right: 0; margin-bottom: 0.5rem; }
.header-phone { margin-top: 1rem; }

.hero-section { padding: 4rem 0; }
.hero-section h1 { font-size: 2rem; }

.services-grid { grid-template-columns: 1fr; } /* Stack services */
.contact-info-grid { grid-template-columns: 1fr; } /* Stack contact info */

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }

/* Consider adding a mobile menu toggle button and hiding .main-navigation by default */
.mobile-menu-toggle { display: block; /* Add styles for your hamburger icon */ }
/* .main-navigation { display: none; } */ /* Hide by default */
/* .main-navigation.active { display: flex; } */ /* Show when active */
}

@media (max-width: 576px) {
.cta-button { width: 100%; padding: 0.8rem 1rem; }
.contact-form button[type=”submit”] { width: 100%; }
.phone-prominent { font-size: 1.3rem; }
}
IGNORE_WHEN_COPYING_START
content_copy
download
Use code with caution.
Css
IGNORE_WHEN_COPYING_END

2. js/script.js (Basic JavaScript)

document.addEventListener(‘DOMContentLoaded’, function() {

// — Mobile Menu Toggle (Example – Requires HTML button/nav structure) —
const menuToggle = document.querySelector(‘.mobile-menu-toggle’); // Add this class to your hamburger button
const mainNav = document.querySelector(‘.main-navigation’); // Add this class to your main nav container

if (menuToggle && mainNav) {
menuToggle.addEventListener(‘click’, function() {
mainNav.classList.toggle(‘active’); // Toggles an ‘active’ class for CSS styling (display: block/flex)
// Optional: Add ARIA attributes for accessibility
const isExpanded = mainNav.classList.contains(‘active’);
menuToggle.setAttribute(‘aria-expanded’, isExpanded);
});
}

// — Smooth scroll for anchor links (Optional) —
document.querySelectorAll(‘a[href^=”#”]’).forEach(anchor => {
anchor.addEventListener(‘click’, function (e) {
const hrefAttribute = this.getAttribute(‘href’);
// Ensure it’s not just a hash (#) or hash-bang (#!)
if (hrefAttribute && hrefAttribute.length > 1 && hrefAttribute.startsWith(‘#’) && !hrefAttribute.startsWith(‘#!’)) {
const targetElement = document.querySelector(hrefAttribute);
if (targetElement) {
e.preventDefault();
targetElement.scrollIntoView({
behavior: ‘smooth’,
block: ‘start’ // Or ‘center’
});
}
}
});
});

// — Add more JS enhancements as needed —
// Example: Simple fade-in effect for sections on scroll
// Example: Form validation additions (though browser validation + server-side is key)

console.log(“Appliance Repair Website Script Loaded”);

});
IGNORE_WHEN_COPYING_START
content_copy
download
Use code with caution.
JavaScript
IGNORE_WHEN_COPYING_END

3. HTML Files (Content Structure)

index.html (Homepage)

أفضل خدمة صيانة وتصليح أجهزة منزلية في الدمام

خبراء متخصصون في إصلاح الغسالات، المكيفات، الأفران، والنشافات بأسرع وقت وبأسعار مناسبة في جميع أنحاء الدمام.

اطلب الخدمة الآن

أو اتصل بنا مباشرة: 054 487 5767

خدماتنا المتخصصة في صيانة الأجهزة بالدمام

صيانة وتصليح المكيفات

نقدم خدمات صيانة مكيفات سبليت وشباك لجميع الماركات مثل LG و Gree وغيرها. حلول لجميع مشاكل التبريد والتسريب.

اعرف المزيد

صيانة وتصليح الغسالات

فني غسالات اتوماتيك متخصص لصيانة غسالات ال جي، سامسونج، اريستون، دايو وغيرها. إصلاح جميع الأعطال.

اعرف المزيد

صيانة وتصليح الأفران

تصليح أفران غاز وكهربائية بالدمام. خدمة صيانة وتنظيف الأفران لضمان أفضل أداء وأمان.

اعرف المزيد

صيانة وتصليح النشافات

خدمة إصلاح وصيانة نشافات الملابس لمختلف الماركات لتعود للعمل بكفاءة عالية.

اعرف المزيد

لماذا تختارنا لصيانة أجهزتك في الدمام؟

• خبرة واسعة: سنوات من الخبرة في تصليح الأجهزة المنزلية المختلفة.
• فنيون محترفون: فريق من الفنيين المدربين والمؤهلين (مهندس غسالات اتوماتيك، فني مكيفات، مصلح افران غاز).
• سرعة الاستجابة: نصلك في أسرع وقت ممكن في جميع أحياء الدمام.
• أسعار تنافسية: نقدم أفضل الأسعار مع ضمان جودة الخدمة.
• ضمان على الإصلاح: نثق في عملنا ونقدم ضماناً على قطع الغيار والخدمة (حسب نوع العطل).
• خدمة جميع الماركات: متخصصون في صيانة ماركات شهيرة مثل LG, Samsung, Ariston, Gree, Daewoo, General Electric, Toshiba وغيرها.

نخدم جميع الماركات العالمية

جهازك يحتاج إلى صيانة؟ لا تتردد!

اتصل بنا الآن للحصول على فحص وتشخيص سريع لمشكلة جهازك في الدمام.

054 487 5767

اطلب عرض سعر مجاني

IGNORE_WHEN_COPYING_START
content_copy
download
Use code with caution.
Html
IGNORE_WHEN_COPYING_END

ac-repair.html (AC Repair Page)

IGNORE_WHEN_COPYING_START
content_copy
download
Use code with caution.
Html
IGNORE_WHEN_COPYING_END

washing-machine-repair.html (Washing Machine Repair Page)

IGNORE_WHEN_COPYING_START
content_copy
download
Use code with caution.
Html
IGNORE_WHEN_COPYING_END

dryer-repair.html (Dryer Repair Page)

IGNORE_WHEN_COPYING_START
content_copy
download
Use code with caution.
Html
IGNORE_WHEN_COPYING_END

oven-repair.html (Oven Repair Page)

IGNORE_WHEN_COPYING_START
content_copy
download
Use code with caution.
Html
IGNORE_WHEN_COPYING_END

about.html (About Us Page)

IGNORE_WHEN_COPYING_START
content_copy
download
Use code with caution.
Html
IGNORE_WHEN_COPYING_END

contact.html (Contact Us Page)