Welcome — start here

This guide is written for everyone — including people who've never written a line of code. If you can edit a document in Microsoft Word, you can use AraSites. There's a developer section near the bottom for people who want to go deeper.

What's in your download

When you unzip AraSites, you'll see folders and files. Most of them you'll never touch. Here are the only ones you actually need to know about:

• index.html — the demo selector (homepage showing all 57 demos)
• demo-business.html, demo-shop.html, etc. — one file per demo. Pick one as your starting point.
• assets/ — the folder where your images, styles, and fonts live. You'll only edit assets/images/.
• documentation/ — what you're reading right now.

Everything else can stay exactly as it is.

What you'll need

You need two things. Both are free.

That's the entire setup. No Node.js, no terminal, no build tools.

Your first look

Right now you can preview AraSites locally without changing a thing.

Pick a demo

AraSites ships with 57 demos. Pick the one closest to what you want and copy it.

Change the text

Open the demo file in VS Code (or your text editor). You'll see lots of code with words mixed in. Don't panic — you only edit the words.

Find-and-replace is your friend

Press Cmd + F on Mac or Ctrl + F on Windows to open the search bar. Most editors let you "find & replace" — change every "Northwind Consulting" to "Your Company" in one go.

The pattern: words live between tags

HTML looks like this:

<h1>Growth strategy for ambitious teams</h1>

The angle brackets <h1> and </h1> are tags. Don't touch those. Just change the words in between.

Change images

The demo photos live in assets/images/demo/, one folder per demo. Replace them with your own photos before going live.

<img src="assets/images/demo/medical/care-team.webp" alt="...">

<img src="assets/images/team-photo.jpg" alt="...">

What format and size?

• Format: JPG for photos, PNG for graphics with transparency, SVG for logos.
• Size: 2× the display size for retina displays. So a hero image displayed at 720px should be exported at 1440px wide.
• Compress them: use Squoosh (free, no signup). Most JPGs can shrink 60% with no visible loss.
• Don't use stock photos with watermarks. Use Unsplash, Pexels, or your own photos.

Change the logo

The logo is in two places at the top of every page (the visible navbar) and at the bottom (the footer).

Find this pattern:

<a href="index.html" class="navbar-brand">
  <span class="navbar-brand-mark">A</span>
  AraSites
</a>

Change the letter A to your first initial (or two letters), and change AraSites to your business name.

Want to use an image logo instead?

Replace the whole thing with an image:

<a href="index.html" class="navbar-brand">
  <img src="assets/images/my-logo.svg" alt="My Company" style="height: 32px;">
</a>

Change colors

One of AraSites's superpowers: you can recolor the entire site in 30 seconds by editing about 6 lines.

:root {
  /* Brand colors */
  --color-primary: #6366f1;
  --color-primary-dark: #4f46e5;
  --color-secondary: #ec4899;
  --color-accent: #14b8a6;
  ...
}

Change links & navigation

Look for this pattern in the navbar near the top of any demo file:

<ul class="nav-menu">
  <li><a href="#services">Services</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

Each <li> line is one menu item. Change the link target (after href=) and the visible text (between > and </a>).

• href="#about" — scrolls to the section with id="about" on the same page
• href="contact.html" — links to another file in the same folder
• href="https://google.com" — external link to another website

Change the favicon

The favicon is the tiny icon in browser tabs. AraSites ships with a generated SVG. Easiest replacement:

<link rel="icon" type="image/png" href="assets/images/favicon.png">

Where to host your site

AraSites is a folder of HTML files. Any static-site host will work. Free, reliable, no credit card required:

• Netlify — easiest. Drag-and-drop your folder, get a live URL in 30 seconds. Recommended for beginners
• Vercel — similar to Netlify, slightly more dev-oriented.
• GitHub Pages — free, but requires a GitHub account and Git basics.
• Cloudflare Pages — also great, slightly more setup.

If you already have hosting through a registrar (GoDaddy, Hover, Namecheap), you can also FTP the folder there.

Step-by-step: publish on Netlify (the easy way)

Use your own domain

If you bought a domain (like yourcompany.com), you can point it at your hosted site.

Pre-launch checklist

