Skip to content

Commit 975ec4a

Browse files
ScriporeScripore
committed
added slides.js and collected homepage photos into slideshow with fade effect. moved info content to tabs sections
1 parent bc37d54 commit 975ec4a

4 files changed

Lines changed: 68 additions & 70 deletions

File tree

‎app/assets/javascripts/application.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,4 @@
1414
//= require jquery_ujs
1515
//= require bootstrap
1616
//= require jquery.stellar
17+
//= require jquery.slides.min

‎app/assets/javascripts/jquery.slides.min.js‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/assets/stylesheets/application.css.scss‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,19 @@
1515
*= require font-awesome
1616
*/
1717

18+
.homepage_headline {
19+
vertical-align: text-top;
20+
text-align: center;
21+
}
22+
23+
.col-lg-10 {
24+
display: block;
25+
margin-top: 40px;
26+
margin-bottom: 100px;
27+
margin-left: 8.3%;
28+
margin-right: 8.3%;
29+
}
30+
1831
* {
1932
font-family: "Open Sans";
2033
}
@@ -152,8 +165,8 @@ a.btn.btn-default:hover {
152165
position: absolute;
153166
text-align: center;
154167
color: #FFF;
155-
top: 350px;
156-
width: 80%;
168+
top: 280px;
169+
width: 100%;
157170
z-index: 2;
158171
}
159172

‎app/views/pages/home.html.erb‎

Lines changed: 45 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,63 @@
1-
<div class="jumbotron phone_view">
2-
<div class="container">
3-
<h2>On a mission to get military veterans coding.
4-
</h2>
5-
<h3>
61
<!-- Veteran-founded and led, Operation Code is focused on increasing the number
72
of U.S. Military/ Veterans to careers in software development and coding
83
through scholarships and mentorship while putting a dent in the nation's
94
technical talent shortage. -->
10-
</h3>
11-
</div>
12-
</div>
5+
136
<div id="wrap">
147
<div id="video">
15-
<%= video_tag "https://s3-us-west-2.amazonaws.com/operationcode/broll+for+web_hand+typing.mp4", autoplay: "true", muted: "true", loop: "true" %>
16-
<div id="overlay">
17-
<h2 class="small_screen_h2">Join us on a mission to get military veterans coding.<br>
18-
</h2>
19-
<h3 class="small_screen_h3">
20-
<!-- Veteran-founded and led, Operation Code is focused on increasing the
21-
number of U.S. military/ Veterans to careers in software development
22-
and coding through scholarships and mentorship while putting a dent in
23-
the nation's technical talent shortage. -->
24-
</h3>
8+
<div id="slides">
9+
<li>
10+
<div id="overlay"><h1 class="small_screen_h2">Join us on a mission to get military veterans coding.</h1></div>
11+
<img src="/assets/gi-bill.jpg">
12+
</li>
13+
<li>
14+
<img src="/assets/mentorship.jpg">
15+
<div id="overlay"><h1 class="small_screen_h2">Join us on a mission to get military veterans coding.</h1></div>
16+
</li>
17+
<li>
18+
<img src="/assets/scholarship.jpg">
19+
<div id="overlay"><h1 class="small_screen_h2">Join us on a mission to get military veterans coding.</h1></div>
20+
</li>
2521
</div>
2622
</div>
27-
<div class="row scholar picture_background">
28-
<div class="photo-text">
29-
<div class="photo-text2">
30-
<h2 class="center">Scholarship Fellows</h2>
31-
<p>A scholarship for a deserving veteran to transition to a
32-
software career would be life-changing in every imaginable way. Our
33-
veterans proudly hail from every branch of our military and every era after Vietnam. Our capital campaign goal is to crowdfund $7.5 million for scholarships.
23+
</div>
3424

