-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact.html
146 lines (137 loc) · 6.94 KB
/
contact.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
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Contact Us</title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<style>
body{
padding-top:50px;
background-image: url("Images for use/blue_fade.jpg");
}
.starter-template{
padding:40px 15px;
text-align:center;
border-bottom: 2px solid #EEE;
}
.active a{
background: #3399ff !important;
}
#info{
margin-top: 5px;
margin-bottom: 5px;
}
p, h1, h2, h3, h4, h5, h6, ul, a{
font-family: serif;
}
.contact{
background-color: lightgrey;
margin-top: 30px;
}
.style_prevu_kit{
border:0;
position: relative;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
.style_prevu_kit:hover{
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.1);
transition: all 200ms ease-in;
transform: scale(1.1);
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">SeLU ACM</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li class="active"><a href="contact.html">Contact Us</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="signup.html">Sign Up</a></li>
</ul>
</div>
</div>
</nav>
<!-- Content -->
<div class="container" style="background-color:white; border-radius: 15px; margin-top: 15px; padding-top: -15px;">
<div class="starter-template" style="background-color: white;">
<h1 style="text-align: center;">Contact Us</h1>
<h3 style="text-align: center;">If there are any questions or concerns that you would like to present directly to ACM Officers, feel free to get in contact with us at any time via our school email as provided below.</h3>
</div>
<div class="row-body">
<!--Garth-->
<div id="info" class="col-md-12 img-rounded contact style_prevu_kit">
<img src="Images for Use/No-profile.png" class="img-circle col-md-2 left-side" style="hieght:130px; width:130px;">
<div class="col-md-6">
<h3 class="col-md-6">Garth Keipper</h3>
<h3 class="col-md-6" style="opacity:0.6;">President</h3>
<h4 class="col-md-12">Email: <a href="mailto:garth.keipper@selu.edu">garth.keipper@selu.edu</a></h4>
</div>
<h4 class="col-md-4 right-side">The President is responsible for coordinating events and meetings, working alongside guest speakers, and communicating directly with the school to help funding.</h4>
</div>
<!-- Weston -->
<div id="info" class="col-md-12 img-rounded contact style_prevu_kit">
<img src="Images for Use/No-profile.png" class="img-circle col-md-2" style="hieght:130px; width:130px;">
<div class="col-md-6">
<h3 class="col-md-6 right-side">Weston Arnold</h3>
<h3 class="col-md-6 right-side" style="opacity:0.6;">Vice-president</h3>
<h4 class="col-md-12 right-side">Email: <a href="mailto:weston.arnold@selu.edu">weston.arnold@selu.edu</a></h4>
</div>
<h4 class="col-md-4">The Vice-Presidents duties include sharing the duties and responsibilites of the president, and representing the ACM in any unforseen absense of the president.</h4>
</div>
<!--Steve-->
<div id="info" class="col-md-12 img-rounded contact style_prevu_kit">
<img src="Images for Use/No-profile.png" class="img-circle col-md-2" style="hieght:130px; width:130px;">
<div class="col-md-6">
<h3 class="col-md-6 right-side">Steven Samrow</h3>
<h3 class="col-md-6 right-side" style="opacity:0.6;">Secretary</h3>
<h4 class="col-md-12 right-side">Email: <a href="mailto:steven.samrow@selu.edu">steven.samrow@selu.edu</a></h4>
</div>
<h4 class="col-md-4">The Secretary is in charge of communication with the students and ACM members, as well as updating and posting on social media outlets.</h4>
</div>
<!--Jacob-->
<div id="info" class="col-md-12 img-rounded contact style_prevu_kit" style="margin-bottom:15px;">
<img src="Images for Use/No-profile.png" class="img-circle col-md-2" style="hieght:130px; width:130px;">
<div class="col-md-6">
<h3 class="col-md-6 right-side">Jacob Nance</h3>
<h3 class="col-md-6 right-side" style="opacity:0.6;">Treasurer</h3>
<h4 class="col-md-12 right-side">Email: <a href="mailto:jacob.nance@selu.edu">jacob.nance@selu.edu</a></h4>
</div>
<h4 class="col-md-4">The Treasurer is responsible for handling the expenses of the ACM events and managing the registration of students into the ACM.</h4>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>