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 @@
+ + $8,000 +
++ + $3,500 +
++ + $2,000 +
++ + $3,500 +
++ + $8,000 +
+