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

Design changes

Browse Source
This commit is contained in:
sairaj mote 2023-06-27 13:01:58 +05:30
parent c5220bcf20
commit f3a90e3e11
4 changed files with 193 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
css/main.css
View File

@ -55,19 +55,19 @@ img {
} }
h1 { h1 {
font-size: max(1.8rem, 4vw); font-size: max(2rem, 4vw);
} }
h2 { h2 {
font-size: max(1.5rem, 3vw); font-size: max(1.8rem, 3vw);
} }
h3 { h3 {
font-size: max(1.2rem, 2vw); font-size: max(1.5rem, 2vw);
} }
h4 { h4 {
font-size: max(1rem, 1.3vw); font-size: max(1.2rem, 1.3vw);
} }
img { img {
@ -193,6 +193,10 @@ button,
gap: 4rem; gap: 4rem;
} }
.gap-5 {
gap: 5rem;
}
.text-center { .text-center {
text-align: center; text-align: center;
} }
@ -266,21 +270,14 @@ article > * {
#above_fold h2 { #above_fold h2 {
position: relative; position: relative;
margin: auto; margin: auto;
text-align: center;
} }
#above_fold ol { #above_fold__section {
display: block;
padding-left: 0;
}
#above_fold ol li {
page-break-inside: avoid;
-moz-column-break-inside: avoid;
break-inside: avoid;
margin-bottom: 5rem;
justify-content: center; justify-content: center;
justify-self: center; justify-self: center;
text-align: center; text-align: center;
} }
#above_fold ol li::after { #above_fold__section::after {
content: ""; content: "";
display: block; display: block;
width: 100%; width: 100%;
@ -289,8 +286,44 @@ article > * {
margin: auto; margin: auto;
margin-top: 5rem; margin-top: 5rem;
} }
#above_fold ol p { #above_fold .milestones {
text-align: justify; display: grid;
justify-content: flex-start;
justify-items: flex-start;
}
#above_fold .milestones--title-only .milestone {
grid-template-areas: "label title";
}
#above_fold .milestones--description-only .milestone {
grid-template-areas: "label description";
}
#above_fold .milestone {
display: grid;
max-width: 42rem;
width: auto;
gap: 1rem 2rem;
align-items: center;
justify-content: flex-start;
padding-right: 0;
}
#above_fold .milestone:not(:last-child) {
padding-bottom: 3rem;
}
#above_fold .milestone__label {
grid-area: label;
align-items: flex-start;
justify-content: center;
background-color: rgba(var(--text-color), 1);
color: rgba(var(--foreground-color), 1);
}
#above_fold .milestone__label::before {
width: 0.1rem;
height: 100%;
background-color: rgba(var(--text-color), 0.5);
}
#above_fold .milestone__title {
grid-area: title;
margin-top: -0.1em;
} }
#hero_illustration { #hero_illustration {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

86
css/main.scss
View File

