HackSC/index.html at master · uschackers/HackSC · 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
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
<!DOCTYPE html>
<html>
<head>
	<title>HackSC 2015</title>
  <meta property="og:title" content="HackSC"/>
  <meta property="og:type" content="website"/>
  <meta property="og:url" content="http://www.hacksc.com/"/>
  <meta property="og:image" content="http://www.hacksc.com/images/HackSC.jpg"/>
  <link rel="shortcut icon" href="images/Phil-01.png">
	<link rel="stylesheet" type="text/css" href="css/main.css"/>
  <script src="js/main.js"></script>
</head>
<body>
	<div class="top animated">
		<img id="mainlogo" class="logo" src="images/logo.svg"/>
		<p class="date">Nov. 13th - 15th, 2015</p>
  </div>
  <div class="bottom">
    <div class="bottom-image animated">
      <img class="computers-image" src="images/computers.svg"/>
    </div>
		<div class="bottom-bar"></div>
      <div class="robots animated">
        <img class="robot printing" src="images/3-d-printing-robot.svg"/>
        <img class="robot web-development" src="images/web-robot.svg"/>
        <img class="robot vr-games" src="images/games-robot.svg"/>
        <img class="robot ios-android" src="images/mobile-robot.svg"/>
        <img class="robot hardware" src="images/hardware-robot.svg"/>
      </div>
	</div>
  <nav id="nav">
    <img class="nav-logo" src="images/logo.svg"/>
    <div class="nav-option-bar">
      <a href="#who-we-are" class="nav-option">Our Values</a>
      <a href="#faq" class="nav-option">FAQs</a>
      <a href="#hackschools" class="nav-option">HackSChools</a>
      <a href="#sponsors" class="nav-option">Sponsors</a>
    </div>
    <div class="menu-btn"><img src="images/menu.png"/></div>
  </nav>
  <div class="nav-placeholder"></div>
  <div class="page-content">
    <div id="who-we-are" class="who-we-are">
      <div class="who-we-are-top-bar"></div>
      <div class="top-left-gears only-small-screen">
        <div class="spinning-turbine"></div>
        <div class="spinning-gear"></div>
      </div>
      <div class="top-right-gearbox only-small-screen">
        <div class="spinning-turbine"></div>
        <div class="panel">
          <div class="blue-round-rectangle"></div>
          <div class="blue-round-rectangle"></div>
        </div>
      </div>
      <div class="who-we-are-text">
        <div class="who-we-are-title">Who We Are</div>
        <p><span class="who-we-are-welcome">Welcome to the Hack SC Factory!</span>
        We encourage students to be curious and explore multiple disciplines of hacking at our factory, including iOS, Android, 3-D Printing, Virtual Reality & Games, and Web Applications.</p>
        <p>We're here to tinker and build. The factory will provide all the resources necessary for you to visualize and build out your ideas in an environment rich with other students who want to do the same.</p>
        <p>Our factory is open to all levels of skills and we hope to be a place that sparks both new hackers and skilled ones to take something genuine away from it, whether it be a skill, idea, prototype, or maybe even a product! <span class="not-small-screen">Check out our HackSChools, skill specific workshops to help anyone interested in learning or reinforcing different areas tinkering.</span></p>
      </div>
      <div class="bottom-four-boxes only-small-screen"><img src="images/four-boxes.png"/></div>
      <div class="red-line"></div>
      <div class="red-line"></div>
      <div class="belt"></div>
    </div>
		<div id="faq" class="faq">
			<img class="faq-machine-dropper-left" src="images/FAQ%20images/Machine%20Dropper.svg">
			<img class="faq-machine-dropper-right" src="images/FAQ%20images/Machine%20Dropper.svg">
			<p class="faq-text faq-bold-text" id="faq-title">FAQS</p>
			<p class="faq-text"><b class="faq-bold-text">What should I bring to the Hack SC Factory? </b>A laptop, charger, any other materials you would need to build your project. Optional items are sleeping bags, pillows, a change of clothes (recommended), and toiletries such as a toothbrush.</p>
			<p class="faq-text"><b class="faq-bold-text">Who can participate? </b>High school and college students are allowed to apply</p>
			<p class="faq-text"><b class="faq-bold-text">What categories of hacks will there be?</b>Web Apps, iOS, Android, Hardware, 3-D Printing, and VR/Games. We encourage students to explore a diverse range of different types of hacks during their time at HackSC. Check out our HackSChools section to see the different workshops we'll be hosting with our sponsors.</p>
			<p class="faq-text"><b class="faq-bold-text">What is the policy for travel reimbursements?</b>We'll be giving out partial reimbursements based on airfare tickets the day of your acceptance into the HackSC factory. We'll try our best to accommodate all of your needs to get you to our hackathon economically.</p>
			<p class="faq-text"><b class="faq-bold-text">Will there be free swag and food?</b>There's gonna be the best swag and food ever at HackSC. We're gonna blow your minds away.</p>
			<p class="faq-text"><b class="faq-bold-text">Do I need to have had any kind of engineering experience beforehand?</b>Of course not! We want every person interested in hacking, whether they're beginners or advanced, to apply to HackSC.</p>
			<p class="faq-text">More Questions? Email us at <a class="faq-link faq-bold-text" href="mailto:gohacksc@gmail.com">gohacksc@gmail.com</a> and we'll respond in a timely manner.</p>
		</div>
    <div id="hackschools" class="hackschools">
      <section class="backgrounds">
        <img class="misc-graphics not-small-screen" src="images/HackSChools/MiscGraphics.svg">
        <div class="top-horizontal-line"></div>
        <div class="top-v not-small-screen"></div>
        <div class="school-columns cropped">
          <div class="hardware column">
            <div class="column-header"></div>
            <div class="school-icon"></div>
          </div>
          <div class="web-development column">
            <div class="column-header"></div>
            <div class="school-icon"></div>
          </div>
          <div class="printing column">
            <div class="column-header"></div>
            <div class="school-icon"></div>
          </div>
          <div class="vr-games column">
            <div class="column-header"></div>
            <div class="school-icon"></div>
          </div>
          <div class="ios-android column">
            <div class="column-header"></div>
            <div class="school-icon"></div>
          </div>
        </div>
        <div class="assembled-robots">
          <img class="robot vr-games" src="images/HackSChools/claw-games-robot.svg">
          <img class="robot printing" src="images/HackSChools/claw-3-d-printing-robot.svg">
          <img class="robot web-development" src="images/HackSChools/claw-web-robot.svg">
          <img class="robot vr-games" src="images/HackSChools/claw-games-robot.svg">
          <img class="robot hardware" src="images/HackSChools/claw-hardware-robot.svg">
          <img class="robot web-development" src="images/HackSChools/claw-web-robot.svg">
          <img class="robot ios-android" src="images/HackSChools/claw-mobile-robot.svg">
          <img class="robot hardware" src="images/HackSChools/claw-hardware-robot.svg">
          <img class="robot vr-games" src="images/HackSChools/claw-games-robot.svg">
          <img class="robot printing" src="images/HackSChools/claw-3-d-printing-robot.svg">
        </div>
      </section>
      <section class="wrapper cropped">
        <h2 class="title">Hack SChools</h2>
        <p class="subtitle">Hack SChools are six hour intensive workshops held in collaboration with our industry sponsors that target specific skills we want to teach at the HackSC factory. <span class="not-small-screen">We're hoping to help you jumpstart your engines into a new realm of hacking, or to solidify what you've already learned. Either way, Hack SChools are a great way to begin your experience at the Hack SC, and maybe even learn a few tricks before you embark on your creative endeavers.</span></p>
        <div class="school-list">
          <div class="school-details hardware">
            <div class="school-icon"><img src="images/HackSChools/BrokenHardware.svg"></div>
            <h3 class="school-title">Hardware</h3>
            <div class="school-info">
              <p>Learn how to hack on Arduino's, Raspberry Pi's, Oculus Rifts and more in HackSC's hardware workshop. The hardware workshop will go over the basics of using an Arduino before branching out to more specific branches.</p>
            </div>
          </div>
          <div class="school-details web-development">
            <div class="school-icon"><img src="images/HackSChools/BrokenWeb.svg"></div>
            <h3 class="school-title">Web Development</h3>
            <div class="school-info">
              <p><span class="bold">Beginner:</span> Learn the basics of web development, including html and css. This is an introductory course to get your feet wet in the world of hacking. No experience is necessary, just a curiosity to learn!</p>
              <p><span class="bold">Advanced:</span>Learn to quickly set up a MEAN framework (MongoDB, ExpressJS, Angular, and Node.js) app on Azure. This will include information about the cloud and other things you can do using an Azure pass.</p>
            </div>
          </div>
          <div class="school-details printing">
            <div class="school-icon"><img src="images/HackSChools/Broken3D.svg"></div>
            <h3 class="school-title">3D Printing</h3>
            <div class="school-info">
              <p>You'll learn the alchemy behind the infinite possibilities using 3-D printing. We'll introduce open source tools for quick prototyping and some software skills on creating 3-D objects. No experience necessary!</p>
            </div>
          </div>
          <div class="school-details vr-games">
            <div class="school-icon"><img src="images/HackSChools/BrokenGames.svg"></div>
            <h3 class="school-title">VR/Games</h3>
            <div class="school-info">
              <p>The games workshop will consist of and introduction to the Unity Engine with C#. You should have some understanding of one major coding language. By the end of it you'll have the know how on creating an interactive game.</p>
            </div>
          </div>
          <div class="school-details ios-android">
            <div class="school-icon"><img src="images/HackSChools/BrokenMobile.svg"></div>
            <h3 class="school-title">iOS</h3>
            <div class="school-info">
              <p>In the <span class="bold">iOS</span> workshop you'll be learning to navigate Swift and Xcode to help in your Hack SC endeavers. Some basic coding knowledge is recommended, but besides that bring your energy and passion!</p>
              <!-- <p>In the <span class="bold">Android</span> workshop we'll dive right into the basics of developing an Android application. You should have some preliminary knowledge of coding, but besides that you're all set.</p> -->
            </div>
          </div>
        </div>
      </section>
    </div>
    <div id="sponsors" class="sponsors">
      <section class="backgrounds">
        <div class="top-horizontal-line"></div>
        <div class="cropped">
          <div class="vertical-line left"></div>
          <div class="glasses-bar not-small-screen">
            <div class="glasses left">
              <div class="left-line"></div>
              <div class="glass"></div>
              <div class="bridge"></div>
              <div class="glass"></div>
            </div>
            <div class="glasses right">
              <div class="glass"></div>
              <div class="bridge"></div>
              <div class="glass"></div>
              <div class="right-line"></div>
              <div class="bottom-line"></div>
            </div>
          </div>
        </div>
        <div class="not-small-screen">
          <div class="bottom-horizontal-line"></div>
          <div class="uncropped-lines left dark-orange-line"></div>
          <div class="uncropped-lines left yellow-line"></div>
          <div class="uncropped-lines left light-orange-line"></div>
          <div class="uncropped-lines right dark-blue-line"></div>
          <div class="uncropped-lines right orange-yellow-line"></div>
          <div class="uncropped-lines right red-orange-line"></div>
          <div class="uncropped-lines right red-line"></div>
          <div class="uncropped-lines right dark-orange-line"></div>
          <div class="uncropped-lines right yellow-line"></div>
          <div class="uncropped-lines right light-orange-line"></div>
        </div>
      </section>
      <section class="wrapper cropped">
        <h2 class="title">Sponsors</h2>
        <p class="subtitle">These are the factory's collaborators. The ones that will bring you the hippest, coolest hardware, lead some Hack SChools, and be advisors and collaborators while you're building your project. They're invaluable resources.</p>
        <object type="image/svg+xml" data="images/sponsors-svg.svg" class="sponsors not-small-screen"></object>
        <object type="image/svg+xml" data="images/sponsors-svg-2.svg" class="sponsors only-small-screen"></object>
      </section>
    </div>
  </div>
</body>
</html>