-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
210 lines (182 loc) · 12.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- We need this tag to properly display our pages at mobile size/make it responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- order matters, link to grid file first, then main.css -->
<!-- <link href="css/grid.css" rel="stylesheet"> -->
<link href="css/main.css" rel="stylesheet">
<link href="css/grid.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<script src="https://kit.fontawesome.com/58e6ec7ea8.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<title>Fanshawe Industry Night</title>
</head>
<body>
<header>
<nav>
<ul class="grid-con big-header">
<li id="logo" class="col-start-1 col-end-2"> <a href="index.html"><img src="images/fanshawe-logo-white.svg" alt="Fanshawe Logo"></a></li>
<li class="m-col-end-11 l-col-end-11 big-header-link"><a href="capstone.html">Capstone</a></li>
<li class="m-col-end-12 big-header-link portfolio-link"><a href="portfolios.html">Portfolios</a></li>
<li id="burger-li" class="col-end-5">
<input class="burger-button mobile" type="checkbox" id="nav-btn">
<label for="nav-btn" class="checkbtn">
<i class="fa-solid fa-bars"></i>
</label>
<nav class="burger-menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="capstone.html">Capstone</a></li>
<li><a href="portfolios.html">Portfolios</a></li>
</ul>
</nav>
</li>
</ul>
</nav>
</header>
<main class="index-page">
<div class="grid-con">
<div class="index-banner col-span-full">
<h3>Join Us For</h3>
<h1 id="title-main"><span> Fanshawe College</span> <br> Industry Night 2025</h1>
<p>Interactive media Design & user experience <br><span class="bottom-span">Design Programs</span></p>
<div id="main-border-bottom"></div>
<button class="play-button" type="button"> <img src="images/circle-play.svg" alt=""></button>
</div>
<video controls preload="metadata" poster="images/placeholder.jpg" class="col-span-full">
<source src="video/hackathon-group7_1.mp4" type="video/mp4">
<!-- <source src="video/.webm" type="video/webm">-->
</video>
<div class="shortcut-box col-start-1 col-span-2 m-col-span-3" ><p>Industry Night</p></div>
<div class="shortcut-box col-span-2 m-col-span-3" ><p>Program</p></div>
<div class="shortcut-box col-span-2 m-col-span-3"><p>Testimonials</p></div>
<div class="shortcut-box col-span-2 m-col-span-3"><p>Developers</p></div>
</div>
<div id="industry-night-spotlight" class="col-span-full spotlight">
<h2 class="main-med-title col-span-full">Industry Night</h2>
<div class="spotlight-border-bottom col-span-full"></div>
<p class="spotlight-text col-span-full">The SDPA Industry Night for 2025 will showcase student projects and activities from the Interactive Media Design Program.</p>
<p class="spotlight-text col-span-full">We extend a cordial invitation to an evening of professional engagement, featuring the presentation of Capstone Projects for Brothers in Arms and Student Portfolios. Attendees will have the opportunity to peruse and discuss the showcased work while enjoying a selection of catered food and refreshments.</p>
</div>
<div class="grid-con">
<div id="event-border-top"></div>
<h2 class="main-med-title col-span-full"><span class="top-border">Event</span> Details</h2>
<div class="col-span-full" id="event-border-bottom"></div>
<section class="detail-box col-start-1 col-span-2 m-col-start-4 m-col-span-3">
<p class="detail-title">Date</p>
<p>April 18 2024</p>
</section>
<section class="detail-box col-span-2 m-col-span-3">
<p class="detail-title">Venue</p>
<p>137 Dundas St, Fanshawe LDA Building, London, ON N6A 1E9</p>
</section>
<section class="detail-box col-span-2 m-col-start-1 m-col-span-3">
<p class="detail-title">4:00 PM - 4:30 PM</p>
<p>Industry members and Guests arrival</p>
</section>
<section class="detail-box col-span-2 m-col-span-3">
<p class="detail-title">4:30 PM - 6:00 PM</p>
<p>Spotlight Presentations
[At The Good Foundation Inc. Theatre]</p>
</section>
<section class="detail-box col-span-2 m-col-span-3">
<p class="detail-title">6:00 PM - 7:00 PM</p>
<p>Student Portfolio Viewing
[At Level 4 Labs]</p>
</section>
<section class="detail-box col-span-2 m-col-span-3">
<p class="detail-title">7:00 PM - 8:00 PM</p>
<p>Culinary Delights and Networking
[At The Chef's Table]</p>
</section>
<a href="capstone.html" id="capstone-button" class="portfolio-box col-start-2 col-end-4 m-col-start-5 m-col-end-9"><div><p>See Our Capstone</p></div></a> <!--change class name later-->
</div>
<div class=" spotlight" id="idp-spotlight">
<div class="grid-con">
<h2 class="main-med-title col-span-full">Interactive<br>Media Design</h2>
<div class="spotlight-border-bottom col-span-full"></div>
<p class="spotlight-text col-span-full col-span-full">Learn about our program and how it prepares students for the industry.</p>
<p class="spotlight-text col-span-full">Unlock Your Digital Creativity Future with Us! Explore a world of digital design, development, and innovation in our two-year Interactive Media Design program at Fanshawe College.</p>
<p class="spotlight-text col-span-full">Why Choose Us? Gain a comprehensive skill-set in web design, coding, animation, and more. Access cutting-edge facilities and industry-standard software. Open doors to exciting career opportunities in various fields. Stay ahead with emerging technologies and industry-relevant tools!</p>
<a href="https://www.fanshawec.ca/programs/idp3-interactive-media-design/next?utm_source=google&utm_medium=cpc&utm_campaign=rbm_search&gad_source=1&gclid=Cj0KCQjwgrO4BhC2ARIsAKQ7zUmHxA0oQgacJDxZGsYmx3PEBDTDTwV0pxeOULS7SW4rXAQpnxTpo3gaAtEaEALw_wcB" id="learn-more-button" class="portfolio-box col-start-2 col-span-2 m-col-start-6 m-col-span-2"><div><p>Learn More</p></div></a> <!--change class name later-->
</div>
</div>
<div class="grid-con student-work-mobile">
<div></div>
<h2 class="main-med-title col-span-full testim-title"><span class="top-border">Student</span>Work</h2>
<div class="col-span-full title-border-bottom"></div>
<div class="gallery-wrap col-span-full">
<div class="stdnt-work-gallery">
<div><img src="images/student-work-01.jpg" alt=""></div>
<div><img src="images/student-work-02.jpg" alt=""></div>
<div><img src="images/student-work-03.jpg" alt=""></div>
<div><img src="images/student-work-04.jpg" alt=""></div>
<div><img src="images/student-work-05.jpg" alt=""></div>
<div><img src="images/student-work-06.jpg" alt=""></div>
<div><img src="images/student-work-07.jpg" alt=""></div>
<div><img src="images/student-work-08.jpg" alt=""></div>
</div>
</div>
<div class="col-span-full gallery-buttons">
<button type="button" id="back-button">
<img src="images/arrow_back.svg" alt="">
</button>
<button type="button" id="forward-button">
<img src="images/arrow_forward.svg" alt="">
</button>
</div>
</div>
<div class="student-work-desktop grid-con">
<img src="images/student-work-01.jpg" alt="" class="l-col-span-4 timeline">
<img src="images/student-work-02.jpg" alt="" class="l-col-span-4 timeline">
<img src="images/student-work-03.jpg" alt="" class="l-col-span-4 timeline">
<img src="images/student-work-04.jpg" alt="" class="l-col-span-4 timeline">
<h2 class="main-med-title stdnt-work-title col-span-full l-col-span-4"><span class="top-border">Student</span><br><span class="work-border">Work</span></h2>
<img src="images/student-work-05.jpg" alt="" class="l-col-span-4 timeline">
<img src="images/student-work-06.jpg" alt="" class="l-col-span-4 timeline">
<img src="images/student-work-07.jpg" alt="" class="l-col-span-4 timeline">
<img src="images/student-work-08.jpg" alt="" class="l-col-span-4 timeline">
</div>
<div class="grid-con testimonial-spotlight">
<div></div>
<h2 class="main-med-title col-span-full testim-title"><span class="top-border">Testi</span>monials</h2>
<div class="col-span-full title-border-bottom"></div>
<section class="testim-box col-span-full m-col-start-2 m-col-end-12">
<p class="testim-text">"It's been incredible to work alongside these talented students. Their passion and dedication reaffirm our commitment to supporting youth mental health."</p>
<p class="testim-name">- Bill Hagerty, co-founder and board member for Foundation Sixty6</p>
</section>
<section class="testim-box col-span-full m-col-start-2 m-col-end-12">
<p class="testim-text">"These amazing students bring fresh perspectives and innovative ideas to the table. Their dedication to the project is truly inspiring,"</p>
<p class="testim-name">- Aimee Hagerty, co-founder and board member for Foundation Sixty6</p>
</section>
<section class="testim-box col-span-full m-col-start-2 m-col-end-12">
<p class="testim-text">"Observing the students collaborating with Foundation Sixty6 has been an inspiring journey. The creativity and skill displayed by the students have been truly outstanding."
</p>
<p class="testim-name">- Marco De Luca, IDP Program coordinator and professor for Fanshawe</p>
</section>
<h2 class="main-med-title dev-title col-span-full"><span class="top-border">Meet</span> The Devs</h2>
<div class="col-span-full" id="dev-border-bottom"></div>
<a href="" class="portfolio-box col-start-1 col-span-2 m-col-span-3"><div><p>Student Name</p></div></a>
<a href="" class="portfolio-box col-span-2 m-col-span-3"><div><p>Student Name</p></div></a>
<a href="" class="portfolio-box col-span-2 m-col-span-3"><div><p>Student Name</p></div></a>
<a href="" class="portfolio-box col-span-2 m-col-span-3"><div><p>Student Name</p></div></a>
</div>
</main>
<footer>
<div>
<img src="images/fanshawe-full-size-logo.svg" alt="fanshawe logo with fanshawe text" class="fanshawe-footer-logo">
<p>@ 2024 Copyright Fanshawe College</p>
<a href="https://www.instagram.com/fanshawesmda/"><img src="images/instagram.svg" alt="instagram logo" class="footer-svg"></a>
<a href="https://www.facebook.com/FanshaweCollege/" ><img src="images/facebook-svgrepo-com.svg" alt="facebook logo" id="facebook-logo" class="footer-svg"></a>
<a href="https://www.youtube.com/@Fanshawe-College?app=desktop" ><img src="images/youtube.svg" alt="youtube logo" class="footer-svg"></a>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollToPlugin.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>