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

styling changes

Browse Source
This commit is contained in:
sairaj mote 2023-06-08 02:21:11 +05:30
parent 9c05028e55
commit 2f74985145
4 changed files with 41 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
css/main.css
View File

@ -182,13 +182,8 @@ section {
min-height: 90vh;
align-content: center;
}
section:nth-of-type(2) img {
position: absolute;
opacity: 0.5;
height: 80vh;
width: auto;
align-self: center;
right: 0;
section:nth-of-type(2) {
overflow: hidden;
}
section:nth-of-type(3) {
text-align: center;
@ -207,6 +202,15 @@ section:nth-of-type(3) p {
line-height: 0.5;
}
#bitcoin_lineart {
position: absolute;
opacity: 0.2;
height: 80vh;
width: auto;
align-self: center;
right: 0;
}
#poc_images {
display: grid;
gap: 1vw;
@ -220,6 +224,11 @@ section:nth-of-type(3) p {
-o-object-fit: cover;
object-fit: cover;
border-radius: 0.5rem;
transition: all 0.2s ease;
filter: brightness(0.8);
}
#poc_images img:hover {
filter: brightness(1);
}
#poc_stats {
@ -285,6 +294,10 @@ section:nth-of-type(3) p {
body {
--inline-padding: max(1rem, 12vw);
}
#bitcoin_lineart {
opacity: 0.6;
left: calc(100% - 50vw);
}
.hide-on-large {
display: none !important;
}

2
css/main.min.css vendored
View File

@ -1 +1 @@
*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #3d5afe;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);--inline-padding: max(1rem, 6vw)}body[data-theme=dark]{--accent-color: #6d83ff;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}h1{font-size:max(1.8rem,4vw)}h2{font-size:max(1.5rem,3vw)}h3{font-size:max(1.2rem,2vw)}h4{font-size:max(1rem,1.3vw)}img{-o-object-fit:contain;object-fit:contain}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.9)}.flex{display:flex}.align-items-center{align-items:center}.justify-content-center{justify-content:center}.flex-column{flex-direction:column}.flex-1{flex:1}.grid{display:grid}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.gap-4{gap:4rem}article>*{padding:max(1rem,2vw) var(--inline-padding)}header{display:flex;align-items:center;justify-content:space-between;position:-webkit-sticky;position:sticky;top:0;background-color:rgba(var(--foreground-color), 0.5);z-index:2;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}header ul{list-style:none;display:flex;gap:.8rem}header ul .icon{display:flex}#above_fold{padding-top:0;height:calc(100vh - 6rem);text-align:center;align-content:center}#above_fold h2{margin:auto;max-width:46rem}#above_fold p{max-width:none}#hero_illustration{width:min(100%,26rem);margin:auto}section{display:grid;position:relative;min-height:90vh;align-content:center}section:nth-of-type(2) img{position:absolute;opacity:.5;height:80vh;width:auto;align-self:center;right:0}section:nth-of-type(3){text-align:center}section:nth-of-type(3) p{max-width:none}.section-header{display:flex;flex-direction:column;text-align:center}.section-header::after{content:"•••";line-height:.5}#poc_images{display:grid;gap:1vw;grid-template-columns:repeat(4, 1fr)}#poc_images .span-2{grid-column:span 2}#poc_images img{height:24vw;-o-object-fit:cover;object-fit:cover;border-radius:.5rem}#poc_stats{list-style:none;display:flex;gap:1rem;border:solid thin rgba(var(--text-color), 0.5);padding:max(1.5rem,2vw) max(1rem,2vw);border-radius:1rem;margin:auto}#poc_stats .stat{display:flex;flex-direction:column;gap:.5rem;flex:1}#poc_stats .stat__number{font-size:max(1.5rem,2.5vw);font-weight:700}#poc_stats .stat__title{font-size:.9rem}#team_members{display:grid;grid-template-columns:repeat(auto-fill, minmax(max(8rem, 12vw), 1fr));margin-top:3rem;gap:3rem 1.5rem}.team-member{display:flex;flex-direction:column;text-align:center}.team-member img{-o-object-fit:cover;object-fit:cover;width:100%;aspect-ratio:3/3.5;border-radius:1rem;margin-bottom:1.2rem}.team-member__name{font-weight:700;font-size:1rem;line-height:1.2}.team-member__title{line-height:normal;font-weight:500;font-size:.9rem}@media screen and (max-width: 768px){.hide-on-small{display:none !important}}@media screen and (min-width: 768px){body{--inline-padding: max(1rem, 12vw)}.hide-on-large{display:none !important}}
*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #3d5afe;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);--inline-padding: max(1rem, 6vw)}body[data-theme=dark]{--accent-color: #6d83ff;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}h1{font-size:max(1.8rem,4vw)}h2{font-size:max(1.5rem,3vw)}h3{font-size:max(1.2rem,2vw)}h4{font-size:max(1rem,1.3vw)}img{-o-object-fit:contain;object-fit:contain}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.9)}.flex{display:flex}.align-items-center{align-items:center}.justify-content-center{justify-content:center}.flex-column{flex-direction:column}.flex-1{flex:1}.grid{display:grid}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.gap-4{gap:4rem}article>*{padding:max(1rem,2vw) var(--inline-padding)}header{display:flex;align-items:center;justify-content:space-between;position:-webkit-sticky;position:sticky;top:0;background-color:rgba(var(--foreground-color), 0.5);z-index:2;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}header ul{list-style:none;display:flex;gap:.8rem}header ul .icon{display:flex}#above_fold{padding-top:0;height:calc(100vh - 6rem);text-align:center;align-content:center}#above_fold h2{margin:auto;max-width:46rem}#above_fold p{max-width:none}#hero_illustration{width:min(100%,26rem);margin:auto}section{display:grid;position:relative;min-height:90vh;align-content:center}section:nth-of-type(2){overflow:hidden}section:nth-of-type(3){text-align:center}section:nth-of-type(3) p{max-width:none}.section-header{display:flex;flex-direction:column;text-align:center}.section-header::after{content:"•••";line-height:.5}#bitcoin_lineart{position:absolute;opacity:.2;height:80vh;width:auto;align-self:center;right:0}#poc_images{display:grid;gap:1vw;grid-template-columns:repeat(4, 1fr)}#poc_images .span-2{grid-column:span 2}#poc_images img{height:24vw;-o-object-fit:cover;object-fit:cover;border-radius:.5rem;transition:all .2s ease;filter:brightness(0.8)}#poc_images img:hover{filter:brightness(1)}#poc_stats{list-style:none;display:flex;gap:1rem;border:solid thin rgba(var(--text-color), 0.5);padding:max(1.5rem,2vw) max(1rem,2vw);border-radius:1rem;margin:auto}#poc_stats .stat{display:flex;flex-direction:column;gap:.5rem;flex:1}#poc_stats .stat__number{font-size:max(1.5rem,2.5vw);font-weight:700}#poc_stats .stat__title{font-size:.9rem}#team_members{display:grid;grid-template-columns:repeat(auto-fill, minmax(max(8rem, 12vw), 1fr));margin-top:3rem;gap:3rem 1.5rem}.team-member{display:flex;flex-direction:column;text-align:center}.team-member img{-o-object-fit:cover;object-fit:cover;width:100%;aspect-ratio:3/3.5;border-radius:1rem;margin-bottom:1.2rem}.team-member__name{font-weight:700;font-size:1rem;line-height:1.2}.team-member__title{line-height:normal;font-weight:500;font-size:.9rem}@media screen and (max-width: 768px){.hide-on-small{display:none !important}}@media screen and (min-width: 768px){body{--inline-padding: max(1rem, 12vw)}#bitcoin_lineart{opacity:.6;left:calc(100% - 50vw)}.hide-on-large{display:none !important}}

