project/siteplan.html at main · meshackamadi/project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!--
  Student Name: Meshack Amadi
  Course: WDD131
  Project: Siteplan
  Date: 09/08/25
  -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Meshack Amadi">
    <meta name="description" content="Mesh-Hub Siteplan">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Open+Sans&display=swap" rel="stylesheet">
    <title>Mesh-Hub Website Plan</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 900px;
            margin: auto;
            padding: 20px;
            background-color: #ffffff;
            color: #000000;
        }
        h1, h2 {
            color: #2ca4df; /* Primary color */
        }
        .color-sample {
            display: inline-block;
            width: 40px;
            height: 20px;
            margin-left: 10px;
            border: 1px solid #ccc;
        }
        img {
            max-width: 100%;
            height: auto;
        }
        .wireframe {
            border: 1px dashed #ccc;
            padding: 10px;
            margin: 10px 0;
            background-color: #ffffff;
        }
    </style>
</head>
<body>

    <h1>Mesh-Hub Website Plan</h1>

    <!-- Site Name -->
    <h2>Site Name</h2>
    <p><strong>Name:</strong> Mesh-Hub</p>
    <p><strong>Description:</strong> Mesh-Hub is a local business offering sales and repair services for phones, laptops, accessories, and other gadgets. The name reflects a central hub for all tech-related needs, where customers can connect, purchase, and repair their devices.</p>
    <p><strong>Optional Domain:</strong> mesh-hub.com</p>
    <p><strong>Logo:</strong></p>
    <img src="images/mesh_hub_logo.webp" alt="Mesh-Hub Logo">

    <!-- Site Purpose -->
    <h2>Site Purpose</h2>
    <p>The Mesh-Hub website will showcase available products, services, and pricing information. Customers will be able to request quotes, schedule repair appointments, and view the latest gadget offers. The site will serve as an easy-to-navigate online presence for both new and returning customers.</p>

    <!-- Scenarios -->
    <h2>Scenarios</h2>
    <ul>
        <li>What is the cost and turnaround time for repairing a cracked iPhone screen?</li>
        <li>What laptop accessories are currently available in stock?</li>
    </ul>

    <!-- Color Scheme -->
    <h2>Color Scheme</h2>
    <p><strong>Primary Color:</strong> #002366 <span class="color-sample" style="background-color:#2ca4df;"></span> (Used for headings, navigation bar, and buttons)</p>
    <p><strong>Secondary Color:</strong> #00713a <span class="color-sample" style="background-color:#000000;"></span> (Used for highlights, call-to-action buttons, and section backgrounds)</p>
    <p><strong>Accent Color:</strong> #f0f0f0 <span class="color-sample" style="background-color:#ffffff"></span> (Used for page background and content areas)</p>

    <!-- Typography -->
    <h2>Typography</h2>
    <p><strong>Heading Font:</strong> Roboto, sans-serif (Used for all headings and titles)</p>
    <p><strong>Body Font:</strong> Open Sans, sans-serif (Used for all regular text and paragraphs)</p>

    <!-- Wireframes -->
    <h2>Wireframe</h2>
    <h3>Mobile View</h3>
    <div class="wireframe">
        <p>Mobile layout</p>
        <img src="images/mesh_hub_mobile_view.png" alt="Mobile Wireframe">
    </div>

    <h3>Desktop View</h3>
    <div class="wireframe">
        <p>desktop layout </p>
        <img src="images/mesh_hub_desktop_view.png" alt="Desktop Wireframe">
    </div>
</body>
</html>