-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
171 lines (145 loc) · 7.79 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
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Colour Code</title>
<meta name="description" content="Founders & Coders Week 1 Group Website: Colour Code">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Asap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Charmonman" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns"
crossorigin="anonymous">
<script src="main.js" async></script>
</head>
<body>
<header role="banner" class="nav-bar">
<div class="logo">
<img src="https://files.gitter.im/foundersandcoders/CC/H9kq/logo.png" alt="logo" />
<h1 class="large title">Colour Code</h1>
</div>
<nav role="navigation">
<a id="menu-button" href="">
<h2>Main Menu</h2>
<div class="hamburger">
<div></div>
<div></div>
<div></div>
</div>
</a>
<ul class="menu">
<li class="menu-item"><a href="#team">The Team</a></li>
<li class="menu-item"><a href="#about">About Us</a></li>
<li class="menu-item"><a href="#contact">Contact Us</a></li>
</ul>
</nav>
</header>
<main role="main">
<section aria-labelledby="team" id="team" class="sections intro">
<h3 class="medium">Meet the Team</h3>
<p>We are a colourful group, excited to solve your development needs!</p>
<article aria-labelledby="martin">
<h4>Martin</h4>
<figure class="round-img">
<a href='#martin'><img src="https://files.gitter.im/foundersandcoders/CC/HOtW/martin-b.jpg" alt="photo of martin" /></a>
<figcaption class='name'>Martin</figcaption>
</figure>
</article>
<article aria-labelledby="sak">
<h4>Sak</h4>
<figure class="round-img">
<a href='#sak'><img src="https://avatars3.githubusercontent.com/u/41472850?s=460&v=4" alt="photo of sak" /></a>
<figcaption class='name'>Sak</figcaption>
</figure>
</article>
<article aria-labelledby="julia">
<h4>Julia</h4>
<figure class="round-img">
<a href='#julia'><img src="https://avatars0.githubusercontent.com/u/36998110?s=460&v=4" alt="photo of julia" /></a>
<figcaption class='name'>Julia</figcaption>
</figure>
</article>
<article aria-labelledby="lucy">
<h4>Lucy</h4>
<figure class="round-img">
<a href='#lucy'><img src="https://avatars2.githubusercontent.com/u/40594944?s=460&v=4" alt="photo of lucy" /></a>
<figcaption class='name'>Lucy</figcaption>
</figure>
</article>
</section>
<section aria-labelledby="about" id="about" class="sections">
<h2 class="medium">About the Colour Code Team</h2>
<p>We are four colourful young professional developers from diverse backgrounds.
We want to help solve your development issues! We are currently only able to solve small scale problems
but are eager to get stuck in!
If you have a big problem, go ask Founders and Coders!
Skill sets : One Page Responsive Homepage... as you see.
Below, you can get to know us a little better.
</p>
<figure class="bubble">
<img src="https://files.gitter.im/foundersandcoders/CC/HOtW/martin-b.jpg" alt="photo of martin" />
<figcaption id='martin'>Martin</figcaption>
<p>Hi I am Martin! I am the teams Accessibility expert! I can do a mean wheelchair wheelie!</p>
</figure>
<figure class="bubble right">
<img src="https://avatars3.githubusercontent.com/u/41472850?s=460&v=4" alt="photo of sak" />
<figcaption id='sak'>Sak</figcaption>
<p>Hi I am Sak! I am the teams Github expert! I believe mindfulness in the workplace is key to success,
a tenet I live out through my interests in yoga, meditation, and binging on Netflix. </p>
</figure>
<figure class="bubble">
<img src="https://avatars0.githubusercontent.com/u/36998110?s=460&v=4" alt="photo of julia" />
<figcaption id='julia'>Julia</figcaption>
<p>Hi I am Julia or Jiyhun from somewhere in Asia. I am the teams expert Regex. I take care of my team
by feeding chocolate. I have had a variety of customer service opportunities. I am self-motivated,
outgoing, and a team player.
I am still struggling to understand how Git works - FYI
</p>
</figure>
<figure class="bubble right">
<img src="https://avatars2.githubusercontent.com/u/40594944?s=460&v=4" alt="photo of lucy" />
<figcaption id='lucy'>Lucy</figcaption>
<p>Hello, I'm Lucy! I am the teams CSS expert! I love to use grids to keep your sites organised,
everything has its own place and it should stay there! Incase you couldn't tell, I'm a little bit
of a perfectionist... usually seen as a good thing but maybe not in this case.</p>
</figure>
</section>
<section aria-labelledby="contact" id="contact" class="sections">
<h3 class="medium">Contact Us</h3>
<form action="/" method="post">
<label for="name">Name</label>
<input id="name" type="text" pattern="[a-zA-Z\s]+" placeholder='Full Name' required>
<p class="error-msg"></p>
<br>
<label for="companyName">Company Name</label>
<input id="companyName" type="text" pattern="[a-zA-Z\s]+" placeholder='Company Name' required>
<p class="error-msg"></p>
<br>
<label for="email">Email</label>
<input id="email" type="email" placeholder='E-mail' pattern="[\w_.]+@[\w_.]{3,}\.{1}[a-z]{2,}$"
required>
<p class="error-msg"></p>
<br>
<label for="number">Contact Number</label>
<input id="number" type="number" placeholder='Contact Number' pattern="[0-9]{13}" max="13" required>
<p class="error-msg"></p>
<br>
<label for="message">Message</label>
<textarea id="message" placeholder='Message' rows="5" cols="33" maxlength="200"></textarea>
<button type="submit">Submit</button>
</form>
</section>
</main>
<footer role="contentinfo">
<section class='links'>
<h4>View our Github Profiles:</h4>
<i class="fab fa-github"><a href='https://github.com/Whooolia'>Julia</a></i>
<i class="fab fa-github"><a href='https://github.com/saksiva'>Sak</a></i>
<i class="fab fa-github"><a href='https://github.com/mr-bagglesworth'>Martin</a></i>
<i class="fab fa-github"><a href='https://github.com/lucyewright'>Lucy</a></i>
</section>
<p><a href="https://github.com/fac-15/CC/blob/master/README.md">Copyright Colour Code 2018</a></p>
</footer>
</body>
</html>