First commit
This commit is contained in:
Vivek Teega
commit
96162a9024
358
components.js
Normal file
358
components.js
Normal file
@ -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))
|
||||
}
|
||||
})
|
||||
220
css/main.css
Normal file
220
css/main.css
Normal file
@ -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 */
|
||||
9
css/main.css.map
Normal file
9
css/main.css.map
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"sources": [
|
||||
"main.scss"
|
||||
],
|
||||
"names": [],
|
||||
"file": "main.css"
|
||||
}
|
||||
152
css/main.scss
Normal file
152
css/main.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
159
index.html
Normal file
159
index.html
Normal file
@ -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>
|
||||
BIN
resources/flo-0.15.2-win64-setup-unsigned.exe
Normal file
BIN
resources/flo-0.15.2-win64-setup-unsigned.exe
Normal file
Binary file not shown.
BIN
resources/flo-webwallet.png
Normal file
BIN
resources/flo-webwallet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
resources/image1.jpeg
Normal file
BIN
resources/image1.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
resources/incorporation_summary.PNG
Normal file
BIN
resources/incorporation_summary.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
resources/tokenincorporation.PNG
Normal file
BIN
resources/tokenincorporation.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
resources/tokenincorporation_floscout.PNG
Normal file
BIN
resources/tokenincorporation_floscout.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Loading…
Reference in New Issue
Block a user