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

finish sections 2 and 3

Browse Source
apl/regionalrumble
Ayush Mukherjee 1 year ago
parent 5e9101d062
commit 20afabf147
2 changed files with 178 additions and 32 deletions
Show Stats Download Patch File Download Diff File

173
src/scss/pages/_rumble.scss
Unescape Escape View File

@ -6,6 +6,25 @@
overflow-x: hidden;
overflow-y: scroll;
.bg-only {
position: absolute;
top: 0;
left: 0;
height: 400%;
width: 400%;
overflow: hidden;
z-index: -1;
background-color: #161616;
opacity: 0.1;
rotate: 30deg;
transform: translate(-50%, 0);
background-image: linear-gradient(#ffffff 1.8px, transparent 1.8px), linear-gradient(90deg, #ffffff 1.8px, transparent 1.8px), linear-gradient(#ffffff 0.9px, transparent 0.9px), linear-gradient(90deg, #ffffff 0.9px, #161616 0.9px);
background-size: 45px 45px, 45px 45px, 9px 9px, 9px 9px;
background-position: -1.8px -1.8px, -1.8px -1.8px, -0.9px -0.9px, -0.9px -0.9px;
animation: moveBg 20s ease-in-out infinite;
}
section {
min-height: 100vh;
display: flex;
@ -14,38 +33,15 @@
overflow: hidden;
scroll-snap-align: start;
&:nth-child(2) {
background: purple;
}
&:nth-child(3) {
background: coral;
}
}
.intro {
position: relative;
flex-direction: column;
.bg-only {
position: absolute;
top: 0;
left: 0;
height: 400%;
width: 400%;
overflow: hidden;
z-index: -1;
background-color: #161616;
opacity: 0.1;
rotate: 30deg;
transform: translate(-50%, 0);
background-image: linear-gradient(#ffffff 1.8px, transparent 1.8px), linear-gradient(90deg, #ffffff 1.8px, transparent 1.8px), linear-gradient(#ffffff 0.9px, transparent 0.9px), linear-gradient(90deg, #ffffff 0.9px, #161616 0.9px);
background-size: 45px 45px, 45px 45px, 9px 9px, 9px 9px;
background-position: -1.8px -1.8px, -1.8px -1.8px, -0.9px -0.9px, -0.9px -0.9px;
animation: moveBg 20s ease-in-out infinite;
}
img {
width: 60vh;
img.rumbleLogo {
min-width: 400px;
width: 30%;
display: block;
transition: 0.15s linear;
@ -57,6 +53,13 @@
}
}
img.rlLogo {
min-width: 100px;
width: 7%;
display: block;
margin-top: 5.5rem;
}
.scroll-indicator {
position: absolute;
display: flex;
@ -77,6 +80,122 @@
}
}
}
.info {
height: 100vh;
justify-content: flex-start;
.trailer {
position: relative;
height: 100%;
width: 50%;
overflow: hidden;
img {
position: absolute;
top: 0;
display: block;
width: 100%;
height: 100%;
rotate: -90deg;
z-index: -1;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
background: rgba(0, 0, 0, 0.2);
display: grid;
place-items: center;
transition: 0.25s linear;
svg {
width: 40px;
height: 40px;
fill: white;
}
&:hover {
cursor: pointer;
background: rgba(0, 0, 0, 0.5);
}
}
}
.textInfo {
height: 100%;
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
div {
display: flex;
align-items: center;
h2 {
margin-left: 2rem;
text-shadow: 0 0 15px white;
}
}
}
}
.selector {
width: 100%;
height: 100%;
overflow: hidden;
div.apac, div.me, div.ssa {
position: relative;
width: calc(100vw / 3);
height: 100vh;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
transition: 0.15s ease-in;
&.apac {
background-image: url('https://cms.aplesports.com/storage/uploads/2023/09/18/65085dc28ca0frawkkim-KKz6NgO69yQ-unsplash.jpg');
background-position: 25% 50%;
}
&.me {
background-image: url('https://cms.aplesports.com/storage/uploads/2023/09/18/65085e8004a71neom-9633dHhioC8-unsplash1.jpg');
background-position: 50% 50%;
}
&.ssa {
background-image: url('https://cms.aplesports.com/storage/uploads/2023/09/18/65085e22e5166lina-loos-04-C1NZk1hE-unsplash.jpg');
background-position: 40% 50%;
}
&:hover {
width: calc(calc(100vw / 3) + 50%);
cursor: pointer;
}
img {
width: 50%;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(black, 0.05);
transition: 0.15s ease-in;
&:hover {
background: rgba(black, 0.2);
}
}
}
}
}
@keyframes moveBg {

37
src/views/RegionalRumble.vue
Unescape Escape View File

@ -2,18 +2,45 @@
<div class="rumble">
<section class="intro">
<div class="bg-only"></div>
<img alt="Regional Rumble Logo" src ="https://cms.aplesports.com/storage/uploads/2023/09/18/650841c1d9f23rr23-brand-logo-global-white.png" />
<img class="rumbleLogo" alt="Regional Rumble Logo" src ="https://cms.aplesports.com/storage/uploads/2023/09/18/650841c1d9f23rr23-brand-logo-global-white.png" />
<img class="rlLogo" alt="Featuring RL logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/65084e280f323rl_featuringrl_logo.png">
<div class="scroll-indicator">
scroll&nbsp;&nbsp;
</div>
</section>
<section class="info">
Section 2
<div class="trailer">
<img alt="APL Regional Rumble Trailer" src="https://cms.aplesports.com/storage/uploads/2023/09/18/65085173e1666apl-player-bg-test.jpg" />
<div class="overlay">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 22v-20l18 10-18 10z"/></svg>
</div>
</div>
<div class="textInfo">
<div>
<h1>3 Major Tournaments</h1>
<h2>$51,000 Prize Pool</h2>
</div>
<div>
<h1>15 Qualifiers</h1>
<h2>$24,000 Prize Pool</h2>
</div>
</div>
</section>
<section class="selector">
Section 3
<div class="apac">
<div class="overlay"></div>
<img alt="Regional Rumble APAC Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/65086296b79fcrr23-brand-logo-asia-white.png" />
</div>
<div class="me">
<div class="overlay"></div>
<img alt="Regional Rumble MENA Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/6508629a9ba86rr23-brand-logo-mena-white.png" />
</div>
<div class="ssa">
<div class="overlay"></div>
<img alt="Regional Rumble SSA Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/6508629d08e60rr23-brand-logo-ssa-white.png" />
</div>
</section>
</div>
</template>

Write Preview
Loading…
Cancel
Save