card integration part one

003-product-preview-card-component/README.md

@@ -1,6 +1,6 @@
 # Frontend Mentor - Product preview card component
 
-![Design preview for the Product preview card component coding challenge](./design/desktop-preview.jpg)
+![Design preview for the Product preview card component coding challenge](./screenshot.jpg)
 
 ## Welcome! 👋
 
@@ -18,16 +18,16 @@ You can use any tools you like to help you complete the challenge. So if you've
 
 Your users should be able to:
 
-- View the optimal layout depending on their device's screen size
-- See hover and focus states for interactive elements
+-  View the optimal layout depending on their device's screen size
+-  See hover and focus states for interactive elements
 
 Want some support on the challenge? [Join our Slack community](https://www.frontendmentor.io/slack) and ask questions in the **#help** channel.
 
 ## 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. 
+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`. 
+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`.
 
 If you would like the design files (we provide Sketch & Figma versions) to inspect the design in more detail, you can [subscribe as a PRO member](https://www.frontendmentor.io/pro).
 
@@ -50,9 +50,9 @@ Feel free to use any workflow that you feel comfortable with. Below is a suggest
 
 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/)
+-  [GitHub Pages](https://pages.github.com/)
+-  [Vercel](https://vercel.com/)
+-  [Netlify](https://www.netlify.com/)
 
 You can host your site using one of these solutions or any of our other trusted providers. [Read more about our recommended and trusted hosts](https://medium.com/frontend-mentor/frontend-mentor-trusted-hosting-providers-bf000dfebe).
 
@@ -74,12 +74,12 @@ Remember, if you're looking for feedback on your solution, be sure to ask questi
 
 There are multiple places you can share your solution:
 
-1. Share your solution page in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack). 
+1. Share your solution page in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack).
 2. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor**, including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around.
 3. Share your solution on other social channels like LinkedIn.
 4. Blog about your experience building your project. Writing about your workflow, technical choices, and talking through your code is a brilliant way to reinforce what you've learned. Great platforms to write on are [dev.to](https://dev.to/), [Hashnode](https://hashnode.com/), and [CodeNewbie](https://community.codenewbie.org/).
 
-We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback. 
+We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback.
 
 The more specific you are with your questions the more likely it is that another member of the community will give you feedback.
 

003-product-preview-card-component/assets/style.css

@@ -16,9 +16,82 @@
 
 body {
  margin: 0;
+ padding: 28px 16px;
  background-color: var(--cream-bg);
  color: var(--aurometal-saurus);
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 14px;
+ line-height: 23px;
+}
+
+/* Base */
+h1,
+p {
+ margin: 0;
+}
+
+strong {
+ font-weight: 700;
+}
+
+/* Card */
+picture {
+ background-color: #ff0000;
+}
+
+.card-image {
+ width: 100%;
+ height: 240px;
+ object-fit: cover;
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+}
+
+.card-body {
+ padding: 24px;
+ background-color: var(--pure-white);
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+}
+
+.card-category {
+ display: inline-block;
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 5px;
+ margin-bottom: 12px;
+ line-height: normal;
+}
+
+.card-title {
+ font-family: 'Fraunces', serif;
+ font-size: 32px;
+ line-height: 32px;
+ text-transform: capitalize;
+ color: var(--gunmetal);
+ margin-bottom: 16px;
+}
+
+.card-description {
+ margin-bottom: 24px;
+}
+
+.card-price {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+}
+
+.new-price {
+ font-family: 'Fraunces', serif;
+ font-size: 32px;
+ line-height: 32px;
+ color: var(--deep-aquamarine);
+}
+
+.old-price {
+ font-size: 13px;
+ text-decoration: line-through;
+ margin-left: 19px;
 }

003-product-preview-card-component/index.html

@@ -13,8 +13,8 @@
  <body>
  <main id="main">
  <div class="card">
- <picture class="card-image">
- <img src="./assets/images/image-product-mobile.jpg" alt="Product image">
+ <picture>
+ <img class="card-image" src="./assets/images/image-product-mobile.jpg" alt="Product image">
  </picture>
  <div class="card-body">
  <span class="card-category">Perfume</span>
@@ -24,9 +24,9 @@ <h1 class="card-title">Gabrielle essence eau de parfum</h1>
  <strong class="new-price">$149.99</strong>
  <span class="old-price">$169.99</span>
  </div>
- <button class="card-button">
+ <!-- <button class="card-button">
  <img src="./assets/images/icon-cart.svg" alt="Icon cart"> Add to Cart
- </button>
+ </button> -->
  </div>
  </div>
  </main>