diff --git a/index.html b/index.html index 752e1b5..ef17eac 100644 --- a/index.html +++ b/index.html @@ -9,25 +9,182 @@ - - + + -
- - - -
-
- Home -
+ +
+ + + +
+
+
+

Weakly - Top NFT

+
+
+
+
07h 09m 12s
+
+
+

Sun-Glass

+
+
+

Current bid

+
+ + + +
+ 1.75 +
+
+
+ +
+
+
+
+
+
07h 09m 12s
+
+
+

Sun-Glass

+
+
+

Current bid

+
+ + + +
+ 1.75 +
+
+
+ +
+
+
+
+
+
07h 09m 12s
+
+
+

Sun-Glass

+
+
+

Current bid

+
+ + + +
+ 1.75 +
+
+
+ +
+
+
+
+
+
07h 09m 12s
+
+
+

Sun-Glass

+
+
+

Current bid

+
+ + + +
+ 1.75 +
+
+
+ +
+
+
+
+
+
07h 09m 12s
+
+
+

Sun-Glass

+
+
+

Current bid

+
+ + + +
+ 1.75 +
+
+
+ +
+
+
+
+
+
07h 09m 12s
+
+
+

Sun-Glass

+
+
+

Current bid

+
+ + + +
+ 1.75 +
+
+
+ +
+
+
+
+
+ + +
+
+
+ + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..6a3a728 --- /dev/null +++ b/index.js @@ -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) +}) \ No newline at end of file diff --git a/style.css b/style.css index d95e6c2..f178477 100644 --- a/style.css +++ b/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; } \ No newline at end of file