Run through this before you tell anyone the URL.

• Replaced every demo photo with your own (search for assets/images/demo/ in all files — should return zero matches)
• Updated the page <title> on every page you're using
• Updated the <meta description> on every page
• Set up a working contact form (see next section — links to Formspree)
• Replaced placeholder email addresses (hello@example.com) with your real one
• Updated phone numbers, addresses, and any links to #
• Replaced the favicon
• Tested the site on your phone
• Added Google Analytics or Plausible if you want stats (see Analytics section)
• Updated robots.txt and sitemap.xml with your real domain

Add a new page

The easiest way is to copy an existing one and edit it.

Remove a section

Every section is wrapped in <section>...</section> tags. To delete one:

1. Find the section in your editor
2. Select from <section> to its matching </section>
3. Delete

VS Code makes this easy — click anywhere inside a section, press Cmd + Shift + L (Mac) or use "select to matching tag" to grab the whole thing.

Make the contact form actually work

The contact forms in AraSites are visual templates. They show a "Thanks!" message but don't actually email anyone. To make them work, use a free form service:

<form action="https://formspree.io/f/abc123xyz" method="POST">

<input type="email" name="email" class="form-control" required>

Other good options: Getform, Basin, Web3Forms.

Add analytics

Want to know how many people visit your site? Pick one and paste a snippet into your pages.

Plausible (privacy-friendly, no cookies, ~$9/month) — recommended

After signing up, paste this just before </head> on every page:

<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>

Google Analytics 4 (free)