26
css/main.scss
View File

@ -154,14 +154,7 @@ section {
min-height: 90vh;
align-content: center;
&:nth-of-type(2) {
img {
position: absolute;
opacity: 0.5;
height: 80vh;
width: auto;
align-self: center;
right: 0;
}
overflow: hidden;
}
&:nth-of-type(3) {
text-align: center;
@ -179,6 +172,14 @@ section {
line-height: 0.5;
}
}
#bitcoin_lineart {
position: absolute;
opacity: 0.2;
height: 80vh;
width: auto;
align-self: center;
right: 0;
}
#poc_images {
display: grid;
gap: 1vw;
@ -190,6 +191,11 @@ section {
height: 24vw;
object-fit: cover;
border-radius: 0.5rem;
transition: all 0.2s ease;
filter: brightness(0.8);
&:hover {
filter: brightness(1);
}
}
}
#poc_stats {
@ -253,6 +259,10 @@ section {
body {
--inline-padding: max(1rem, 12vw);
}
#bitcoin_lineart {
opacity: 0.6;
left: calc(100% - 50vw);
}
.hide-on-large {
display: none !important;
}

4
index.html
View File

@ -54,7 +54,7 @@
<p>A global reference of tokenization aiming financial inclusiveness</p>
</div>
</section>
<section class="gap-1-5">
<section id="payment_section" class="gap-1-5">
<div class="grid">
<h4>International Payments</h4>
<h2>Pay with Bitcoin</h2>
@ -63,7 +63,7 @@
Explore the world with seamless property rentals,
powered by Bitcoin payments from anywhere on the globe!
</p>
<img src="assets/bitcoin line art.svg" alt="">
<img id="bitcoin_lineart" src="assets/bitcoin line art.svg" alt="">
</section>
<section class="gap-2">
<h4 class="section-header">Proof of Concept</h4>