1<!DOCTYPE html> 2<html lang="en" class="no-js"> 3 <head> 4 <title>Hacking and Learning</title> 5 6 <!--Meta--> 7 <meta charset="utf-8"> 8 <meta name="description"> <!--Fill this out--> 9 <meta name="author" content="Abhinav Suri"/> 10 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 11 12 <!--end meta--> 13 14 <!--css--> 15 <link rel="stylesheet" href="css/styles.css"/> 16 <link rel="stylesheet" href="css/skeleton.css"/> 17 <link rel="stylesheet" href="css/normalize.css"/> 18 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 19 <link rel="stylesheet" type="text/css" href="css/sweetalert.css"> 20 21 22 <link href='//fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'> 23 24<link rel="shortcut icon" href="images/favicon.ico"> 25 26</head> 27 <body> 28 <style> 29 30 </style> 31 <nav> 32 <ul id="nav"> 33 <li><a href="#home">Home</a></li> 34 <li><a href="#about">About</a></li> 35 <li><a href="#stats">Code Weekend</a></li> 36 <li><a href="#info">Why Program?</a></li> 37 <li><a href="#faq">Code Camps</a></li> 38 <li><a href="#contact">Contact</a></li> 39 </ul> 40 </nav> 41 <style> 42 43 </style> 44 45 <section id="home"> 46 <div id="parallax1"> 47 48 </div> 49 50 <div class="container"><!--Se-slope--> 51 <div class="row"> 52 <div class="twelve columns"> 53 <h1 id="caption" style="padding-top: 150px">Hacking & Learning</h1> 54 <div class="row"> 55 <div class="four columns offset-by-four"> 56 <img src="img/favicon.png" id="logo" style="max-height: 400px; max-width:400px; margin: 0 auto"></div> 57 </div> 58 59 60 </div> 61 </div> 62 <br> 63 <h4 style="text-align: center" id="caption3"><a href="#about" id="n2" class="button button-primary" style="font-size: 15px">Learn More About Us</a></h4> 64<div class="row"> 65 <div class="row"> 66 <div class="twelve columns"> 67 <h5 style="text-align: center">Upcoming & Past events</h5> 68 </div> 69 </div> 70 <div class="row" > 71 <div id="containticker"> 72 73 74 <style> 75 #containticker { 76 width: inherit; 77 height: 150px; 78 white-space: nowrap; 79 overflow-x: scroll; 80 overflow-y: hidden 81 } 82 #link { 83 width: 50px; 84 background: #33C3F0; 85 height: 55px; 86 position: absolute; 87 left: 0px; 88 top:0px; 89 cursor: pointer; 90 transition: .25s all ease; 91 } 92 #info-event { 93 width: 50px; 94 background: #f1c40f; 95 height: 55px; 96 position: absolute; 97 left: 0px; 98 top:55px; 99 cursor: pointer; 100 transition: .25s all ease; 101 } 102 #link:hover { 103 background: #1EAEDB 104 } 105 #info-event:hover { 106 background-color: #f39c12 107 } 108 #event { 109 color: #000; 110 padding:5px; 111 background: #FFF; 112 height: 100px; 113 width: 200px; 114 margin: 5px; 115 opacity: .6; 116 transition: all 0.5s ease; 117 display:inline-block; 118 white-space: normal; 119 position:relative; 120 font-size: 12px; 121 } 122 123 .eventtitle { 124 color:#000; 125 font-size: 16px; 126 font-weight: 400; 127 128 } 129 .eventdesc { 130 color: #000; 131 font-size: 12px; 132 position: absolute; 133 left: 60px; 134 width: 140px; 135 max-height: 10px; 136 137 } 138 .eventdate { 139 font-size: 12px; 140 } 141 .eventinfo{ 142 width: 140px; 143 white-space:nowrap;overflow:hidden; 144 text-overflow: ellipsis 145 146 } 147 148 #event:hover { 149 opacity: 1 150 } 151 </style> 152 </div> 153 </div> 154 </div> 155 </div> 156 </section> 157 <section id="about"> 158 <div class="slope1"> 159 <div class="container"> 160 <div class="row"> 161 <div class="twelve columns"> 162 <h1>What is Hacking & Learning?</h1> 163 <div id="t1"></div> 164 <h5> 165 The Hacking and Learning committee of the Dining Philosophers aims to bring about a culture of creation and innovation within the University of Pennsylvania community and beyond. By focusing on developing high quality educational initiatives and organizing several events throughout the year, we have introduced many to the world of programming and computer science. <br> 166 </h5> 167 </div> 168 </div> 169 <div class="row"> 170 <div class="six columns"> 171 172 <p id="infopara"> 173 Ever had that app, website, or machine you wanted to build but didn't know
173where to start? Have you ever wanted to jump into the world of programming and show off an 174 awesome product to your friends? <b>Now is your chance.</b> 175 The Hacking and Learning committe organizes dozens of educational initiatives during the year to help you learn how to code and develop your projects. 176 You'll have tons of mentors and like-minded peers to help you through the process of making your dream into a reality. 177 </p> 178 </div> 179 <div class="six columns"> 180 <img src="img/info.jpg" id="infopic"> 181 </div> 182 </div> 183 </div> 184 </div> 185 </section> 186 <section id="stats"> 187 <div id="parallax2"> 188 189 </div> 190 <div class="container"> 191 <div class="row"> 192 <div class="twelve columns"> 193 <h1>Code Weekend </h1> 194 195 <h4 style="text-align: center">A weekend long series of workshops where students teach you how to build a full webapp from scratch</h4> 196 <div style="margin: 0 auto; text-align: center"> 197 <a href="http://dinphil.github.io/code-weekend" id="n2" class="button button-primary" style="font-size: 15px">Code Weekend Fall 2018</a> 198 <a href="http://dinphil.github.io/code-weekend/past/fall15/" id="n2" class="button button-primary" style="font-size: 15px">Code Weekend Fall 2015</a> 199 200 </div> 201 <div id="t2"></div> 202 203 </div> 204 <div class="row"> 205 <div class="three columns count"> 206 <h3 style="font-weight: 500" class="count1">500</h3> 207 <p class="center" id="cap1">Attendees</p> 208 </div> 209 <div class="three columns count"> 210 <h3 style="font-weight: 500" id="count2">4</h3> 211 <p class="center" id="cap2">Workshops</p> 212 </div> 213 <div class="three columns count"> 214 <h3 style="font-weight: 500" id="count3">50</h3> 215 <p class="center" id="cap3">Mentors</p> 216 </div> 217 <div class="three columns count"> 218 <h3 style="font-weight: 500"><span id="count4">54</span>%</h3> 219 <p class="center" id="cap4">First Time Coders</p> 220 </div> 221 222 </div> 223 <div class="row" id="abouttext3"> 224 <div class="twelve columns"> 225 <div class="row"> 226 227 <div class="eight columns offset-by-two" style="text-align:center"> 228The first ever Code Weekend was held September 6th and 7th, 2014. It attracted unprecedented interest with over 500 students signing up for the weekend's workshops. Split into 4 highly interactive and mentored workshops, Code Weekend teaches students to build a fully functioning Node.JS app that uses 3rd party APIs and a MongoDB database - all over the course of 2 days!<br> 229This Spring, Code Weekend was back and we had a huge number of signups! Check out the topics we covered during the workshops online here and feel free to send us feedback about the event! 230 </div> 231 </div> 232 </div> 233 234 </div> 235 236 </div> 237 </div> 238 </section> 239 <section id="info"> 240 <div class="slope2"> 241 <div class="container"> 242 <div class="row"> 243 <div class="twelve columns"> 244 <h1>Why Should I Program?</h1> 245 <div id="t3"></div> 246 247 </div> 248 </div> 249 <div class="row"> 250 <div class="eight columns" id="specdiagram"> 251 <div id="diagram"></div> 252 </div> 253 <div class="four columns"> 254 <blockquote> 255 <p style="opacity: .8">I think everyone should learn how to program a computer, because it teaches you how to think.<br><span style="float: right">- Steve Jobs</span></p> 256 </blockquote> 257 <p> 258 The power of computer science in a growing, tech based job market is undeniable. Thousands of college students each year are chosing STEM and programming related degrees to help them make their own apps and products or join companies in profitable software engineering jobs. Why not start learning now? 259 </p> 260 261 262 </div> 263 264 </div> 265 </div> 266 </div> 267 </section> 268 269 <section id="faq"> 270 <div class="slope3"> 271 <div id="parallax3"> 272 273 </div> 274 <div class="container"> 275 <div class="row"> 276 <div class="twelve columns"> 277 <h1>Code Camps </h1> 278 279 <h4 style="text-align: center">Workshops to build fundamental coding skills </h4> 280 <div id="t3"></div> 281 282 </div> 283 284 <div class="row" id="abouttext3"> 285 <div class="twelve columns"> 286 <div class="row"> 287 288 <div class="eight columns offset-by-two" style="text-align:center"> 289Code Camp is a workshop series designed to teach from scratch, basic tools and skills that all real-world programmers need. Mentors are around to help students get through the problems they face in these highly interactive workshops. 290<br><br> 291Code camps are held throughout the year, and we'd love to hear from you if there's something specific you'd like to learn! 292 </div> 293 </div> 294 </div> 295 296 </div> 297 298 </div> 299 300 301 </div> 302 </div> 303 </section> 304 305 306 307 <section id="contact"> 308 <div class="slope5"> 309 <div class="container"> 310 <div class="row"> 311 <div class="twelve columns"> 312 <h1>Contact Us</h1> 313 <div id="t2"></div> 314 315 <h3>Email us at [email protected]</h3> 316 <p style="text-align:center">We would be happy to respond to any requests or general queries. Don't hesitate to reach out!</p> 317 </div> 318 </div> 319 </div> 320 </div> 321 </section> 322 <footer> 323 <div class="container"> 324 <div class="row"> 325 <div class="twelve columns"> 326 <p style="text-align:center;margin-bottom: 0px;">Site made by Abhinav Suri (c) 2015</p> 327 </div> 328 </div> 329 </div> 330 </footer> 331 <div id="modal"> 332 <div class="container"> 333 <div class="row"> 334 <div class="twelve columns"> 335 <div id="content-modal"> 336 <h2 id="modal-title">Title</h2> 337 <h4 style="text-align:center" id="modal-date">Title</h2> 338 <p style="text-align:center" id="modal-info">This is some sample content</p><a style="text-align:center" id="modal-link" href="#">Go to the event</a> 339 <br> 340 341 <a id="close-modal"> 342 Close Window 343 </a> 344 </div> 345 346 </div> 347 </div> 348 </div> 349 </div> 350 <style> 351 352 #modal { 353 position: fixed; 354 top:0; 355 left:0; 356 height: 100%; 357 width: 100%; 358 background: rgba(0,0,0,.8); 359 z-index: 99999; 360 cursor: pointer; 361 display:none 362 } 363 #content-modal { 364 width: 80%; 365 background-color:#FFF; 366 margin-top: 15vh; 367 margin-left: auto; 368 margin-right: auto; 369 padding: 10px; 370 border-radius: 2px; 371 display:block; 372 cursor: auto; 373 z-index: 100000; 374 position:relative; 375 } 376 #close-modal { 377 cursor: pointer; 378 position: absolute; 379 right: 10px; 380 bottom:10px; 381 } 382 </style> 383 384 </body> 385 <!--js--> 386
386<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
386 387
387<script type="text/javascript" src="js/raphael.js"></script>
387 388 <link rel="stylesheet" href="css/slicknav.css" /> 389
389<script src="js/jquery.slicknav.js"></script>
389 390
390<script src="js/sweetalert.min.js"></script>
390 391
391<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
391 392
392<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/ScrollToPlugin.min.js"></script>
392 393
393<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
393 394 395
395<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
395 396
396<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.0/jquery.scrollTo.min.js"></script>
396 397
397<script type="text/javascript" src="//flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>
397 398
398<script type="text/javascript" src="js/scripts.js"></script>
398 399
399<script type="text/javascript" src="js/modernizer.custom.js"></script>
399 400 <!--end js--> 401 <div class="get"> 402 <div class="arc"> 403 <span class="text">Less than 4.9 percent of students graduate with a degree in computer science</span> 404 <input type="hidden" class="percent" value="4.9" /> 405 <input type="hidden" class="color" value="#2c3e50" /> 406 </div> 407 <div class="arc"> 408 <span class="text">Only 28% of computing jobs are filled. By 2020 over 1 million jobs will be unmet.</span> 409 <input type="hidden" class="percent" value="28" /> 410 <input type="hidden" class="color" value="#9b59b6" /> 411 </div> 412 <div class="arc"> 413 <span class="text">Only 50% of states give credit for computer science classes.</span> 414 <input type="hidden" class="percent" value="50" /> 415 <input type="hidden" class="color" value="#3498db" /> 416 </div> 417 <div class="arc"> 418 <span class="text">Computer Science jobs account for 60% of the STEM job-industry</span> 419 <input type="hidden" class="percent" value="60" /> 420 <input type="hidden" class="color" value="#2ecc71" /> 421 </div> 422 <div class="arc"> 423 <span class="text">90% of United States high schools do not have an introductory computer science curriculum</span> 424 <input type="hidden" class="percent" value="90" /> 425 <input type="hidden" class="color" value="#e74c3c" /> 426 </div>
427<script> 428 $("#modal").click(function(e) { 429 430 if(e.target.id == 'close-modal') { 431 $("#modal").fadeOut("slow"); 432 } 433 else if(e.target.id != 'content-modal' && !$('#content-modal').find(e.target).length) { 434 435 $("#modal").fadeOut("slow"); 436 } 437 else { 438 } 439 }); 440 function triggerInfoModal(title,desc,date,link) { 441 442 console.log("Triggered"); 443 $("#modal").fadeIn("slow"); 444 console.log(title); 445 $("#modal-title").text(title); 446 $("#modal-info").text(desc); 447 $("#modal-date").text(date); 448 $("#modal-link").attr("href", link); 449 450 } 451 function appendEvent(title,link,desc,date) { 452 453 var titlenew = title.toString(); 454 var linknew = link.toString(); 455 var descnew = desc.toString(); 456 var datenew = date.toString() 457 458 459 return '<div id="event"><div class="row"><div class="four columns" id="link"><div id="link"><a style="display:block" href="'+linknew+'"><i class="fa fa-link fa-3x" style="color: #FFF; padding-top: 12px; padding-left: 8px"></i></a></div><div id="info-event"><a style="display:block" id="triggerInfoModal" onClick="triggerInfoModal(\''+titlenew+'\',\''+descnew+'\',\''+datenew+'\',\''+linknew+'\')"><i class="fa fa-info-circle fa-3x" style="color: #FFF; padding-top: 10px; padding-left: 10px"></i></a></div></div><div class="eight columns" id="eventinfo"><div class="eventdesc"><div class="eventtitle">'+titlenew+'</div> <div class="eventdate">'+datenew+'</div><div class="eventinfo">'+descnew+'</div></div></div></div></div>' 460 } 461 // if(Math.floor(Date.now()/1000) < 1453080264 ) { 462 // swal({ 463 // title:"Code Weekend 2016", 464 // text: "The hugely popular Code Weekend is back! Interested in learning the basics of website design and code? Join us for a series of workshops that will guide you through the process of making a full web app!", 465 // html: true, 466 // showCancelButton: true, 467 // closeOnCancel: true, 468 // confirmButtonText: "Go to Signup", 469 // cancelButtonText: "Close" 470 // }, 471 // function(isConfirm) { 472 // if(isConfirm) { 473 // location.href = 'https://docs.google.com/forms/d/1PzownC3wvz03TEvIxZz7H3MZEbvoz-Ml_cy03KO-zuk/viewform?c=0&w=1' 474 // } 475 // }); 476 // } 477 $.get( 478 "https://spreadsheets.google.com/feeds/list/1_rMloOOAebLFDK6kYo7VD_0TU_glzoVq2hbpaHtYwXQ/od6/public/basic?alt=json", function(data) { 479 console.log(data); 480 for(var i = 0; i < data.feed.entry.length; i++) { 481 482 var separators = ['eventname: ',', facebookeventlinkputnaifnone: ', ', shortdescriptionputnaifnone: ', ", committee"]; 483 var time = data.feed.entry[i].title.$t; 484 var preprocess = data.feed.entry[i].content.$t; 485 var final = preprocess.split(new RegExp(separators.join('|'),'g')); 486 var title = final[1]; 487 if(final[2] != 'N/A') { 488 var link = final[2]; 489 } else { 490 var link = ""; 491 } 492 if(final[3] != 'N/A') { 493 var desc = final[3]; 494 } else { 495 var desc = ""; 496 } 497 $("#containticker").append(appendEvent(title,link,desc,time)); 498 } 499 500 }, "json" 501 ); 502</script>
502 503 504</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.