8000 Merge pull request #30 from codezoned/banner · codezoned/codezoned.com@50ac1ae · GitHub
[go: up one dir, main page]
Skip to content

Commit 50ac1ae

Browse files
ioniccionicc
authored
Merge pull request #30 from codezoned/banner
Banner added
2 parents ac36583 + cc8302a commit 50ac1ae

File tree

7 files changed

+128
-3
lines changed

7 files changed

+128
-3
lines changed

‎assets/css/banner.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.banner {
2+
text-align: center;
3+
width: 100%;
4+
height: fit-content;
5+
background-color: #d52d30;
6+
}
7+
.banner-text {
8+
line-height: 30px;
9+
font-family: profontwindows;
10+
font-size: 1.7rem;
11+
color: #ffffff;
12+
margin-bottom: 0;
13+
padding: 1% 0 1% 0;
14+
}
15+
.banner-text strong {
16+
font-family: 'Quicksand', sans-serif;
17+
font-size: 2rem;
18+
}
19+
.banner-text a {
20+
color: #ffffff;
21+
}
22+
.banner-text a:hover {
23+
color: #202020;
24+
}
25+
.banner-text img {
26+
width: 60px;
27+
}
28+
29+
@media screen and (max-width:800px) {
30+
.banner-text {
31+
padding: 0 10px;
32+
}
33+
.banner-text img {
34+
width: 40px;
35+
}
36+
.banner-text strong {
37+
font-size: 1.5rem;
38+
}
39+
}

‎assets/img/confetti.gif

242 KB
Loading

‎assets/img/confetti1.gif

54 KB
Loading

‎assets/img/confetti2.gif

69.6 KB
Loading

‎assets/img/hac_logo.png

39 KB
Loading

‎assets/js/banner.coffee

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
NUM_CONFETTI = 350
2+
COLORS = [[85,71,106], [174,61,99], [219,56,83], [244,92,68], [248,182,70]]
3+
PI_2 = 2*Math.PI
4+
5+
6+
canvas = document.getElementById "world"
7+
context = canvas.getContext "2d"
8+
window.w = 0
9+
window.h = 0
10+
11+
resizeWindow = ->
12+
window.w = canvas.width = window.innerWidth
13+
window.h = canvas.height = window.innerHeight
14+
15+
window.addEventListener 'resize', resizeWindow, false
16+
17+
window.onload = -> setTimeout resizeWindow, 0
18+
19+
range = (a,b) -> (b-a)*Math.random() + a
20+
21+
drawCircle = (x,y,r,style) ->
22+
context.beginPath()
23+
context.arc(x,y,r,0,PI_2,false)
24+
context.fillStyle = style
25+
context.fill()
26+
27+
xpos = 0.5
28+
29+
document.onmousemove = (e) ->
30+
xpos = e.pageX/w
31+
32+
window.requestAnimationFrame = do ->
33+
window.requestAnimationFrame ||
34+
window.webkitRequestAnimationFrame ||
35+
window.mozRequestAnimationFrame ||
36+
window.oRequestAnimationFrame ||
37+
window.msRequestAnimationFrame ||
38+
(callback) -> window.setTimeout(callback, 1000 / 60)
39+
40+
41+
class Confetti
42+
43+
constructor: ->
44+
@style = COLORS[~~range(0,5)]
45+
@rgb = "rgba(#{@style[0]},#{@style[1]},#{@style[2]}"
46+
@r = ~~range(2,6)
47+
@r2 = 2*@r
48+
@replace()
49+
50+
replace: ->
51+
@opacity = 0
52+
@dop = 0.03*range(1,4)
53+
@x = range(-@r2,w-@r2)
54+
@y = range(-20,h-@r2)
55+
@xmax = w-@r
56+
@ymax = h-@r
57+
@vx = range(0,2)+8*xpos-5
58+
@vy = 0.7*@r+range(-1,1)
59+
60+
draw: ->
61+
@x += @vx
62+
@y += @vy
63+
@opacity += @dop
64+
if @opacity > 1
65+
@opacity = 1
66+
@dop *= -1
67+
@replace() if @opacity < 0 or @y > @ymax
68+
if !(0 < @x < @xmax)
69+
@x = (@x + @xmax) % @xmax
70+
drawCircle(~~@x,~~@y,@r,"#{@rgb},#{@opacity})")
71+
72+
73+
confetti = (new Confetti for i in [1..NUM_CONFETTI])
74+
75+
window.step = ->
76+
requestAnimationFrame(step)
77+
context.clearRect(0,0,w,h)
78+
c.draw() for c in confetti
79+
80+
step()

‎index.html

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,9 @@
2828

2929
<link rel="stylesheet" type="text/css" href="assets/slick.css">
3030
<link rel="stylesheet" type="text/css" href="slick-theme.css">
31-
32-
31+
<link rel="stylesheet" type="text/css" href="./assets/css/banner.css">
32+
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap" rel="stylesheet">
33+
<script type="text/coffeescript" src="./assets/js/banner.coffee"></script>
3334
<style>
3435
@font-face{
3536
font-family: profontwindows;
@@ -241,7 +242,8 @@
241242
<header style="position: absolute;">
242243
<nav class="navbar navbar-toggleable-sm navbar-fixed-top" style="background-color: black;">
243244

244-
<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>
245+
<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>
246+
245247

246248
<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">
247249
<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 @@
271273
</ul>
272274
</div>
273275
</nav>
276+
277+
<div class="banner" onclick="window.location.href='https://hac.codezoned.com';" value="Hac">
278+
<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>
279+
</div>
274280
</header>
275281
<br>
276282

0 commit comments

Comments
 (0)
0