Add files via upload

gauravgorane · Mar 11, 2024 · 1bd3ad4 · 1bd3ad4
1 parent c266d47
commit 1bd3ad4
Show file tree

Hide file tree

Showing 8 changed files with 230 additions and 0 deletions.
diff --git a/Nft_preview_card_component/images/favicon-32x32.png b/Nft_preview_card_component/images/favicon-32x32.png
diff --git a/Nft_preview_card_component/images/icon-clock.svg b/Nft_preview_card_component/images/icon-clock.svg
diff --git a/Nft_preview_card_component/images/icon-ethereum.svg b/Nft_preview_card_component/images/icon-ethereum.svg
diff --git a/Nft_preview_card_component/images/icon-view.svg b/Nft_preview_card_component/images/icon-view.svg
diff --git a/Nft_preview_card_component/images/image-avatar.png b/Nft_preview_card_component/images/image-avatar.png
diff --git a/Nft_preview_card_component/images/image-equilibrium.jpg b/Nft_preview_card_component/images/image-equilibrium.jpg
diff --git a/Nft_preview_card_component/index.html b/Nft_preview_card_component/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
+  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
+
+  <title>Frontend Mentor | NFT preview card component</title>
+
+</head>
+
+<body>
+
+  <main>
+
+    <div class="container">
+
+      <div class="hero_img">
+        <img src="./images/image-equilibrium.jpg" alt="Equilibrium">
+        <div class="overlay">
+          <img src="./images/icon-view.svg" alt="View option">
+        </div>
+      </div>
+
+      <h1>Equilibrium #3429</h1>
+
+      <p class="details">Our Equilibrium collection promotes balance and calm.</p>
+
+      <div class="price_time">
+        <div class="price">
+          <img src="./images/icon-ethereum.svg" alt="Ethereum">
+          <p>0.041 ETH</p>
+        </div>
+
+        <div class="time">
+          <img src="./images/icon-clock.svg" alt="Clock">
+          <p>3 days left</p>
+        </div>
+      </div>
+
+      <!-- <div class="line"></div> -->
+
+      <div class="profile">
+        <img src="./images/image-avatar.png" alt="User Avatar">
+        <p>Creation of <span>Jules Wyvern</span></p>
+      </div>
+
+    </div>
+
+  </main>
+
+  <!-- <footer>
+    <div class="attribution">
+      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
+      Coded by <a href="https://github.com/gauravgorane">Gaurav Gorane</a>.
+    </div>
+  </footer> -->
+
+</body>
+
+</html>
diff --git a/Nft_preview_card_component/style.css b/Nft_preview_card_component/style.css
@@ -0,0 +1,164 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap');
+
+:root {
+    --Soft_blue: hsl(215, 51%, 70%);
+    --Cyan: hsl(178, 100%, 50%);
+    --Very_dark_blue_main_BG: hsl(217, 54%, 11%);
+    --Very_dark_blue_card_BG: hsl(216, 50%, 16%);
+    --Very_dark_blue_line: hsl(215, 32%, 27%);
+    --White: hsl(0, 0%, 100%);
+    --fw_light: 300;
+    --fw_regular: 400;
+    --fw_bold: 600
+}
+
+*,
+*::after,
+*::before {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 62.5%;
+}
+
+img {
+    max-width: 100%;
+    height: 100%;
+    display: block;
+}
+
+body {
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: left;
+    font-family: "Outfit", sans-serif;
+    background-color: var(--Very_dark_blue_main_BG);
+}
+
+.container {
+    max-width: 35rem;
+    background-color: var(--Very_dark_blue_card_BG);
+    border-radius: 1.4rem;
+    padding: 2.4rem;
+    margin: 2rem;
+}
+
+.container .hero_img{
+    border-radius: 0.8rem;
+    overflow: hidden;
+    position: relative;
+}
+
+.container .overlay{
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: hsla(178, 100%, 50%, 0.5);
+    display: none;
+}
+
+.container .overlay img{
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+}
+
+.container .hero_img:hover .overlay{
+    display: block;
+    cursor: pointer;
+}
+
+.container h1{
+    margin-top: 2rem;
+    font-size: 2.2rem;
+    font-weight: var(--fw_bold);
+    color: var(--White);
+}
+
+.container h1:hover{
+    cursor: pointer;
+    color: var(--Cyan);
+}
+
+.container .details{
+    font-size: 1.8rem;
+    line-height: 1.4;
+    padding: 1.8rem 0;
+    color: var(--Soft_blue);
+}
+
+.price_time{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 0 2rem;
+}
+
+.price_time .price{
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    font-size: 1.6rem;
+    font-weight: var(--fw_bold);
+    color: var(--Cyan);
+}
+
+.price_time .time{
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    font-size: 1.6rem;
+    color: var(--Soft_blue);
+}
+
+.profile{
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 1.8rem;
+    padding: 1.6rem 0 1rem;
+    border-top: 1px solid var(--Soft_blue);
+}
+
+.profile img{
+    max-width: 3.2rem;
+    border-radius: 50%;
+    border: 1px solid var(--White);
+}
+
+.profile p{
+    font-size: 1.6rem;
+    color: var(--Soft_blue);
+    font-weight: var(--fw_regular);
+}
+
+.profile p span{
+    font-size: 1.4rem;
+    font-weight: var(--fw_bold);
+    letter-spacing: 1px;
+    color: var(--White);
+}
+
+.profile p span:hover{
+    cursor: pointer;
+    color: var(--Cyan);
+}
+
+.attribution {
+    font-size: 11px;
+    text-align: center;
+}
+
+.attribution a {
+    color: hsl(228, 45%, 44%);
+}