35-
<!-- <iframe src="https://player.vimeo.com/video/124794084" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/124794084"></p> -->
36-
</p>
37-
<p class="center"><a class="btn btn-default"
38-
href="/donate"
39-
role="button">Donate</a>
40-
</p>
41-
</div>
25+
<div class="col-lg-10">
26+
<ul class="nav nav-tabs">
27+
<li class="active"><a href="#home" data-toggle="tab" aria-expanded="true"><h4>Scholarship Fellows</h4></a></li>
28+
<li class=""><a href="#mentoring" data-toggle="tab" aria-expanded="false"><h4>Software Mentorship</h4></a></li>
29+
<li class=""><a href="#gi-bill-expansion" data-toggle="tab" aria-expanded="false"><h4>New GI Bill Expansion</h4></a></li>
30+
</ul>
31+
<div id="myTabContent" class="tab-content">
32+
<div class="tab-pane fade active in" id="home">
33+
<p><h4>A scholarship for a deserving veteran to transition to a
34+
software career would be life-changing in every imaginable way. Our
35+
veterans proudly hail from every branch of our military and every era after Vietnam. Our capital campaign goal is to crowdfund $7.5 million for scholarships.</h4></p>
4236
</div>
43-
</div>
44-
<div class="row mentor picture_background">
45-
<div class="photo-text">
46-
<div class="photo-text2">
47-
<h2 class="center">Software Mentorship</h2>
48-
<p>Learning to program is both rewarding and challenging, however, no veteran should code alone. Our Software Mentor Protégé Program gets veterans coding through both a software mentor and our community on Slack.</p>
49-
<p class="center"><a class="btn btn-default" href="/action" role="button">Enroll now</a>
50-
</p>
51-
</div>
37+
<div class="tab-pane fade" id="mentoring">
38+
<p><h4>Learning to program is both rewarding and challenging, however, no veteran should code alone. Our Software Mentor Protégé Program gets veterans coding through both a software mentor and our community on Slack.</h4></p>
5239
</div>
53-
</div>
54-
<div class="row gi-bill picture_background">
55-
<div class="photo-text">
56-
<div class="photo-text2">
57-
<h2 class="center">New GI Bill Expansion</h2>
58-
<p>Congress can and should create a special category of accreditation that paves the way for veterans to receive this software training at code schools across the country. Join the effort and let your U.S. Senator and Member of Congress know to equalize the education field for America's patriots.
59-
</p>
60-
<p class="center"><a class="btn btn-default" href="https://www.switchup.org/blog/why-veterans-will-make-excellent-programmers">Read more</a></p>
61-
</div>
40+
<div class="tab-pane fade" id="gi-bill-expansion">
41+
<p><h4>Congress can and should create a special category of accreditation that paves the way for veterans to receive this software training at code schools across the country. Join the effort and let your U.S. Senator and Member of Congress know to equalize the education field for America's patriots.</h4></p>
6242
</div>
6343
</div>
6444
</div>
6545

66-
67-
68-
69-
<hr>
70-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
7146
<script>
72-
$(window).on('resize orientationChanged', function() {
73-
var $vid = $('video','#video');
74-
var $msg = $('#overlay');
75-
$msg.css({
76-
top:$vid.offset().top + (($vid.height()/2) - ($msg.height()/2)),
77-
left:$vid.offset().left + (($vid.width()/2) - ($msg.width()/2))
78-
});
79-
});
80-
var $vid = $('video','#video');
81-
var $msg = $('#overlay');
82-
$msg.css({
83-
top:$vid.offset().top + (($vid.height()/2) - ($msg.height()/2)),
84-
left:$vid.offset().left + (($vid.width()/2) - ($msg.width()/2))
47+
$('#slides').slidesjs({
48+
width: 940,
49+
height: 528,
50+
navigation: false,
51+
pagination: false,
52+
play: {
53+
active: false,
54+
auto: true,
55+
interval: 4000,
56+
fade: true,
57+
effect: "fade"
58+
},
59+
effect: {
60+
fade: {speed: 1000}
61+
}
8562
});
8663
</script>

0 commit comments

Comments
 (0)