added first three mockups

2026-07-20 05:38:53 -05:00
parent 4dce423c4f
commit f839df7863
864 changed files with 235286 additions and 1 deletions
@@ -0,0 +1,233 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>VoltEdge Electrical – HTML Template Documentation</title>
+
+<style>
+
+body{
+font-family:Arial, sans-serif;
+background:#eef3f6;
+padding:40px;
+line-height:1.7;
+color:#333;
+}
+
+.container{
+max-width:1000px;
+margin:auto;
+background:#fff;
+padding:35px;
+border-radius:12px;
+box-shadow:0 0 20px rgba(0,0,0,0.08);
+}
+
+h1,h2,h3{
+color:#1f3a5f;
+}
+
+pre{
+background:#1a1a1a;
+color:#4ae3ff;
+padding:15px;
+border-radius:6px;
+overflow-x:auto;
+}
+
+a{
+color:#1f3a5f;
+font-weight:bold;
+}
+
+ul li{
+margin:6px 0;
+}
+
+hr{
+margin:30px 0;
+}
+
+table{
+width:100%;
+border-collapse:collapse;
+margin-top:15px;
+}
+
+table th,table td{
+border:1px solid #ddd;
+padding:10px;
+text-align:left;
+}
+
+table th{
+background:#f3f6f9;
+}
+
+</style>
+</head>
+
+<body>
+
+<div class="container">
+
+<h1>VoltEdge – Electrical Services HTML Template Documentation</h1>
+
+<p>
+Thank you for purchasing <strong>VoltEdge – Electrical Services & Electrician HTML Template</strong>.
+This documentation will help you install, customize, and deploy the template easily.
+</p>
+
+<hr>
+
+<h2>📁 1. Folder Structure</h2>
+
+<pre><code>
+VoltEdge/
+│── index.html
+│── blog.html
+│── blog-detail.html
+│── faq.html
+│── privacy-policy.html
+│── terms-conditions.html
+│
+├── assets/
+│   ├── css/
+│   │   ├── style.css
+│   │   ├── aos.css
+│   │   └── bootstrap.min.css
+│   │
+│   ├── js/
+│   │   ├── script.js
+│   │   ├── aos.js
+│   │   └── bootstrap.bundle.min.js
+│   │
+│   ├── images/
+│   └── fonts/
+</code></pre>
+
+<hr>
+
+<h2>🎨 2. Editing Theme Colors</h2>
+
+<p>
+Theme colors are defined using CSS variables inside:
+</p>
+
+<pre><code>assets/css/style.css</code></pre>
+
+Example:
+
+<pre><code>
+:root{
+--yellow:#f4b400;
+--navy:#0d1b2a;
+--bg:#f4f7fa;
+--white:#ffffff;
+}
+</code></pre>
+
+<p>
+Change the value of <strong>--yellow</strong> to update the primary theme color globally.
+</p>
+
+<hr>
+
+<h2>🖼 3. Changing the Logo</h2>
+
+Open <strong>index.html</strong> and find:
+
+<pre><code>
+&lt;a class="navbar-brand" href="#"&gt;
+&lt;i class="fas fa-bolt"&gt;&lt;/i&gt;VoltEdge
+&lt;/a&gt;
+</code></pre>
+
+To use an image logo:
+
+<pre><code>
+&lt;a class="navbar-brand" href="#"&gt;
+&lt;img src="assets/images/logo.png" height="50" alt="Logo"&gt;
+&lt;/a&gt;
+</code></pre>
+
+<hr>
+
+<h2>🏠 4. Sections Overview</h2>
+
+<table>
+
+<tr>
+<th>Section</th>
+<th>Location in HTML</th>
+<th>Editable Content</th>
+</tr>
+
+<tr>
+<td>Hero Section</td>
+<td>#hero</td>
+<td>Title, subtitle, buttons</td>
+</tr>
+
+<tr>
+<td>About Section</td>
+<td>#about</td>
+<td>Text and images</td>
+</tr>
+
+<tr>
+<td>Services</td>
+<td>#services</td>
+<td>Service cards, icons, descriptions</td>
+</tr>
+
+<tr>
+<td>Projects / Portfolio</td>
+<td>#projects</td>
+<td>Project images and titles</td>
+</tr>
+
+<tr>
+<td>Working Process</td>
+<td>#process</td>
+<td>Steps and descriptions</td>
+</tr>
+
+<tr>
+<td>Testimonials</td>
+<td>#testimonials</td>
+<td>Customer feedback</td>
+</tr>
+
+<tr>
+<td>Team Members</td>
+<td>#team</td>
+<td>Images, names, roles</td>
+</tr>
+
+<tr>
+<td>Contact Form</td>
+<td>#contact</td>
+<td>Form fields and contact info</td>
+</tr>
+
+<tr>
+<td>Footer</td>
+<td>Footer element</td>
+<td>Links, social icons</td>
+</tr>
+
+</table>
+
+<hr>
+
+<h2>🖼 5. Changing Images</h2>
+
+Replace images inside:
+
+<pre><code>
+assets/images/
+</code></pre>
+
+Example: