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

finish nationals stuff for now

Browse Source
preview
Ayush Mukherjee 4 years ago
parent 701ceba1c9
commit a188003950
4 changed files with 190 additions and 22 deletions
Show Stats Download Patch File Download Diff File

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

@ -41,6 +41,11 @@ Vue.use(VueRouter)
name: 'Nationals',
component: () => import('../views/Nationals.vue')
},
{
path: '/nationals/register',
name: 'Nationals Register',
component: () => import('../views/NationalsRegister.vue')
},
{
path: '*',
name: 'NotFound',

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

@ -27,9 +27,12 @@
top: 0;
left: 0;
z-index: -1;
width: 100vw;
height: 100vh;
overflow: hidden;
video {
object-fit: cover;
width: 100vw;
height: 100vh;
}
}
.presenting {
font-weight: 700;
@ -108,7 +111,10 @@
justify-content: center;
align-items: center;
ul {
max-width: 600px;
max-width: 550px;
width: 100%;
text-align: center;
list-style-type: none;
div {
display: flex;
justify-content: center;
@ -145,4 +151,45 @@
letter-spacing: 0.5px;
line-height: 1.5;
}
.grid {
display: flex;
justify-content: center;
flex-wrap: wrap;
.vertical-card {
padding: 25px 0;
text-align: center;
width: 220px;
background: rgba(white, 0.1);
backdrop-filter: blur(40px);
background-clip: padding-box;
height: auto;
margin: 2rem 1rem 0 1rem;
.card__header {
.card__header__title {
font-size: 20px;
font-weight: bold;
}
.card__header__date {
font-size: 16px;
}
.card__header__img img {
width: 90px;
height: 90px;
}
}
.card__body {
font-size: 16px;
margin-top: 0;
}
&:hover {
height: auto;
}
}
}
.deets {
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
}
}

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

@ -2,7 +2,7 @@
<div class="nationals">
<main>
<div class="bg">
<video autoplay loop muted>
<video playsinline autoplay loop muted poster="https://cms.aplesports.com/storage/uploads/2021/02/13/6027fdac525c5unknown.png">
<source src="/flag-bg.webm" type="video/webm">
</video>
</div>
@ -22,9 +22,6 @@
<a href="https://cms.aplesports.com/storage/uploads/2021/02/10/602424bbcbc6dAPL-NATIONALS---Official-Ruleset-v1.0.pdf" class="btn" target="_blank">Rulebook</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>
@ -34,10 +31,10 @@
Saudi Arabia
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0d/Flag_of_Saudi_Arabia.svg" alt="Saudi Arabia Flag">
</div>
<li>Qualifier: March 12, 2021 5PM KSA</li>
<li>Last Chance Qualifier: March 19, 2021 5PM KSA</li>
<li>Group Stage: March 26, 2021 7PM KSA</li>
<li>Playoffs: April 2, 2021 7PM KSA</li>
<li>Qualifier: Mar 12, 2021 5PM KSA</li>
<li>Last Chance Qualifier: Mar 19, 2021 5PM KSA</li>
<li>Group Stage: Mar 26, 2021 7PM KSA</li>
<li>Playoffs: Apr 2, 2021 7PM KSA</li>
<a href="https://smash.gg/SaudiArabianNational" class="btn" target="_blank">Register</a>
</ul>
<ul>
@ -45,10 +42,10 @@
Japan
<img src="https://upload.wikimedia.org/wikipedia/en/9/9e/Flag_of_Japan.svg" alt="Japan Flag">
</div>
<li>Qualifier: March 13, 2021 6PM JST</li>
<li>Last Chance Qualifier: March 20, 2021 6PM JST</li>
<li>Group Stage: March 27, 2021 7PM JST</li>
<li>Playoffs: April 3, 2021 7PM JST</li>
<li>Qualifier: Mar 13, 2021 6PM JST</li>
<li>Last Chance Qualifier: Mar 20, 2021 6PM JST</li>
<li>Group Stage: Mar 27, 2021 7PM JST</li>
<li>Playoffs: Apr 3, 2021 7PM JST</li>
<a href="https://smash.gg/JapaneseNational" class="btn" target="_blank">Register</a>
</ul>
</div>
@ -58,8 +55,8 @@
Indonesia
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" alt="Indonesia Flag">
</div>
<li>Qualifier: March 21, 2021 5PM WIB</li>
<li>Finals: March 28, 2021 7PM WIB</li>
<li>Qualifier: Mar 21, 2021 5PM WIB</li>
<li>Finals: Mar 28, 2021 7PM WIB</li>
<a href="https://smash.gg/IndonesianNational" class="btn" target="_blank">Register</a>
</ul>
<ul>
@ -67,9 +64,9 @@
Singapore
<img src="https://upload.wikimedia.org/wikipedia/commons/4/48/Flag_of_Singapore.svg" alt="Singapore Flag">
</div>
<li>Qualifier: March 7, 2021 5PM SGT</li>
<li>Finals: March 14, 2021 7PM SGT</li>
<a href="https://smash.gg/IndonesianNational" class="btn" target="_blank">Register</a>
<li>Qualifier: Mar 7, 2021 5PM SGT</li>
<li>Finals: Mar 14, 2021 7PM SGT</li>
<a href="https://smash.gg/SingaporeanNational" class="btn" target="_blank">Register</a>
</ul>
</div>
<div class="container tier t3">
@ -78,8 +75,8 @@
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: April 10, 2021 5PM IST</li>
<li>Finals: April 11, 2021 7PM IST</li>
<li>Qualifier: Apr 10, 2021 5PM IST</li>
<li>Finals: Apr 11, 2021 7PM IST</li>
<a href="https://smash.gg/IndianNational" class="btn" target="_blank">Register</a>
</ul>
</div>

119
src/views/NationalsRegister.vue
Unescape Escape View File

@ -0,0 +1,119 @@
<template>
<div class="nationals">
<main>
<div class="bg">
<video playsinline autoplay loop muted poster="https://cms.aplesports.com/storage/uploads/2021/02/13/6027fdac525c5unknown.png">
<source src="/flag-bg.webm" type="video/webm">
</video>
</div>
<div class="container presenting">
registration
</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 grid">
<div class="vertical-card">
<div class="card__header">
<div class="card__header__img">
<img src="https://cms.aplesports.com/storage/uploads/2021/02/13/6027e1b3ec514APLN-Japan.png" alt="Japanese Nationals Logo">
</div>
<div class="card__header__title">Japanese<br>Nationals</div>
<div class="card__header__date">Mar 13 - Apr 3<br><br></div>
</div>
<div class="card__body">
<p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm1-5h1a3 3 0 0 0 0-6H7.99a1 1 0 0 1 0-2H14V5h-3V3H9v2H8a3 3 0 1 0 0 6h4a1 1 0 1 1 0 2H6v2h3v2h2v-2z"/></svg>
$8,000
</p>
<div class="card__body__cta">
<a href="https://smash.gg/JapaneseNational" target="_blank">Register</a>
</div>
</div>
</div>
<div class="vertical-card">
<div class="card__header">
<div class="card__header__img">
<img src="https://cms.aplesports.com/storage/uploads/2021/02/13/6027e1b49865aAPLN-SGP.png" alt="Japanese Nationals Logo">
</div>
<div class="card__header__title">Singaporean<br>Nationals</div>
<div class="card__header__date">Mar 7 - Mar 14<br><br></div>
</div>
<div class="card__body">
<p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm1-5h1a3 3 0 0 0 0-6H7.99a1 1 0 0 1 0-2H14V5h-3V3H9v2H8a3 3 0 1 0 0 6h4a1 1 0 1 1 0 2H6v2h3v2h2v-2z"/></svg>
$3,500
</p>
<div class="card__body__cta">
<a href="https://smash.gg/SingaporeanNational" target="_blank">Register</a>
</div>
</div>
</div>
<div class="vertical-card">
<div class="card__header">
<div class="card__header__img">
<img src="https://cms.aplesports.com/storage/uploads/2021/02/13/6027e1b326749APLN-India.png" alt="Japanese Nationals Logo">
</div>
<div class="card__header__title">Indian<br>Nationals</div>
<div class="card__header__date">Apr 10 - Apr 11<br><br></div>
</div>
<div class="card__body">
<p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm1-5h1a3 3 0 0 0 0-6H7.99a1 1 0 0 1 0-2H14V5h-3V3H9v2H8a3 3 0 1 0 0 6h4a1 1 0 1 1 0 2H6v2h3v2h2v-2z"/></svg>
$2,000
</p>
<div class="card__body__cta">
<a href="https://smash.gg/IndianNational" target="_blank">Register</a>
</div>
</div>
</div>
<div class="vertical-card">
<div class="card__header">
<div class="card__header__img">
<img src="https://cms.aplesports.com/storage/uploads/2021/02/13/6027e1b39db51APLN-Indonesia.png" alt="Indonesian Nationals Logo">
</div>
<div class="card__header__title">Indonesian<br>Nationals</div>
<div class="card__header__date">Mar 21 - Mar 28<br><br></div>
</div>
<div class="card__body">
<p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm1-5h1a3 3 0 0 0 0-6H7.99a1 1 0 0 1 0-2H14V5h-3V3H9v2H8a3 3 0 1 0 0 6h4a1 1 0 1 1 0 2H6v2h3v2h2v-2z"/></svg>
$3,500
</p>
<div class="card__body__cta">
<a href="https://smash.gg/IndonesianNational" target="_blank">Register</a>
</div>
</div>
</div>
<div class="vertical-card">
<div class="card__header">
<div class="card__header__img">
<img src="https://cms.aplesports.com/storage/uploads/2021/02/13/6027e1b446510APLN-Saudi.png" alt="Saudi Arabian Nationals Logo">
</div>
<div class="card__header__title">Saudi Arabian<br>Nationals</div>
<div class="card__header__date">Mar 12 - Apr 2<br><br></div>
</div>
<div class="card__body">
<p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm1-5h1a3 3 0 0 0 0-6H7.99a1 1 0 0 1 0-2H14V5h-3V3H9v2H8a3 3 0 1 0 0 6h4a1 1 0 1 1 0 2H6v2h3v2h2v-2z"/></svg>
$8,000
</p>
<div class="card__body__cta">
<a href="https://smash.gg/SaudiArabianNational" target="_blank">Register</a>
</div>
</div>
</div>
</div>
<div class="container deets">
<router-link to="/nationals" class="btn">View Details</router-link>
</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