UI update
-- Added room icons -- Added link to respective website for rooms
This commit is contained in:
sairaj mote
parent
2f730fe61a
commit
a984d3a7ae
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
@ -1,44 +0,0 @@
|
||||
<svg width="1280" height="720" viewBox="0 0 1280 720" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<ellipse cx="24.5" cy="565" rx="33.5" ry="33" fill="#FF9292"/>
|
||||
<ellipse cx="57.5" cy="598" rx="12.5" ry="12" fill="#FFB4B4"/>
|
||||
<path d="M1214.81 243.61L1370.03 243.61L1292.42 378.036L1214.81 243.61Z" fill="#FFDCDC"/>
|
||||
<circle cx="667.964" cy="126.052" r="4" transform="rotate(30 667.964 126.052)" fill="#FFB4B4"/>
|
||||
<circle cx="667.964" cy="126.052" r="4" transform="rotate(30 667.964 126.052)" fill="#FFB4B4"/>
|
||||
<circle cx="680.32" cy="136.652" r="4" transform="rotate(30 680.32 136.652)" fill="#FFB4B4"/>
|
||||
<circle cx="680.32" cy="136.652" r="4" transform="rotate(30 680.32 136.652)" fill="#FFB4B4"/>
|
||||
<circle cx="692.675" cy="147.249" r="4" transform="rotate(30 692.675 147.249)" fill="#FFB4B4"/>
|
||||
<circle cx="692.675" cy="147.249" r="4" transform="rotate(30 692.675 147.249)" fill="#FFB4B4"/>
|
||||
<circle cx="705.034" cy="157.847" r="4" transform="rotate(30 705.034 157.847)" fill="#FFB4B4"/>
|
||||
<circle cx="705.034" cy="157.847" r="4" transform="rotate(30 705.034 157.847)" fill="#FFB4B4"/>
|
||||
<circle cx="668.894" cy="140.445" r="4" transform="rotate(30 668.894 140.445)" fill="#FFB4B4"/>
|
||||
<circle cx="668.894" cy="140.445" r="4" transform="rotate(30 668.894 140.445)" fill="#FFB4B4"/>
|
||||
<circle cx="681.249" cy="151.042" r="4" transform="rotate(30 681.249 151.042)" fill="#FFB4B4"/>
|
||||
<circle cx="681.249" cy="151.042" r="4" transform="rotate(30 681.249 151.042)" fill="#FFB4B4"/>
|
||||
<circle cx="693.605" cy="161.642" r="4" transform="rotate(30 693.605 161.642)" fill="#FFB4B4"/>
|
||||
<circle cx="693.605" cy="161.642" r="4" transform="rotate(30 693.605 161.642)" fill="#FFB4B4"/>
|
||||
<circle cx="705.96" cy="172.239" r="4" transform="rotate(30 705.96 172.239)" fill="#FFB4B4"/>
|
||||
<circle cx="705.96" cy="172.239" r="4" transform="rotate(30 705.96 172.239)" fill="#FFB4B4"/>
|
||||
<circle cx="692.554" cy="119.464" r="4" transform="rotate(30 692.554 119.464)" fill="#FFB4B4"/>
|
||||
<circle cx="692.554" cy="119.464" r="4" transform="rotate(30 692.554 119.464)" fill="#FFB4B4"/>
|
||||
<circle cx="704.909" cy="130.062" r="4" transform="rotate(30 704.909 130.062)" fill="#FFB4B4"/>
|
||||
<circle cx="704.909" cy="130.062" r="4" transform="rotate(30 704.909 130.062)" fill="#FFB4B4"/>
|
||||
<circle cx="717.265" cy="140.659" r="4" transform="rotate(30 717.265 140.659)" fill="#FFB4B4"/>
|
||||
<circle cx="717.265" cy="140.659" r="4" transform="rotate(30 717.265 140.659)" fill="#FFB4B4"/>
|
||||
<circle cx="729.62" cy="151.259" r="4" transform="rotate(30 729.62 151.259)" fill="#FFB4B4"/>
|
||||
<circle cx="729.62" cy="151.259" r="4" transform="rotate(30 729.62 151.259)" fill="#FFB4B4"/>
|
||||
<circle cx="693.48" cy="133.857" r="4" transform="rotate(30 693.48 133.857)" fill="#FFB4B4"/>
|
||||
<circle cx="693.48" cy="133.857" r="4" transform="rotate(30 693.48 133.857)" fill="#FFB4B4"/>
|
||||
<circle cx="705.839" cy="144.454" r="4" transform="rotate(30 705.839 144.454)" fill="#FFB4B4"/>
|
||||
<circle cx="705.839" cy="144.454" r="4" transform="rotate(30 705.839 144.454)" fill="#FFB4B4"/>
|
||||
<circle cx="718.195" cy="155.052" r="4" transform="rotate(30 718.195 155.052)" fill="#FFB4B4"/>
|
||||
<circle cx="718.195" cy="155.052" r="4" transform="rotate(30 718.195 155.052)" fill="#FFB4B4"/>
|
||||
<circle cx="730.55" cy="165.652" r="4" transform="rotate(30 730.55 165.652)" fill="#FFB4B4"/>
|
||||
<circle cx="730.55" cy="165.652" r="4" transform="rotate(30 730.55 165.652)" fill="#FFB4B4"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="1280" height="720" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
1
assets/illustrations/Artboard 2.svg
Normal file
1
assets/illustrations/Artboard 2.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg id="e8a85bd1-79ff-40cd-b574-9e39062d2da6" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.ed852f50-90c9-4460-af8a-8afe3c055e95{fill:#75cdd2;}.b055b7b5-c208-43cc-844e-755dd51691d2{fill:#99d5c6;}</style></defs><path class="ed852f50-90c9-4460-af8a-8afe3c055e95" d="M25.34,13.71V10.49a6.66,6.66,0,0,1,13.32,0v3.22h3.83V10.49a10.49,10.49,0,0,0-21,0v3.22Z"/><path class="b055b7b5-c208-43cc-844e-755dd51691d2" d="M25.34,13.71v6.37a1.92,1.92,0,1,1-3.83,0V13.71H11.85a2.56,2.56,0,0,0-2.56,2.43l-2,39.8A7.67,7.67,0,0,0,14.93,64H32V13.71Z"/><path class="ed852f50-90c9-4460-af8a-8afe3c055e95" d="M54.71,16.14a2.56,2.56,0,0,0-2.56-2.43H42.49v6.37a1.92,1.92,0,1,1-3.83,0V13.71H32V64H49.07a7.67,7.67,0,0,0,7.66-8.06Z"/></svg>
|
||||
|
After Width: | Height: | Size: 756 B |
BIN
assets/illustrations/performance.png
Normal file
BIN
assets/illustrations/performance.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
1
assets/illustrations/performance.svg
Normal file
1
assets/illustrations/performance.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg id="b23be00b-0d64-4bed-9d99-6f7aaf421af4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M44.53,26.6a7.17,7.17,0,1,1,5.07-2.1h0A7.16,7.16,0,0,1,44.53,26.6Zm0-11.47a4.31,4.31,0,1,0,3,1.26A4.31,4.31,0,0,0,44.53,15.13Z"/><path d="M62.58,1.38A4.7,4.7,0,0,0,58.35.09L45.09,2.66a14.61,14.61,0,0,0-7.56,4L19.92,24.29l-9,2.23a8.75,8.75,0,0,0-4.1,2.31L.46,35.2a1.43,1.43,0,0,0,1,2.44h.08L10,37.2l1.67,1.68L6.85,41.23a1.43,1.43,0,0,0-.38,2.3l14,14a1.44,1.44,0,0,0,1,.42l.24,0a1.47,1.47,0,0,0,1.05-.78l2.35-4.79,1.61,1.6-.45,8.58a1.43,1.43,0,0,0,.85,1.38,1.51,1.51,0,0,0,.58.12,1.44,1.44,0,0,0,1-.42l6.37-6.36a8.75,8.75,0,0,0,2.31-4.1l2.23-9,17.7-17.7a14.5,14.5,0,0,0,4-7.56L63.87,5.61A4.7,4.7,0,0,0,62.58,1.38ZM21,54.05,9.91,42.92,13.78,41,23,50.18ZM8.85,30.86a5.82,5.82,0,0,1,2.76-1.56L16,28.21,10.23,34l-.37.37-4.74.25ZM34.58,52.43A5.89,5.89,0,0,1,33,55.19l-3.74,3.73.25-4.74,6.13-6.13Zm20.68-28-18,18h0l-9,9-7.85-7.86-5.31-5.3h0l-2.55-2.54,27-27a11.72,11.72,0,0,1,5.38-3L58.3,19A11.64,11.64,0,0,1,55.26,24.41Zm5.8-19.34L59,15.68,48.28,5,58.89,2.9a1.85,1.85,0,0,1,2.17,2.17Z"/><path d="M2.63,62.76a1.41,1.41,0,0,1-1-.41,1.44,1.44,0,0,1,0-2l8.12-8.13a1.44,1.44,0,0,1,2,2L3.64,62.35A1.42,1.42,0,0,1,2.63,62.76Z"/><path d="M10.75,62.76a1.43,1.43,0,0,1-1-2.44l4.06-4.07a1.43,1.43,0,0,1,2,2l-4.06,4.06A1.43,1.43,0,0,1,10.75,62.76Z"/><path d="M2.63,54.64a1.43,1.43,0,0,1-1-2.44l4.07-4.06a1.43,1.43,0,0,1,2,2L3.65,54.22A1.44,1.44,0,0,1,2.63,54.64Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
1
assets/illustrations/product.svg
Normal file
1
assets/illustrations/product.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg id="b76bf456-6b89-4220-8b44-f4f7d833bad6" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M61.28,22.11c0-.05,0-.09,0-.14L58.62,6A1.68,1.68,0,0,0,57,4.6H7A1.68,1.68,0,0,0,5.38,6L2.72,22c0,.05,0,.09,0,.14s0,.09,0,.14V57.72A1.68,1.68,0,0,0,4.38,59.4H59.62a1.68,1.68,0,0,0,1.68-1.68V22.25C61.3,22.2,61.28,22.16,61.28,22.11Zm-3.64-1.54H39.34L38.51,8h17ZM27.92,23.93h8.16v6.64L33,28.41a1.7,1.7,0,0,0-1.9,0l-3.13,2.16ZM35.15,8,36,20.57H28L28.91,8ZM8.46,8H25.55l-.88,12.61H6.36ZM57.94,56H6.06V23.93h18.5v9.84a1.67,1.67,0,0,0,2.63,1.38L32,31.84l4.81,3.31a1.65,1.65,0,0,0,.95.3,1.76,1.76,0,0,0,.78-.19,1.68,1.68,0,0,0,.9-1.49V23.93h18.5Z"/></svg>
|
||||
|
After Width: | Height: | Size: 677 B |
1
assets/illustrations/purchase.svg
Normal file
1
assets/illustrations/purchase.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg id="bb329e59-3d30-49a7-ac0d-b164d3b3b631" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M42.74,64a14,14,0,1,1,14-14A14,14,0,0,1,42.74,64Zm0-24.73A10.7,10.7,0,1,0,53.44,50,10.71,10.71,0,0,0,42.74,39.27Z"/><path d="M28.7,50H14.08a3.43,3.43,0,0,1-3.42-3.58l1.4-31.51h4.85V17.8a1.71,1.71,0,1,0,3.42,0V14.88H33V17.8a1.71,1.71,0,1,0,3.42,0V14.88h4.84L42.2,36c.18,0,.35,0,.54,0a13.92,13.92,0,0,1,2.9.31l-1.1-24.8H36.42V9.76a9.76,9.76,0,1,0-19.51,0v1.69H8.79L7.24,46.24a6.85,6.85,0,0,0,6.84,7.15H29.14A14.24,14.24,0,0,1,28.7,50ZM20.33,9.76A6.34,6.34,0,1,1,33,9.76v1.69H20.33Z"/><path d="M41.23,54.65a1.69,1.69,0,0,1-1.18-.49l-3-3a1.67,1.67,0,0,1,2.35-2.36l1.84,1.84,4.85-4.85a1.66,1.66,0,0,1,2.35,2.35l-6,6A1.67,1.67,0,0,1,41.23,54.65Z"/></svg>
|
||||
|
After Width: | Height: | Size: 779 B |
@ -45,7 +45,7 @@
|
||||
<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 id="outlet_switcher" class="grid gap-1-5 hide-completely">
|
||||
<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">
|
||||
@ -92,17 +92,22 @@
|
||||
<div id="expanding_tile" class="hide-completely"></div>
|
||||
<a class="room-tile room-tile--main" href="#performance_room">
|
||||
<div class="tile-content">
|
||||
<svg class="room-tile__icon" id="b23be00b-0d64-4bed-9d99-6f7aaf421af4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M44.53,26.6a7.17,7.17,0,1,1,5.07-2.1h0A7.16,7.16,0,0,1,44.53,26.6Zm0-11.47a4.31,4.31,0,1,0,3,1.26A4.31,4.31,0,0,0,44.53,15.13Z"/><path d="M62.58,1.38A4.7,4.7,0,0,0,58.35.09L45.09,2.66a14.61,14.61,0,0,0-7.56,4L19.92,24.29l-9,2.23a8.75,8.75,0,0,0-4.1,2.31L.46,35.2a1.43,1.43,0,0,0,1,2.44h.08L10,37.2l1.67,1.68L6.85,41.23a1.43,1.43,0,0,0-.38,2.3l14,14a1.44,1.44,0,0,0,1,.42l.24,0a1.47,1.47,0,0,0,1.05-.78l2.35-4.79,1.61,1.6-.45,8.58a1.43,1.43,0,0,0,.85,1.38,1.51,1.51,0,0,0,.58.12,1.44,1.44,0,0,0,1-.42l6.37-6.36a8.75,8.75,0,0,0,2.31-4.1l2.23-9,17.7-17.7a14.5,14.5,0,0,0,4-7.56L63.87,5.61A4.7,4.7,0,0,0,62.58,1.38ZM21,54.05,9.91,42.92,13.78,41,23,50.18ZM8.85,30.86a5.82,5.82,0,0,1,2.76-1.56L16,28.21,10.23,34l-.37.37-4.74.25ZM34.58,52.43A5.89,5.89,0,0,1,33,55.19l-3.74,3.73.25-4.74,6.13-6.13Zm20.68-28-18,18h0l-9,9-7.85-7.86-5.31-5.3h0l-2.55-2.54,27-27a11.72,11.72,0,0,1,5.38-3L58.3,19A11.64,11.64,0,0,1,55.26,24.41Zm5.8-19.34L59,15.68,48.28,5,58.89,2.9a1.85,1.85,0,0,1,2.17,2.17Z"/><path d="M2.63,62.76a1.41,1.41,0,0,1-1-.41,1.44,1.44,0,0,1,0-2l8.12-8.13a1.44,1.44,0,0,1,2,2L3.64,62.35A1.42,1.42,0,0,1,2.63,62.76Z"/><path d="M10.75,62.76a1.43,1.43,0,0,1-1-2.44l4.06-4.07a1.43,1.43,0,0,1,2,2l-4.06,4.06A1.43,1.43,0,0,1,10.75,62.76Z"/><path d="M2.63,54.64a1.43,1.43,0,0,1-1-2.44l4.07-4.06a1.43,1.43,0,0,1,2,2L3.65,54.22A1.44,1.44,0,0,1,2.63,54.64Z"/></svg>
|
||||
<!-- <img class="room-tile__icon" src="./assets/illustrations/performance.svg" alt=""> -->
|
||||
<h4 class="room-tile__title">Performance</h4>
|
||||
</div>
|
||||
</a>
|
||||
<a class="room-tile" href="#product_room">
|
||||
<div class="tile-content">
|
||||
<svg class="room-tile__icon" id="b76bf456-6b89-4220-8b44-f4f7d833bad6" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M61.28,22.11c0-.05,0-.09,0-.14L58.62,6A1.68,1.68,0,0,0,57,4.6H7A1.68,1.68,0,0,0,5.38,6L2.72,22c0,.05,0,.09,0,.14s0,.09,0,.14V57.72A1.68,1.68,0,0,0,4.38,59.4H59.62a1.68,1.68,0,0,0,1.68-1.68V22.25C61.3,22.2,61.28,22.16,61.28,22.11Zm-3.64-1.54H39.34L38.51,8h17ZM27.92,23.93h8.16v6.64L33,28.41a1.7,1.7,0,0,0-1.9,0l-3.13,2.16ZM35.15,8,36,20.57H28L28.91,8ZM8.46,8H25.55l-.88,12.61H6.36ZM57.94,56H6.06V23.93h18.5v9.84a1.67,1.67,0,0,0,2.63,1.38L32,31.84l4.81,3.31a1.65,1.65,0,0,0,.95.3,1.76,1.76,0,0,0,.78-.19,1.68,1.68,0,0,0,.9-1.49V23.93h18.5Z"/></svg>
|
||||
<h4 class="room-tile__title">Product</h4>
|
||||
</div>
|
||||
</a>
|
||||
<a class="room-tile" href="#purchase_room">
|
||||
<div class="tile-content">
|
||||
<h4 class="room-tile__title">Purchase</h4>
|
||||
<svg class="room-tile__icon" id="bb329e59-3d30-49a7-ac0d-b164d3b3b631" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M42.74,64a14,14,0,1,1,14-14A14,14,0,0,1,42.74,64Zm0-24.73A10.7,10.7,0,1,0,53.44,50,10.71,10.71,0,0,0,42.74,39.27Z"/><path d="M28.7,50H14.08a3.43,3.43,0,0,1-3.42-3.58l1.4-31.51h4.85V17.8a1.71,1.71,0,1,0,3.42,0V14.88H33V17.8a1.71,1.71,0,1,0,3.42,0V14.88h4.84L42.2,36c.18,0,.35,0,.54,0a13.92,13.92,0,0,1,2.9.31l-1.1-24.8H36.42V9.76a9.76,9.76,0,1,0-19.51,0v1.69H8.79L7.24,46.24a6.85,6.85,0,0,0,6.84,7.15H29.14A14.24,14.24,0,0,1,28.7,50ZM20.33,9.76A6.34,6.34,0,1,1,33,9.76v1.69H20.33Z"/><path d="M41.23,54.65a1.69,1.69,0,0,1-1.18-.49l-3-3a1.67,1.67,0,0,1,2.35-2.36l1.84,1.84,4.85-4.85a1.66,1.66,0,0,1,2.35,2.35l-6,6A1.67,1.67,0,0,1,41.23,54.65Z"/></svg>
|
||||
<!-- <img class="room-tile__icon" src="./assets/illustrations/purchase.svg" alt=""> -->
|
||||
<h4 class="room-tile__title">Buy</h4>
|
||||
</div>
|
||||
</a>
|
||||
</section>
|
||||
@ -235,6 +240,12 @@
|
||||
<div id="room_switcher"></div>
|
||||
</footer>
|
||||
</section>
|
||||
<section>
|
||||
<a class="ext-link-tile" href="https://ranchimall.github.io/blockchain-bonds/" target="_blank" >
|
||||
<h4 class="tile__title">See this in action</h4>
|
||||
<p class="tile__brief">Visit the website to see investors and asset performance</p>
|
||||
</a>
|
||||
</section>
|
||||
</main>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
|
||||
<script src="js/components.js"></script>
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
<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>
|
||||
</section>
|
||||
<div id="outlet_switcher" class="grid gap-1-5 hide">
|
||||
<div id="outlet_switcher" class="grid gap-1-5 hide-completely">
|
||||
<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">
|
||||
@ -95,17 +95,22 @@
|
||||
<div id="expanding_tile" class="hide-completely"></div>
|
||||
<a class="room-tile room-tile--main" href="#performance_room">
|
||||
<div class="tile-content">
|
||||
<svg class="room-tile__icon" id="b23be00b-0d64-4bed-9d99-6f7aaf421af4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M44.53,26.6a7.17,7.17,0,1,1,5.07-2.1h0A7.16,7.16,0,0,1,44.53,26.6Zm0-11.47a4.31,4.31,0,1,0,3,1.26A4.31,4.31,0,0,0,44.53,15.13Z"/><path d="M62.58,1.38A4.7,4.7,0,0,0,58.35.09L45.09,2.66a14.61,14.61,0,0,0-7.56,4L19.92,24.29l-9,2.23a8.75,8.75,0,0,0-4.1,2.31L.46,35.2a1.43,1.43,0,0,0,1,2.44h.08L10,37.2l1.67,1.68L6.85,41.23a1.43,1.43,0,0,0-.38,2.3l14,14a1.44,1.44,0,0,0,1,.42l.24,0a1.47,1.47,0,0,0,1.05-.78l2.35-4.79,1.61,1.6-.45,8.58a1.43,1.43,0,0,0,.85,1.38,1.51,1.51,0,0,0,.58.12,1.44,1.44,0,0,0,1-.42l6.37-6.36a8.75,8.75,0,0,0,2.31-4.1l2.23-9,17.7-17.7a14.5,14.5,0,0,0,4-7.56L63.87,5.61A4.7,4.7,0,0,0,62.58,1.38ZM21,54.05,9.91,42.92,13.78,41,23,50.18ZM8.85,30.86a5.82,5.82,0,0,1,2.76-1.56L16,28.21,10.23,34l-.37.37-4.74.25ZM34.58,52.43A5.89,5.89,0,0,1,33,55.19l-3.74,3.73.25-4.74,6.13-6.13Zm20.68-28-18,18h0l-9,9-7.85-7.86-5.31-5.3h0l-2.55-2.54,27-27a11.72,11.72,0,0,1,5.38-3L58.3,19A11.64,11.64,0,0,1,55.26,24.41Zm5.8-19.34L59,15.68,48.28,5,58.89,2.9a1.85,1.85,0,0,1,2.17,2.17Z"/><path d="M2.63,62.76a1.41,1.41,0,0,1-1-.41,1.44,1.44,0,0,1,0-2l8.12-8.13a1.44,1.44,0,0,1,2,2L3.64,62.35A1.42,1.42,0,0,1,2.63,62.76Z"/><path d="M10.75,62.76a1.43,1.43,0,0,1-1-2.44l4.06-4.07a1.43,1.43,0,0,1,2,2l-4.06,4.06A1.43,1.43,0,0,1,10.75,62.76Z"/><path d="M2.63,54.64a1.43,1.43,0,0,1-1-2.44l4.07-4.06a1.43,1.43,0,0,1,2,2L3.65,54.22A1.44,1.44,0,0,1,2.63,54.64Z"/></svg>
|
||||
<!-- <img class="room-tile__icon" src="./assets/illustrations/performance.svg" alt=""> -->
|
||||
<h4 class="room-tile__title">Performance</h4>
|
||||
</div>
|
||||
</a>
|
||||
<a class="room-tile" href="#product_room">
|
||||
<div class="tile-content">
|
||||
<svg class="room-tile__icon" id="b76bf456-6b89-4220-8b44-f4f7d833bad6" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M61.28,22.11c0-.05,0-.09,0-.14L58.62,6A1.68,1.68,0,0,0,57,4.6H7A1.68,1.68,0,0,0,5.38,6L2.72,22c0,.05,0,.09,0,.14s0,.09,0,.14V57.72A1.68,1.68,0,0,0,4.38,59.4H59.62a1.68,1.68,0,0,0,1.68-1.68V22.25C61.3,22.2,61.28,22.16,61.28,22.11Zm-3.64-1.54H39.34L38.51,8h17ZM27.92,23.93h8.16v6.64L33,28.41a1.7,1.7,0,0,0-1.9,0l-3.13,2.16ZM35.15,8,36,20.57H28L28.91,8ZM8.46,8H25.55l-.88,12.61H6.36ZM57.94,56H6.06V23.93h18.5v9.84a1.67,1.67,0,0,0,2.63,1.38L32,31.84l4.81,3.31a1.65,1.65,0,0,0,.95.3,1.76,1.76,0,0,0,.78-.19,1.68,1.68,0,0,0,.9-1.49V23.93h18.5Z"/></svg>
|
||||
<h4 class="room-tile__title">Product</h4>
|
||||
</div>
|
||||
</a>
|
||||
<a class="room-tile" href="#purchase_room">
|
||||
<div class="tile-content">
|
||||
<h4 class="room-tile__title">Purchase</h4>
|
||||
<svg class="room-tile__icon" id="bb329e59-3d30-49a7-ac0d-b164d3b3b631" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M42.74,64a14,14,0,1,1,14-14A14,14,0,0,1,42.74,64Zm0-24.73A10.7,10.7,0,1,0,53.44,50,10.71,10.71,0,0,0,42.74,39.27Z"/><path d="M28.7,50H14.08a3.43,3.43,0,0,1-3.42-3.58l1.4-31.51h4.85V17.8a1.71,1.71,0,1,0,3.42,0V14.88H33V17.8a1.71,1.71,0,1,0,3.42,0V14.88h4.84L42.2,36c.18,0,.35,0,.54,0a13.92,13.92,0,0,1,2.9.31l-1.1-24.8H36.42V9.76a9.76,9.76,0,1,0-19.51,0v1.69H8.79L7.24,46.24a6.85,6.85,0,0,0,6.84,7.15H29.14A14.24,14.24,0,0,1,28.7,50ZM20.33,9.76A6.34,6.34,0,1,1,33,9.76v1.69H20.33Z"/><path d="M41.23,54.65a1.69,1.69,0,0,1-1.18-.49l-3-3a1.67,1.67,0,0,1,2.35-2.36l1.84,1.84,4.85-4.85a1.66,1.66,0,0,1,2.35,2.35l-6,6A1.67,1.67,0,0,1,41.23,54.65Z"/></svg>
|
||||
<!-- <img class="room-tile__icon" src="./assets/illustrations/purchase.svg" alt=""> -->
|
||||
<h4 class="room-tile__title">Buy</h4>
|
||||
</div>
|
||||
</a>
|
||||
</section>
|
||||
@ -156,6 +161,12 @@
|
||||
<div id="room_switcher"></div>
|
||||
</footer>
|
||||
</section>
|
||||
<section>
|
||||
<a class="ext-link-tile" href="https://ranchimall.github.io/bobs-fund/" target="_blank" >
|
||||
<h4 class="tile__title">See this in action</h4>
|
||||
<p class="tile__brief">Visit the website to see investors and asset performance</p>
|
||||
</a>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
|
||||
|
||||
121
css/main.css
121
css/main.css
@ -619,6 +619,10 @@ ol[type="1"] {
|
||||
grid-column: 2/3;
|
||||
}
|
||||
|
||||
.page {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: var(--accent-color);
|
||||
padding: 0.4rem 0.6rem;
|
||||
@ -960,6 +964,7 @@ ol[type="1"] {
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, 0.2);
|
||||
z-index: 2;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.outlet_switcher__floor {
|
||||
@ -991,12 +996,15 @@ ol[type="1"] {
|
||||
align-items: center;
|
||||
justify-self: flex-start;
|
||||
color: var(--accent-color);
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.8rem 0.8rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.outlet-label .icon {
|
||||
fill: var(--accent-color);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
scroll-tab-header {
|
||||
@ -1031,8 +1039,6 @@ scroll-tab-panels > [active] {
|
||||
}
|
||||
|
||||
.rooms__header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -1045,9 +1051,9 @@ scroll-tab-panels > [active] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: calc(500 * var(--font-weight-factor));
|
||||
margin-right: 0.5rem;
|
||||
font-weight: calc(700 * var(--font-weight-factor));
|
||||
padding-right: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.room-button {
|
||||
@ -1127,15 +1133,32 @@ scroll-tab-panels > [active] {
|
||||
}
|
||||
.room-tile--main .tile-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.room-tile .tile-content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
align-self: flex-end;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.room-tile:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.room-tile__icon {
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
}
|
||||
|
||||
.room-tile__title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
#expanding_tile {
|
||||
position: fixed;
|
||||
border-radius: 0.5rem;
|
||||
@ -1152,7 +1175,8 @@ scroll-tab-panels > [active] {
|
||||
z-index: 6;
|
||||
overflow-y: auto;
|
||||
background-color: var(--background-color);
|
||||
align-content: flex-start;
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.room {
|
||||
@ -1169,27 +1193,26 @@ scroll-tab-panels > [active] {
|
||||
}
|
||||
|
||||
#hero_title {
|
||||
font-size: 2.5rem;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
font-weight: calc(700 * var(--font-weight-factor));
|
||||
}
|
||||
|
||||
.room-container__footer {
|
||||
position: sticky;
|
||||
display: grid;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
grid-auto-flow: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
margin-top: auto;
|
||||
padding: 0.5rem;
|
||||
background-color: inherit;
|
||||
overflow-x: auto;
|
||||
align-items: center;
|
||||
padding: 2rem 0.5rem 0.5rem 0.5rem;
|
||||
background: linear-gradient(0deg, var(--background-color) 70%, rgba(0, 0, 0, 0) 100%);
|
||||
}
|
||||
|
||||
#room_switcher {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
gap: 0.5rem;
|
||||
grid-auto-flow: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
@ -1199,6 +1222,57 @@ scroll-tab-panels > [active] {
|
||||
border-radius: 0.3rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
.room-shortcut .room-tile__title {
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.ext-link-tile {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: min(24rem, 100%);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
flex-direction: column;
|
||||
background-size: contain;
|
||||
justify-content: flex-end;
|
||||
background-color: var(--banner-color);
|
||||
box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.2);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ext-link-tile::after, .ext-link-tile::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
}
|
||||
.ext-link-tile::before {
|
||||
top: 5rem;
|
||||
right: -2rem;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
background-color: rgba(var(--text-color), 0.5);
|
||||
}
|
||||
.ext-link-tile::after {
|
||||
top: -2rem;
|
||||
right: -3rem;
|
||||
height: 10rem;
|
||||
width: 10rem;
|
||||
background-color: rgba(var(--text-color), 0.2);
|
||||
}
|
||||
|
||||
.tile__title {
|
||||
padding-top: 1em;
|
||||
font-size: 3rem;
|
||||
line-height: 0.9;
|
||||
color: white;
|
||||
font-weight: calc(900 * var(--font-weight-factor));
|
||||
}
|
||||
|
||||
.tile__brief {
|
||||
margin-top: 1rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.hide-on-mobile {
|
||||
@ -1249,11 +1323,22 @@ scroll-tab-panels > [active] {
|
||||
padding-top: 100%;
|
||||
}
|
||||
.room-tile--main {
|
||||
padding-top: 50%;
|
||||
grid-column: span 2;
|
||||
}
|
||||
.room-tile .tile-content {
|
||||
top: 0;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.room-tile__icon {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
#hero_title {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
@ -1386,6 +1471,10 @@ scroll-tab-panels > [active] {
|
||||
.people-grid {
|
||||
gap: 5rem 3rem;
|
||||
}
|
||||
|
||||
#hero_title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1280px) {
|
||||
#home_page, .page,
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
115
css/main.scss
115
css/main.scss
@ -538,6 +538,10 @@ ol[type="1"]{
|
||||
}
|
||||
}
|
||||
|
||||
.page{
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.tag{
|
||||
background: var(--accent-color);
|
||||
padding: 0.4rem 0.6rem;
|
||||
@ -856,6 +860,7 @@ ol[type="1"]{
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, 0.2);
|
||||
z-index: 2;
|
||||
outline: none;
|
||||
}
|
||||
.outlet_switcher__floor{
|
||||
overflow-x: auto;
|
||||
@ -884,11 +889,14 @@ ol[type="1"]{
|
||||
align-items: center;
|
||||
justify-self: flex-start;
|
||||
color: var(--accent-color);
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.8rem 0.8rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1rem;
|
||||
gap: 0.5rem;
|
||||
.icon{
|
||||
fill: var(--accent-color);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -921,8 +929,6 @@ scroll-tab-panels{
|
||||
}
|
||||
|
||||
.rooms__header{
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -934,9 +940,9 @@ scroll-tab-panels{
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: calc(500 * var(--font-weight-factor));
|
||||
margin-right: 0.5rem;
|
||||
font-weight: calc(700 * var(--font-weight-factor));
|
||||
padding-right: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.room-button{
|
||||
position: relative;
|
||||
@ -1011,16 +1017,31 @@ scroll-tab-panels{
|
||||
grid-row: span 2;
|
||||
.tile-content{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.tile-content{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
align-self: flex-end;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
&:active{
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
.room-tile__icon{
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
}
|
||||
.room-tile__title{
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
#expanding_tile{
|
||||
position: fixed;
|
||||
border-radius: 0.5rem;
|
||||
@ -1037,7 +1058,8 @@ scroll-tab-panels{
|
||||
z-index: 6;
|
||||
overflow-y: auto;
|
||||
background-color: var(--background-color);
|
||||
align-content: flex-start;
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.room{
|
||||
padding-bottom: 4rem;
|
||||
@ -1052,26 +1074,25 @@ scroll-tab-panels{
|
||||
padding: 1rem 0;
|
||||
}
|
||||
#hero_title{
|
||||
font-size: 2.5rem;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
font-weight: calc(700 * var(--font-weight-factor));
|
||||
}
|
||||
|
||||
.room-container__footer{
|
||||
position: sticky;
|
||||
display: grid;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
grid-auto-flow: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
margin-top: auto;
|
||||
padding: 0.5rem;
|
||||
background-color: inherit;
|
||||
overflow-x: auto;
|
||||
align-items: center;
|
||||
padding: 2rem 0.5rem 0.5rem 0.5rem;
|
||||
background: linear-gradient(0deg, var(--background-color) 70%, rgba(0,0,0,0) 100%);
|
||||
}
|
||||
#room_switcher{
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
gap: 0.5rem;
|
||||
grid-auto-flow: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
@ -1080,6 +1101,56 @@ scroll-tab-panels{
|
||||
padding: 0.5em 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
.room-tile__title{
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ext-link-tile{
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: min(24rem, 100%);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
flex-direction: column;
|
||||
background-size: contain;
|
||||
justify-content: flex-end;
|
||||
background-color: var(--banner-color);
|
||||
box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.2);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
overflow: hidden;
|
||||
&::after,
|
||||
&::before{
|
||||
position: absolute;
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
}
|
||||
&::before{
|
||||
top: 5rem;
|
||||
right: -2rem;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
background-color: rgba(var(--text-color), 0.5);
|
||||
}
|
||||
&::after{
|
||||
top: -2rem;
|
||||
right: -3rem;
|
||||
height: 10rem;
|
||||
width: 10rem;
|
||||
background-color: rgba(var(--text-color), 0.2);
|
||||
}
|
||||
}
|
||||
.tile__title{
|
||||
padding-top: 1em;
|
||||
font-size: 3rem;
|
||||
line-height: 0.9;
|
||||
color: white;
|
||||
font-weight: calc(900 * var(--font-weight-factor));
|
||||
}
|
||||
.tile__brief{
|
||||
margin-top: 1rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
@ -1122,13 +1193,22 @@ scroll-tab-panels{
|
||||
.room-tile{
|
||||
padding-top: 100%;
|
||||
&--main{
|
||||
padding-top: 50%;
|
||||
grid-column: span 2;
|
||||
}
|
||||
.tile-content{
|
||||
top: 0;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.room-tile__icon{
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
}
|
||||
#hero_title{
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
#home_page,.page,
|
||||
@ -1250,6 +1330,9 @@ scroll-tab-panels{
|
||||
.people-grid{
|
||||
gap: 5rem 3rem;
|
||||
}
|
||||
#hero_title{
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1280px) {
|
||||
#home_page, .page,
|
||||
|
||||
@ -707,12 +707,14 @@ function showOutletSwitcher(button) {
|
||||
`top: ${buttonDimensions.top + document.documentElement.scrollTop
|
||||
}px; left: ${buttonDimensions.left}px;`
|
||||
);
|
||||
getRef("outlet_switcher").classList.remove("hide");
|
||||
getRef("outlet_switcher").classList.remove("hide-completely");
|
||||
getRef("outlet_switcher").animate(slideInDown, {
|
||||
duration: 300,
|
||||
easing: easeOutOvershoot,
|
||||
fill: "forwards",
|
||||
});
|
||||
getRef("outlet_switcher").setAttribute('tabindex', '-1')
|
||||
getRef("outlet_switcher").focus()
|
||||
}
|
||||
|
||||
function hideOutletSwitcher() {
|
||||
@ -722,7 +724,7 @@ function hideOutletSwitcher() {
|
||||
easing: easeInOvershoot,
|
||||
fill: "forwards",
|
||||
}).onfinish = () => {
|
||||
getRef("outlet_switcher").classList.add("hide");
|
||||
getRef("outlet_switcher").classList.add("hide-completely");
|
||||
isOutletSwitcherOpen = false;
|
||||
};
|
||||
}
|
||||
@ -929,6 +931,8 @@ function renderRoomShorcuts() {
|
||||
if (room.href.split('#').pop() !== window.location.hash.split('#').pop()) {
|
||||
const clone = room.cloneNode(true)
|
||||
clone.classList.remove('room-tile', 'room-tile--main')
|
||||
if(clone.querySelector('img, svg'))
|
||||
clone.querySelector('img, svg').remove()
|
||||
clone.classList.add('room-shortcut')
|
||||
frag.append(clone)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user