@ -50,16 +50,16 @@ img {
object-fit: cover; object-fit: cover;
} }
h1 { h1 {
font-size: max(1.8rem, 4vw); font-size: max(2rem, 4vw);
} }
h2 { h2 {
font-size: max(1.5rem, 3vw); font-size: max(1.8rem, 3vw);
} }
h3 { h3 {
font-size: max(1.2rem, 2vw); font-size: max(1.5rem, 2vw);
} }
h4 { h4 {
font-size: max(1rem, 1.3vw); font-size: max(1.2rem, 1.3vw);
} }
img { img {
object-fit: contain; object-fit: contain;
@ -158,6 +158,9 @@ button,
.gap-4 { .gap-4 {
gap: 4rem; gap: 4rem;
} }
.gap-5 {
gap: 5rem;
}
.text-center { .text-center {
text-align: center; text-align: center;
} }
@ -228,30 +231,63 @@ article {
h2 { h2 {
position: relative; position: relative;
margin: auto; margin: auto;
text-align: center;
} }
ol { &__section {
display: block; justify-content: center;
padding-left: 0; justify-self: center;
li { text-align: center;
page-break-inside: avoid; &::after {
break-inside: avoid; content: "";
margin-bottom: 5rem; display: block;
// color: rgba(var(--foreground-color), 1); width: 100%;
justify-content: center; height: 1px;
justify-self: center; background: rgba(var(--text-color), 1);
text-align: center; margin: auto;
&::after { margin-top: 5rem;
content: ""; }
display: block; }
width: 100%; .milestones {
height: 1px; display: grid;
background: rgba(var(--text-color), 1); justify-content: flex-start;
margin: auto; justify-items: flex-start;
margin-top: 5rem; &--title-only {
.milestone {
grid-template-areas: "label title";
} }
} }
p { &--description-only {
text-align: justify; .milestone {
grid-template-areas: "label description";
}
}
}
.milestone {
display: grid;
max-width: 42rem;
width: auto;
gap: 1rem 2rem;
align-items: center;
justify-content: flex-start;
padding-right: 0;
&:not(:last-child) {
padding-bottom: 3rem;
}
&__label {
grid-area: label;
align-items: flex-start;
justify-content: center;
background-color: rgba(var(--text-color), 1);
color: rgba(var(--foreground-color), 1);
&::before {
width: 0.1rem;
height: 100%;
background-color: rgba(var(--text-color), 0.5);
}
}
&__title {
grid-area: title;
margin-top: -0.1em;
} }
} }
} }

122
index.html
View File

@ -34,54 +34,96 @@
</span> </span>
</h2> </h2>
<!-- <img id="hero_illustration" src="assets/svg/cityscape.svg" alt=""> --> <!-- <img id="hero_illustration" src="assets/svg/cityscape.svg" alt=""> -->
<ol class="grid gap-3" type="1"> <div class="grid" style="gap: 8rem;">
<li class="grid gap-1"> <div class="grid gap-2 above_fold__section">
<h3>What is Project B</h3> <h3>What is Project B</h3>
<p> <p>
Project B executes tokenization projects based on blockchain technology. Project B executes tokenization projects based on blockchain technology.
</p> </p>
</li> </div>
<li class="grid gap-1"> <div class="grid gap-2 above_fold__section">
<h3> <h3>
What is tokenization What is tokenization
</h3> </h3>
<p> <ul class="milestones milestones--description-only">
Tokenization in blockchain enables the digital representation, transfer, and management of <li class="milestone">
real-world <div class="milestone__label">1</div>
assets or values, making transactions more efficient and expanding the possibilities for <p class="milestone__description">
decentralized Tokenization in blockchain enables the digital representation, transfer, and
economic systems. management
</p> of
<p> real-world
A good tokenization project enables self funding of a new project through investors all over the assets or values, making transactions more efficient and expanding the possibilities
world. for
</p> decentralized
<p> economic systems.
It also converts customers automatically into investors and vice-versa.
</p> </p>
</li> </li>
<li class="grid gap-1"> <li class="milestone">
<div class="milestone__label">2</div>
<p class="milestone__description">
A good tokenization project enables self funding of a new project through investors
all
over
the
world.
</p>
</li>
<li class="milestone">
<div class="milestone__label">3</div>
<p class="milestone__description">
It also converts customers automatically into investors and vice-versa.
</p>
</li>
</ul>
</div>
<div class="grid gap-2 above_fold__section">
<h3>Why Project B for tokenization</h3> <h3>Why Project B for tokenization</h3>
<p> <ul class="milestones milestones--description-only">
Project B has evolved a disciplined framework for creation, transfer and management of the <li class="milestone">
tokens <div class="milestone__label">1</div>
such <p class="milestone__description">
that the valuation of tokens is always backed up by sustainable economics. Project B has evolved a disciplined framework for creation, transfer and management
</p> of
<p> the
Project B in collaboration with tools and technologies developed by RanchiMall has made process tokens
of such
tokenization extremely simple and very practical to use. that the valuation of tokens is always backed up by sustainable economics.
</p>
<p> </p>
In Project B implementation of tokenization, we start with definite and predictable cash flows </li>
at <li class="milestone">
any <div class="milestone__label">2</div>
business process and then create the dynamics in a such way that the tokens can appreciate in a <p class="milestone__description">
predictable fashion.
</p> Project B in collaboration with tools and technologies developed by RanchiMall has
</li> made
</ol> process
of
tokenization extremely simple and very practical to use.
</p>
</li>
<li class="milestone">
<div class="milestone__label">3</div>
<p class="milestone__description">
In Project B implementation of tokenization, we start with definite and predictable
cash
flows
at
any
business process and then create the dynamics in a such way that the tokens can
appreciate
in a
predictable fashion.
</p>
</li>
</ul>
</div>
</div>
</section> </section>
<section id="services_section"> <section id="services_section">
<h2 class="reveal"> <h2 class="reveal">