-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
183 lines (183 loc) · 7.56 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Colmar Academy</title>
<link rel="icon" href="resources/images/favicon.png" type="image/x-icon">
<link href="resources/css/reset.css" rel="stylesheet" type="text/css">
<link href="resources/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<div class="mobile-hide logo">
<img src="resources/images/ic-logo.svg" alt="logo" />
<h1>COLMAR<strong>ACADEMY</strong></h1>
</div>
<ul>
<li>
<a href="#" class="web-hide">
<img src="resources/images/ic-logo.svg" alt="logo" />
</a>
</li>
<li>
<a href="#campus">
<p class="mobile-hide">On campus</p>
<img class="web-hide" src="resources/images/ic-on-campus.svg" />
</a>
</li>
<li>
<a href="#courses">
<p class="mobile-hide">Online</p>
<img class="web-hide" src="resources/images/ic-online.svg" />
</a>
</li>
<li class="mobile-hide">
<a href="#exhibit">
<p class="mobile-hide">or companies</p>
</a>
</li>
<li>
<a href="#">
<p class="mobile-hide">Sign in</p>
<img class="web-hide" src="resources/images/ic-login.svg" />
</a>
</li>
</ul>
</nav>
<header>
<img src="resources/images/banner.jpg" alt="students studying" />
<div class="header-content">
<h1>Learn something new everyday</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<a href="#">Start Here</a>
</div>
</header>
<div id="campus">
<div class="mobile-hide main-campus">
<div class="main-campus-content">
<img src="resources/images/information-main.jpg" alt="man reading book" />
<h1>It doesn't hurt to keep practicing</h1>
<h4>"Curabitur vitae libero in ipsum porttitor consequat. Aliquam et commodo lectus, nec consequat neque. Sed non accumsan urna. Phasellus sed consequat ex. Etiam eget magna laoreet, efficitur dolor consequat tristique ligula."</h4>
<p>Emanuel, Sr Strategist at Hiring.com</p>
</div>
</div>
<div class="campus-item-container">
<div class="campus-item">
<img class="mobile-hide" src="resources/images/information-orientation.jpg" alt="people walking" />
<img class="web-hide" src="resources/images/information-orientation-mobile.jpg" alt="people walking" />
<div>
<h3>Orientation Date</h3>
<h4>Tue 10/11 & Wed 10/12: 8am-3pm</h4>
<a href="#">Read more</a>
</div>
</div>
<div class="campus-item">
<img class="mobile-hide" src="resources/images/information-campus.jpg" alt="people working" />
<img class="web-hide" src="resources/images/information-campus-mobile.jpg" alt="people working" />
<div>
<h3>Our campus</h3>
<h4>Find which campus is close by you</h4>
<a href="#">Read more</a>
</div>
</div>
<div class="campus-item highlight">
<img class="mobile-hide" src="resources/images/information-guest-lecture.jpg" alt="Oliver Sack" />
<img class="web-hide" src="resources/images/information-guest-lecture-mobile.jpg" alt="Oliver Sack" />
<div>
<h3>Our guest lecture</h3>
<h4>Join a keynote with Oliver Sack about music in medical treatment</h4>
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
<div id="courses">
<h1 class="course-title">Start Learning</h1>
<div class="course-container">
<div class="course">
<img class="mobile-hide" src="resources/images/course-software.jpg" alt="computer screens showing code" />
<div class="course-content">
<h3>Software engineering</h3>
<h4 class="mobile-hide course-type">COURSES</h4>
<h4 class="mobile-hide">Web Development, Mobile Development, iOT, APIs</h4>
</div>
</div>
<div class="course">
<img class="mobile-hide" src="resources/images/course-computer-art.jpg" alt="smartphone being used" />
<div class="course-content">
<h3>Computer art</h3>
<h4 class="mobile-hide course-type">COURSES</h4>
<h4 class="mobile-hide">Imaging & Design, Web Design, Motion Graphics & Visual Effects, Computer Animation</h4>
</div>
</div>
<div class="course">
<img class="mobile-hide" src="resources/images/course-design.jpg" alt="old fashion camera being used" />
<div class="course-content">
<h3>Design</h3>
<h4 class="mobile-hide course-type">COURSES</h4>
<h4 class="mobile-hide">User Expereince Design, User Research, Visual Design</h4>
</div>
</div>
<div class="course">
<img class="mobile-hide" src="resources/images/course-data.jpg" alt="laptop showing statistics" />
<div class="course-content">
<h3>Data</h3>
<h4 class="mobile-hide course-type">COURSES</h4>
<h4 class="mobile-hide">Data Science, Big Data, SQL, Data Visulization</h4>
</div>
</div>
<div class="course">
<img class="mobile-hide" src="resources/images/course-business.jpg" alt="chess board" />
<div class="course-content">
<h3>Business</h3>
<h4 class="mobile-hide course-type">COURSES</h4>
<h4 class="mobile-hide">Product Development, Business Development, Startup</h4>
</div>
</div>
<div class="course">
<img class="mobile-hide" src="resources/images/course-marketing.jpg" alt="smart watch being used" />
<div class="course-content">
<h3>Marketing</h3>
<h4 class="mobile-hide course-type">COURSES</h4>
<h4 class="mobile-hide">Analytics, Content Marketing, Mobile Marketing</h4>
</div>
</div>
</div>
</div>
<div id="exhibit">
<h1 class="exhibit-title">Thesis exhibit</h1>
<div class="exhibit-container">
<div class="main-exhibit">
<div class="main-exhibit-content">
<video src="resources/videos/thesis.mp4" controls></video>
<h3 class="mobile-hide">Reimagine urban</h3>
<h4 class="mobile-hide">"Curabitur vitae libero in ipsum porttitor consequat. Aliquam et commodo lectus, nec consequat neque. Sed non accumsan urna. Phasellus sed consequat ex. Etiam eget magna laoreet, efficitur dolor consequat, tristique ligula."</h4>
</div>
</div>
<div class="mobile-hide exhibit-item-container">
<div class="exhibit-item highlight">
<img src="resources/images/thesis-fisma.jpg" alt="someone taking notes and using phone" />
<div>
<h3>Fisma: Design and Prototype</h3>
<h4>Designer showcase of new prototype product</h4>
</div>
</div>
<div class="exhibit-item">
<img src="resources/images/thesis-now-and-then.jpg" alt="empire state building" />
<div>
<h3>Now and then</h3>
<h4>Research study about New York</h4>
</div>
</div>
</div>
</div>
</div>
<footer>
<h4>© 2016 Colmar Academy. All rights reserved</h4>
<ul class="mobile-hide">
<li>Terms</li>
<li>Privacy</li>
</ul>
</footer>
</body>
</html>