RanchiMall/ranchimall
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.19.29

Browse Source 
added Floor changing via elevator
This commit is contained in:
sairaj mote 2021-04-16 15:59:49 +05:30
parent e842daad93
commit d60d43427c
11 changed files with 228 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
bitcoinbonds.html
View File

@ -154,8 +154,9 @@
</p>
</scroll-tab-panels>
</main>
<script src="components.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="index.js"></script>
<script src="js/components.js"></script>
<script src="js/index.js"></script>
</body>
</html>

7
bob'sfund.html
View File

@ -5,7 +5,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bitcoin Bonds</title>
<title>Bob's Fund</title>
<link rel="shortcut icon" href="assets/RM logo.png" type="image/png">
<link rel="stylesheet" href="css/main.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
@ -97,8 +97,9 @@
</div>
</scroll-tab-panels>
</main>
<script src="components.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="index.js"></script>
<script src="js/components.js"></script>
<script src="js/index.js"></script>
</body>
</html>

19
css/main.css
View File

@ -32,6 +32,9 @@ body[data-theme=dark] {
body[data-theme=dark] #outlet_switcher {
background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
}
body[data-theme=dark] .outlet__title {
font-weight: 800;
}
.full-bleed {
grid-column: 1/4;
@ -469,9 +472,10 @@ ul {
.floor__button {
position: relative;
padding: 0.5rem 1rem;
max-width: 20ch;
justify-content: center;
flex-direction: column;
text-align: left;
align-items: flex-start;
justify-self: flex-start;
border-radius: 0.2rem;
font-size: 1.5rem;
font-weight: 900;
@ -556,6 +560,7 @@ ul {
overflow-y: auto;
max-height: calc(100vh - 5.2rem);
grid-template-columns: 2rem 1fr;
scroll-behavior: smooth;
}
#floor_line_map {
@ -689,6 +694,12 @@ ul {
align-items: center;
display: grid;
}
.outlet-preview:nth-of-type(even) .outlet-preview__info {
grid-column: 2/3;
}
.outlet-preview:nth-of-type(even) .outlet-preview__border {
right: 0;
}
.outlet-number {
display: grid;
@ -1063,13 +1074,13 @@ table {
.carousel-holder--left {
grid-row: 1/2;
grid-column: 1/2;
box-shadow: -2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
box-shadow: 1px 0.1rem 0.1rem rgba(0, 0, 0, 0.06), -2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
}
.carousel-holder--left ~ .outlet-preview__border {
justify-self: flex-end;
}
.carousel-holder--right {
box-shadow: 2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
box-shadow: 1px 0.1rem 0.1rem rgba(0, 0, 0, 0.06), 2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
}
.outlet-preview__border {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

21
css/main.scss
View File

@ -30,6 +30,9 @@ body[data-theme='dark']{
#outlet_switcher{
background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
}
.outlet__title{
font-weight: 800;
}
}
.full-bleed{
@ -401,9 +404,10 @@ ul{
.floor__button{
position: relative;
padding: 0.5rem 1rem;
max-width: 20ch;
justify-content: center;
flex-direction: column;
text-align: left;
align-items: flex-start;
justify-self: flex-start;
border-radius: 0.2rem;
font-size: 1.5rem;
font-weight: 900;
@ -484,6 +488,7 @@ ul{
overflow-y: auto;
max-height: calc(100vh - 5.2rem);
grid-template-columns: 2rem 1fr;
scroll-behavior: smooth;
}
#floor_line_map{
@ -612,6 +617,14 @@ ul{
position: relative;
align-items: center;
display: grid;
&:nth-of-type(even){
.outlet-preview__info{
grid-column: 2/3;
}
.outlet-preview__border{
right: 0;
}
}
}
.outlet-number{
display: grid;
@ -955,13 +968,13 @@ table{
&--left{
grid-row: 1/2;
grid-column: 1/2;
box-shadow: -2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
box-shadow: 1px 0.1rem 0.1rem rgba(0, 0, 0, 0.06), -2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
& ~ .outlet-preview__border{
justify-self: flex-end;
}
}
&--right{
box-shadow: 2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
box-shadow: 1px 0.1rem 0.1rem rgba(0, 0, 0, 0.06), 2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
}
}
.outlet-preview__border{

BIN
dp.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 214 KiB

8
ico.html
View File

@ -5,7 +5,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bitcoin Bonds</title>
<title>ICO</title>
<link rel="shortcut icon" href="assets/RM logo.png" type="image/png">
<link rel="stylesheet" href="css/main.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
@ -27,7 +27,7 @@
</div>
</li>
</template>
<template id="ico_investor_row">
<div class="investor-card grid gap-1-5">
<img class="investor__image" src="" alt="" loading="lazy">
@ -123,9 +123,9 @@
<ul id="ico_phase_list"></ul>
</scroll-tab-panels>
</main>
<script src="components.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="index.js"></script>
<script src="js/components.js"></script>
<script src="js/index.js"></script>
<script>
const icoPhases = [
{

25
index.html
View File

@ -279,7 +279,7 @@
<div id="" class="outlet-preview">
<div class="grid outlet-preview__info">
<div class="outlet-number">2</div>
<h3 class="outlet__title">Messenger</h3>
<h3 class="outlet__title">FLO Messenger</h3>
<p class="outlet__description margin-bottom-1-5r">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
</p>
@ -418,9 +418,9 @@
</main>
</article>
<script src="components.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="index.js"></script>
<script src="js/components.js"></script>
<script src="js/index.js"></script>
<script>
@ -599,25 +599,6 @@
renderAllIcoInvestors()
renderAllSeries()
renderAllFundInvestors()
document.addEventListener('click', e => {
if(e.target.closest('.floor-label, .floor__button')){
const label = e.target.closest('.floor-label, .floor__button')
const target = label.dataset.target
if(currentPage !== 'home_page'){
history.pushState({type: 'page', id: 'home_page'}, null, `#${'home_page'}`)
showPage('home_page')
}
if(isSiteMapOpen){
hideSiteMap()
}
getRef('home_page').scrollTo({
top: getRef(target).getBoundingClientRect().top - getRef('home_page').getBoundingClientRect().top + getRef('home_page').scrollTop,
behavior: 'smooth'
})
}
})
function showOutletSwitcher(button){

0
components.js → js/components.js
View File

47
index.js → js/index.js
View File

@ -340,10 +340,10 @@ const siteMap = [
const floorListitemTemplate = document.createElement('template')
floorListitemTemplate.innerHTML = `
<li class="floor_list__item">
<header class="floor_list__header">
<button class="floor_list__header floor__button">
<h5 class="h5 floor-num">Floor</h5>
<h4 class="h3"></h4>
</header>
</button>
<ul class="outlet-list grid"></ul>
</li>
`
@ -421,9 +421,10 @@ const render = {
li.querySelector('.outlet-brief').textContent = brief ? brief: ''
return li
},
floorListitem(floorObj) {
floorListitem(floorObj, index) {
const { floor, outlets} = floorObj
const li = floorListitemTemplate.content.cloneNode(true).firstElementChild
li.firstElementChild.dataset.target = `floor_${index + 1}`;
li.querySelector('.h3').textContent = floor
const frag = document.createDocumentFragment()
@ -549,6 +550,18 @@ const easeOutOvershoot = `cubic-bezier(0.175, 0.885, 0.32, 1.275)`;
//////////////////
document.addEventListener('click', e => {
if(e.target.closest('.floor-label, .floor__button')){
const label = e.target.closest('.floor-label, .floor__button')
const target = label.dataset.target
window.open(`index.html#${target}`, '_self')
if(isSiteMapOpen){
hideSiteMap()
}
}
})
const outletObserver = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
@ -624,37 +637,15 @@ function hideOutletSwitcher() {
};
}
let currentPage = "";
function showPage(pageId) {
if (currentPage !== pageId) {
if (pageId !== "home_page") {
const activeOutlet = getRef("outlet_switcher").querySelector(
".outlet_switcher__button--active"
);
activeOutlet
.closest(".outlet_switcher__floor")
.classList.add("hide-completely");
activeOutlet.classList.remove("outlet_switcher__button--active");
const targetButton = getRef("outlet_switcher").querySelector(
`[data-target="${pageId}"]`
);
targetButton
.closest(".outlet_switcher__floor")
.classList.remove("hide-completely");
targetButton.classList.add("outlet_switcher__button--active");
hideOutletSwitcher();
}
}
}
let currentPage
function renderSiteMap() {
const frag = document.createDocumentFragment()
siteMap.forEach(floor => frag.append(render.floorListitem(floor)))
siteMap.forEach((floor, index) => frag.append(render.floorListitem(floor, index)))
getRef('floor_list').append(frag)
const pathArray = location.pathname.split('/')
for (floor of siteMap) {
for (outlet of floor.outlets) {
currentPage = pathArray[pathArray.length - 1]
if (pathArray[pathArray.length - 1].indexOf(outlet.url) > -1) {
renderFloorOutlets(floor, outlet.url)
break;

162
webwallet.html Normal file
View File

@ -0,0 +1,162 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Wallet</title>
<link rel="shortcut icon" href="assets/RM logo.png" type="image/png">
<link rel="stylesheet" href="css/main.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400..900&display=swap" rel="stylesheet">
</head>
<body>
<section id="elevator_popup" class="grid hide-completely">
<header class="elevator__header">
<button class="close-button justify-self-start" onclick="hideSiteMap()">
<svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
height="24">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
</svg>
</button>
</header>
<ul id="floor_list" class="grid"></ul>
</section>
<header id="main_header" class="grid align-center full-bleed">
<button id="elevator_button" class="button" onclick="showSiteMap()">
<svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
<span class="button__label">
Elevator
</span>
</button>
<a href="index.html" class="main-logo flex align-center page-link justify-self-center" data-target="home_page">
<svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
<h4 class="h4 header__company-name">RanchiMall</h4>
</a>
<label class="theme-switcher" title="Change theme">
<input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
<svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
<svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
</label>
</header>
<div id="outlet_switcher" class="grid gap-1-5 hide">
<div class="flex align-center">
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
height="24">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z" />
</svg>
<span id="outlet_switcher__floor_num" class="weight-500 color-0-8"></span>
<button class="justify-right" onclick="hideOutletSwitcher()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z" />
</svg>
</button>
</div>
<section id="outlet_switcher__outlet_container" class="outlet_switcher__floor flex align-center"></section>
</div>
<main class="page">
<section class="outlet-hero-section margin-bottom-3r">
<button class="outlet-label">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z" />
</svg>
Outlet
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z" />
<path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
</svg>
</button>
<h2 class="h2 weight-700 margin-bottom-1r">Web Wallet</h2>
<p>lorem40 Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore
nihil quisquam harum quo mollitia sunt!</p>
</section>
<h3 class="h3 margin-bottom-1r">Rooms</h3>
<scroll-tab-header data-target="bit_bond_page_group" class="margin-bottom-1r">
<button class="room-button">
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<g>
<rect fill="none" height="24" width="24" />
</g>
<g>
<g>
<path
d="M21,8c-1.45,0-2.26,1.44-1.93,2.51l-3.55,3.56c-0.3-0.09-0.74-0.09-1.04,0l-2.55-2.55C12.27,10.45,11.46,9,10,9 c-1.45,0-2.27,1.44-1.93,2.52l-4.56,4.55C2.44,15.74,1,16.55,1,18c0,1.1,0.9,2,2,2c1.45,0,2.26-1.44,1.93-2.51l4.55-4.56 c0.3,0.09,0.74,0.09,1.04,0l2.55,2.55C12.73,16.55,13.54,18,15,18c1.45,0,2.27-1.44,1.93-2.52l3.56-3.55 C21.56,12.26,23,11.45,23,10C23,8.9,22.1,8,21,8z" />
<polygon points="15,9 15.94,6.93 18,6 15.94,5.07 15,3 14.08,5.07 12,6 14.08,6.93" />
<polygon points="3.5,11 4,9 6,8.5 4,8 3.5,6 3,8 1,8.5 3,9" />
</g>
</g>
</svg>
<span class="button__label">
Returns
</span>
</button>
<button class="room-button">
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
</svg>
<span class="button__label">
More
</span>
</button>
</scroll-tab-header>
<scroll-tab-panels id="bit_bond_page_group">
<div class="flex w-100" style="overflow-x: auto;">
<table>
<thead>
<tr class="tr">
<td class="td weight-700 uppercase">Series</td>
<td class="td weight-700 uppercase">Series date</td>
<td class="td weight-700 uppercase">Time Elapsed</td>
<td class="td weight-700 uppercase">Current value</td>
<td class="td weight-700 uppercase">Rate of return</td>
</tr>
</thead>
<tbody>
<tr class="tr">
<td class="td weight-500">$975</td>
</tr>
<tr class="tr">
<td class="td weight-500">$1057</td>
</tr>
<tr class="tr">
<td class="td weight-500">$1064</td>
</tr>
<tr class="tr">
<td class="td weight-500">$1205</td>
</tr>
<tr class="tr">
<td class="td weight-500">$1285</td>
</tr>
<tr class="tr">
<td class="td weight-500">$2513</td>
</tr>
</tr>
</tbody>
</table>
</div>
<p id="bit_bond_info">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore error omnis ipsam ut incidunt,
doloremque pariatur expedita distinctio itaque.
</p>
</scroll-tab-panels>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="js/components.js"></script>
<script src="js/index.js"></script>
</body>
</html>