Cleanup to near minimum
This commit is contained in:
parent
996c5e71b5
commit
6831542447
|
|
@ -1,51 +1,22 @@
|
|||
<script lang="ts">
|
||||
import svelteLogo from './assets/svelte.svg'
|
||||
import StartVideo from './assets/StartVideo.gif'
|
||||
import ScrollTextComponent from './lib/ScrollTextComponent.svelte'
|
||||
import WeAreText from './lib/WeAreText.svelte'
|
||||
import { Parallax, ParallaxLayer, StickyLayer } from 'svelte-parallax';
|
||||
import ZSpacer from './lib/Universal/ZSpacer.svelte';
|
||||
import Cube3D from './lib/Cube3D.svelte';
|
||||
import WeAreText from './lib/WeAreText.svelte';
|
||||
import Cube3DCosmetic from './lib/Cube3DCosmetic.svelte';
|
||||
import { onMount } from "svelte";
|
||||
|
||||
window.onload = function() {
|
||||
window.scrollTo(0, 100); // Real
|
||||
//window.scrollTo(0, 3000); // debug
|
||||
};
|
||||
|
||||
function randomInt(min, max) { // min and max included
|
||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||
window.scrollTo(0, 100);
|
||||
}
|
||||
|
||||
function progressToSection(prog: number): number{
|
||||
return sections * prog
|
||||
}
|
||||
|
||||
// Fields
|
||||
let scrollPos: number = 0;
|
||||
let parallaxProgress: number = 0;
|
||||
let cosCubesPositions: number[] = [];
|
||||
// Auto assigned fields (Will change after load)
|
||||
let scrollPos: number = -1;
|
||||
let parallaxProgress: number = -1;
|
||||
|
||||
const handleProgress = (progress) => {
|
||||
parallaxProgress = progress;
|
||||
//console.log(progress);
|
||||
};
|
||||
|
||||
// Hyperparams
|
||||
let sections: number = 10;
|
||||
let cosmeticCubesSpawnRange: number[] = [0.0049253257070225615, 0.4404724075839424]; // Range relative to parallax progress
|
||||
let numCosCubes: number = 10;
|
||||
|
||||
|
||||
//Spawns the cosCubes
|
||||
for (let i = 0; i < numCosCubes; i++) {
|
||||
cosCubesPositions.push(randomInt(progressToSection(cosmeticCubesSpawnRange[0]),(progressToSection(cosmeticCubesSpawnRange[1]))));
|
||||
}
|
||||
|
||||
function debugClick(){
|
||||
console.log(progressToSection(cosmeticCubesSpawnRange[0]));
|
||||
console.log(progressToSection(cosmeticCubesSpawnRange[1]));
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -61,10 +32,10 @@
|
|||
|
||||
<Parallax
|
||||
onProgress={handleProgress}
|
||||
bind:sections
|
||||
sections={10}
|
||||
config={{stiffness: 0.2, damping: 0.3}}
|
||||
>
|
||||
<ParallaxLayer rate={0} span={3} style="background-color: #242424;" />
|
||||
<ParallaxLayer rate={0} span={3} style="background-color: grey;" />
|
||||
|
||||
<StickyLayer offset={{ top: 0, bottom: 10 }}>
|
||||
<div>
|
||||
|
|
@ -73,13 +44,6 @@
|
|||
<button on:click={debugClick}>Debug button</button>
|
||||
</StickyLayer>
|
||||
|
||||
<StickyLayer class="align-center" offset={{ top: 1, bottom: 6.5 }}>
|
||||
<div class="horizontal" style="padding: 200px;">
|
||||
<ZSpacer/>
|
||||
<Cube3D/>
|
||||
</div>
|
||||
</StickyLayer>
|
||||
|
||||
<StickyLayer class="align-center no-interact" offset={{ top: 0, bottom: 6.5 }}>
|
||||
<WeAreText/>
|
||||
</StickyLayer>
|
||||
|
|
@ -89,10 +53,6 @@
|
|||
The deprived devs
|
||||
</div>
|
||||
</StickyLayer>
|
||||
|
||||
{#each cosCubesPositions as cosCubePos}
|
||||
<Cube3DCosmetic position={cosCubePos}/>
|
||||
{/each}
|
||||
</Parallax>
|
||||
</main>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
<script lang="ts">
|
||||
let count: number = 0
|
||||
const increment = () => {
|
||||
count += 10
|
||||
}
|
||||
</script>
|
||||
|
||||
<button on:scroll={increment}>
|
||||
count is {count}
|
||||
</button>
|
||||
|
|
@ -1,225 +0,0 @@
|
|||
<script lang="ts">
|
||||
import planeImg from './images/PlaneGrid.png';
|
||||
import cubeSideImg from './images/CubeTexture.png';
|
||||
|
||||
// Hyperparameters (fine to change)
|
||||
let startPosAnim: number = 1200; // Starts at scroll value
|
||||
let endPosAnim: number = 4000; // Ends at scroll value
|
||||
let parallexOutPadding = 700;
|
||||
let parallaxOutLength = 400; // How long the exit anim is
|
||||
|
||||
|
||||
|
||||
// Define, don't touch
|
||||
let scrollPos: number = 0;
|
||||
let cubeRotY: number = 0;
|
||||
let cubeRotX: number = 0;
|
||||
|
||||
// Total length of animation
|
||||
let totalAnimLength: number = endPosAnim - startPosAnim;
|
||||
|
||||
// Front side text after fully scrolled
|
||||
let frontSideText: string[] = ["overlooked", "DEPRIVED"];
|
||||
|
||||
function updateUI(){
|
||||
// Calculates the cube roation
|
||||
let time = (scrollPos - startPosAnim)/totalAnimLength;
|
||||
cubeRotY = lerp(0, 360, clamp(time, 0, 1), true);
|
||||
|
||||
// Start exit anim after main anim
|
||||
time = (scrollPos - (endPosAnim + parallexOutPadding))/(parallaxOutLength + parallexOutPadding);
|
||||
cubeRotX = lerp(0, 15, clamp(time, 0, 1), true);
|
||||
|
||||
// if rotated cube 180deg then change text
|
||||
let frontSide = document.getElementById('front');
|
||||
if (!!frontSide) // if not null
|
||||
{
|
||||
if (scrollPos - startPosAnim < totalAnimLength / 2){
|
||||
frontSide.innerHTML = frontSide.innerHTML.replace(frontSideText[1], frontSideText[0]);
|
||||
}
|
||||
else {
|
||||
frontSide.innerHTML = frontSide.innerHTML.replace(frontSideText[0], frontSideText[1]);
|
||||
}
|
||||
}
|
||||
|
||||
// Hide plane3d if plane3d turned pass camera
|
||||
let plane3d = document.getElementById('plane3D');
|
||||
if (!!plane3d) // if not null
|
||||
{
|
||||
if (cubeRotX <= 10){
|
||||
plane3d.classList.remove("hide");
|
||||
}
|
||||
else{
|
||||
plane3d.classList.add("hide");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function lerp(from: number, to: number, time: number, clamped: boolean = false) : number {
|
||||
const lerped: number = from + (to - from) * time;
|
||||
|
||||
if (clamped) {
|
||||
return from < to ? clamp(lerped, from, to) : clamp(lerped, to, from);
|
||||
}
|
||||
|
||||
return lerped;
|
||||
}
|
||||
|
||||
function clamp(value: number, min: number, max: number): number {
|
||||
return Math.min(Math.max(value, min), max);
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY={scrollPos} on:scroll={updateUI}/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--cube-size: 400px;
|
||||
--cube-color: rgba(125, 125, 125, 1);
|
||||
}
|
||||
|
||||
#planeHolder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
#plane3D {
|
||||
--plane-size: 2500px;
|
||||
|
||||
width: var(--plane-size);
|
||||
height: var(--plane-size);
|
||||
|
||||
transform:
|
||||
rotateX( -90deg )
|
||||
translateZ(calc(var(--plane-size) * -0.25))
|
||||
translateX(calc(var(--plane-size) * -0.45));
|
||||
-moz-transform:
|
||||
rotateX( -90deg )
|
||||
translateZ(calc(var(--plane-size) * -0.25))
|
||||
translateX(calc(var(--plane-size) * -0.45));
|
||||
}
|
||||
|
||||
.image {
|
||||
transform: translateX(calc(var(--cube-size)*-0.5));
|
||||
}
|
||||
|
||||
.text{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* .rotate1{
|
||||
transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
|
||||
} */
|
||||
/* demo: https://codepen.io/mrosati84/pen/kWwXLg */
|
||||
|
||||
#cube-3d-container {
|
||||
width: var(--cube-size);
|
||||
height: var(--cube-size);
|
||||
position: relative;
|
||||
perspective: 500px;
|
||||
-moz-perspective: 1000px;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
#cube3d {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 1s cubic-bezier(0,1.32,0,.92);
|
||||
}
|
||||
|
||||
#cube3d div {
|
||||
display: block;
|
||||
border: none;
|
||||
line-height: var(--cube-size);
|
||||
text-align: center;
|
||||
font-size: 65px;
|
||||
}
|
||||
|
||||
.cube-sides {
|
||||
position: absolute;
|
||||
width: var(--cube-size);
|
||||
height: var(--cube-size);
|
||||
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 24px;
|
||||
}
|
||||
|
||||
#cube3d #front {
|
||||
transform: rotateY(0deg ) translateZ( calc(var(--cube-size) / 2) );
|
||||
-moz-transform: rotateY( 0deg ) translateZ( calc(var(--cube-size) / 2) );
|
||||
}
|
||||
#cube3d #back {
|
||||
transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) ) rotateZ(180deg);
|
||||
-moz-transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) ) rotateZ(180deg);
|
||||
}
|
||||
#cube3d #right {
|
||||
transform: rotateY( 90deg ) translateZ( calc(var(--cube-size) / 2) );
|
||||
-moz-transform: rotateY( 90deg ) translateZ( calc(var(--cube-size) / 2) );
|
||||
}
|
||||
#cube3d #left {
|
||||
transform: rotateY( -90deg ) translateZ( calc(var(--cube-size) / 2) );
|
||||
-moz-transform: rotateY( -90deg ) translateZ( calc(var(--cube-size) / 2) );
|
||||
}
|
||||
/* #cube3d #top {
|
||||
transform: rotateX( 90deg ) translateZ( calc(var(--cube-size) / 2) );
|
||||
-moz-transform: rotateX( 90deg ) translateZ( calc(var(--cube-size) / 2) );
|
||||
}
|
||||
#cube3d #bottom {
|
||||
transform: rotateX( -90deg ) translateZ( calc(var(--cube-size) / 2) );
|
||||
-moz-transform: rotateX( -90deg ) translateZ( calc(var(--cube-size) / 2) );
|
||||
} */
|
||||
</style>
|
||||
|
||||
<div id="cube-3d-container">
|
||||
<!-- Empty div for origin of plane object -->
|
||||
<div id="planeHolder" style="transform: rotateX({cubeRotX}deg);">
|
||||
<img id="plane3D" src={planeImg} alt="3D ground plane"/>
|
||||
</div>
|
||||
|
||||
<div id="cube3d" style="transform: rotateX({cubeRotY + cubeRotX}deg)">
|
||||
<div id="front" class="cube-sides">
|
||||
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
|
||||
<p class="text" style="position: relative;">
|
||||
overlooked
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="back" class="cube-sides">
|
||||
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
|
||||
<p class="text" style="position: relative;">
|
||||
constrained
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="right" class="cube-sides">
|
||||
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
|
||||
<p class="text" style="position: relative;">
|
||||
drained
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="left" class="cube-sides">
|
||||
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
|
||||
<p class="text" style="position: relative;">
|
||||
underfunded
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- <div id="top" class="cube-sides">
|
||||
<img src="{cubeSideImg}" style="width: 100%;" alt="cube side texture"/>
|
||||
5
|
||||
</div>
|
||||
|
||||
<div id="bottom" class="cube-sides">
|
||||
<img src="{cubeSideImg}" style="width: 100%;" alt="cube side texture"/>
|
||||
6
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { ParallaxLayer } from 'svelte-parallax';
|
||||
import cubeSideImg from './images/CubeTextureTransparent.png';
|
||||
|
||||
export let position: number;
|
||||
|
||||
let scrollPos: number = 0;
|
||||
|
||||
function updateUI(){
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY={scrollPos} on:scroll={updateUI}/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--cube-cosmetic-size: 400px;
|
||||
--cube-cosmetic-color: rgba(125, 125, 125, 1);
|
||||
}
|
||||
|
||||
.image {
|
||||
transform: translateX(calc(var(--cube-cosmetic-size)*-0.5));
|
||||
}
|
||||
|
||||
#cube-3d-container {
|
||||
width: var(--cube-cosmetic-size);
|
||||
height: var(--cube-cosmetic-size);
|
||||
position: relative;
|
||||
perspective: 500px;
|
||||
-moz-perspective: 1000px;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
#cube3d {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 1s cubic-bezier(0,1.32,0,.92);
|
||||
}
|
||||
|
||||
#cube3d div {
|
||||
display: block;
|
||||
border: none;
|
||||
line-height: var(--cube-cosmetic-size);
|
||||
text-align: center;
|
||||
font-size: 65px;
|
||||
}
|
||||
|
||||
.cube-sides {
|
||||
position: absolute;
|
||||
width: var(--cube-cosmetic-size);
|
||||
height: var(--cube-cosmetic-size);
|
||||
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 24px;
|
||||
}
|
||||
|
||||
#cube3d #front {
|
||||
transform: rotateY(0deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
|
||||
-moz-transform: rotateY( 0deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
|
||||
}
|
||||
#cube3d #back {
|
||||
transform: rotateX( 180deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) ) rotateZ(180deg);
|
||||
-moz-transform: rotateX( 180deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) ) rotateZ(180deg);
|
||||
}
|
||||
#cube3d #right {
|
||||
transform: rotateY( 90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
|
||||
-moz-transform: rotateY( 90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
|
||||
}
|
||||
#cube3d #left {
|
||||
transform: rotateY( -90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
|
||||
-moz-transform: rotateY( -90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
|
||||
}
|
||||
#cube3d #top {
|
||||
transform: rotateX( 90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
|
||||
-moz-transform: rotateX( 90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
|
||||
}
|
||||
#cube3d #bottom {
|
||||
transform: rotateX( -90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
|
||||
-moz-transform: rotateX( -90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
|
||||
}
|
||||
</style>
|
||||
|
||||
<ParallaxLayer offset={position}>
|
||||
<div id="cube-3d-container">
|
||||
|
||||
<div id="cube3d" style="transform: rotateX(0deg)">
|
||||
<div id="front" class="cube-sides">
|
||||
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
|
||||
</div>
|
||||
|
||||
<div id="back" class="cube-sides">
|
||||
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
|
||||
</div>
|
||||
|
||||
<div id="right" class="cube-sides">
|
||||
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
|
||||
</div>
|
||||
|
||||
<div id="left" class="cube-sides">
|
||||
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
|
||||
</div>
|
||||
|
||||
<div id="top" class="cube-sides">
|
||||
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
|
||||
</div>
|
||||
|
||||
<div id="bottom" class="cube-sides">
|
||||
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ParallaxLayer>
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
<script lang="ts">
|
||||
let chunkSize: number = 750;
|
||||
let chunks: number = 3;
|
||||
|
||||
|
||||
|
||||
export let allChunkHeight: number = chunkSize * chunks;
|
||||
let scrollPosition: number = 0;
|
||||
|
||||
function handleScroll() {
|
||||
const divElement = document.getElementById('scrollContainer');
|
||||
scrollPosition = divElement.scrollTop;
|
||||
|
||||
let currectChunk: number = scrollPosition / chunkSize;
|
||||
let chunkProgress: number = scrollPosition % chunkSize;
|
||||
|
||||
let typingIndex: number = (Math.ceil(currectChunk));
|
||||
|
||||
if (chunkSize * 0.2 < chunkProgress
|
||||
&& chunkProgress < chunkSize * 0.65){
|
||||
divElement.style.color = "pink";
|
||||
document.getElementById('TypingIndex_' + typingIndex).classList.add('typewriter');
|
||||
}
|
||||
else{
|
||||
divElement.style.color = "lightblue";
|
||||
document.getElementById('TypingIndex_' + typingIndex).classList.remove('typewriter');
|
||||
}
|
||||
|
||||
console.log(scrollPosition + ">" + (allChunkHeight - chunkSize - 150));
|
||||
if (scrollPosition > allChunkHeight - chunkSize - 150){
|
||||
document.getElementById('scrollContainer').classList.add('no-interact');
|
||||
}
|
||||
else{
|
||||
document.getElementById('scrollContainer').classList.remove('no-interact');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.scrollText {
|
||||
width: 100%;
|
||||
background-color: darkslateblue;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.center-screen {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 100vh;
|
||||
position:absolute;
|
||||
left:0;
|
||||
right:0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin:auto;
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div style="height: 100vh;">
|
||||
<div class="center-screen big-text no-wrap no-interact">
|
||||
We are
|
||||
</div>
|
||||
|
||||
<div class="container" id="scrollContainer" on:scroll={handleScroll}>
|
||||
<div class="scrollText" style="height: {allChunkHeight}px;">
|
||||
{#each {length: chunks} as _, i}
|
||||
<div id="ChunkIndex_{i}" class="chunk" style="height: {chunkSize}px; z-index: 0;">
|
||||
{scrollPosition}
|
||||
<div id="TypingIndex_{i}">
|
||||
<h1>{i} The cat and the hat.</h1>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,56 +1,11 @@
|
|||
<script lang="ts">
|
||||
import ZSpacer from "./Universal/ZSpacer.svelte";
|
||||
|
||||
// Hyperparams
|
||||
let startExit = 4700;
|
||||
let exitLength = 2000;
|
||||
let exitScreenLength = 700;
|
||||
let textMaxRotation = 30;
|
||||
let parallaxOffset = 1.0125;
|
||||
|
||||
// Define, don't touch
|
||||
let scrollPos: number = 0;
|
||||
let extraPosY = 0;
|
||||
let rotation = 0;
|
||||
|
||||
// Define: Parallax text
|
||||
let extraPosY2 = 0;
|
||||
let rotation2 = 0;
|
||||
|
||||
$:{
|
||||
let time = (scrollPos - startExit) / exitLength;
|
||||
extraPosY = lerp(0, -exitScreenLength, time, true);
|
||||
rotation = lerp(0, textMaxRotation, time, true);
|
||||
|
||||
extraPosY2 = lerp(0, -exitScreenLength, time * parallaxOffset, true);
|
||||
rotation2 = lerp(0, textMaxRotation, time, true);
|
||||
}
|
||||
|
||||
function lerp(from: number, to: number, time: number, clamped: boolean = false) : number {
|
||||
const lerped: number = from + (to - from) * time;
|
||||
|
||||
if (clamped) {
|
||||
return from < to ? clamp(lerped, from, to) : clamp(lerped, to, from);
|
||||
}
|
||||
|
||||
return lerped;
|
||||
}
|
||||
|
||||
function clamp(value: number, min: number, max: number): number {
|
||||
return Math.min(Math.max(value, min), max);
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY={scrollPos} />
|
||||
|
||||
<div class="horizontal">
|
||||
<div id="WeAreHolder" class="align-center" style="margin-right: 35vw; position: relative;">
|
||||
<div class="no-wrap no-interact big-text align-center WeAreText"
|
||||
style="color: #c9c9c9; transform: translate(0, {extraPosY}px) rotateX({rotation}deg); position: absolute;">
|
||||
We are
|
||||
</div>
|
||||
<div class="no-wrap no-interact big-text align-center WeAreText"
|
||||
style="color: #ffffff; transform: translate(0, {extraPosY2}px) rotateX({rotation2}deg); position: absolute;">
|
||||
style="color: #ffffff; position: absolute;">
|
||||
We are
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 250 KiB |
Loading…
Reference in New Issue