ayush
/
aplesports
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add stuff for apl nationals

Browse Source
preview
Ayush Mukherjee 4 years ago
parent 2a6c843a51
commit 8337131830
10 changed files with 256 additions and 2 deletions
Show Stats Download Patch File Download Diff File

BIN
public/flag-bg.webm
View File

Binary file not shown.

BIN
src/assets/Acumin-BdItPro.woff
View File

Binary file not shown.

BIN
src/assets/Acumin-BdPro.woff
View File

Binary file not shown.

BIN
src/assets/Acumin-ItPro.woff
View File

Binary file not shown.

BIN
src/assets/Acumin-RPro.woff
View File

Binary file not shown.

4
src/components/Header.vue
Unescape Escape View File

@ -13,13 +13,14 @@
<div class="links">
<router-link :to="{ name: 'Home' }">home</router-link>
<router-link :to="{ name: 'Nationals' }" :class="$route.name === 'Nationals' && 'router-link-active' ? 'active' : ''">nationals</router-link>
<router-link :to="{ name: 'Kickoff' }" :class="$route.name === 'Kickoff' && 'router-link-active' ? 'active' : ''">the kickoff</router-link>
<router-link :to="{ name: 'News' }" :class="$route.name === 'News' && 'router-link-active' || $route.name === 'Article' && 'router-link-active' ? 'active' : ''">news</router-link>
<router-link :to="{ name: 'Tournaments' }">tournaments</router-link>
<router-link :to="{ name: 'Team' }">team</router-link>
<a href="https://discord.aplesports.com" target="_blank">discord</a>
<!-- <a href="https://www.patreon.com/apl_esports" target="_blank">patreon</a> -->
<a href="https://donate.aplesports.com" target="_blank">donate</a>
<!-- <a href="https://donate.aplesports.com" target="_blank">donate</a> -->
</div>
<div class="links_mobile animate__animated animate__slideInRight">
@ -30,6 +31,7 @@
</div>
<router-link :to="{ name: 'Home' }" @click.native="closeMenu()">home</router-link>
<router-link :to="{ name: 'Nationals' }" :class="$route.name === 'Nationals' && 'router-link-active' ? 'active' : ''" @click.native="closeMenu()">nationals</router-link>
<router-link :to="{ name: 'Kickoff' }" :class="$route.name === 'Kickoff' && 'router-link-active' ? 'active' : ''" @click.native="closeMenu()">the kickoff</router-link>
<router-link :to="{ name: 'News' }" :class="$route.name === 'News' && 'router-link-active' || $route.name === 'Article' && 'router-link-active' ? 'active' : ''" @click.native="closeMenu()">news</router-link>
<router-link :to="{ name: 'Tournaments' }" @click.native="closeMenu()">tournaments</router-link>

5
src/router/index.js
Unescape Escape View File

