-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
executable file
·147 lines (135 loc) · 5.74 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
<!doctype html>
<head>
<meta charset="utf-8"/>
<!-- Using the meta viewport value width=device-width instructs the page to match the screen's width in device-independent pixels. This allows the page to reflow content to match different screen sizes, whether rendered on a small mobile phone or a large desktop monitor.
tldr:
Use the meta viewport tag to control the width and scaling of the browser's viewport.
Include width=device-width to match the screen's width in device-independent pixels.
Include initial-scale=1 to establish a 1:1 relationship between CSS pixels and device-independent pixels.-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Women@SCS</title>
<link rel="stylesheet" href="css/materialize.min.css"/>
<link rel="stylesheet" href="css/style.css"/>
<!-- needed for icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- needed for responsiveness -->
<link rel="stylesheet" media="(max-width:992px)" href="css/small.css">
<link rel="stylesheet" media="(min-width:993px)" href="css/large.css">
</head>
<body>
<div class="row">
<div class="col s12 padding-top"></div>
</div>
<!-- start nav bar -->
<!-- z-depth-0 removes the shadow effect that is the default for materialize css nav bars -->
<nav id="main-nav" class="z-depth-0">
<div class="nav-wrapper">
<a href="#" data-activates="mobile-nav" class="button-collapse"><i class="material-icons">menu</i></a> <!-- hamburger icon :D - only visible on mobile -->
<ul class="right hide-on-med-and-down">
<li><a href="#">About</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Get Involved</a></li>
</ul>
<ul class="side-nav" id="mobile-nav">
<li><a href="#">About</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Get Involved</a></li>
</ul>
</div>
</nav>
<!-- end nav bar -->
<div class="row content-top">
<!-- start W@SCS general info (CMU logo, W@SCS, mission) -->
<div class="col s12 l8">
<div class="wscs-info">
<img class="cmu-logo" src="img/cmu_wordmark.png">
</div>
<h1 class="wscs-info">WOMEN<b>@SCS</b></h1>
<p class="wscs-info"> The Women@SCS mission is to create, encourage, and support academic, social, and professional opportunities for women in computer science and to promote the breadth of the field and its diverse community. </p>
</div>
<!-- end W@SCS general info (CMU logo, W@SCS, mission) -->
<div class="col s12 section-divider"><hr></div>
<!-- start upcoming events info -->
<div class="col s12 l4" id="dates">
<div class="label"> <h2>Upcoming <br> Events</h2> </div>
<!-- Event 1 / 3 -->
<div class="event">
<div class="info">Mon, Feb 8</div>
<div class="name"><b>Faculty Student Dinner</b></div>
<div class="info">Cool Restaurant</div>
</div>
<hr>
<!-- Event 2 / 3 -->
<div class="event">
<div class="info">Wed, Mar 9</div>
<div class="name"><b>AirBnb Dinner</b></div>
<div class="info">Another Cool Place</div>
</div>
<hr>
<!-- Event 3 / 3 -->
<div class="event">
<div class="info">Thurs, Dec 11</div>
<div class="name"><b>Women@SCS Meeting</b></div>
<div class="info">GHC 4412</div>
</div>
</div>
<!-- end upcoming events info -->
</div>
<div class="col s12 section-divider"></div>
<div class="row news-section">
<div class="label"> <h2>News</h2> </div>
<div class="col s12 post">
<!-- TODO: deal with how much content is outputted here, and making sure it's centered; problem is need vertical-align: top to keep news div in line with image div -->
<div class="image feature"></div>
<div class="news feature">
<div class="content feature">
<h3>Volunteering at TechNights</h3>
<h4>by mopewa ogundipe</h4>
<p class="description">lalalalalalalala lalalalalalal lalalalalalallalalalalalalala lalalalalalal lalalalalalallalalalalalalala lalalalalalal lalalalalalal</p>
<div class="button">Read Full Story</div>
</div>
</div>
</div>
</div>
<div class="row news-section">
<div class="col s12 l4 post">
<div class="image"></div>
<div class="news">
<div class="content">
<h5>Volunteering at TechNights</h5>
<h6>by mopewa ogundipe</h6>
</div>
</div>
</div>
<div class="col s12 l4 post">
<div class="image"></div>
<div class="news">
<div class="content">
<h5>Volunteering at TechNights</h5>
<h6>by mopewa ogundipe</h6>
</div>
</div>
</div>
<div class="col s12 l4 post">
<div class="image"></div>
<div class="news">
<div class="content">
<h5>Volunteering at TechNights</h5>
<h6>by mopewa ogundipe</h6>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 padding-bottom">
<img class="scs-logo" src="img/cmu-computer-science.png">
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>