forked from tristanjudd/scs_website
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
158 lines (139 loc) · 7.92 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
<!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" />
<link rel="stylesheet" href="./styles/mobile/mobileStyles.css" />
<link rel="stylesheet" href="./styles/mobile/mobileIndexStyles.css" />
<link rel="stylesheet" href="./styles/tablet/tabletStyles.css" />
<link rel="stylesheet" href="./styles/laptop/styles.css" />
<link rel="stylesheet" href="./styles/laptop/indexStyles.css" />
<link rel="stylesheet" href="./styles/large/largeStyles.css" />
<title>SCS Concordia</title>
</head>
<body>
<div id="background">
<!-- This is the most senior user-defined parent div, it's where the static code backgroun image is that you see the other divs scroll over -->
<div id="wrapper">
<!-- This is the parent element for all main divs. Currently (27/10/22) it's not doing anything special, mostly there in case we need it -->
<!-- wrapper's children are the main site sections -->
<nav></nav>
<!-- "hero" is from hero image, the style of having one big image taking up the whole screen when you land on the web page -->
<!-- instead of using an image I put a div and set its background image to the desired image. This makes it easier to style in some cases -->
<section id="hero">
<!-- "hero-shade" is a child of "hero". Its purpose is to change the color of the background image. -->
<!-- All it is is a translucent div with a gray background covering 100% height and width of hero. This was easier for me to do than editing the image -->
<!-- <div id="hero-shade"></div> -->
<div class="title-and-subtitle-banner">
<h1>SCS Concordia</h1>
<h3>Software Engineering and Computer Science Society</h3>
<div class="algotime-and-clothing-btn">
<a href="#"><button>Algotime Website</button></a>
<a href="#"><button>SCS Clothing</button></a>
</div>
</div>
</section>
<!-- about setion, child of wrapper -->
<section id="about">
<!-- "about" has two children, which are divs that split the section into two horizontal boxes, one for the image on the left and the other for text on the right -->
<div id="aliens">
<img src="assets/group_photo.jpg" />
</div>
<div id="about-us">
<h2>About Us</h2>
<p>
The Computer Science and Software Engineering Club (SCS) is open
to all Concordia students. We help students at all levels to learn
and improve their tech skills. We organize workshops, events and
competitions, and facilitate participation in external events. We
help students in their careers through networking and job hunting
events. All this we do in a fun and social atmosphere. Join us!
</p>
</div>
</section>
<!-- These are empty divs used to make space between the sections. These are the gaps in the site that make it look like the other divs are scrolling over the fixed backgroun -->
<section class="spacer"></section>
<!-- Just another section, plaecholder text in it -->
<section id="mission">
<h2>Our Mission</h2>
<div id="mission-text">
<h3>Help you learn new skills</h3>
Through our tutorials, you’ll encounter tools and programming
languages that you may never see in your classes, such as Git,
Android and Python. These skills will help you tremendously when
working on projects and looking for a job.
<h3>Give you extra programming practice</h3>
Aside from a few small assignments and projects, your classes won’t
give you very much practical experience. During our weekly Algorithm
Time event, you can challenge yourself with fun coding problems,
some of which can potentially be given to you in a real job
interview. You can also participate in awesome programming
competitions like CS Games and IEEEXtreme, which are not only tons
of fun but give you excellent coding practice.
<h3>Help you in your job hunt</h3>
Networking is extremely important when it comes to your future
career. We host events like guest speakers and company tours, which
will give you the opportunity to meet with representatives of
different companies and build your network.
<h3>Help you make new friends and have fun!</h3>
We host a number of social events throughout the year, such as
Lizard Lounge, Milk & Cookies, and Wine & Cheese. You’ll meet tons
of really cool people and make your experience as a Concordia
student worthwhile.
</div>
</section>
<!-- Events section with the event cards in it -->
<section id="events">
<h2>Upcoming events...</h2>
<div id="event-cards">
<!-- Three children of "events-cards", all card divs. Notice the "card" class. Typical design pattern. -->
<div id="event-card-1" class="card">
<div class="card-image-container">
<img class="card-image" src="./assets/events/algotime.png" />
</div>
<h2>Algotime</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
<div id="event-card-2" class="card">
<!-- <h2>Event 2</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> -->
</div>
<div id="event-card-3" class="card">
<!-- <h2>Event 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> -->
</div>
</div>
<a href="./sections/events.html"><h2>All events...</h2></a>
</section>
<!-- Another spacer -->
<section class="spacer"></section>
<!-- Just the sponsors section -->
<section id="sponsors">
<!-- Two children here. Notice that <h2> tags are treated like a div by flexbox, so "sponsors" has in effect two children -->
<h2>Our Sponsors</h2>
<!-- This is a box containing the sponsor images, again to make it easier to use flexbox to position the images -->
<div id="sponsor-logos">
<img class="sponsor" src="assets/sponsors/ibm.png" />
<img class="sponsor" src="assets/sponsors/google.png" />
<img class="sponsor" src="assets/sponsors/windows.png" />
<img class="sponsor" src="assets/sponsors/apple.png" />
<img class="sponsor" src="assets/sponsors/facebook.png" />
</div>
</section>
<!-- Finally, the contact section. -->
<footer></footer>
</div>
<!-- END OF WRAPPER -->
</div>
<!-- END OF BACKGROUND -->
<script src="js/index.js" type="module"></script>
<!-- This links the javascript file to the page, which currently (as of 27/10/22) only contains the smooth scrolling script for the contact link in the navbar -->
<script src="js/home.js" type="module"></script>
</body>
</html>