@ -36,6 +36,11 @@ Vue.use(VueRouter)
name: 'Kickoff',
component: () => import(/* webpackChunkName: "tournaments" */'../views/Kickoff.vue')
},
{
path: '/nationals',
name: 'Nationals',
component: () => import('../views/Nationals.vue')
},
{
path: '*',
name: 'NotFound',

3
src/scss/main.scss
Unescape Escape View File

@ -29,7 +29,8 @@
'pages/article',
'pages/tournaments',
'pages/about',
'pages/kickoff';
'pages/kickoff',
'pages/nationals';
@import
'themes/default';

148
src/scss/pages/_nationals.scss
Unescape Escape View File

@ -0,0 +1,148 @@
@font-face {
src: url('assets/Acumin-RPro.woff');
font-family: 'Acumin';
font-weight: 500;
}
@font-face {
src: url('assets/Acumin-BdPro.woff');
font-family: 'Acumin';
font-weight: 700;
}
.btn {
font-family: $text-font-stack;
}
.nationals {
font-family: 'Acumin', sans-serif;
line-height: 1.7;
letter-spacing: 1px;
overflow: hidden;
main {
font-weight: 500;
padding: 120px 0;
.bg {
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.presenting {
font-weight: 700;
font-size: 16pt;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
}
.heading {
padding: 50px 0;
font-weight: 700;
font-size: 16pt;
text-transform: uppercase;
text-align: center;
}
.brand {
display: flex;
flex-direction: column-reverse;
justify-content: center;
align-items: center;
img {
margin-top: 50px;
display: block;
max-width: 750px;
width: 100%;
&:first-child {
max-width: 150px;
}
}
}
.psyonix {
margin-top: 2em;
text-align: center;
img {
width: 150px;
}
}
.introp {
div {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
}
.poster {
width: 100%;
overflow: hidden;
img {
width: 100%;
height: 100%;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
}
.ftier {
padding-bottom: 0;
&.ind {
display: flex;
justify-content: center;
align-items: center;
img {
width: 30px;
display: inline-block;
margin-left: 10px;
}
}
}
.tier {
margin-top: 20px;
margin-bottom: 20px;
min-height: 300px;
max-width: 1200px;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
ul {
max-width: 550px;
div {
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
img {
width: 30px;
display: inline-block;
margin-left: 10px;
}
}
}
a.btn {
margin: 0 auto;
margin-top: 10px;
}
}
.trailer {
width: 1280px;
height: 720px;
iframe {
width: 100%;
height: 100%;
}
}
}
.footer {
font-family: $text-font-stack;
width: 100%;
padding: 2rem 2rem;
background: lighten($bg-color, 20%);
text-align: center;
font-size: 1rem;
letter-spacing: 0.5px;
line-height: 1.5;
}
}

98
src/views/Nationals.vue
Unescape Escape View File

@ -0,0 +1,98 @@
<template>
<div class="nationals">
<main>
<div class="bg">
<video autoplay loop muted>
<source src="/flag-bg.webm" type="video/webm">
</video>
</div>
<div class="container presenting">
Presenting
</div>
<div class="container brand">
<img src="https://cms.aplesports.com/storage/uploads/2021/02/11/6024e388e7fd9APL_Nationals_Logo-Flag-white.png" alt="APL Nationals Logo Flag">
<img src="https://cms.aplesports.com/storage/uploads/2021/02/11/6024df092c0d1APL_Nationals_Logo-Text.png" alt="APL Nationals Logo Text">
</div>
<div class="container psyonix">
<img src="https://cms.aplesports.com/storage/uploads/2020/06/03/5ed7144204020Sponsored_By_Psyonix.png" alt="Sponsored by Psyonix">
</div>
<div class="container introp">
Duis mollis mi eros, eget vehicula orci viverra ut. Sed molestie nisi magna, a tempor magna pellentesque vel. Proin lobortis tortor non ornare luctus. Quisque non accumsan neque. Vivamus convallis tortor nibh, nec imperdiet mi rutrum quis. Vivamus posuere tortor in vehicula pulvinar. Ut tristique sollicitudin mi sed gravida. Cras id purus pretium, scelerisque dui porttitor, lobortis velit. Donec ac luctus dui, iaculis lobortis mauris.
<div>
<a href="https://cms.aplesports.com/storage/uploads/2021/02/10/602424bbcbc6dAPL-NATIONALS---Official-Ruleset-v1.0.pdf" class="btn" target="_blank">Rule book</a>
</div>
</div>
<!-- <div class="container heading">
Three Tiers of Competitive Rocket League&reg;
</div> -->
<div class="container poster heading">
<img src="https://cms.aplesports.com/storage/uploads/2021/02/13/602750fe497e7APLN-Website-Banner.jpg" alt="APL Nationals Poster">
</div>
<div class="container tier t1">
<ul>
<div>
Saudi Arabia
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0d/Flag_of_Saudi_Arabia.svg" alt="Saudi Arabia Flag">
</div>
<li>Qualifier 1: June 27th - 5pm AST | 3pm BST | 10am EDT | 7am PDT</li>
<li>Qualifier 2: July 4th - 5pm AST | 3pm BST | 10am EDT | 7am PDT</li>
<li>Prize Pool: $22,750</li>
<a href="/nationals" class="btn" target="_blank">Register</a>
</ul>
<ul>
<div>
Japan
<img src="https://upload.wikimedia.org/wikipedia/en/9/9e/Flag_of_Japan.svg" alt="Japan Flag">
</div>
<li>Qualifier 1: June 27th - 5pm AST | 3pm BST | 10am EDT | 7am PDT</li>
<li>Qualifier 2: July 4th - 5pm AST | 3pm BST | 10am EDT | 7am PDT</li>
<li>Prize Pool: $22,750</li>
<a href="/nationals" class="btn" target="_blank">Register</a>
</ul>
</div>
<div class="container tier t2">
<ul>
<div>
Indonesia
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" alt="Indonesia Flag">
</div>
<li>Qualifier 1: June 27th - 5pm AST | 3pm BST | 10am EDT | 7am PDT</li>
<li>Qualifier 2: July 4th - 5pm AST | 3pm BST | 10am EDT | 7am PDT</li>
<li>Prize Pool: $22,750</li>
<a href="/nationals" class="btn" target="_blank">Register</a>
</ul>
<ul>
<div>
Singapore
<img src="https://upload.wikimedia.org/wikipedia/commons/4/48/Flag_of_Singapore.svg" alt="Singapore Flag">
</div>
<li>Qualifier 1: June 27th - 5pm AST | 3pm BST | 10am EDT | 7am PDT</li>
<li>Qualifier 2: July 4th - 5pm AST | 3pm BST | 10am EDT | 7am PDT</li>
<li>Prize Pool: $22,750</li>
<a href="/nationals" class="btn" target="_blank">Register</a>
</ul>
</div>
<!-- <div class="container heading ftier ind">
India <img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/1200px-Flag_of_India.svg.png" alt="India Flag">
</div> -->
<div class="container tier t3">
<ul>
<div>
India
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/1200px-Flag_of_India.svg.png" alt="India Flag">
</div>
<li>Qualifier 1: June 27th - 5pm AST | 3pm BST | 10am EDT | 7am PDT</li>
<li>Qualifier 2: July 4th - 5pm AST | 3pm BST | 10am EDT | 7am PDT</li>
<li>Prize Pool: $22,750</li>
<a href="/nationals" class="btn" target="_blank">Register</a>
</ul>
</div>
<div class="container trailer">
<iframe src="https://www.youtube.com/embed/7mZzs6-4_Nw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</main>
<div class="footer">
Rocket League, Psyonix, and all related marks and logos are trademarks or registered trademarks of Psyonix LLC and used under license. &copy; 2015-2020 Licensed by Psyonix LLC, All rights reserved. All other trademarks are property of their respective owners.
</div>
</div>
</template>
Write Preview
Loading…
Cancel
Save