add webpack

2025-03-22 13:14:06 +03:00
parent 0f2c268452
commit 1597b52310
13 changed files with 2313 additions and 12 deletions
@@ -0,0 +1,177 @@
+html {
+    --color-dark: #141416;
+    --text-dark: var(--color-dark);
+    --text-light: #FFFFFF;
+
+    --font-poppins: "Poppins", sans-serif;
+    --font-inter: "Inter", sans-serif;
+
+    font-family: var(--font-poppins);
+}
+
+.container {
+    padding: 0 97px;
+}
+
+.button {
+    font-family: var(--font-poppins);
+    padding: 16px 24px;
+    background-color: var(--color-dark);
+    border-radius: 16px;
+    color: var(--text-light);
+    font-weight: 600;
+    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 {
+    margin-right: 57px;
+}
+
+.header .button {
+    margin-left: auto;
+    font-family: var(--font-inter);
+}
+
+.nav-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    color: #606060;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 27px;
+    text-transform: uppercase;
+
+    display: flex;
+    gap: 53px;
+}
+
+.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;
+}