Skip to content

Instantly share code, notes, and snippets.

@WildGenie

WildGenie/brackets-2.markdown

Created October 8, 2022 01:09
Show Gist options
  • Save WildGenie/d9b8399a7103cd86a29d7781fc75456a to your computer and use it in GitHub Desktop.
Save WildGenie/d9b8399a7103cd86a29d7781fc75456a to your computer and use it in GitHub Desktop.
Download ZIP
Brackets 2
Raw
index.html
<div class="" id="test">
<button style="z-index: 2000; top: 50px; left: 50px; height: 40px; width: 100px; position: absolute" type="button" onclick="bracket_toggle()">Try it</button>
<div class="bg"></div>
<div class="brackets wait2"></div>
<div class="esg" style="display: flex; justify-content: center; align-items: center">
<img src="http://njastad.com/efrag/esg.png" class="grow2"></img>
</div>
<div class="sponsors wait2">
<img src="http://njastad.com/efrag/logo1.png">
<img src="http://njastad.com/efrag/logo2.png">
</div>
<div class="position" style="margin-left: 327px; margin-top: 318px">
<div class="container a1">
<div class="logo grow"></div>
<div class="box">
<div class="beam"></div>
<div class="upper">
<div class="green">
<div class="land wait">Brazil</div>
<div class="flag wait"></div>
</div>
</div>
<div class="lower">
<div class="red">
<div class="grid wait"></div>
<div class="team wait">SK Gaming</div>
</div>
</div>
</div>
<div class="split height">
</div>
<div class="points widthright">
<div class="wait">1</div>
</div>
</div>
<div class="container a3">
<div class="logo grow"></div>
<div class="box">
<div class="beam"></div>
<div class="upper">
<div class="green">
<div class="land wait">Brazil</div>
<div class="flag wait"></div>
</div>
</div>
<div class="lower">
<div class="red">
<div class="grid wait"></div>
<div class="team wait">SK Gaming</div>
</div>
</div>
</div>
<div class="split height">
</div>
<div class="points widthright">
<div class="wait">1</div>
</div>
</div>
</div>
<div class="position" style="margin-left: 327px; margin-top: 548px">
<div class="container a5">
<div class="logo grow"></div>
<div class="box">
<div class="beam"></div>
<div class="upper">
<div class="green">
<div class="land wait test">Brazil</div>
<div class="flag wait"></div>
</div>
</div>
<div class="lower">
<div class="red">
<div class="grid wait"></div>
<div class="team wait">SK Gaming</div>
</div>
</div>
</div>
<div class="split height">
</div>
<div class="points widthright">
<div class="wait">1</div>
</div>
</div>
<div class="container a7">
<div class="logo grow"></div>
<div class="box">
<div class="beam"></div>
<div class="upper">
<div class="green">
<div class="land wait">Brazil</div>
<div class="flag wait"></div>
</div>
</div>
<div class="lower">
<div class="red">
<div class="grid wait"></div>
<div class="team wait">SK Gaming</div>
</div>
</div>
</div>
<div class="split height">
</div>
<div class="points widthright">
<div class="wait">1</div>
</div>
</div>
</div>
<div class="position" style="margin-left: 829px; margin-top: 365px">
<div class="container a2">
<div class="logo grow"></div>
<div class="box">
<div class="beam"></div>
<div class="upper">
<div class="green">
<div class="land wait test">Brazil</div>
<div class="flag wait"></div>
</div>
</div>
<div class="lower">
<div class="red">
<div class="grid wait"></div>
<div class="team wait">SK Gaming</div>
</div>
</div>
</div>
<div class="split height">
</div>
<div class="points widthright">
<div class="wait">1</div>
</div>
</div>
</div>
<div class="position" style="margin-left: 829px; margin-top: 594px">
<div class="container a6">
<div class="logo grow"></div>
<div class="box">
<div class="beam"></div>
<div class="upper">
<div class="green">
<div class="land wait test">Brazil</div>
<div class="flag wait"></div>
</div>
</div>
<div class="lower">
<div class="red">
<div class="grid wait"></div>
<div class="team wait">SK Gaming</div>
</div>
</div>
</div>
<div class="split height">
</div>
<div class="points widthright">
<div class="wait">1</div>
</div>
</div>
</div>
<div class="position" style="margin-left: 1173px; margin-top: 482px">
<div class="container a4">
<div class="box">
<div class="lower2">
<div class="red2">
<div class="grid2 wait"></div>
<div class="team2 wait">WINNER</div>
</div>
</div>
</div>
<div class="split height">
</div>
</div>
</div>
</div>
Raw
script.js
function bracket_toggle(){
document.getElementById("test").classList.toggle('active');
}
function bracket_out(){
document.getElementById("test").classList.remove('active');
}
function bracket_in(){
document.getElementById("test").classList.add('active');
}
Raw
style.sass
@import "compass"
@import url(https://fonts.googleapis.com/css?family=Montserrat)
*
-webkit-animation-fill-mode: forwards
font-family: Montserrat Medium
$delay: 50
=test
@for $i from 1 through 12
.active .a#{$i} .widthright
-webkit-animation:
name: widthright
duration: 1000ms
delay: 500ms - $delay + ($delay * $i)
.active .a#{$i} .green
-webkit-animation:
name: widthleft
duration: 1000ms
delay: 700ms - $delay + ($delay * $i)
.active .a#{$i} .red
-webkit-animation:
name: widthleft
duration: 1000ms
delay: 500ms - $delay + ($delay * $i)
.active .a#{$i} .red2
-webkit-animation:
name: widthleft
duration: 1000ms
delay: 500ms - $delay + ($delay * $i)
.active .a#{$i} .height
-webkit-animation:
name: height
duration: 400ms
delay: 0ms - $delay + ($delay * $i)
.active .a#{$i} .grow
-webkit-animation:
name: grow
delay: 1500ms - $delay + ($delay * $i)
duration: 700ms
.active .a#{$i} .grow2
-webkit-animation:
name: grow2
delay: 1000ms - $delay + ($delay * $i)
duration: 1000ms
.active .a#{$i} .beam
-webkit-animation:
name: beam
duration: 700ms
delay: 1300ms - $delay + ($delay * $i)
.active .a#{$i} .wait
-webkit-animation:
name: wait
delay: 1000ms - $delay + ($delay * $i)
duration: 1000ms
+test
.height2
-webkit-animation:
name: height
duration: 400ms
delay: 0ms
.active .wait2
-webkit-animation:
name: wait
delay: 1000ms
duration: 1000ms
.active .grow2
-webkit-animation:
name: grow2
delay: 1000ms
duration: 1000ms
.wait2
opacity: 0
.green
background-color: rgba(0,164,238,1)
width: 0%
height: 100%
float: right
display: flex
justify-content: center
align-items: center
.sponsors
height: 62px
width: 1920px
position: absolute
left: 0
top: 970px
z-index: 99
display: flex
justify-content: center
align-items: center
.sponsors > img
height: 100%
margin-left: 30px
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5))
.bg
background-image: url("http://njastad.com/efrag/bg.png")
height: 1080px
width: 1920px
position: absolute
left: 0
top: 0
.esg
height: 164px
width: 164px
position: absolute
left: 1672px
top: 40px
z-index: 98
.brackets
background-image: url("http://njastad.com/efrag/brackets2.png")
height: 880px
width: 1920px
position: absolute
left: 0
top: 200px
.body
overflow: hidden
height: 1080px
width: 1920px
top: 0
left: 0
.position
position: absolute
.container
height: 59px
width: 363px
margin-bottom: 33px
position: relative
.logo
position: absolute
z-index: 10
background-image: url('http://njastad.com/efrag/sk.png')
background-repeat: no-repeat
background-position: center
background-size: cover
top: 50%
left: 40px
-webkit-transform: translate(-50%,-50%)
height: 0px
width: 0px
.grow
-webkit-animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28)
.box
width: 79%
height: 100%
float: left
position: relative
overflow: hidden
.beam
position: absolute
width: 100px
height: 3px
background: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1),rgba(255,255,255,0))
top: 38%
z-index: 9
left: 100%
.black
background-color: rgba(0,0,0,0.5)
.red
background-color: rgba(64,95,146,0.5)
width: 0%
height: 100%
float: right
display: flex
justify-content: center
align-items: center
position: relative
.red2
background-color: rgba(216,133,3,0.8)
width: 0%
height: 100%
float: right
display: flex
justify-content: center
align-items: center
position: relative
.grid
background-image: url("http://njastad.com/efrag/grid.png")
background-repeat: no-repeat
background-size: auto 100%
position: absolute
height: 100%
width: 100%
.grid2
background-image: url("http://njastad.com/efrag/grid2.png")
background-repeat: no-repeat
background-size: auto 100%
position: absolute
height: 100%
width: 100%
.flag
height: 12px
width: 20px
float: right
margin-right: 5px
background-image: url('http://njastad.com/efrag/flag.png')
background-repeat: no-repeat
background-position: center
.land
float: right
color: white
margin-left: auto
margin-right: 5px
font-size: 15px
.team
float: right
color: white
margin-left: auto
margin-right: 14px
font-size: 23px
.team2
float: right
color: white
margin-left: auto
margin-right: 14px
font-size: 24px
.upper
height: 40%
width: 100%
.lower
height: 60%
width: 100%
.lower2
height: 100%
width: 100%
.split
width: 1.5%
height: 0%
float: left
bottom: 0px
position: absolute
background-color: #f0c000
margin-left: 79%
.points
background-color: #d4e3f1
width: 0%
height: 100%
float: left
color: black
font-size: 40px
margin-left: 1.5%
position: relative
display: flex
justify-content: center
align-items: center
overflow: hidden
.bottom
height: 100%
width: 1.5%
.wait
opacity: 0
.grow2
height: 0px
width: 0px
@-webkit-keyframes widthleft
0%
width: 0%
100%
width: 100%
@-webkit-keyframes widthright
0%
width: 0%
100%
width: 19.5%
@-webkit-keyframes height
0%
height: 0%
100%
height: 100%
@-webkit-keyframes grow
0%
height: 0px
width: 0px
100%
height: 40px
width: 40px
@-webkit-keyframes grow2
0%
height: 0px
width: 0px
100%
height: 164px
width: 164px
@-webkit-keyframes wait
0%
opacity: 0
100%
opacity: 1
@-webkit-keyframes beam
0%
left: 100%
100%
left: -50%
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment