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

creating skeleton

Browse Source
This commit is contained in:
sairaj mote 2023-03-17 01:02:35 +05:30
parent 258889471e
commit 15f279bf35
6 changed files with 558 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/oswaldo-martinez-bK-SRSgPWz8-unsplash.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

209
css/main.css Normal file
View File

@ -0,0 +1,209 @@
* {
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);
}
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: 0.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;
}
.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: 0.3rem;
}
.gap-0-5 {
gap: 0.5rem;
}
.gap-1 {
gap: 1rem;
}
.gap-1-5 {
gap: 1.5rem;
}
.gap-2 {
gap: 2rem;
}
#above_fold {
position: relative;
height: 100vh;
width: 100%;
background-color: #f1f3f8;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#above_fold__title, #above_fold__description {
color: white;
}
#above_fold__title {
font-size: max(3rem, 8vw);
mix-blend-mode: overlay;
}
section {
--inline-padding: max(1.5rem, 6vw);
position: relative;
overflow: hidden;
padding: max(1.5rem, 4vw) var(--inline-padding);
}
section h4 {
text-align: center;
}
section > *:not(.bg) {
z-index: 2;
position: relative;
}
section .bg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
}
.carousel-wrapper {
position: relative;
margin: 1rem 0;
}
.carousel {
display: flex;
scroll-snap-type: proximity x;
overflow-x: scroll;
gap: 1rem;
margin: 0 calc(-1 * var(--inline-padding));
scrollbar-width: none;
-ms-overflow-style: none;
}
.carousel::-webkit-scrollbar {
display: none;
}
.carousel__item {
text-align: center;
scroll-snap-align: start;
flex-shrink: 0;
width: min(50vw, 11rem);
height: 100%;
overflow: hidden;
}
.carousel__item:first-of-type {
margin-left: var(--inline-padding);
}
.carousel__item:last-of-type {
margin-right: var(--inline-padding);
}
.carousel__item img {
width: 100%;
aspect-ratio: 3/4;
-o-object-fit: cover;
object-fit: cover;
border-radius: 0.5rem;
}
.carousel__button-wrapper {
position: absolute;
right: 0;
z-index: 2;
justify-self: flex-end;
bottom: 1.5rem;
}
.carousel__button {
display: flex;
padding: 0.8rem;
border-radius: 50%;
background-color: rgba(var(--foreground-color), 1);
border: solid thin rgba(var(--text-color), 0.1);
cursor: pointer;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
}
.carousel__button:active {
transform: scale(0.9);
}
@media screen and (max-width: 768px) {
.carousel__item img {
aspect-ratio: 3/4;
}
.hide-on-small {
display: none !important;
}
}

1
css/main.min.css vendored Normal file
View File

@ -0,0 +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)}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}.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}#above_fold{position:relative;height:100vh;width:100%;background-color:#f1f3f8;display:flex;justify-content:center;align-items:center;flex-direction:column}#above_fold__title,#above_fold__description{color:#fff}#above_fold__title{font-size:max(3rem,8vw);mix-blend-mode:overlay}section{--inline-padding: max(1.5rem, 6vw);position:relative;overflow:hidden;padding:max(1.5rem,4vw) var(--inline-padding)}section h4{text-align:center}section>*:not(.bg){z-index:2;position:relative}section .bg{position:absolute;top:0;left:0;bottom:0;right:0;z-index:1}.carousel-wrapper{position:relative;margin:1rem 0}.carousel{display:flex;scroll-snap-type:proximity x;overflow-x:scroll;gap:1rem;margin:0 calc(-1*var(--inline-padding));scrollbar-width:none;-ms-overflow-style:none}.carousel::-webkit-scrollbar{display:none}.carousel__item{text-align:center;scroll-snap-align:start;flex-shrink:0;width:min(50vw,11rem);height:100%;overflow:hidden}.carousel__item:first-of-type{margin-left:var(--inline-padding)}.carousel__item:last-of-type{margin-right:var(--inline-padding)}.carousel__item img{width:100%;aspect-ratio:3/4;-o-object-fit:cover;object-fit:cover;border-radius:.5rem}.carousel__button-wrapper{position:absolute;right:0;z-index:2;justify-self:flex-end;bottom:1.5rem}.carousel__button{display:flex;padding:.8rem;border-radius:50%;background-color:rgba(var(--foreground-color), 1);border:solid thin rgba(var(--text-color), 0.1);cursor:pointer;box-shadow:0 .5rem 1rem rgba(0,0,0,.1);transition:transform .2s ease}.carousel__button:active{transform:scale(0.9)}@media screen and (max-width: 768px){.carousel__item img{aspect-ratio:3/4}.hide-on-small{display:none !important}}

199
css/main.scss Normal file
View File

