fem-projects/nft-preview-card
Archived
1
Fork 0
Code Activity

Partial work

Browse source
This commit is contained in:
Hadeed 2024-07-15 17:47:00 +05:00
parent 7d7ef6b9f6
commit 74e0e83059
4 changed files with 70 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
index.html
View file

@ -14,11 +14,51 @@
<title>NFT preview card component</title> <title>NFT preview card component</title>
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body> <body class="flex min-h-dvh items-center justify-center bg-blue-800 p-6">
<p>Equilibrium #3429</p> <main
<p>Our Equilibrium collection promotes balance and calm.</p> class="max-w-[350px] space-y-6 rounded-2xl bg-blue-600 p-6 text-blue-200"
<p>0.041 ETH</p> >
<p>3 days left</p> <img
<p>Creation of Jules Wyvern</p> class="cursor-pointer rounded-lg"
src="/images/image-equilibrium.jpg"
alt=""
/>
<div class="space-y-4">
<h1
class="cursor-pointer text-2xl font-semibold text-white hover:text-cyan"
>
Equilibrium #3429
</h1>
<p class="text-lg font-light">
Our Equilibrium collection promotes balance and calm.
</p>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center justify-between gap-2">
<img src="/images/icon-ethereum.svg" alt="" />
<p class="font-semibold text-cyan">0.041 ETH</p>
</div>
<div class="flex items-center justify-between gap-2">
<img src="/images/icon-clock.svg" alt="" />
<p>3 days left</p>
</div>
</div>
<div class="space-y-4">
<hr class="border-blue-400" />
<div class="flex items-center justify-start gap-4">
<img
class="size-8 rounded-full border-[1px] border-white"
src="./public/images/image-avatar.png"
alt=""
/>
<p>
Creation of
<span class="cursor-pointer text-white hover:text-cyan"
>Jules Wyvern</span
>
</p>
</div>
</div>
</main>
</body> </body>
</html> </html>

BIN
public/fonts/Outfit.ttf Normal file
View file

Binary file not shown.

8
styles.css
View file

@ -1,3 +1,11 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer base {
@font-face {
font-weight: 100 900;
src: url("/fonts/Outfit.ttf") format("truetype");
font-family: "Outfit";
}
}

17
tailwind.config.js
View file

@ -1,3 +1,18 @@
export default { export default {
content: ["index.html"] content: ["index.html"],
theme: {
colors: {
blue: {
200: "#8BACD9",
400: "#2E405A",
600: "#15263F",
800: "#0D192C",
},
cyan: "#00FFF8",
white: "#FFFFFF",
},
fontFamily: {
sans: ["Outfit", "sans-serif"],
},
},
}; };