# designmodo/html-website-templates architecture

> Architecture diagram of the GitHub repository designmodo/html-website-templates, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/designmodo/html-website-templates
- Repository: https://github.com/designmodo/html-website-templates

## Overview

This repository provides four standalone static website templates: animated landing, horizontal-scroll one-page, app landing, and portfolio. A visitor views a template and can use its interactive slide, navigation, popup, and responsive behaviors; the PHP contact handler can send submitted messages by email. The README also describes broader Slides builder capabilities, but this tree contains template files rather than the builder itself. Source excerpts show interaction and email behavior, but not the HTML wiring between pages, scripts, and forms, so those links are omitted.

Main entry points: [`Animated Landing Page Website Template/ajax-email.php`](https://github.com/designmodo/html-website-templates/blob/master/Animated%20Landing%20Page%20Website%20Template/ajax-email.php) (Email handler), [`Animated Landing Page Website Template/index.html`](https://github.com/designmodo/html-website-templates/blob/master/Animated%20Landing%20Page%20Website%20Template/index.html) (Animated landing), [`Horizontal Scroll One Page Template Website/index.html`](https://github.com/designmodo/html-website-templates/blob/master/Horizontal%20Scroll%20One%20Page%20Template%20Website/index.html) (Horizontal page), [`Landing Page Website for App/index.html`](https://github.com/designmodo/html-website-templates/blob/master/Landing%20Page%20Website%20for%20App/index.html) (App landing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_templates["Website templates"]
  node_animated["Animated landing<br/>[index.html]"]
  node_horizontal["Horizontal page<br/>[index.html]"]
  node_app["App landing<br/>[index.html]"]
  node_portfolio["Portfolio page<br/>[index.html]"]
end

subgraph group_runtime["Browser interactions"]
  node_slide_runtime["Slide interactions<br/>[slides.js]"]
  node_plugin_helpers["Browser helpers<br/>[plugins.js]"]
end

subgraph group_contact["Contact delivery"]
  node_animated_contact["Email handler<br/>[ajax-email.php]"]
end

node_visitor(("Visitor"))
node_mail_service(("PHP mail service"))

node_visitor -->|"views"| node_animated
node_visitor -->|"views"| node_horizontal
node_visitor -->|"views"| node_app
node_visitor -->|"views"| node_portfolio
node_visitor -->|"interacts"| node_slide_runtime
node_visitor -.->|"submits message"| node_animated_contact
node_animated_contact -->|"sends email"| node_mail_service

click node_animated "https://github.com/designmodo/html-website-templates/blob/master/Animated%20Landing%20Page%20Website%20Template/index.html"
click node_horizontal "https://github.com/designmodo/html-website-templates/blob/master/Horizontal%20Scroll%20One%20Page%20Template%20Website/index.html"
click node_app "https://github.com/designmodo/html-website-templates/blob/master/Landing%20Page%20Website%20for%20App/index.html"
click node_portfolio "https://github.com/designmodo/html-website-templates/blob/master/One%20Page%20Portfolio%20Website%20Template/index.html"
click node_slide_runtime "https://github.com/designmodo/html-website-templates/blob/master/Animated%20Landing%20Page%20Website%20Template/js/slides.js"
click node_plugin_helpers "https://github.com/designmodo/html-website-templates/blob/master/Animated%20Landing%20Page%20Website%20Template/js/plugins.js"
click node_animated_contact "https://github.com/designmodo/html-website-templates/blob/master/Animated%20Landing%20Page%20Website%20Template/ajax-email.php"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_animated,node_horizontal,node_app,node_portfolio toneBlue
class node_slide_runtime,node_plugin_helpers toneAmber
class node_animated_contact toneMint
class node_visitor,node_mail_service toneIndigo
```

## Components

### Website templates

- [Animated landing](https://github.com/designmodo/html-website-templates/blob/master/Animated%20Landing%20Page%20Website%20Template/index.html): `Animated Landing Page Website Template/index.html`
- [Horizontal page](https://github.com/designmodo/html-website-templates/blob/master/Horizontal%20Scroll%20One%20Page%20Template%20Website/index.html): `Horizontal Scroll One Page Template Website/index.html`
- [App landing](https://github.com/designmodo/html-website-templates/blob/master/Landing%20Page%20Website%20for%20App/index.html): `Landing Page Website for App/index.html`
- [Portfolio page](https://github.com/designmodo/html-website-templates/blob/master/One%20Page%20Portfolio%20Website%20Template/index.html): `One Page Portfolio Website Template/index.html`

### Browser interactions

- [Slide interactions](https://github.com/designmodo/html-website-templates/blob/master/Animated%20Landing%20Page%20Website%20Template/js/slides.js): `Animated Landing Page Website Template/js/slides.js`
- [Browser helpers](https://github.com/designmodo/html-website-templates/blob/master/Animated%20Landing%20Page%20Website%20Template/js/plugins.js): `Animated Landing Page Website Template/js/plugins.js`

### Contact delivery

- [Email handler](https://github.com/designmodo/html-website-templates/blob/master/Animated%20Landing%20Page%20Website%20Template/ajax-email.php): `Animated Landing Page Website Template/ajax-email.php`

### Other components

- **Visitor**
- **PHP mail service**

## Connections

- Visitor → Animated landing: views
- Visitor → Horizontal page: views
- Visitor → App landing: views
- Visitor → Portfolio page: views
- Visitor → Slide interactions: interacts
- Visitor → Email handler: submits message
- Email handler → PHP mail service: sends email