WebDesignerCameronSites/index.html at main · WebDesignerCameron/WebDesignerCameronSites · 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebDesignerCameron Sites</title>
    <link rel="icon" href="WDCSites-logo.jpg">
    <link rel="stylesheet" href="style.css">
    <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=Montserrat:wght@800&family=Open+Sans:wght@600&display=swap" rel="stylesheet">
</head>
<body>

    <!-- Header: Holds your logo and main website navigation -->
    <header class="main-header" id="header" >
        <a href="#" class="logo">WebDesignerCameron Sites</a>
        <br>
        <p class="vis">Amazing deals. Fantastic prices. All at WebDesignerCameron Sites!</p>
        <br>
        <nav class="nav-bar">
            <ul>
                <li><a href="#services">Services</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Get a Website</a></li>
                <li><a href="#prices">Prices</a></li>
            </ul>
        </nav>
    </header>
    <section style="background:black;" >
        <div class="logo-container">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 250">
          <defs>
            <linearGradient id="brandGradient" x1="0%" y1="100%" x2="100%" y2="0%">
              <stop offset="0%" stop-color="#0052D4" />
              <stop offset="50%" stop-color="#4364F7" />
              <stop offset="100%" stop-color="#6FB1FC" />
            </linearGradient>

            <filter id="subtleGlow" x="-20%" y="-20%" width="140%" height="140%">
              <feGaussianBlur stdDeviation="2" result="blur" />
              <feComposite in="SourceGraphic" in2="blur" operator="over" />
            </filter>
          </defs>

          <style>
            .logo-text-main { font-family: 'Montserrat', 'Segoe UI', sans-serif; font-weight: 800; font-size: 42px; fill: #FFFFFF; letter-spacing: 2px; }
            .logo-text-sub { font-family: 'Open Sans', 'Segoe UI', sans-serif; font-weight: 600; font-size: 16px; fill: #6FB1FC; letter-spacing: 8px; opacity: 0.9; }
            .code-bracket { fill: none; stroke: url(#brandGradient); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
            .core-shape { fill: url(#brandGradient); }
          </style>

          <rect width="100%" height="100%" rx="0" fill="#0B0F19"/>

          <g transform="translate(60, 50)">
            <g filter="url(#subtleGlow)">
              <path class="code-bracket" d="M 40,30 L 15,75 L 40,120" />

              <path class="code-bracket" d="M 95,30 L 120,75 L 95,120" />

              <polygon class="core-shape" points="48,110 60,50 72,110" />
              <polygon class="core-shape" points="68,100 80,40 88,100" />
              <circle cx="67" cy="25" r="6" fill="#6FB1FC" />
            </g>

            <g transform="translate(160, 65)">
              <text x="0" y="0" class="logo-text-main">WebDesigner<tspan x="0" dy="1.2em">
              Cameron Sites</tspan></text>
              <text x="5" y="80" class="logo-text-sub">WEB DESIGN</text>
            </g>
          </g>
        </svg>
        </div>
    </section>

    <!-- Main: Contains the unique primary content of the page -->
    <main class="content-area" id="main" >
        <div class="animation-container" ></div>
        <script src="animation.js"></script>

        <!-- Hero Section: The big introduction area -->
        <section class="hero">
            <h1>Professional Web Design Crafted from Memory</h1>
            <p>High-quality, clean, semantic websites built right here in Manchester.</p>
            <a href="#contact" class="btn">Get a Website</a>
        </section>

        <!-- Services Section: Independent group of related content -->
        <section id="services" class="services-section">
            <h2>Services</h2>

            <div class="services-grid">
                <!-- Articles: Self-contained content that makes sense on its own -->
                <article class="service-card">
                    <h3>Custom Coding</h3>
                    <p>Hand-written, clean HTML and CSS designed for ultimate speed.</p>
                </article>

                <article class="service-card">
                    <h3>SEO Optimization</h3>
                    <p>Semantic structures that help local Manchester businesses rank on Google.</p>
                </article>

                <article class="service-card">
                    <h3>Quick Websites</h3>
                    <p>Coding completed in less than 2 weeks.</p>
                </article>
            </div>
        </section><br>
        <h2 id="portfolio">Portfolio and Links</h2>
        <div class="port-div">
            <section class="port-left">
                <h3>Cameron</h3>
                <ul>
                    <li>Name: Cameron</li>
                    <li>Alt names: </li>
                    <li>WebDesignerCameron,</li>
                    <li>Floof Loof</li>
                    <li>Age: 10(as of August 2026)</li>
                    <li>Achievements:</li>
                    <li>First Website</li>
                    <li>at 10yrs, 3mths. </li>
                </ul>
            </section>
            <nav class="nav-port">
                <h3>Links</h3>
                <a href="https://github.com/WebDesignerCameron">WebDesignerCameron</a><br>
                <a href="https://github.com/WebDesignerCameron/WebDesignerCameronSites">Page Info</a><br>
                <h4>My Projects</h4>
                <a href="https://webdesignercameron.github.io/magimals-toxic">Magimals Toxic</a><br>
                <a href="https://webdesignercameron.github.io/WebDesignerCameronSites">WebDesignerCameron Sites</a>
            </nav>
        </div><br>

        <h2 id="contact">Get a Website</h2>
        <div class="contact-div">
            <section>
                <form action="https://formspree.io/f/xbdnbvzk" method="POST" enctype="multipart/form-data" id="submission">
                    <label>Website Name: </label>
                    <input type="text" name="Name">
                    <br>
                    <input type="checkbox" name="Com">
                    <label> .com ending(costs more)</label>
                    <br>
                    <label>Email and/or Phone Number: </label>
                    <input type="text" name="Contact" placeholder="Type Here...">
                    <br>
                    <label>Extra Details: </label>
                    <textarea name="Extras" placeholder="Type Here..."></textarea>
                    <br>
                    <button type="submit">Send Request</button>
                </form>
            </section>
        </div><br>

        <h2 id="prices">Prices</h2>
        <div class="price-div">
            <section>
                <h3>Main Prices</h3>
                <p>
                    Small one-pager: £200-400, includes one page of HTML CSS content.
                    Basic multi-page: £400-600, includes 2-3 pages of HTML CSS content and some JS.
                    Large business UI: £600-800, includes 5 pages of HTML CSS JS content.
                    Large web app: £800-1000, includes 2-4 pages, one HTML CSS and one advanced HTML CSS JS.
                </p>
                <h3>Limited access prices</h3>
                <p>
                    Scales on pages, complexity, interactivity, from £30-90.
                </p>
                <h3>Deals</h3>
                <p>
                    Your fourth and tenth websites are free! Kids under 18 get 90% off maintenance price! If you buy 2 related websites, you get the second one free!
                </p>
                <h3>Comparison</h3>
                <article class="flexy">
                    <p id="p1">
                        Other dealerships: $2500-$10000
                        WebDesignerCameron Sites: $250-$1000
                        WebDesignerCameron Sites w/ Limited Offers: $30-$90
                    </p>
                    <p>
                        Other dealerships: £2000-£8000
                        WebDesignerCameron Sites: £200-£800
                        WebDesignerCameron Sites w/ Limited Offers: £25-£70
                    </p>
                </article>
                <h3>Information</h3>
                <p>
                    When you make a website via
                    WebDesignerCameron Sites, you
                    consent to give your email address
                    and to fill in the form and deposit the
                    given payment.
                </p>
            </section>
        </div>

    </main>

    <!-- Footer: Copyright info, social links, and legal text -->
    <footer class="main-footer" id="footer" >
        <p>2026 WebDesignerCameron Sites. </p><br>
        <div>
            <p>Made with</p><a href="https://github.com" class="foot-a">Github</a><p>via</p><a href="https://github.com/pages" class="foot-a">Github Pages</a>
        </div>
    </footer>

</body>
</html>