Sign up at analytics.google.com. Paste their snippet (it'll start with <!-- Google tag (gtag.js) -->) before </head> on every page.

SEO basics

AraSites already includes the technical SEO foundation. Your only job is to fill in good content.

• Write a unique <title> on every page — 50 – 60 characters, includes your brand
• Write a unique <meta description> — 150 – 160 characters, summarizes the page
• Use one <h1> per page (AraSites's pages already follow this)
• Replace placeholder images with real ones (Google prefers real images)
• Update the https://arasites.arahoster.com URLs in robots.txt and sitemap.xml to your real domain. See pre-launch checklist
• Submit your sitemap to Google Search Console once you're live
• Add JSON-LD structured data if you have specific content types (AraSites has examples for Product, Article, JobPosting, Event, FAQPage in the relevant pages)

File structure Developer

arasites/
├── index.html                  ← demo selector landing
├── demo-*.html                 ← 57 demo files
├── headers-footers.html        ← 20 navbar + footer variants
├── about.html · contact.html · etc. ← 56 inner, sales & utility pages
├── assets/
│   ├── css/style.css           ← compiled stylesheet (~2,500 lines)
│   ├── scss/                   ← SCSS source (variables · mixins · root)
│   ├── js/main.js              ← vanilla JS (8 KB)
│   ├── images/                 ← your images go here
│   ├── fonts/                  ← self-hosted Inter variable woff2
│   └── vendor/bootstrap-icons/ ← self-hosted icon font
├── documentation/index.html    ← this file
├── robots.txt · sitemap.xml    ← SEO files
├── CHANGELOG.txt
└── README.md

Theme tokens (CSS variables)

AraSites uses CSS custom properties for all design tokens, exposed at :root in assets/css/style.css. Override per-page or per-component by re-declaring them:

:root {
  --color-primary:        #6366f1;
  --color-primary-dark:   #4f46e5;
  --color-secondary:      #ec4899;
  --color-accent:         #14b8a6;

  --font-sans:    "Inter", system-ui, sans-serif;
  --font-display: "Inter", system-ui, sans-serif;
  --font-mono:    ui-monospace, monospace;

  --radius:       0.5rem;
  --radius-xl:    1rem;
  --container-max: 1200px;
  /* ...and more */
}

/* Override for a single demo */
[data-theme="ocean"] {
  --color-primary: #06b6d4;
}

Components

The compiled CSS is organized into 25 numbered sections — see the table of contents at the top of assets/css/style.css. Major components:

• .btn (variants: .btn-primary, .btn-outline, .btn-dark, .btn-lg, etc.)
• .navbar, .nav-menu, .nav-link
• .hero, .hero-title, .hero-subtitle, decorations like .hero-glow, .hero-grid-bg
• .feature-card, .service-card, .product-card, .blog-card, .team-card, .pricing-card
• .bento (12-column premium grid)
• .t-slider (testimonial slider, JS-driven via data-slider)
• .accordion + .accordion-item (native <details>, no JS)
• .marquee-strip + .marquee-track (auto-scrolling logo strip)
• .timeline, .glass-card, .code-block, .preview-window

Scroll-reveal animations: add data-aos="fade-up" (also fade, fade-left, fade-right, zoom-in) and optionally data-aos-delay="200".

SCSS build

SCSS is optional. AraSites ships with the compiled CSS so you can edit without a build. To work from source:

npm install --save-dev sass
npx sass assets/scss/style.scss assets/css/style.css --style=compressed

Or watch mode: npx sass --watch assets/scss/style.scss:assets/css/style.css

The SCSS source ships with _variables.scss, _mixins.scss, _root.scss. See comments in style.scss for the recommended file split if you want to fully migrate component CSS into partials.

Fonts & icons

All fonts and icons are self-hosted — AraSites makes no requests to Google Fonts or any CDN, which keeps pages fast and avoids privacy issues for visitors in Europe.

• assets/fonts/fonts.css — Inter, Cairo (Arabic) and every display font used by the demos (SIL Open Font License 1.1)
• assets/vendor/bootstrap-icons/ — Bootstrap Icons (MIT)

To use a different font, add its @font-face rule to fonts.css and update --font-sans in style.css.

Header & footer styles

Every page can use one of 8 header styles and 6 footer styles. Visitors can try them live from the Customize button; to fix a style for your site, add it to the <html> tag of your pages:

<html lang="en" data-header="pill" data-footer="light">

• Headers: classic (default), centered, dark, glass, pill, minimal, topbar, gradient
• Footers: classic (default), light, centered, gradient, brand, compact

The styles live in assets/css/layouts.css. The contact details in the topbar header are set in assets/js/main.js (search for ara-topbar).

Marketing assets

For marketplace listings, assets/images/previews/ contains starter SVGs:

• marketplace-thumbnail.svg — 590×300 listing thumbnail
• feature-graphic.svg — 1880×940 cover/feature image

Replace the mocked-up demo cards with real screenshots of your customized version before submission.

Glossary

HTML

The language web pages are written in. AraSites is HTML files.

CSS

The styling layer — colors, fonts, spacing. AraSites's CSS lives in assets/css/style.css.

JavaScript (JS)

The interactivity layer — what makes the navbar open, sliders auto-rotate, etc. AraSites uses vanilla JS — no frameworks.

Tag

Things in angle brackets like <h1> or <p>. They tell the browser what kind of content this is.

Class

A label you put on HTML to apply styles. class="btn btn-primary" makes something look like AraSites's primary button.

CSS custom property

Also called "CSS variable." A reusable value — like --color-primary — that you can change in one place to update everywhere.

Hex code

A color written as #6366f1. The 6 characters encode red, green, blue.

Static site

A site made of plain HTML files (like AraSites). No server-side processing, no database. Loads fast, hosts anywhere.

DNS

The system that maps your domain name (yourcompany.com) to a hosting server. Setting DNS records is how you point your domain at Netlify.

SEO

Search Engine Optimization — making your site discoverable on Google.

FAQ

Support

We read every email and reply within one business day during normal hours. Item-support buyers get email + dedicated reply slot.

Before you write in, please check:

• This documentation (try the search/find on this page)
• The FAQ page
• The exact text of any error in your browser's console (right-click → Inspect → Console tab)

Then open a support ticket at me.arahoster.com (Arabic or English).

Changelog

v1.0.0 — initial release
  57 demos, 56 inner pages, 20 header/footer variants
  CSS-variable theming, vanilla JS, no framework
  Self-hosted Inter + Bootstrap Icons
  Full SEO (OG, Twitter, canonical, JSON-LD, robots, sitemap)
  Documentation rewritten for non-developers
  See CHANGELOG.txt for the full file map

Thanks for choosing AraSites. Make something great.