diff --git a/Logo_BrawlhallaText640.png b/Logo_BrawlhallaText640.png new file mode 100644 index 0000000..063308d Binary files /dev/null and b/Logo_BrawlhallaText640.png differ diff --git a/brawlhalla-adventure-time-update.jpg b/brawlhalla-adventure-time-update.jpg new file mode 100644 index 0000000..8ec4ee6 Binary files /dev/null and b/brawlhalla-adventure-time-update.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..1fe0e8e --- /dev/null +++ b/index.html @@ -0,0 +1,49 @@ + + + + + + + + + + Document + + + +
+
+ +
+
+
+

Esport Arena

+
+
+ +

SEA Loser Bracket

+
+
+ +

Brawlhalla Tournament Montage - Final Round 1v1 2019

+
+
+ +

Wrenchd vs Cody Travis - Grand Final - Summer Championship 2019 1v1 NA

+
+
+ + +
+ + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..e69de29 diff --git a/style.css b/style.css new file mode 100644 index 0000000..f6134ac --- /dev/null +++ b/style.css @@ -0,0 +1,158 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + text-decoration: none; + font-family: 'Bebas Neue', Arial, sans-serif; +} + +body, html { + position: relative; + height: 100%; + background-color: rgba(231, 231, 231, 0.4); + color: #3f3f3f; +} + +.text-center { + text-align: center +} + +nav { + position: absolute; + top: 0; + left: 0; + z-index: 10; + background-color: rgba(22, 160, 133, 0.8); + width: 100%; + padding: 0 4rem; + display: flex; + font-size: 1.4rem; +} + +ul { + margin-left: auto; +} + +.logo { + position: absolute; + top: 1rem; + cursor: pointer; +} + +.logo img { + height: 4rem; +} + +ul li { + margin-left: auto; + display: inline-block; + height: 3rem; + line-height: 3rem; +} + +li a { + padding: 0 1rem; + display: block; + color: #ffffff; +} + +li a:hover { + background-color: #0cdab0; + transition: 0.6s background-color; +} + +/* The hero image */ +.hero-image { + background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("brawlhalla-adventure-time-update.jpg"); + + height: 100vh; + + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; +} + +.hero-text { + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; +} +.hero-text button { + width: 200px; + height: 60px; + border: solid 2px #444; + background: #16a085; + font-weight: bold; + letter-spacing: 0.2rem; + color: #fff; + box-shadow: inset 2px 2px 0 #fff, 0 8px 10px -4px rgba(0,0,0,0.4); + cursor: pointer; + transition: all 0.4s ease; + font-size: 1.2rem; +} + +.hero-text button:focus { + outline: none; +} + +.hero-text button:hover { + animation: bounce 2s +} + + +@keyframes bounce { + 0% { + top: 50%; + box-shadow: inset 2px 2px 0 #fff, 0 8px 10px -4px rgba(0,0,0,0.6); + } + 25% { + top: 46%; + box-shadow: inset 2px 2px 0 #fff, 0 20px 10px -8px rgba(0,0,0,0.4); + } + 50% { + top: 50%; + box-shadow: inset 2px 2px 0 #fff, 0 8px 10px -4px rgba(0,0,0,0.6); + } + 75% { + top: 47%; + box-shadow: inset 2px 2px 0 #fff, 0 16px 10px -8px rgba(0,0,0,0.5); + } + 100% { + top: 50%; + box-shadow: inset 2px 2px 0 #fff, 0 8px 10px -4px rgba(0,0,0,0.4); + } +} + +.title { + margin: 2rem 0; +} + +.esport-wrapper { + display: flex; + justify-content: space-around; + margin: 2rem 0; +} + +.card { + display: flex; + align-items: center; + flex-direction: column; + background-color: rgb(243, 243, 243); + padding: 2rem; + border: solid 2px #444; + box-shadow: inset 2px 2px 0 #fff, 0 8px 10px -4px rgba(0,0,0,0.6); + cursor: pointer; +} + +.card:hover { + box-shadow: inset 2px 2px 0 #fff, 0 10px 10px 0px rgba(0,0,0,0.6); + transition: 0.4s box-shadow; +} + +.card p { + margin-top: 2rem; +} \ No newline at end of file