Banner added

assets/css/banner.css

@@ -0,0 +1,39 @@
+.banner {
+    text-align: center;
+    width: 100%;
+    height: fit-content;
+    background-color: #d52d30;
+}
+.banner-text {
+    line-height: 30px;
+    font-family: profontwindows;
+    font-size: 1.7rem;
+    color: #ffffff;
+    margin-bottom: 0;
+    padding: 1% 0 1% 0;
+}
+.banner-text strong {
+    font-family: 'Quicksand', sans-serif;
+    font-size: 2rem;
+}
+.banner-text a {
+    color: #ffffff;
+}
+.banner-text a:hover {
+    color: #202020;
+}
+.banner-text img {
+    width: 60px;
+}
+
+@media screen and (max-width:800px) {
+    .banner-text {
+        padding: 0 10px;
+    }
+    .banner-text img {
+        width: 40px;
+    }
+    .banner-text strong {
+        font-size: 1.5rem;
+    }
+}

assets/js/banner.coffee

@@ -0,0 +1,80 @@
+NUM_CONFETTI = 350
+COLORS = [[85,71,106], [174,61,99], [219,56,83], [244,92,68], [248,182,70]]
+PI_2 = 2*Math.PI
+
+
+canvas = document.getElementById "world"
+context = canvas.getContext "2d"
+window.w = 0
+window.h = 0
+
+resizeWindow = ->
+  window.w = canvas.width = window.innerWidth
+  window.h = canvas.height = window.innerHeight
+
+window.addEventListener 'resize', resizeWindow, false
+
+window.onload = -> setTimeout resizeWindow, 0
+
+range = (a,b) -> (b-a)*Math.random() + a
+
+drawCircle = (x,y,r,style) ->
+  context.beginPath()
+  context.arc(x,y,r,0,PI_2,false)
+  context.fillStyle = style
+  context.fill()
+
+xpos = 0.5
+
+document.onmousemove = (e) ->
+  xpos = e.pageX/w
+
+window.requestAnimationFrame = do ->
+  window.requestAnimationFrame       ||
+  window.webkitRequestAnimationFrame ||
+  window.mozRequestAnimationFrame    ||
+  window.oRequestAnimationFrame      ||
+  window.msRequestAnimationFrame     ||
+  (callback) -> window.setTimeout(callback, 1000 / 60)
+
+
+class Confetti
+
+  constructor: ->
+    @style = COLORS[~~range(0,5)]
+    @rgb = "rgba(#{@style[0]},#{@style[1]},#{@style[2]}"
+    @r = ~~range(2,6)
+    @r2 = 2*@r
+    @replace()
+
+  replace: ->
+    @opacity = 0
+    @dop = 0.03*range(1,4)
+    @x = range(-@r2,w-@r2)
+    @y = range(-20,h-@r2)
+    @xmax = w-@r
+    @ymax = h-@r
+    @vx = range(0,2)+8*xpos-5
+    @vy = 0.7*@r+range(-1,1)
+
+  draw: ->
+    @x += @vx
+    @y += @vy
+    @opacity += @dop
+    if @opacity > 1
+      @opacity = 1
+      @dop *= -1
+    @replace() if @opacity < 0 or @y > @ymax
+    if !(0 < @x < @xmax)
+      @x = (@x + @xmax) % @xmax
+    drawCircle(~~@x,~~@y,@r,"#{@rgb},#{@opacity})")
+
+
+confetti = (new Confetti for i in [1..NUM_CONFETTI])
+
+window.step = ->
+  requestAnimationFrame(step)
+  context.clearRect(0,0,w,h)
+  c.draw() for c in confetti
+
+step()

index.html

@@ -28,8 +28,9 @@
 
      <link rel="stylesheet" type="text/css" href="assets/slick.css">
      <link rel="stylesheet" type="text/css" href="slick-theme.css">
-
-
+     <link rel="stylesheet" type="text/css" href="./assets/css/banner.css">
+     <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap" rel="stylesheet"> 
+    <script type="text/coffeescript" src="./assets/js/banner.coffee"></script>
       <style>
         @font-face{
           font-family: profontwindows;
@@ -241,7 +242,8 @@
   <header style="position: absolute;">
         <nav class="navbar navbar-toggleable-sm navbar-fixed-top" style="background-color: black;">
 
-          <div><a href="http://www.codezoned.com" class="navbar-brand mb-0" style=""><img src="assets/img/czmainsmall1.png" style="width: 12%; min-width: 150px;"></a></div>
+          <div><a href="http://www.codezoned.com" class="navbar-brand mb-0" style=""><img src="./assets/img/czmainsmall1.png" style="width: 12%; min-width: 150px;"></a></div>
+
 
             <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#headerNav" aria-controls="headerNav" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon" style="color: white; width: 80px; background-color: #343434; padding-top: 2px; margin-top: 5px;">Menu</span>
@@ -271,6 +273,10 @@
             </ul>
           </div>
         </nav>
+
+        <div class="banner" onclick="window.location.href='https://hac.codezoned.com';" value="Hac">
+          <p class="banner-text"><a href="https://hac.codezoned.com">Codezoned's latest hackathon - <img src="./assets/img/hac_logo.png"/> <strong> "HackAgainstCovid" </strong> (7th to 9th Aug 2020) is open for registrations 🎉 </a> </p>
+        </div>
     </header>
    <br>