BlockchainUNN · Kingdavidumeham1 · Aug 25, 2022 · Aug 26, 2022
diff --git a/README.md b/README.md
@@ -1,68 +1,39 @@
-# BLOCKCHAIN UNN - NFT preview card component
+# BLOCKCHAIN UNN - NFT preview card component solution
 
-![Design preview for the NFT preview card component coding challenge](https://res.cloudinary.com/dz209s6jk/image/upload/q_auto:good,w_900/Challenges/sr9i7z9p1tfb2m40pigu.jpg)
+This is a solution to the NFT preview card component challenge for BUD session 4
 
-## Welcome! 👋
+## Overview
 
-This challenge was gotten from Frontend Mentor. you could check it out for more advanced challenges.
+### The challenge
 
-[Frontend Mentor](https://www.frontendmentor.io) challenges help you improve your coding skills by building realistic projects.
+Users should be able to:
 
-**To do this challenge, you need a basic understanding of HTML and CSS.**
+- View the optimal layout depending on their device's screen size
 
-## The challenge
+### Screenshot
 
-Your challenge is to build out this preview card component and get it looking as close to the design as possible.
+./view/capture.PNG
 
-You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
 
-## Where to find everything
 
-Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design. 
 
-The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. 
 
-You will find all the required assets in the `/images` folder. The assets are already optimized.
+## My process
+studied and implemented
 
-There is also a `style-guide.md` file containing the information you'll need, such as color palette and fonts.
+### Built with
 
-## Building your project
+- Semantic HTML5 markup
+- CSS custom properties
+- Flexbox
+- CSS Grid
+- Mobile-first workflow
 
-Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps:
 
-1. Initialize your project as a public repository on [GitHub](https://github.com/). Creating a repo will make it easier to share your code with the community if you need help. If you're not sure how to do this, [have a read-through of this Try Git resource](https://try.github.io/).
-2. Configure your repository to publish your code to a web address. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, and we provide some recommendations below.
-3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes to create reusable styles.
-4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content.
-5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`.
-6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on.
+### What I learned
+learnt the pratical application of html and css
 
-## Deploying your project
 
-As mentioned above, there are many ways to host your project for free. Our recommend hosts are:
 
-- [GitHub Pages](https://pages.github.com/)
-- [Vercel](https://vercel.com/)
-- [Netlify](https://www.netlify.com/)
 
-You can host your site using one of these providers.
-
-## Create a custom `README.md`
-
-We strongly recommend overwriting this `README.md` with a custom one. We've provided a template inside the [`README-template.md`](./README-template.md) file in this starter code.
-
-The template provides a guide for what to add. A custom `README` will help you explain your project and reflect on your learnings. Please feel free to edit our template as much as you like.
-
-Once you've added your information to the template, delete this file and rename the `README-template.md` file to `README.md`. That will make it show up as your repository's README file.
-
-
-This challenge is completely free. Please share it with anyone who will find it useful for practice.
-
-## SOLUTION
-It is highly recommended that you try this out yourself, before checking out the solution.
-https://github.com/Darlington02/session4-solution
-
-Live APP
-https://session4.netlify.app/
-
-**Have fun building!** 🚀
+Thank you BLOCKCHAIN UNN for this opportunity. 
diff --git a/index.html b/index.html
@@ -1,33 +1,46 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
-
-  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
-
-  <title>Frontend Mentor | NFT preview card component</title>
-
-  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
-  <style>
-    .attribution { font-size: 11px; text-align: center; }
-    .attribution a { color: hsl(228, 45%, 44%); }
-  </style>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="icon" href="./images/favicon-32x32.png" type="image/x-icon">
+    <link rel="stylesheet" href="./styles/styles.css">
+    <title>BLOCKCHAIN UNN| NFT preview card component solution </title>
 </head>
 <body>
+    <section class="card">
+        <div> <img id="nft-image" src="./images/image-equilibrium.jpg" alt=" nft-images" srcset="">
+
+        </div>
+        <div class="contents">
+            <h2 id="name">Equilibrium #3429 </h2>
+            <p> Our Equilibrium collection promotes balance and calm </p>
+        </div>
 
-  Equilibrium #3429
+        <div class="payments">
+            <div class="price">
+                <img id="eth-icon" src="./images/icon-ethereum.svg" alt="eth-icon" srcset="">
+                <p id="eth-price"> 0.041 ETH</p>
+            </div>
+            <div class=" time">
+                <img id="clock-icon" src="./images/icon-clock.svg" alt=" time" srcset="">
+                <p>3 days left</p>
+            </div>
+        </div>
 
-  Our Equilibrium collection promotes balance and calm.
+        <hr/>
 
-  0.041 ETH
-  3 days left
-
-  Creation of Jules Wyvern
+        <div class="footer">
+            <img id="avatar" src="./images/image-avatar.png" alt="" srcset="">
+            <p>Creation of <span id="end">Umeham Kingdavid</span></p>
+        </div>
+
+
+    </section>
 
-  <div class="attribution">
-    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
-    Coded by <a href="#">Your Name Here</a>.
-  </div>
+
+
 </body>
 </html>
diff --git a/styles/styles.css b/styles/styles.css
@@ -0,0 +1,53 @@
+body {
+    background-color: hsl(217, 54%, 11%);
+}
+.card{
+    display: block;
+    background-color: hsl(216, 50%, 16%);
+    width: 375px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 30px;
+    border-radius: 20px 20px 20px 20px;
+}
+#nft-image{
+    width: 100%;
+    border-radius: 10px 10px 10px 10px;
+}
+#name{
+    color: white;
+}
+.payments{
+    display: flex;
+    justify-content: space-between;
+}
+
+.price, .time, .footer{
+    display: flex;
+    align-items: center;
+}
+
+#eth-icon, #clock-icon{
+    width: 14px;
+    height: 18px;
+}
+
+#eth-price{
+    color: hsl(178, 100%, 50%)
+    ;
+    font-weight: bold;
+}
+
+#avatar{
+    width: 30px;
+    height: 30px;
+    border-radius: 1px solid white;
+}
+
+#avatar, #eth-icon, #clock-icon{
+    margin-right: 10px;
+}
+#end{
+     color: white;
+}
+