diff --git a/src/router/index.js b/src/router/index.js index e7f35c7..fef192a 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -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', diff --git a/src/scss/pages/_nationals.scss b/src/scss/pages/_nationals.scss index 6d8f9cb..db74d9b 100644 --- a/src/scss/pages/_nationals.scss +++ b/src/scss/pages/_nationals.scss @@ -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; + } } \ No newline at end of file diff --git a/src/views/Nationals.vue b/src/views/Nationals.vue index 24c7a8b..8ae402f 100644 --- a/src/views/Nationals.vue +++ b/src/views/Nationals.vue @@ -2,7 +2,7 @@
-
@@ -22,9 +22,6 @@ Rulebook
-
APL Nationals Poster
@@ -34,10 +31,10 @@ Saudi Arabia Saudi Arabia Flag -
  • Qualifier: March 12, 2021 5PM KSA
  • -
  • Last Chance Qualifier: March 19, 2021 5PM KSA
  • -
  • Group Stage: March 26, 2021 7PM KSA
  • -
  • Playoffs: April 2, 2021 7PM KSA
  • +
  • Qualifier: Mar 12, 2021 5PM KSA
  • +
  • Last Chance Qualifier: Mar 19, 2021 5PM KSA
  • +
  • Group Stage: Mar 26, 2021 7PM KSA
  • +
  • Playoffs: Apr 2, 2021 7PM KSA
  • Register @@ -58,8 +55,8 @@ Indonesia Indonesia Flag -
  • Qualifier: March 21, 2021 5PM WIB
  • -
  • Finals: March 28, 2021 7PM WIB
  • +
  • Qualifier: Mar 21, 2021 5PM WIB
  • +
  • Finals: Mar 28, 2021 7PM WIB
  • Register
    @@ -78,8 +75,8 @@ India India Flag
    -
  • Qualifier: April 10, 2021 5PM IST
  • -
  • Finals: April 11, 2021 7PM IST
  • +
  • Qualifier: Apr 10, 2021 5PM IST
  • +
  • Finals: Apr 11, 2021 7PM IST
  • Register diff --git a/src/views/NationalsRegister.vue b/src/views/NationalsRegister.vue new file mode 100644 index 0000000..fb6ad9d --- /dev/null +++ b/src/views/NationalsRegister.vue @@ -0,0 +1,119 @@ + \ No newline at end of file