commit 96162a9024b1a25dcca4c9ad405c7e82e9fe31d6
Author: Vivek Teega <vivek.teega@gmail.com>
Date:   Sat Aug 22 03:01:05 2020 +0530

    First commit

diff --git a/components.js b/components.js
new file mode 100644
index 0000000..ce067c5
--- /dev/null
+++ b/components.js
@@ -0,0 +1,358 @@
+//Button
+const smButton = document.createElement('template')
+smButton.innerHTML = `
+        <style>     
+            *{
+                padding: 0;
+                margin: 0;
+                box-sizing: border-box;
+            }       
+            :host{
+                display: inline-flex;
+            }
+            :host([disabled]) .button{
+                cursor: default;
+                opacity: 1;
+                background: rgba(var(--text-color), 0.4) !important;
+                color: rgba(var(--foreground-color), 1);
+            }
+            :host([variant='primary']) .button{
+                background: hsl(var(--hue), var(--saturation), var(--lightness));
+                color: rgba(var(--foreground-color), 1);
+            }
+            :host([variant='outlined']) .button{
+                box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;
+                background: rgba(var(--foreground-color), 1); 
+                color: var(--accent-color);
+            }
+            :host([variant='no-outline']) .button{
+                background: rgba(var(--foreground-color), 1); 
+                color: var(--accent-color);
+            }
+            .button {
+                display: flex;
+                width: 100%;
+                padding: 0.6rem 1rem;
+                cursor: pointer;
+                user-select: none;
+                border-radius: 0.3rem; 
+                justify-content: center;
+                transition: box-shadow 0.3s;
+                text-transform: capitalize;
+                font-size: 0.9em;
+                font-weight: 500;
+                color: rgba(var(--text-color), 0.9);
+                font-family: var(--font-family);
+                background: rgba(var(--text-color), 0.1); 
+                -webkit-tap-highlight-color: transparent;
+                outline: none;
+            }
+            :host(:not([disabled])) .button:focus{
+                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
+            }
+            :host([variant='outlined']) .button:focus{
+                box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
+            }
+            @media (hover: hover){
+                :host(:not([disabled])) .button:active{
+                    box-shadow: none !important;
+                }
+                :host([variant='outlined']) .button:active{
+                    box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset !important;
+                }
+                :host(:not([disabled])) .button:hover{
+                    box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
+                }
+                :host([variant='outlined']) .button:hover{
+                    box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
+                }
+                :host([variant="primary"]:not([disabled])) .button:active{
+                    background: hsl(var(--hue), var(--saturation), calc(var(--lightness) - 20%)) !important;
+                }
+                :host([variant="primary"]:not([disabled])) .button:hover{
+                    background: hsl(var(--hue), var(--saturation), calc(var(--lightness) - 10%));
+                }
+            }
+            @media (hover: none){
+                :host(:not([disabled])) .button:active{
+                    box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
+                }
+                :host([variant='outlined']) .button:active{
+                    box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
+                }
+            }
+        </style>
+        <div part="button" class="button" tabindex="0" role="button">
+            <slot></slot>   
+        </div>`;
+customElements.define('sm-button',
+    class extends HTMLElement {
+        constructor() {
+            super()
+            this.attachShadow({ mode: 'open' }).append(smButton.content.cloneNode(true))
+        }
+
+        get disabled() {
+            return this.isDisabled
+        }
+
+        set disabled(value) {
+            if (value && !this.isDisabled) {
+                this.isDisabled = true
+                this.setAttribute('disabled', '')
+                this.button.removeAttribute('tabindex')
+            }
+            else if (this.isDisabled) {
+                this.isDisabled = false
+                this.removeAttribute('disabled')
+            }
+        }
+
+        dispatch() {
+            if (this.isDisabled) {
+                this.dispatchEvent(new CustomEvent('disabled', {
+                    bubbles: true,
+                    composed: true
+                }))
+            }
+            else {
+                this.dispatchEvent(new CustomEvent('clicked', {
+                    bubbles: true,
+                    composed: true
+                }))
+            }
+        }
+
+        connectedCallback() {
+            this.isDisabled = false
+            this.button = this.shadowRoot.querySelector('.button')
+            if (this.hasAttribute('disabled') && !this.isDisabled)
+                this.isDisabled = true
+            this.addEventListener('click', (e) => {
+                this.dispatch()
+            })
+            this.addEventListener('keyup', (e) => {
+                if (e.code === "Enter" || e.code === "Space")
+                    this.dispatch()
+            })
+        }
+    })
+
+//carousel
+
+const smCarousel = document.createElement('template')
+smCarousel.innerHTML = `
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    } 
+    :host{
+        display: flex;
+    }
+    .icon {
+        position: absolute;
+        display: flex;
+        fill: none;
+        height: 2.6rem;
+        width: 2.6rem;
+        border-radius: 3rem;
+        padding: 0.9rem;
+        stroke: rgba(var(--foreground-color), 0.8);
+        stroke-width: 14;
+        overflow: visible;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        cursor: pointer;
+        min-width: 0;
+        background: rgba(var(--text-color), 1);
+        box-shadow: 0 0.2rem 0.2rem #00000020, 
+                    0 0.5rem 1rem #00000040; 
+        -webkit-tap-highlight-color: transparent;
+        transform: scale(0)
+    }
+    .hide{
+        pointer-events: none;
+        opacity: 0;
+    }
+    .expand{
+        transform: scale(1)
+    }
+    .previous-item{
+        left: 1rem;
+    }
+    .next-item{
+        right: 1rem;
+    }
+    .left,.right{
+        position: absolute;
+        width: 2rem;
+        height: 100%; 
+        transition: opacity 0.3s;
+    }
+    .left{
+        background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 0.6))
+    }
+    .right{
+        right: 0;
+        background: linear-gradient(to right, transparent, rgba(var(--foreground-color), 0.6))
+    }
+    .carousel-container{
+        position: relative;
+        display: flex;
+        width: 100%;
+        align-items: center;
+    }
+    .carousel{
+        display: flex;
+        max-width: 100%;
+        overflow: auto hidden;
+        scroll-snap-type: x mandatory;
+    }
+    slot::slotted(*){
+        scroll-snap-align: center;
+    }
+    :host([align-items="start"]) slot::slotted(*){
+        scroll-snap-align: start;
+    }
+    :host([align-items="center"]) slot::slotted(*){
+        scroll-snap-align: center;
+    }
+    :host([align-items="end"]) slot::slotted(*){
+        scroll-snap-align: end;
+    }
+    @media (hover: hover){
+        .carousel{
+            overflow: hidden;
+        }
+        .left,.right{
+            display: none;
+        }
+    }
+    @media (hover: none){
+        ::-webkit-scrollbar-track {
+            -webkit-box-shadow: none !important;
+            background-color: transparent !important;
+        }
+        ::-webkit-scrollbar {
+            height: 0;
+            background-color: transparent;
+        }
+        .carousel{
+            overflow: auto none;
+        }
+        .icon{
+            display: none;
+        }
+        .left,.right{
+            display: block;
+        }
+    }
+</style>
+<div class="carousel-container">
+    <div class="left"></div>
+    <svg class="icon previous-item" viewBox="4 0 64 64">
+        <title>Previous</title>
+        <polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
+    </svg>
+    <div part="carousel" class="carousel">
+        <slot></slot>
+    </div>
+    <svg class="icon next-item" viewBox="-6 0 64 64">
+        <title>Next</title>
+        <polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
+    </svg>
+    <div class="right"></div>
+</div>
+`;
+
+customElements.define('sm-carousel', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({ mode: 'open' }).append(smCarousel.content.cloneNode(true))
+    }
+
+    scrollLeft() {
+        this.carousel.scrollBy({
+            top: 0,
+            left: -this.scrollDistance,
+            behavior: 'smooth'
+        })
+    }
+
+    scrollRight() {
+        this.carousel.scrollBy({
+            top: 0,
+            left: this.scrollDistance,
+            behavior: 'smooth'
+        })
+    }
+
+    connectedCallback() {
+        this.carousel = this.shadowRoot.querySelector('.carousel')
+        this.carouselContainer = this.shadowRoot.querySelector('.carousel-container')
+        this.carouselSlot = this.shadowRoot.querySelector('slot')
+        this.nextArrow = this.shadowRoot.querySelector('.next-item')
+        this.previousArrow = this.shadowRoot.querySelector('.previous-item')
+        this.nextGradient = this.shadowRoot.querySelector('.right')
+        this.previousGradient = this.shadowRoot.querySelector('.left')
+        this.carouselItems
+        this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3
+        const firstElementObserver = new IntersectionObserver(entries => {
+            if (entries[0].isIntersecting) {
+                this.previousArrow.classList.remove('expand')
+                this.previousGradient.classList.add('hide')
+            }
+            else {
+                this.previousArrow.classList.add('expand')
+                this.previousGradient.classList.remove('hide')
+            }
+        }, {
+            root: this.carouselContainer,
+            threshold: 0.9
+        })
+        const lastElementObserver = new IntersectionObserver(entries => {
+            if (entries[0].isIntersecting) {
+                this.nextArrow.classList.remove('expand')
+                this.nextGradient.classList.add('hide')
+            }
+            else {
+                this.nextArrow.classList.add('expand')
+                this.nextGradient.classList.remove('hide')
+            }
+        }, {
+            root: this.carouselContainer,
+            threshold: 0.9
+        })
+
+        const carouselObserver = new IntersectionObserver(entries => {
+            if (entries[0].isIntersecting) {
+                this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3
+            }
+        })
+
+        carouselObserver.observe(this.carouselContainer)
+
+        this.carouselSlot.addEventListener('slotchange', e => {
+            this.carouselItems = this.carouselSlot.assignedElements()
+            firstElementObserver.observe(this.carouselItems[0])
+            lastElementObserver.observe(this.carouselItems[this.carouselItems.length - 1])
+        })
+
+        this.addEventListener('keyup', e => {
+            if (e.code === 'ArrowLeft')
+                this.scrollRight()
+            else
+                this.scrollRight()
+        })
+
+        this.nextArrow.addEventListener('click', this.scrollRight.bind(this))
+        this.previousArrow.addEventListener('click', this.scrollLeft.bind(this))
+    }
+
+    disconnectedCallback() {
+        this.nextArrow.removeEventListener('click', this.scrollRight.bind(this))
+        this.previousArrow.removeEventListener('click', this.scrollLeft.bind(this))
+    }
+})
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..d4c26fa
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,220 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Poppins:wght@400;500;600;700;800;900&display=swap");
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  font-family: 'Open sans', sans-serif;
+}
+
+body {
+  font-size: 16px;
+  --accent-color: hsl(268,74,51);
+  --hue: 268;
+  --saturation: 74%;
+  --lightness: 51%;
+  --text-color: 17, 17, 17;
+  --foreground-color: 255, 255, 255;
+  scroll-behavior: smooth;
+  overflow: hidden;
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-rows: auto 1fr;
+      grid-template-rows: auto 1fr;
+}
+
+main {
+  -ms-scroll-snap-type: y mandatory;
+      scroll-snap-type: y mandatory;
+  max-height: calc(100vh - 6rem);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  overflow-y: auto;
+}
+
+a:-webkit-any-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+a:-moz-any-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+a:any-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+h1, h2, h3, h4, h5 {
+  font-family: 'Poppins', sans-serif;
+  font-weight: 600;
+}
+
+h1 {
+  font-size: 2rem;
+  line-height: 1;
+  margin-bottom: 1rem;
+  word-spacing: 0.12em;
+  max-width: 20ch;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+h4 {
+  font-size: 1rem;
+}
+
+h5 {
+  font-size: 0.8rem;
+}
+
+p {
+  font-family: 'Open sans', sans-serif;
+  line-height: 1.6;
+  max-width: 70ch;
+  color: rgba(0, 0, 0, 0.9);
+}
+
+header {
+  z-index: 2;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  height: 6rem;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 1.5rem;
+}
+
+header .identity {
+  text-transform: uppercase;
+  margin-left: auto;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+section {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  padding: 1.5rem;
+  min-height: 100vh;
+  scroll-snap-align: start;
+}
+
+section h1 {
+  text-transform: uppercase;
+  font-weight: 800;
+}
+
+section sm-button {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  margin-top: 1.5rem;
+  font-family: 'Poppins', sans-serif;
+}
+
+.card {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 18rem;
+  min-width: 18rem;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  margin-right: 1.5rem;
+  border-radius: 0.2rem;
+  background: rgba(0, 0, 0, 0.06);
+  border: solid 1px rgba(0, 0, 0, 0.1);
+}
+
+.card img {
+  height: 100%;
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.card p, .card h4 {
+  padding: 0 1rem;
+}
+
+.card h4 {
+  padding-top: 1rem;
+}
+
+.card p {
+  padding-bottom: 1rem;
+}
+
+.link img {
+  height: 6rem;
+}
+
+sm-carousel {
+  margin-top: 3rem;
+  margin-left: -1.5rem;
+}
+
+sm-carousel::part(carousel) {
+  padding: 1.5rem;
+}
+
+@media screen and (min-width: 640px) {
+  h1 {
+    font-size: 4rem;
+  }
+  section, header {
+    padding: 2rem 4rem;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  section, header {
+    padding: 2rem 6vw;
+  }
+}
+
+@media screen and (min-width: 1920px) {
+  body {
+    font-size: 18px;
+  }
+  section, header {
+    padding: 2rem 8vw;
+  }
+}
+/*# sourceMappingURL=main.css.map */
\ No newline at end of file
diff --git a/css/main.css.map b/css/main.css.map
new file mode 100644
index 0000000..5bf60e0
--- /dev/null
+++ b/css/main.css.map
@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "main.scss"
+    ],
+    "names": [],
+    "file": "main.css"
+}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
new file mode 100644
index 0000000..b5a0042
--- /dev/null
+++ b/css/main.scss
@@ -0,0 +1,152 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Poppins:wght@400;500;600;700;800;900&display=swap');
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Open sans', sans-serif;
+}
+body{
+    font-size: 16px;
+    --accent-color: hsl(268,74,51);
+    --hue: 268;
+    --saturation: 74%;
+    --lightness: 51%;
+    --text-color: 17, 17, 17;
+    --foreground-color: 255, 255, 255;
+    scroll-behavior: smooth;
+    overflow: hidden;
+    display: grid;
+    grid-template-rows: auto 1fr;
+}
+main{
+    scroll-snap-type: y mandatory;
+    max-height: calc(100vh - 6rem);
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+}
+a:any-link{
+    text-decoration: none;
+    color: inherit;
+}
+h1, h2, h3, h4, h5{
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+}
+h1{
+    font-size: 2rem;
+    line-height: 1;
+    margin-bottom: 1rem;
+    word-spacing: 0.12em;
+    max-width: 20ch;
+}
+h2{
+    font-size: 2rem;
+}
+h3{
+    font-size: 1.5rem;
+}
+h4{
+    font-size: 1rem;
+}
+h5{
+    font-size: 0.8rem;
+}
+p{
+    font-family: 'Open sans', sans-serif;
+    line-height: 1.6;
+    max-width: 70ch;
+    color: rgba($color: #000000, $alpha: 0.9);
+}
+header{
+    z-index: 2;
+    position: sticky;
+    top: 0;
+    height: 6rem;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    padding: 1.5rem;
+    .identity{
+        text-transform: uppercase;
+        margin-left: auto;
+        color: rgba($color: #000000, $alpha: 0.6);
+    }
+}
+section{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1;
+    padding: 1.5rem;
+    min-height: 100vh;
+    scroll-snap-align: start;
+    h1{
+        text-transform: uppercase;
+        font-weight: 800;
+    }
+    sm-button{
+        display: inline-flex;
+        width: max-content;
+        margin-top: 1.5rem;
+        font-family: 'Poppins', sans-serif;
+    }
+}
+.card{
+    display: flex;
+    width: 18rem;
+    min-width: 18rem;
+    overflow: hidden;
+    flex-direction: column;
+    margin-right: 1.5rem;
+    border-radius: 0.2rem;
+    background: rgba($color: #000000, $alpha: 0.06);
+    border: solid 1px rgba($color: #000000, $alpha: 0.1);
+    img{
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+    }
+    p, h4{
+        padding: 0 1rem;
+    }
+    h4{
+        padding-top: 1rem;
+    }
+    p{
+        padding-bottom: 1rem;
+    }
+}
+.link{
+    img{
+        height: 6rem;
+    }
+}
+sm-carousel{
+    margin-top: 3rem;
+    margin-left: -1.5rem;
+}
+sm-carousel::part(carousel){
+    padding: 1.5rem;
+}
+@media screen and (min-width: 640px){
+    h1{
+        font-size: 4rem;
+    }
+    section, header{
+        padding: 2rem 4rem;
+    }
+}
+@media screen and (min-width: 1280px){
+    section, header{
+        padding: 2rem 6vw;
+    }
+}
+@media screen and (min-width: 1920px){
+    body{
+        font-size: 18px;
+    }
+    section, header{
+        padding: 2rem 8vw;
+    }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..9f7d9f1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Itinerary</title>
+    <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+    <header>
+        <h4>RANCHIMALL</h4>
+        <h4 class="identity">Resources</h4>
+    </header>
+    <main>
+        <section>
+            <h1>Incorporation</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni ad adipisci tempore quae unde, recusandae laborum? Molestiae, eum accusamus.</p>
+            <sm-carousel>
+                <a href="https://flosight.duckdns.org/tx/0c7f3e8b8b5924d8b348aba74a633a9fac3d99d6656d235e34ca00c57f993ba7" target='blank' class="card link">
+                    <img src="resources/incorporation_summary.png" alt="">
+                    <h4>Incorporation message (Flosight)</h4>
+                    <p></p>
+                </a>
+                <a href="https://flosight.duckdns.org/tx/a74a03ec1e77fa50e0b586b1e9745225ad4f78ce96ca59d6ac025f8057dd095c" target='blank' class="card link">
+                    <img src="resources/tokenincorporation.png" alt="">
+                    <h4>Incorporation flodata (Flosight)</h4>
+                    <p></p>
+                </a>
+                <a href="https://ranchimall.github.io/floscout/#a74a03ec1e77fa50e0b586b1e9745225ad4f78ce96ca59d6ac025f8057dd095c" target='blank' class="card link">
+                    <img src="resources/tokenincorporation_floscout.png" alt="">
+                    <h4>Incorporation flodata (Floscout)</h4>
+                    <p></p>
+                </a>
+            </sm-carousel>
+        </section>
+        <section>
+            <h1>Blockchain Contracts</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni ad adipisci tempore quae unde, recusandae laborum? Molestiae, eum accusamus.</p>
+            <sm-carousel>
+                <a href="https://medium.com/ranchimall/fixing-smart-contracts-here-comes-blockchain-contracts-ca0243ef506f" target='blank' class="card link">
+                    <h4>Fixing Smart Contracts : Blockchain Contracts</h4>
+                    <p></p>
+                </a>
+                <a href="https://medium.com/ranchimall/introduction-to-blockchain-contracts-cc48b42e4174" target='blank' class="card link">
+                    <h4>Introduction to Blockchain Contracts</h4>
+                    <p></p>
+                </a>
+                <a href="https://medium.com/ranchimall/guidelines-for-management-of-ranchi-mall-blockchain-contracts-b579e1d59859" target='blank' class="card link">
+                    <h4>Guidelines for Management of Blockchain Contracts</h4>
+                    <p></p>
+                </a>
+                <a href="https://medium.com/ranchimall/flo-blockchain-contract-ranchi-mall-introduction-e6c1f9eda83e" target='blank' class="card link">
+                    <h4>FLO Blockchain Contract</h4>
+                    <p></p>
+                </a>
+                <a href="https://medium.com/ranchimall/ranchi-mall-internship-blockchain-contract-b00193fd188c" target='blank' class="card link">
+                    <h4>Internship Blockchain Contract</h4>
+                    <p></p>
+                </a>
+            </sm-carousel>
+        </section>
+        <section>
+            <h1>Web & Walletless architecture</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni ad adipisci tempore quae unde, recusandae laborum? Molestiae, eum accusamus.</p>
+            <sm-carousel>
+                <a href="https://flo-webwallet.duckdns.org/" target='blank' class="card link">
+                    <img src="resources/flo-webwallet.png" alt="">
+                    <h4>FLO Webwallet</h4>
+                    <p></p>
+                </a>
+            </sm-carousel>
+        </section>
+        <section>
+            <h1>Blockchain based data cloud</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni ad adipisci tempore quae unde, recusandae laborum? Molestiae, eum accusamus.</p>
+            <sm-button variant="primary">READ MORE</sm-button>
+        </section>
+        <section>
+            <h1>Architecture for FLO based Applications</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni ad adipisci tempore quae unde, recusandae laborum? Molestiae, eum accusamus.</p>
+            <a href="https://github.com/ranchimall/Standard_Operations" target='blank' class="link">
+                <sm-button variant="primary">READ MORE</sm-button>
+            </a>
+        </section>
+        <section>
+            <h1>Token Transfer System</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni ad adipisci tempore quae unde, recusandae laborum? Molestiae, eum accusamus.</p>
+            <a href="https://medium.com/ranchimall/introducing-natural-language-based-token-creation-transfer-system-on-flo-blockchain-e4bc944b2c28" target='blank' class="link">
+                <sm-button variant="primary">READ MORE</sm-button>
+            </a>
+        </section>
+        <section>
+            <h1>Smart Contract System</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni ad adipisci tempore quae unde, recusandae laborum? Molestiae, eum accusamus.</p>
+            <sm-button variant="primary">READ MORE</sm-button>
+        </section>
+        <section>
+            <h1>Single data Authentication</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni ad adipisci tempore quae unde, recusandae laborum? Molestiae, eum accusamus.</p>
+            <sm-button variant="primary">READ MORE</sm-button>
+        </section>
+        <section>
+            <h1>Content Collaboration as a sample application</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni ad adipisci tempore quae unde, recusandae laborum? Molestiae, eum accusamus.</p>
+            <sm-button variant="primary">READ MORE</sm-button>
+        </section>
+        <section>
+            <h1>Connecting with other networks like TOR and TORRENT</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni ad adipisci tempore quae unde, recusandae laborum? Molestiae, eum accusamus.</p>
+            <sm-button variant="primary">READ MORE</sm-button>
+        </section>
+        <section>
+            <h1>WhatsApp, Google and Twitter on the FLO</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni ad adipisci tempore quae unde, recusandae laborum? Molestiae, eum accusamus.</p>
+            <sm-button variant="primary">READ MORE</sm-button>
+        </section>
+        <section>
+            <h1>Banking and Financial Applications on FLO</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni ad adipisci tempore quae unde, recusandae laborum? Molestiae, eum accusamus.</p>
+            <sm-button variant="primary">READ MORE</sm-button>
+        </section>
+        <section>
+            <h1>Distributed Exchange: An extension of Local Bitcoins</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni ad adipisci tempore quae unde, recusandae laborum? Molestiae, eum accusamus.</p>
+            <sm-button variant="primary">READ MORE</sm-button>
+        </section>
+        <section>
+            <h1>FLO Sheets</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni ad adipisci tempore quae unde, recusandae laborum? Molestiae, eum accusamus.</p>
+            <sm-button variant="primary">READ MORE</sm-button>
+        </section>
+        <section>
+            <h1>Labor market using Blockchain</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni ad adipisci tempore quae unde, recusandae laborum? Molestiae, eum accusamus.</p>
+            <sm-button variant="primary">READ MORE</sm-button>
+        </section>
+        <section>
+            <h1>FLO Messenger</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni ad adipisci tempore quae unde, recusandae laborum? Molestiae, eum accusamus.</p>
+            <sm-button variant="primary">READ MORE</sm-button>
+        </section>
+        <section>
+            <h1>Incorporation</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni ad adipisci tempore quae unde, recusandae laborum? Molestiae, eum accusamus.</p>
+            <sm-carousel>
+                <div class="card">
+                    <img src="resources/image1.jpeg" alt="">
+                </div>
+                <a href="" class="card link">
+                    <img src="resources/incorporation_summary.jpeg" alt="">
+                    <h4>Flosight</h4>
+                    <p>Lorem ipsum dolor sit amet consectetur.</p>
+                </a>
+            </sm-carousel>
+        </section>        
+    </main>
+    <script src="components.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/resources/flo-0.15.2-win64-setup-unsigned.exe b/resources/flo-0.15.2-win64-setup-unsigned.exe
new file mode 100644
index 0000000..9a823a3
Binary files /dev/null and b/resources/flo-0.15.2-win64-setup-unsigned.exe differ
diff --git a/resources/flo-webwallet.png b/resources/flo-webwallet.png
new file mode 100644
index 0000000..c258229
Binary files /dev/null and b/resources/flo-webwallet.png differ
diff --git a/resources/image1.jpeg b/resources/image1.jpeg
new file mode 100644
index 0000000..e41b4fa
Binary files /dev/null and b/resources/image1.jpeg differ
diff --git a/resources/incorporation_summary.PNG b/resources/incorporation_summary.PNG
new file mode 100644
index 0000000..f4a073b
Binary files /dev/null and b/resources/incorporation_summary.PNG differ
diff --git a/resources/tokenincorporation.PNG b/resources/tokenincorporation.PNG
new file mode 100644
index 0000000..1876c4b
Binary files /dev/null and b/resources/tokenincorporation.PNG differ
diff --git a/resources/tokenincorporation_floscout.PNG b/resources/tokenincorporation_floscout.PNG
new file mode 100644
index 0000000..71e39fe
Binary files /dev/null and b/resources/tokenincorporation_floscout.PNG differ