@ -0,0 +1,199 @@
* {
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);
}
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: 0.9rem;
max-width: 65ch;
line-height: 1.7;
color: rgba(var(--text-color), 0.9);
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.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: 0.3rem;
}
.gap-0-5 {
gap: 0.5rem;
}
.gap-1 {
gap: 1rem;
}
.gap-1-5 {
gap: 1.5rem;
}
.gap-2 {
gap: 2rem;
}
#above_fold {
position: relative;
height: 100vh;
width: 100%;
background-color: #f1f3f8;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
&__title,
&__description {
color: white;
}
&__title {
font-size: max(3rem, 8vw);
mix-blend-mode: overlay;
}
&__description {
}
}
section {
--inline-padding: max(1.5rem, 6vw);
position: relative;
overflow: hidden;
padding: max(1.5rem, 4vw) var(--inline-padding);
h4 {
text-align: center;
}
& > *:not(.bg) {
z-index: 2;
position: relative;
}
.bg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
}
}
.carousel-wrapper {
position: relative;
margin: 1rem 0;
}
.carousel {
display: flex;
scroll-snap-type: proximity x;
overflow-x: scroll;
gap: 1rem;
margin: 0 calc(-1 * var(--inline-padding));
// hide scrollbar
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
&__item {
text-align: center;
scroll-snap-align: start;
flex-shrink: 0;
width: min(50vw, 11rem);
height: 100%;
overflow: hidden;
&:first-of-type {
margin-left: var(--inline-padding);
}
&:last-of-type {
margin-right: var(--inline-padding);
}
img {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
border-radius: 0.5rem;
}
}
&__button-wrapper {
position: absolute;
right: 0;
z-index: 2;
justify-self: flex-end;
bottom: 1.5rem;
}
&__button {
display: flex;
padding: 0.8rem;
border-radius: 50%;
background-color: rgba(var(--foreground-color), 1);
border: solid thin rgba(var(--text-color), 0.1);
cursor: pointer;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
&:active {
transform: scale(0.9);
}
}
}
@media screen and (max-width: 768px) {
.carousel {
&__item {
img {
aspect-ratio: 3/4;
}
}
}
.hide-on-small {
display: none !important;
}
}

149
index.html Normal file
View File

@ -0,0 +1,149 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project B</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<article>
<section id="above_fold" class="parallax">
<p id="above_fold__description">El Salvador Real Estate Tokenization</p>
<h1 id="above_fold__title">Project B</h1>
<img id="above_fold__image" class="bg" src="assets/oswaldo-martinez-bK-SRSgPWz8-unsplash.jpg" alt="">
</section>
<section>
<h2>Partners</h2>
</section>
<section>
<h2>Team</h2>
<div class="carousel-wrapper">
<ul class="carousel">
<li class="carousel__item">
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
<p>Jane Doe</p>
</li>
<li class="carousel__item">
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
<p>Jane Doe</p>
</li>
<li class="carousel__item">
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
<p>Jane Doe</p>
</li>
<li class="carousel__item">
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
<p>Jane Doe</p>
</li>
<li class="carousel__item">
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
<p>Jane Doe</p>
</li>
<li class="carousel__item">
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
<p>Jane Doe</p>
</li>
<li class="carousel__item">
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
<p>Jane Doe</p>
</li>
<li class="carousel__item">
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
<p>Jane Doe</p>
</li>
<li class="carousel__item">
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
<p>Jane Doe</p>
</li>
<li class="carousel__item">
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
<p>Jane Doe</p>
</li>
<li class="carousel__item">
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
<p>Jane Doe</p>
</li>
<li class="carousel__item">
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
<p>Jane Doe</p>
</li>
<li class="carousel__item">
<img src="assets/toa-heftiba-O3ymvT7Wf9U-unsplash.jpg" alt="">
<p>Jane Doe</p>
</li>
</ul>
<div class="carousel__button-wrapper flex gap-0-3 align-items-center hide-on-small">
<button class="carousel__button" data-direction="backwards" onclick="scrollCarousel(event)">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M15.61 7.41L14.2 6l-6 6 6 6 1.41-1.41L11.03 12l4.58-4.59z" />
</svg>
</button>
<button class="carousel__button" onclick="scrollCarousel(event)">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z" />
</svg>
</button>
</div>
</div>
</section>
</article>
<script>
gsap.registerPlugin(ScrollTrigger);
let getRatio = el => window.innerHeight / (window.innerHeight + el.offsetHeight);
gsap.utils.toArray(".parallax").forEach((section, i) => {
section.bg = section.querySelector(".bg");
// the first image (i === 0) should be handled differently because it should start at the very top.
// use function-based values in order to keep things responsive
gsap.fromTo(section.bg, {
y: () => i ? `${-window.innerHeight * getRatio(section)}px` : "0px"
}, {
y: () => `${window.innerHeight * (1 - getRatio(section))}px`,
ease: "none",
scrollTrigger: {
trigger: section,
start: () => i ? "top bottom" : "top top",
end: "bottom top",
scrub: true,
invalidateOnRefresh: true // to make it responsive
}
});
});
function scrollCarousel(e) {
const direction = e.target.closest('button').dataset.direction;
const carousel = e.target.closest('.carousel-wrapper').querySelector('.carousel');
const carouselWidth = carousel.offsetWidth;
const moveBy = carouselWidth / 2;
if (direction === 'backwards') {
carousel.scrollBy({
left: -moveBy,
behavior: 'smooth'
})
} else {
carousel.scrollBy({
left: moveBy,
behavior: 'smooth'
})
}
}
</script>
</body>
</html>