-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
329 lines (307 loc) · 17.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
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/movement.css">
<!-- Modernize for old browsers -->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<header class="header">
<div id="header-wrapper">
<nav>
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#about" class="about">About</a></li>
<li><a href="#courses" class="courses">Courses</a></li>
<li><a href="#apply" class="apply">Apply Online</a></li>
<li><a href="#faq" class="faq">F.A.Q.</a></li>
<li><a href="#fa" class="fa">Financial Aid</a></li>
<li><a href="#contact" class="contact">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
<section class="pancake regbg" id="home">
<div class="content" id="home-panel">
<div class="main-desc">
<header>
<h1>It's your degree. 100% online</h1>
</header>
<div id="homebg"><img src="img/home_animate.png" /></div>
<div class="list-icon-items home-sub"><a><div class="circ pulse home-circ-1 border-circ-std"></div></a></div>
<div class="list-icon-items home-sub"><a><div class="circ pulse home-circ-2 border-circ-std"></div></a></div>
<div class="list-icon-items home-sub"><a><div class="circ pulse home-circ-3 border-circ-std"></div></a></div>
<div class="list-icon-items home-sub"><a><div class="circ pulse home-circ-4 border-circ-media"><span class="home-txt-1 bub-media-txt">Hear why students are choosing csu</span></div></a></div>
<div id="blue-wrap">
<div id="titlebar">
<!--THIS TEXT APPEARS FIRST !-->
<span class="hgt3">With this new program from Columbus State University (CSU), you can now earn your bachelor’s degree in just three years. All online. Affordably priced. And from a real university – an accredited state institution that was recently ranked among the top 50 regional public universities in the South by U.S. News & World Report.</span>
<span class="hgt3">In partnership with the University System of Georgia, CSU’s Bachelor of Arts in Communication with a Civic Leadership Focus is designed for low-income students, the young adult military population, and those whom higher education has not traditionally served well in terms of race and ethnicity.</span>
</div>
</div>
<!--END OF TITLEBAR !-->
</div> <!--END OF main-desc !-->
</div><!--END OF CONTENT !-->
<!-- <span class="btnprev btnav"><a href="#about"><img src="template_files/arrow-down.png" /></a></span> -->
</section><!--END OF HOME !-->
<!--BEGIN ABOUT -->
<section class="pancake altbg" id="about">
<div class="content">
<div class="main-desc">
<header></header>
<div id="aboutbg"><img src="img/about_animate.png" /></div>
<div class="list-icon-items"><a><div class="circ pulse about-circ-1 border-circ-main"></div></a><span class="about-txt-1 bub-txt">About <span class="txt-sub">the</span> course</span></div>
<div class="list-icon-items about-sub"><a><div class="circ pulse about-circ-2 border-circ-std"></div></a><span class="about-txt-2 bub-txt">100%<br/>Online</span></div>
<div class="list-icon-items about-sub"><a><div class="circ pulse about-circ-3 border-circ-std"></div></a><span class="about-txt-3 bub-txt">Civic Leadership Focus</span></div>
<div class="list-icon-items about-sub"><a><div class="circ pulse about-circ-4 border-circ-std"></div></a><span class="about-txt-4 bub-txt">Advisories & Tutoring</span></div>
<div class="list-icon-items about-sub"><a><div class="circ pulse about-circ-5 border-circ-std"></div></a><span class="about-txt-5 bub-txt">Cirriculum</span></div>
<div class="list-icon-items about-sub"><a><div class="circ pulse about-circ-6 border-circ-std"></div></a><span class="about-txt-6 bub-txt">Accredited</span></div>
<div id="about-blue-wrap">
<div class="titlebar">
<!--THIS TEXT APPEARS FIRST !-->
<!-- <span class="pancake-text">ABOUT<br/> THE COURSE</span>-->
</div>
</div>
<!--END OF TITLEBAR !-->
</div> <!--END OF main-desc -->
</div><!--END OF CONTENT -->
</section><!--END OF ABOUT !-->
<!--BEGIN BENEFITS-->
<section class="pancake regbg" id="courses">
<div class="content">
<div class="main-desc">
<header> </header>
<div id="benefitbg"><img src="img/benefit_animate.png" /></div>
<div class="list-icon-items"><a><div class="circ pulse benefit-circ-1 border-circ-main"></div></a></div>
<div class="list-icon-items benefit-sub"><a><div class="circ pulse benefit-circ-2 border-circ-std"></div></a><span class="benefit-txt-2 bub-txt">Shorter Sessions</span></div>
<div class="list-icon-items benefit-sub"><a><div class="circ pulse benefit-circ-3 border-circ-std"></div></a><span class="benefit-txt-3 bub-txt">Free Computer</span></div>
<div class="list-icon-items benefit-sub"><a><div class="circ pulse benefit-circ-4 border-circ-media"></div></a><span class="benefit-txt-4 bub-txt">Read More</span></div>
<div class="list-icon-items benefit-sub"><a><div class="circ pulse benefit-circ-5 border-circ-std"></div></a><span class="benefit-txt-5 bub-txt">Dual<br/>Enrollment<br/><br/>High<br/>School</span></div>
<div class="list-icon-items benefit-sub"><a><div class="circ pulse benefit-circ-6 border-circ-std"></div></a><span class="benefit-txt-6 bub-txt">Career Opportunities</span></div>
<div class="list-icon-items benefit-sub"><a><div class="circ pulse benefit-circ-7 border-circ-std"></div></a><span class="benefit-txt-7 bub-txt">Military Credits</span></div>
<div class="list-icon-items benefit-sub"><a><div class="circ pulse benefit-circ-8 border-circ-std"></div></a><span class="benefit-txt-8 bub-txt">Affordable</span></div>
<div id="benefit-blue-wrap">
<div class="titlebar">
<!--THIS TEXT APPEARS FIRST !-->
<span class="pancake-text">BENEFITS</span>
</div>
</div>
</div> <!--END OF main-desc -->
</div><!--END OF CONTENT -->
</section><!--END OF BENEFITS !-->
<!--BEGIN NITTY GRITTY -->
<section class="pancake altbg" id="nitty">
<div class="content">
<article>
<div class="sectiontitle trigger-nitty">
<p>
<a href="javascript:void(0)" class="toggle2" title="click me to see more">See More...</a>
</p>
</div>
<div id="sliders-nitty">
<div id="titlebar-nitty"> <!--THIS TEXT APPEARS FIRST !-->
<span class="nitty-gritty">NITTY GRITTY</span>
</div><!--END OF TITLEBAR !-->
<div class="left-nitty">
<div class="left-nitty-padding">
<div class="admissions"><p class="l1">ADMISSIONS</p></div>
<div class="admissions" style="margin-left:-30px;"><p class="l2">REGISTRATION</p></div>
<div class="admissions" style="margin-left:-30px;"><p class="l3">FINANCIAL AID</p></div>
<div class="admissions"><p class="l4">TUITION</p></div>
</div><!--END OF left-nitty-padding !-->
</div>
<!--END OF left-nitty !-->
<div class="right-nitty">
<div class="right-nitty-padding">
<div class="requirements"><p class="r1">REQUIREMENTS</p></div>
<div class="requirements" style="margin-left:30px;"><p class="r2">TRANSFER CREDIT</p></div>
<div class="requirements" style="margin-left:30px;"><p class="r3">CRITICAL DATE</p></div>
<div class="requirements"><p class="r4">HONESTY</p></div>
</div><!--END OF right-nitty-padding !-->
</div>
<!--END OF right-nitty !-->
</div>
<!--END OF sliders-nitty !-->
</article>
</div><!--END OF CONTENT !-->
</section><!--END OF NITTY GRITTY !-->
<!--BEGIN FAQ -->
<section class="pancake regbg" id="faq">
<div class="content">
<article>
<div class="sectiontitle trigger">
<p>
<a href="javascript:void(0)" class="toggle" title="click me to see more">F.A.Q <span>see more ...</span></a>
</p>
</div>
<div id="titlebar2"> <!--THIS TEXT APPEARS FIRST !-->
<span class="faq-text">F.A.Q.</span>
</div><!--END OF TITLEBAR !-->
<div id="sliders">
<div class="village">
<div class="village-padding">
<h3>Question Example</h3>
<div class="slider-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie congue augue,
vel iaculis nisl imperdiet et. Etiam eros justo, lacinia sit amet aliquam non, porta
nec dolor. Vestibulum volutpat, turpis sit amet sodales cursus, velit mauris congue eros,
in venenatis lacus orci vitae arcu. Nam imperdiet semper condimentum. Quisque ultricies
molestie sollicitudin. Donec vitae odio et odio pulvinar tincidunt. Phasellus sagittis
pretium eleifend. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Aenean malesuada semper dictum. Nulla facilisi.</div>
</div><!--END OF village-padding !-->
</div>
<!--END OF village !-->
<div class="cloudbar">
<div class="cloud-padding">
<h3>Question Example</h3>
<div class="slider-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie congue augue,
vel iaculis nisl imperdiet et. Etiam eros justo, lacinia sit amet aliquam non, porta
nec dolor. Vestibulum volutpat, turpis sit amet sodales cursus, velit mauris congue eros,
in venenatis lacus orci vitae arcu. Nam imperdiet semper condimentum. Quisque ultricies
molestie sollicitudin. Donec vitae odio et odio pulvinar tincidunt. Phasellus sagittis
pretium eleifend. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Aenean malesuada semper dictum. Nulla facilisi.
</div>
</div><!--END OF cloud-padding !-->
</div>
<!--END OF cloudbar !-->
</div>
<!--END OF sliders !-->
</article>
</div><!--END OF CONTENT !-->
</section><!--END OF FAQ !-->
<footer class="altbg">
<div id="footer-wrapper">
<div id="foot-1">
<img src="img/footer_logo.png" />
</div>
<div id="foot-2">
<ul>
<li>
<ul style="margin:0 0 0 -40px!important;">
<li class="foot-links"><a href="http://www.columbusstate.edu/aboutus/contactus.php">Privacy Policy</a></li>
<li class="foot-links"><a href="#">Sitemap</a></li>
<li class="foot-links"><a href="http://webs.columbusstate.edu/web_privacy_policy.php">Contact Us</a></li>
</ul>
</li>
<li>
Copyright ©
<script language="JavaScript" type="text/javascript">
now = new Date
theYear=now.getYear()
if (theYear < 1900)
theYear=theYear+1900
document.write(theYear)
</script>
</li>
<li>Columbus State University</li>
<li>4225 University Avenue</li>
<li>Columbus, Georgia 31907</li>
<li>1.800.123.1234</li>
</ul>
</div>
<div id="foot-3">
<ul class="social-media">
<li><span class="SM">SOCIAL MEDIA</span>
<ul id="social-media-foot">
<a href=""> <li class="facebook">Online Degree Facebook Page</li></a>
<a href="https://www.facebook.com/ColumbusState"><li class="facebook2">CSU Facebook Page</li></a>
<a href=""><li class="twitter">Online Degree Twitter Page</li></a>
<a href="https://twitter.com/ColumbusState"><li class=twitter2>CSU Twitter Page</li></a>
<li> </li>
<a href="http://www.youtube.com/columbusstateu"><li class="youtube">CSU YouTube Channel</li></a>
</ul>
</li>
</ul>
</div>
<div id="foot-4">
<!-- Blank For Now -->
</div>
</div> <!--End Footer Wrapper -->
</footer>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <!-- The Google jQuery Lib -->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.tools.min.js"></script>
<script src="js/scrollingpara.js" type="text/javascript"></script>
<script src="js/landscape.js" type="text/javascript"></script>
<script src="js/nitty.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- The Molecule Loaders -->
<script src="js/molecule/caat-min.js"></script>
<script src="js/molecule/template.js"></script>
<script src="js/molecule/molecule.js"></script>
<!-- Colorbox Scripts -->
<script src="js/jquery.colorbox-min.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<!--
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script> -->
<script type="text/javascript">
$(document).ready(function() {
// Start the Colorbox
$(function() {
jQuery('a.test').colorbox();
});
// Fade the Home BG once the page is loaded
$("#homebg").fadeTo(5000, 1);
// Hide all the elements until click
$(".about-sub").hide();
$(".benefit-sub").hide();
// Fade on Container BG click
$('.about-circ-1').bind('click',function(event){
$("#aboutbg").fadeTo(5000, 1);
$(".about-sub").show();
});
$('.benefit-circ-1').bind('click',function(event){
$("#benefitbg").fadeTo(5000, 1);
$(".benefit-sub").show();
});
$("#associates").scrollable().navigator();
$("#successes").scrollable().navigator();
$("#davtxt").scrollable({circular: true, mousewheel: false}).navigator().autoscroll({
interval: 5000
});
$("#testimonials").scrollable({circular: true, mousewheel: false}).click(function() {$(this).data("scrollable").next();
});
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -130
}, 2000,'easeInOutExpo');
event.preventDefault();
});
$('span.btnav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -130
}, 2000,'easeInOutExpo');
event.preventDefault();
});
});
});
</script>
</body>
</html>