-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
224 lines (210 loc) · 11.7 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
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
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeClan</title>
<Link href="index.css" rel = "stylesheet" />
</head>
<body>
<div class="">
<header>
<div class="inner-header">
<div>
<img class="logo" src="codeclan.png">
</div>
<div class="menu">
<ul>
<a href="teams.html">
<li>Team</li>
</a>
<a href="events.html">
<li>Events</li>
</a>
<a href="about.html">
<li>About</li>
</a>
<a href="contact-us.html">
<li>Contact Us</li>
</a>
</ul>
</div>
<div class="menu sign">
<ul>
<a href="login.html">
<li>Login</li>
</a>
<a href="signup.html">
<li class="button">Sign Up</li>
</a>
</ul>
</div>
</div>
</header>
<div class="back-m">
<div class="body">
<div class="sorround">
<div class="title">
Tap into the <br>Power of <br>Community <br>Learning
</div>
<div>Start your journey to becoming a world class developer or designer</div>
<div>
<button class="get-started">Get Started</button>
</div>
</div>
<div class="pic-hold">
<img src="assets/images/Rectangle 197.png">
</div>
</div>
</div>
<!-- second section -->
<div class="section-2">
<div class="section-2-title">Making Learning Easy & Fun</div>
<div class="collaboration">
<div class="text-title">
<div style="margin-left: 6em; margin-top: 6em;">Leverage the power of collaboration</div>
</div>
<div class="collab-image">
<img src="assets/images/Group 1423.png" alt="collaboration image">
</div>
</div>
</div>
<!-- third section -->
<div class="section-3">
<div class="p-70-30">
<div class="section-3-title">Why should you join the CodeClan Community?</div>
</div>
<div class="section-3-inner">
<div class="common">
<div class="small-text">Mentorship.</div>
<div class="tiny-text">When you join Code Clan, you get assigned a mentor who will be responsible for your learning and be
there with you every step of the way.</div>
<div class="small-text">Track Variety.</div>
<div class="tiny-text">Choose from a wide variety of tracks to follow, whether frontend or backend or
mobile or even design, we’ve got you covered.</div>
<div class="small-text">Certificate.</div>
<div class="tiny-text">By the end of the program, you would have worked on projects you can showcase on
your portfolio and even get a certificate of completion.</div>
</div>
<div style="text-align:center; width: 64%; position: relative">
<div style="width: 70%">
<img style="height: 80%" src = "assets/images/Mask Group.png" alt="lady smiling"/>
</div>
<div class="absolute-pic">
<img src="assets/images/5f0d191a761b4 1.png">
</div>
</div>
</div>
</div>
<!-- fourth section -->
<div class="section-4">
<div class="section-4-title" style="text-align: center; margin-bottom: 1em;">
Tracks
</div>
<div style="position: relative">
<div id = "row" class="row">
<div class="inner">
<div class="pic">
<img src="./assets/images/1.jpg" />
</div>
<div class="full-padding">
<p class="straight">Mobile Development</p>
<p style="text-align: center; margin-top: .5em;">Learn how to build amazing apps using Flutter</p>
</div>
</div>
<div class="inner">
<div class="pic">
<img src="./assets/images/2.jpg" />
</div>
<div class="full-padding">
<p class="straight">FrontEnd Development</p>
<p style="text-align: center; margin-top: .5em;">Learn how to build amazing apps using Flutter</p>
</div>
</div>
<div class="inner">
<div class="pic">
<img src="./assets/images/3.jpg" />
</div>
<div class="full-padding">
<p class="straight">Backend Development</p>
<p style="text-align: center; margin-top: .5em;">Learn how to build amazing apps using Flutter</p>
</div>
</div>
<div class="inner">
<div class="pic">
<img src="./assets/images/4.jpg" />
</div>
<div class="full-padding">
<p class="straight">Full Stack Development</p>
<p style="text-align: center; margin-top: .5em;">Learn how to build amazing apps using Flutter</p>
</div>
</div>
</div>
<button class="go go-right" onclick="goRight()"><img src="./assets/icons/chevron-right.svg"></button>
<button class="go go-left" onclick="goLeft()"><img src="./assets/icons/chevron-left.svg"></button>
</div >
</div>
<!-- footer -->
<div class="footer-m">
<div class="" style="text-align: center;">
<div style="height: 40px; width: 40px; display: inline-block; margin: 24px;">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64"
style="enable-background:new 0 0 64 64;" xml:space="preserve">
<g>
<path style="fill:#fff;" d="M37.2,64H28c-2.5,0-4.5-2-4.5-4.5V37H17c-2.5,0-4.5-2-4.5-4.5v-6.9c0-2.5,2-4.6,4.5-4.6h6.5v-5.5c0-9.1,6.2-15.5,15-15.5
H47c1.4,0,2.5,1.1,2.5,2.5v13c0,1.4-1.1,2.5-2.5,2.5h-5.5v3h5.4c0,0,0.1,0,0.1,0c1.4,0.1,2.7,0.7,3.5,1.8c0.8,1.1,1.2,2.4,0.9,3.8
l-1.3,6.7C49.8,35.4,48,37,45.7,37h-4.3v22.5C41.5,62,39.5,64,37.2,64z M28.5,59h8V34.5c0-1.4,1.1-2.5,2.5-2.5h6.3l1.2-6H39
c-1.4,0-2.5-1.1-2.5-2.5v-8c0-1.4,1.1-2.5,2.5-2.5h5.5V5h-6c-6.1,0-10,4.1-10,10.5v8c0,1.4-1.1,2.5-2.5,2.5h-8.5v6H26
c1.4,0,2.5,1.1,2.5,2.5V59z" />
</g>
</svg>
</div>
<div style="height: 40px; width: 40px; display: inline-block; margin: 24px;">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<g>
<path style="fill:#fff;" d="M32,16.9c-8.3,0-15,6.8-15,15.1c0,8.3,6.7,15.1,15,15.1c8.3,0,15-6.8,15-15.1C47,23.7,40.3,16.9,32,16.9z M32,42.1
c-5.5,0-10-4.5-10-10.1s4.5-10.1,10-10.1c5.5,0,10,4.5,10,10.1S37.5,42.1,32,42.1z" />
<path style="fill:#fff;" d="M47,10c-2.8,0-5,2.3-5,5s2.2,5,5,5c2.8,0,5-2.3,5-5S49.8,10,47,10z" />
<path style="fill:#fff;" d="M48,0H16C7.2,0,0,7.2,0,16v31.7C0,56.7,7.3,64,16.3,64h31.5C56.7,64,64,56.7,64,47.7V16C64,7.2,56.8,0,48,0z M59,47.7
C59,53.9,54,59,47.8,59H16.3C10.1,59,5,54,5,47.8V16C5,9.9,9.9,5,16,5H48c6.1,0,11,4.9,11,11V47.7z" />
</g>
</svg>
</div>
<div style="height: 40px; width: 40px; display: inline-block; margin: 24px;">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
</style>
<g>
<path style="fill:#fff;"
d="M22.2,58c-5.4,0-13.3-1-20-5.8c-2-1.4-2.8-4.1-1.8-6.4c0.9-2.3,3.4-3.6,5.9-3.1l0,0c0,0,1,0.2,2.5,0.1
c-1-1.4-1.9-3-2.5-4.7c-0.2-0.6-0.3-1.1-0.3-1.7c-2.5-2.9-3.8-6.5-3.8-10.5c0-0.9,0.2-1.8,0.7-2.5C2,20,1.7,15.5,4.6,10.7
C5.5,9.3,7,8.3,8.7,8.1c0.1,0,0.1,0,0.2,0c1.8-0.1,3.4,0.6,4.5,1.8l0,0c0.7,0.7,6.1,6.4,13,8.3C28,11.2,34.4,6,42.1,6
c3.4,0,6.7,1,9.3,2.9c0.7-0.2,1.6-0.5,2.4-1.1c1.6-1.1,3.7-1.3,5.4-0.4c1.7,0.8,2.9,2.4,3.1,4.3c0,0.1,0,0.2,0,0.3
c0,0.1,0,0.3,0,0.6c1.4,1.4,1.9,3.4,1.3,5.2c-0.5,1.7-2.1,3.8-5.4,6.8C58,32,54.5,51.8,29.6,57.4C29.4,57.4,26.4,58,22.2,58z
M5.4,47.6c-0.2,0-0.3,0.1-0.3,0.1c0,0,0,0.1,0,0.1C5,47.9,5,48,5.1,48.1c5.6,4.1,12.4,4.9,17.1,4.9c3.7,0,6.3-0.5,6.4-0.5
c22.6-5.1,24.8-23.6,24.9-29.2c0-0.7,0.3-1.4,0.8-1.8c4.2-3.7,4.7-5,4.7-5.1c0.1-0.2-0.1-0.4-0.2-0.4c0,0-0.1-0.1-0.1-0.1
c-1.1-0.5-1.7-1.8-1.3-3c0.1-0.3,0.1-0.5,0.1-0.7c0-0.1-0.1-0.2-0.2-0.3c-0.1,0-0.1-0.1-0.2-0.1c-0.1,0-0.2,0-0.4,0.1
c-2.2,1.5-4.5,2-5.6,2.1c-0.7,0.1-1.3-0.1-1.8-0.5c-1.9-1.6-4.5-2.4-7.1-2.4c-6.1,0-11,4.5-11.2,10.4c0,0.7-0.3,1.4-0.9,1.8
c-0.5,0.5-1.2,0.7-1.9,0.6c-9.5-1.3-17-8.9-18.5-10.4c0,0-0.1-0.1-0.1-0.1c-0.1-0.1-0.3-0.1-0.4-0.1c-0.2,0-0.3,0.2-0.4,0.3
c-1.8,3-2,6.2-0.7,9.4c0.4,1,0.2,2.2-0.7,2.9c-0.1,0.1-0.2,0.2-0.2,0.2c0,3.2,1,5.8,3.2,7.8c0.7,0.7,0.9,1.6,0.7,2.5
c0,0.1,0,0.2,0,0.3c0.8,2.5,2.4,4.5,4.6,5.8c0.8,0.5,1.3,1.4,1.2,2.4c-0.1,1-0.8,1.8-1.7,2.1c-4.6,1.5-9.5,0.8-9.7,0.7
C5.5,47.6,5.4,47.6,5.4,47.6z M58.5,15.7C58.5,15.7,58.5,15.7,58.5,15.7C58.5,15.7,58.5,15.7,58.5,15.7z"/>
</g>
<path style="fill:#fff;" class="st0" d="M-5.7,0.9L-5.7,0.9L-5.7,0.9z" />
<path style="fill:#fff;" class="st0" d="M32,32L32,32L32,32z" />
</svg>
</div>
</div>
<div class = "footer-under" style="text-align: center; margin-top: 2em;">
<p style="font-weight: bold; line-height: 40px;">CODE CLAN NIGERIA</p>
<p>Copyright © 2020</p>
</div>
</div>
</div>
<script type="text/javascript" src = "main.js"></script>
</body>
</html>