-
What is a Hackathon?
-A Hackathon is an invention marathon. Any student can attend! Really, any student... and it's completely free.
-Students work in teams and mentors are present to offer help. Sponsors attend to help, recruit, and promote their products. Teams compete in different categories and prizes are awarded, but everyone learns and everyone wins!
-Come spend 24 hours with us at BrickHack and dedicate time to learn, collaborate, build, and innovate.
+
+
-
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
-
- Visit Major League Hacking (MLH)
+
diff --git a/index.js b/index.js
index ae729bd02..12eb33781 100644
--- a/index.js
+++ b/index.js
@@ -1,4 +1,24 @@
-import "./sass/main.scss"
-import '@fortawesome/fontawesome-free/css/all.css'
\ No newline at end of file
+import './sass/main.scss'
+import '@fortawesome/fontawesome-free/css/all.css'
+
+
+// slick-carousel configuration
+
+import $ from 'jquery'
+import 'slick-carousel'
+
+$(document).ready(function() {
+ $('.carousel').slick({
+ infinite: true,
+ swipeToSlide: true,
+ variableWidth: true,
+ slidesToShow: 3,
+ slidesToScroll: 2,
+ cssEase: 'ease-in-out',
+ autoplay: true,
+ autoplaySpeed: 2000,
+ speed: 1000,
+ });
+});
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index c7ac5c5d8..6a35139cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3941,6 +3941,11 @@
"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
"dev": true
},
+ "jquery": {
+ "version": "3.5.1",
+ "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
+ "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
+ },
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5943,6 +5948,11 @@
}
}
},
+ "slick-carousel": {
+ "version": "1.8.1",
+ "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+ "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA=="
+ },
"snapdragon": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
diff --git a/package.json b/package.json
index 08e38a41c..a51c3f873 100644
--- a/package.json
+++ b/package.json
@@ -27,5 +27,9 @@
},
"staticFiles": {
"staticPath": "resources"
+ },
+ "dependencies": {
+ "jquery": "^3.5.1",
+ "slick-carousel": "^1.8.1"
}
}
diff --git a/sass/main.scss b/sass/main.scss
index c852d8962..e456ce9cd 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -7,12 +7,15 @@ $light-blue: #465395;
$red: #F1656E;
$orange: #F9A56F;
$pink: #FAC5BF;
+$light-gray: #a2a8cd;
$nav-fontsize: 1.3em;
$nav-height: 90px;
$section-padding: 140px;
+$wire-height: 15px;
+
// Just to make it more semantic
$font-bold: 700;
$font-medium: 500;
@@ -21,8 +24,10 @@ $font-regular: 400;
// Size for all titles on page
$title-size: 3em;
-// Fonts
+// Fonts and other imports
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
+@import '../node_modules/slick-carousel/slick/slick.css';
+@import '../node_modules/slick-carousel/slick/slick-theme.css';
// Mixins
@mixin button {
@@ -50,7 +55,10 @@ $title-size: 3em;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
color: white;
- z-index: 2; // Allows for elements "below" std z-index
+ // Allows for elements "below" std z-index
+ // (note: only set if child adopts explicit position value)
+ z-index: 2;
+
}
body {
@@ -187,16 +195,8 @@ nav {
#hackathon {
- display: flex;
- justify-content: space-between;
- padding: $section-padding;
- align-items: center;
background-color: $dark-blue;
- div {
- width: 50%;
- }
-
h2 {
font-size: $title-size;
}
@@ -206,6 +206,128 @@ nav {
font-size: 1.2em;
}
+ .carousel {
+ width: 100%;
+ margin: 0 auto;
+ padding-top: $section-padding;
+
+ // Temp for debugging numbers
+ // FIXME: Dont pull a byebug :)
+ h2 {
+ text-align: center;
+ margin-top: -20px;
+ }
+
+ .slick-list {
+ // Slider depends on having the overflow-x hidden,
+ // CSS (per spec) doesn't allow separate overflow-y and x.
+ // So, we add some padding to cheat it.
+ // (https://css-tricks.com/popping-hidden-overflow/)
+ padding-top: 60px;
+ margin-top: -60px;
+ overflow: hidden;
+ }
+
+ .slick-slide {
+ height: 300px;
+ width: 300px;
+ margin-right: 20px; // Same margin as wire top calculation
+
+ .wire {
+ width: 200%;
+ margin: 0;
+ height: $wire-height;
+ background: $pink;
+ top: -($wire-height + 20px);
+ position: relative;
+ }
+
+ .front_clip {
+ position: relative;
+ width: 30px;
+ height: 90px;
+ background-color: $orange;
+ margin: 0 auto;
+ top: -90px;
+ }
+
+ .back_clip {
+ width: 10px;
+ height: 60px;
+ background-color: $red;
+ top: -155px;
+ margin-left: calc(50% - 25px);
+ position: relative;
+ z-index: 0;
+ }
+
+ // Clip is easier as rel, so this is abs.
+ img {
+ position: absolute;
+ width: 300px;
+ height: 300px;
+ top: 0;
+ bottom: 0;
+ z-index: 1;
+ border-radius: 20px;
+ }
+ }
+
+ .slick-arrow {
+ margin-top: 70px;
+ width: 60px;
+ height: 60px;
+ background-color: $blue;
+ border: 2px solid #A3A9CA;
+ box-sizing: border-box;
+ border-radius: 50%;
+ }
+
+ // Make sure these appear over the slides!
+ .slick-prev, .slick-next {
+ z-index: 3;
+ }
+
+ // Use FontAwesome as pseudo-element so we don't
+ // have to fork slick-carousel.
+ // (https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements)
+ .slick-prev::before, .slick-next::before {
+ display: inline-block;
+ font-style: normal;
+ font-variant: normal;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ font-family: "Font Awesome 5 Free";
+ font-weight: 900;
+ }
+
+ .slick-prev {
+ left: 1%;
+ &::before {
+ content: "\f060";
+ }
+ }
+
+ .slick-next {
+ right: 1%;
+ &::before {
+ content: "\f061";
+ }
+ }
+
+ }
+
+ #hackathon-content {
+ display: flex;
+ justify-content: space-between;
+ padding: $section-padding;
+ align-items: center;
+
+ div {
+ width: 40%;
+ }
+ }
+
#mlh {
@include button;
background-color: $light-blue;
+
+
+
What is a Hackathon?
+A Hackathon is an invention marathon. Any student can attend! Really, any student... and it's completely free.
+Students work in teams and mentors are present to offer help. Sponsors attend to help, recruit, and promote their products. Teams compete in different categories and prizes are awarded, but everyone learns and everyone wins!
+Come spend 24 hours with us at BrickHack and dedicate time to learn, collaborate, build, and innovate.
+