-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathindex.html
executable file
·161 lines (137 loc) · 9.83 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
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="nav"></div>
<br><br><br>
<div id="showcase">
<img style="aspect-ratio: 2.5; object-fit: cover;" id="slides">
<!--
<div id="showcase-text-bg"></div>
<div id="showcase-text">KAPPA KAPPA PSI<br><span style="font-size: 1.5vw">PURDUE UNIVERSITY ● GAMMA PI</span></div>
-->
</div>
<div class="white-bkgd">
<div class="content">
<span class="w3-container websiteLogo">
<img src="static/images/websiteLogo2.svg">
</span>
<!-- About Section -->
<div class="w3-container w3-padding-32" id="about">
<h3 class="w3-border-bottom w3-border-light-grey blue">About</h3>
<p>Kappa Kappa Psi is a fraternal organization that promotes the advancement of college and university bands through
dedicated service and support to the bands; comprehensive education; leadership opportunities; and recognition;
for the benefit of its members and society.
</p>
</div>
<!---Chapter Values-->
<div class="w3-container" id="values" style="background-color: #DFDFDF; border-top: 2px solid #09268a; border-bottom: 2px solid #09268a;">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-8 blue">Gamma Pi Value Statement</h3>
<h5>The Brothers at Purdue take the mission of Kappa Kappa Psi even further with specific chapter goals:</h5>
<div style="display: flex; flex-wrap: wrap; justify-content: space-evenly;">
<div class="w3-col l4 m6 value">
<div class="value-section">
<img style="aspect-ratio: 2; object-fit: cover;" id="random4" class="border-img value-img">
<h3 class="blue"><i class="fa-solid fa-people-group"></i>  Community</h3>
<p style="width:95%">Just as Purdue Bands and Orchestras creates a family on campus, Gamma Pi fosters a sense of community and forms a
support network among brothers in our own chapter and other chapters. </p>
</div>
</div>
<div class="w3-col l4 m6 value">
<div class="value-section">
<img style="aspect-ratio: 2; object-fit: cover;" id="random5" class="border-img value-img">
<h3 class="blue"><i class="fa-solid fa-puzzle-piece"></i>  Growth</h3>
<p style="width:95%">Gamma Pi provides opportunities for individuals to grow as leaders, musicians, and brothers and in doing so helps
our chapter maximize achievement and continuously strive for the highest.</p>
</div>
</div>
<div class="w3-col l4 m6 value">
<div class="value-section">
<img style="aspect-ratio: 2; object-fit: cover;" id="random6" class="border-img value-img">
<h3 class="blue"><i class="fa-solid fa-square-check"></i>  Initiative</h3>
<p style="width:95%">Gamma Pi takes initiative by searching and finding ways to improve both chapter and the university bands and by
routinely being prepared and anticipating others' needs.</p>
</div>
</div>
<div class="w3-col l4 m6 value">
<div class="value-section">
<img style="aspect-ratio: 2; object-fit: cover;" id="random7" class="border-img value-img">
<h3 class="blue"><i class="fa-solid fa-music"></i>  Passion</h3>
<p style="width:95%">Brothers of Gamma Pi strive to balance our passions for our professional disciplines with those for music,
propel the chapter toward greater accomplishments, and instill the same attitudes within our community.</p>
</div>
</div>
<div class="w3-col l4 m6 value">
<div class="value-section">
<img style="aspect-ratio: 2; object-fit: cover;" id="random8" class="border-img value-img">
<h3 class="blue"><i class="fa-solid fa-heart"></i>  Integrity</h3>
<p style="width:95%">By closely following the purposes and ideals of Kappa Kappa Psi, Gamma Pi demonstrates integrity by serving
as role models who display consistent, honorable character.</p>
</div>
</div>
</div>
</div>
<div class="w3-container" id="values" style="background-color: #DFDFDF; border-bottom: 2px solid #09268a;">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-8 blue">Get the Updates</h3>
<div class="w3-third">
<div class="updates-section w3-center">
<img style="aspect-ratio: 1; object-fit: cover;" id="random1" class="border-img updates-img">
<h3 class="blue">Gamma Pi Alumni Association</h3>
<p style="width:95%">Gamma Pi is proud to be one of 20 chapters of the fraternity to have an alumni association. Here, alumni can keep up with
the latest service projects, learn about the new incoming class of brothers, and support Gamma Pi through donations.</p>
</div>
</div>
<div class="w3-third">
<div class="updates-section w3-center">
<img style="aspect-ratio: 1; object-fit: cover;" id="random2" class="border-img updates-img">
<h3 class="blue">The Arpeggio</h3>
<p style="width:95%">Learn about what is going on with other chapters in the North Central District through The Arpeggio. Here you can learn
about outstanding service projects, new member education, and ideas for benefit of all chapters. Check it out!</p>
</div>
</div>
<div class="w3-third">
<div class="updates-section w3-center">
<img style="aspect-ratio: 1; object-fit: cover;" id="random3" class="border-img updates-img">
<h3 class="blue">Keeping up with Gamma Pi</h3>
<p style="width:95%">Want to know more about what the Brothers at Purdue are doing? Read the updates our Alumni Secretary publishes every
month to hear about the Brother of the Week, ongoing service projects, and the new class of Brothers!</p>
</div>
</div>
</div>
</div>
</div>
<div class="white-bkgd", id="footer"></div>
</body>
<script src="static/script.js"></script>
<!-- these are technially aspect ratio 2.5 but should auto fit most pictures decently now -NCV -->
<script>
var images = ["static/images/sigh.jpg", "static/images/kap.jpg", "static/images/who.jpg", "static/images/juice.jpg", "static/images/redacted.jpg"];
var i = -1;
rotate();
function rotate() {
i = (i+1)%images.length;
document.getElementById("slides").src = images[i];
setTimeout(rotate, 4000);
}
</script>
<!--Square images-->
<script>
var randimgs = ["static/images/Shelf.jpg", "static/images/Waterfall 2.jpg", "static/images/Styx.jpg", "static/images/Reading.jpg", "static/images/Stage lift.jpg", "static/images/Treble Monke.jpg"];
var randidx = Math.floor(Math.random() * randimgs.length);
document.getElementById("random1").src = randimgs[randidx];
document.getElementById("random2").src = randimgs[(randidx + 1)%randimgs.length];
document.getElementById("random3").src = randimgs[(randidx + 2)%randimgs.length];
</script>
<!--2:1 ratio images-->
<script>
var randimgs = ["static/images/Bob Ross.jpg", "static/images/Ethan Rowe.jpg", "static/images/Letters.jpg", "static/images/Ice.jpg", "static/images/Mask Decorating.jpg", "static/images/KAP 500.jpg", "static/images/Jocie Strock.jpg", "static/images/Twinning.jpg", "static/images/Pikachu.jpg", "static/images/Skating.jpg", "static/images/Waitress.jpg"];
var randidx = Math.floor(Math.random() * randimgs.length);
document.getElementById("random4").src = randimgs[randidx];
document.getElementById("random5").src = randimgs[(randidx + 1)%randimgs.length];
document.getElementById("random6").src = randimgs[(randidx + 2)%randimgs.length];
document.getElementById("random7").src = randimgs[(randidx + 3)%randimgs.length];
document.getElementById("random8").src = randimgs[(randidx + 4)%randimgs.length];
</script>
</html>