-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
165 lines (161 loc) · 9.1 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to the CarlMarks Web Agency</title>
<link rel="stylesheet" href="styles.css">
</head>
<body data-theme="colour" class="enter">
<section class="landing">
<video class="video-bg" autoplay loop muted plays-inline src="assets/banner-keyboard.mp4"
aria-hidden="true"></video>
<header>
<figure>
<a href="#top" aria-label="Back to top">
<img id="km-logo" src="assets/image-marx.jpeg" alt="Karl Marx portrait">
</a>
<figcaption><strong>CarlMarks</strong></figcaption>
</figure>
<nav id="heading-nav">
<ol>
<li><a href="#section-introduction">About us</a></li>
<li><a href="#section-team">The team</a></li>
<li><a href="#section-contact">Contact</a></li>
</ol>
</nav>
</header>
<div id="a11y-container">
<label for="a11y-trigger">
<input type="checkbox" id="a11y-trigger" />
<svg role="menubutton" aria-roledescription="Toggle open close accessibility menu" tabindex="0"
onclick="openAccessibilityMenu" id="a11y-icon" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 548.349 548.349" xml:space="preserve">
<path
d="M500.479 425.321c-3.504-13.624-17.436-21.862-31.038-18.331 0 0-20.542 5.317-38.804 10.046-9.553-32.734-40.686-140.3-40.686-140.3s-127.026 35.607-164.234 46.03c-2.613-12.261-7.035-32.496-11.954-54.877h92.648c14.143 0 25.531-11.413 25.531-25.509 0-14.074-11.392-25.487-25.531-25.487H202.375c-8.19-36.52-15.203-67.394-15.203-67.394-2.894-13.767-16.402-22.593-30.19-19.694-13.741 2.825-22.615 16.354-19.742 30.099l49.582 226.661s132.698-37.204 168.136-47.133c9.601 33.158 40.453 139.335 40.453 139.335l86.716-22.403c13.645-3.535 21.857-17.397 18.352-31.043z" />
<path
d="M300.478 375.904c1.198 6.282 1.882 12.755 1.882 19.344 0 56.314-45.818 102.153-102.201 102.153-27.227 0-52.969-10.635-72.196-29.909-19.249-19.275-29.909-44.948-29.909-72.218 0-27.322 10.635-52.969 29.909-72.292 6.446-6.425 13.672-11.859 21.416-16.285l-10.825-51.654c-17.155 7.554-33.037 18.284-46.618 31.934-28.992 28.849-44.874 67.325-44.874 108.249 0 40.877 15.883 79.352 44.805 108.271 28.944 28.923 67.372 44.853 108.297 44.853 80.996 0 147.43-63.137 152.816-142.723a40090.968 40090.968 0 0 1-11.932-41.089c-7.767 2.163-22.732 6.33-40.57 11.366z" />
<circle cx="160.723" cy="57.395" r="57.395" />
</svg>
<nav id="a11y-nav">
<ul role="menu">
<li><a role="menuitem" class="a11y-link" href="#" aria-label="Select colour theme"
onclick="changeTheme('colour')">Colour
theme</a>
</li>
<li><a role="menuitem" class="a11y-link" href="#" aria-label="Select dark theme"
onclick="changeTheme('dark')">Dark theme</a>
</li>
<li><a role="menuitem" class="a11y-link" href="#" aria-label="Select light theme"
onclick="changeTheme('light')">Light theme</a>
</li>
<li><a role="menuitem" class="a11y-link" href="#" aria-label="Select monochrome theme"
onclick="changeTheme('monochrome')">Monochrome theme</a>
</li>
<li><a role="menuitem" class="a11y-link" href="#" aria-label="Increase text size"
onclick="changeFontSize('increase')">Text
size+</a>
</li>
<li><a role="menuitem" class="a11y-link" href="#" aria-label="Decrease text size"
onclick="changeFontSize('decrease')">Text
size-</a>
</li>
</ul>
</nav>
</label>
</div>
</section>
<main class="stack-medium width-medium center">
<h1>CarlMarks</h1>
<section id="section-introduction" class="section-landing justified">
<h2>The revolutionary web development agency</h2>
<div class="line-height__expanded stack-small">
<p>
Welcome to the CarlMarks Web Development Agency.
</p>
<p>
Founded as long ago as early 2023, we at CarlMarks specialise in working closely alongside our
clients
to create web-based solutions that fit their needs perfectly. We can take your fledgling idea and,
utilising our days and days of web development experience, bring it to life before your eyes.
</p>
<p>
Based in the state-of-the-art Space4 offices in Finsbury Park, London, we have worked with imaginary
clients from as far away as Holloway Road.
</p>
<p>
Check out our ‘About us’ section to find out about our talented developers, or head straight to our
contact form to get in touch to discuss your requirements.
</p>
<p>
<strong>Don’t be a pleb – start your next web project with us TODAY!</strong>
</p>
</div>
</section>
<section id="section-team">
<h2>Meet the team</h2>
<div class="line-height__expanded stack-small">
<div class="team-grid-container">
<div class="team-grid-item">
<img class="biog-image" src="./assets/image-albert.png" alt="Gordon Blevins portrait">
<h3>Gordon Blevins</h3>
<p>Gordon is a full-stack web developer with over 5 years of experience. He specializes in
building efficient and user-friendly websites using modern technologies such as React and
Node.js.</p>
</div>
<div class="team-grid-item">
<img class="biog-image" src="./assets/image-paloma.png" alt="Malaika Rosales portrait">
<h3>Malaika Rosales</h3>
<p>Malaika is a front-end developer with a passion for creating visually appealing websites. She
has a strong eye for design and uses CSS and HTML to bring her ideas to life.</p>
</div>
<div class="team-grid-item">
<img class="biog-image" src="./assets/image-tas.png" alt="Kabir Perez portrait">
<h3>Kabir Perez</h3>
<p>Kabir is a back-end developer with extensive experience in building secure and scalable
systems. He is proficient in PHP, MySQL and has a deep understanding of server-side
technologies.</p>
</div>
</div>
</div>
</section>
<section id="section-contact">
<h2>Get in touch</h2>
<div class="center stack-small center">
<p>
Need a class act to help you to realise your next web project?
</p>
<p>
Fill in the form and we'll get right
back
to you.
</p>
</div>
<form id="contact-form" class="contact-form">
<div class="form-element-container stack-small">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your full name" aria-label="Name input"
required>
<label for="company">Company Name:</label>
<input type="text" id="company" name="company" placeholder="Company name"
aria-label="Company Name input" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your email" aria-label="Email input"
required>
<button class="form-button" type="submit" aria-label="Submit contact form">Submit</button>
</div>
</form>
</section>
</main>
<footer>
<a href="#top" aria-label="Back to top">
<figure>
<img id="km-logo-footer" src="assets/image-marx.jpeg" alt="Karl Marx portrait">
</figure>
</a>
<p>© 2023 CarlMarksWebagency. All Rights Reserved</p>
</footer>
<script src="app.js"></script>
</body>
</html>