socktober/story.html at master · DevCatalyst/socktober · GitHub

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
<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Learn the Story | Socktober</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style>
            body {
                padding-top: 50px;
                padding-bottom: 20px;
                background-image: url("img/doodle.png");
                background-repeat: repeat;
                background-attachment: fixed;

            }
        </style>
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/main.css">
        <link href='https://fonts.googleapis.com/css?family=Cabin+Sketch|Cabin' rel='stylesheet' type='text/css'>

        <script>
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
          })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

          ga('create', 'UA-84552295-1', 'auto');
          ga('send', 'pageview');
        </script>


        <!--[if lt IE 9]>
            <script src="js/vendor/html5-3.6-respond-1.4.2.min.js"></script>
        <![endif]-->
         <!--Favicon Stuff-->
         <link rel="apple-touch-icon" sizes="76x76" href="img/apple-touch-icon.png">
         <link rel="icon" type="image/png" href="img/favicon-32x32.png" sizes="32x32">
         <link rel="icon" type="image/png" href="img/favicon-16x16.png" sizes="16x16">
         <link rel="manifest" href="img/manifest.json"> <link rel="mask-icon" href="img/safari-pinned-tab.svg" color="#008080">
         <meta name="theme-color" content="#ffffff">

    </head>
    <body>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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">
              <img src="img/sockpuppets.PNG">
              Socktober</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="howto.html">Get Started</a></li>
            <li class="active"><a href="story.html">Learn the Story</a></li>
            <li><a href="social.html">Spread the Word</a></li>
            <li><a href="share.html">Share Your Success</a></li>
          </ul>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
          <div class="col-md-12">
              <h2>It all started with a silly idea: <b>Socks + October = Socktober</b>!</h2>
          </div>
      </div>
        <div class="col-md-12">
            <p>In October 2011, creator Brad Montague realized there was a large homeless population in his hometown, and he wanted to do something about it. While researching the needs of the homeless community, he learned that socks are the items least donated to homeless shelters. So Brad took action. He began to film himself wishing people “Happy Socktober!” as he gave out pairs of socks on the streets, and he posted these videos on social media. </p>
            <p>Word got around about these videos, and people wanted to know how they could help. So in a stroke of genius, Brad created a Socktober rap that could be purchased for a $5 donation to The Van, a group that drives a van around Arkansas to deliver necessities, including socks, to those in need. </p>
            <p>Since then, Socktober has exploded! Kids and adults around the world have started their own sock drives to benefit their local homeless shelters.  In 2013, Socktober teamed up with Kid President to spread the word and encourage more people to participate. <b>Last year, participants on all seven continents donated pairs of socks!</b></p>
            <p>Socktober will continue until none of our neighbors are homeless! Ready to help? Visit our <a href="howto.html">Get Started page</a> to learn more!</p>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-12">
                <h2>Kid President's &amp; Brad Montague's Socktober videos</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <iframe width="740" height="300" src="https://www.youtube.com/embed/0sbG-172e_Y?showinfo=0" frameborder="0" allowfullscreen class="video"></iframe>
            </div>
            <div class="col-md-4">
                <iframe src="https://player.vimeo.com/video/31022037?title=0&byline=0&portrait=0" width="740" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="video" id="rap-video"></iframe>
            </div>
            <div class="col-md-4">
                <iframe width="740" height="300" src="https://www.youtube.com/embed/TECramoWK_M?showinfo=0" frameborder="0" allowfullscreen class="video"></iframe>
            </div>
        </div>
    </div>

      <footer>
        <img src="img/leftLighting.png" alt="lightning Bolt" class="social-icon lightning" data-toggle="modal" data-target="#myModal">
        <a href ="https://www.facebook.com/KidPresident/">
            <img src="img/facebook.png" alt="facebook logo" class="social-icon social-icon-link"></a>
        <a href ="https://twitter.com/iamkidpresident">
            <img src="img/twitter.png" alt="twitter logo" class="social-icon social-icon-link"></a>
        <a href ="https://www.youtube.com/playlist?list=PLzvRx_johoA-YabI6FWcU-jL6nKA1Um-t">
            <img src="img/youTube.png" alt="youTube logo" class="social-icon social-icon-link"></a>
        <a href ="https://www.instagram.com/iamkidpresident/">
            <img src="img/instagram.png" alt="Instagram logo" class="social-icon social-icon-link"></a>
        <img src="img/rightLighting.png" alt="lightning Bolt" class="social-icon lightning" data-toggle="modal" data-target="#myModal">
        <p>&copy; Socktober 2017</p>
        <p class="small">created by <a href="http://www.attheco.com/devcatalyst">Dev.Catalyst</a> students</p>
    </footer>

        <!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">The Dev.Catalyst team says that you're awesome!</h4>
      </div>
      <div class="modal-body">
        <img src="img/devcatalyst.jpg">
      </div>
    </div>
  </div>
</div>

        <!-- /container -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
        <script src="js/vendor/bootstrap.min.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>