slider
This commit is contained in:
grinikita
parent
a19a57eea3
commit
0f2c268452
191
index.html
191
index.html
@ -9,25 +9,182 @@
|
||||
|
||||
<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:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900" rel="stylesheet">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900"
|
||||
rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header container">
|
||||
<a href="index.html"><img class="logo" src="images/logo.svg" alt=""></a>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="discover.html">Discover</a></li>
|
||||
<li><a href="creators.html">creators</a></li>
|
||||
<li><a href="creators.html">Sell</a></li>
|
||||
<li><a href="creators.html">stats</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="button">Connect Wallet</button>
|
||||
</header>
|
||||
<main>
|
||||
Home
|
||||
</main>
|
||||
|
||||
<header class="header container">
|
||||
<a href="index.html"><img class="logo" src="images/logo.svg" alt=""></a>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="discover.html">Discover</a></li>
|
||||
<li><a href="creators.html">creators</a></li>
|
||||
<li><a href="creators.html">Sell</a></li>
|
||||
<li><a href="creators.html">stats</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="button">Connect Wallet</button>
|
||||
</header>
|
||||
<main>
|
||||
<div class="top-nft">
|
||||
<h2 class="top-nft__title">Weakly - Top NFT</h2>
|
||||
<div class="nft-card-container">
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="button btn-left">left</button>
|
||||
<button class="button btn-right">right</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
28
index.js
Normal file
28
index.js
Normal file
@ -0,0 +1,28 @@
|
||||
const btnLeft = document.querySelector('.top-nft .btn-left')
|
||||
const btnRight = document.querySelector('.top-nft .btn-right')
|
||||
const container = document.querySelector('.nft-card-container')
|
||||
|
||||
let containerOffset = 0;
|
||||
|
||||
const moveContainer = (offset) => {
|
||||
const containerWidth = container.scrollWidth
|
||||
|
||||
const newOffset = containerOffset + offset
|
||||
const minOffset = (containerWidth - document.body.clientWidth) * -1
|
||||
const maxOffset = 0;
|
||||
containerOffset = Math.min(Math.max(minOffset, newOffset), maxOffset);
|
||||
container.style.transform = `translateX(${containerOffset}px)`
|
||||
|
||||
btnLeft.disabled = containerOffset >= maxOffset ? true : null;
|
||||
btnRight.disabled = containerOffset <= minOffset;
|
||||
}
|
||||
|
||||
moveContainer(0)
|
||||
|
||||
btnLeft.addEventListener('click', () => {
|
||||
moveContainer(285)
|
||||
})
|
||||
|
||||
btnRight.addEventListener('click', () => {
|
||||
moveContainer(-285)
|
||||
})
|
||||
125
style.css
125
style.css
@ -3,9 +3,10 @@ html {
|
||||
--text-dark: var(--color-dark);
|
||||
--text-light: #FFFFFF;
|
||||
|
||||
--font-family: "Inter", sans-serif;
|
||||
--font-poppins: "Poppins", sans-serif;
|
||||
--font-inter: "Inter", sans-serif;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-family: var(--font-poppins);
|
||||
}
|
||||
|
||||
.container {
|
||||
@ -13,6 +14,7 @@ html {
|
||||
}
|
||||
|
||||
.button {
|
||||
font-family: var(--font-poppins);
|
||||
padding: 16px 24px;
|
||||
background-color: var(--color-dark);
|
||||
border-radius: 16px;
|
||||
@ -21,11 +23,19 @@ html {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.button[disabled] {
|
||||
background: #94A3B8;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: var(--font-inter);
|
||||
}
|
||||
|
||||
.logo {
|
||||
@ -34,6 +44,7 @@ html {
|
||||
|
||||
.header .button {
|
||||
margin-left: auto;
|
||||
font-family: var(--font-inter);
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
@ -53,4 +64,114 @@ html {
|
||||
.header a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.top-nft {
|
||||
padding: 70px 0 90px;
|
||||
background: #F1F1F1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.top-nft__title {
|
||||
font-weight: 600;
|
||||
font-size: 45px;
|
||||
line-height: 27px;
|
||||
letter-spacing: 0;
|
||||
color: #C5C5C5;
|
||||
text-align: center;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.nft-card {
|
||||
width: 282px;
|
||||
padding: 14px 14px 20px;
|
||||
box-shadow: 38.82px 11.76px 58.81px 0px #C7C7C799;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.nft-card__img {
|
||||
position: relative;
|
||||
border-radius: 24px;
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
background: center / cover no-repeat url('https://s3-alpha-sig.figma.com/img/b82f/55d0/61c522d86567e3c5ea1f39ddf68ae4bc?Expires=1743379200&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=UlO4-Fsc27zhQo9T9Tl8fhCSVyxM4GHu6DkUtWgi881ggrnY9uHKNdVvhg2GuSS7ItYldxw9FhYRjgcBrwKBvnf4XLjw8YjkZ8584NLVxfH-POsN8O2eh9gyxEBEgaF~AVwwnNmnRpPN2JFnfcRUIihkRrhZA7IjDRxNY1CbPHB5j~AP9wlWhI6P2TqaXaJj~8JRZPx1YBpGWfrSCgLfgQejNNi58FvkkX1Hkvm0aICdebCSqwFrq~sLI6Rbj5H-QgF~2AxU3EGiBzdaCvMXfBx3xpZIvHGkuSeYlhdlU-KFNmjF9u3VPg7c5S~IvPMIOmvWhwX-GguAGxPZe4tksw__'), #F8F8F8;
|
||||
}
|
||||
|
||||
.nft-card__content {
|
||||
padding: 0 4px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.nft-card__title {
|
||||
font-family: var(--font-poppins);
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
line-height: 140%;
|
||||
letter-spacing: 0;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.nft-card__footer {
|
||||
display: flex;
|
||||
}
|
||||
.nft-card__footer > * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nft-card__description {
|
||||
color: #94A3B8;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
letter-spacing: 0.12px;
|
||||
vertical-align: middle;
|
||||
margin-top: 0;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.nft-card__price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
letter-spacing: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
}
|
||||
.nft-card__price {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.nft-card__time {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 9px;
|
||||
|
||||
background: #1C1D2059;
|
||||
border-radius: 9px;
|
||||
border: 1px solid #1C1D2014;
|
||||
backdrop-filter: blur(4.7px);
|
||||
box-shadow: 0 4.71px 14.12px 0 #1C1D2014;
|
||||
|
||||
padding: 8px 14px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
letter-spacing: 0.12px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.nft-card-container {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
|
||||
transition: transform 0.3s linear;
|
||||
}
|
||||
|
||||
.nft-card-container .nft-card {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user