From caed43050f4e9f2f5cd02d25e3829899ab9e356c Mon Sep 17 00:00:00 2001 From: Nathan Akpawu Date: Mon, 24 Jul 2023 18:05:40 +0000 Subject: [PATCH] card integration part one --- 003-product-preview-card-component/README.md | 20 ++--- .../assets/style.css | 73 +++++++++++++++++++ 003-product-preview-card-component/index.html | 8 +- 3 files changed, 87 insertions(+), 14 deletions(-) diff --git a/003-product-preview-card-component/README.md b/003-product-preview-card-component/README.md index 7f11de5..aeb566c 100644 --- a/003-product-preview-card-component/README.md +++ b/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. diff --git a/003-product-preview-card-component/assets/style.css b/003-product-preview-card-component/assets/style.css index b2fa38d..79387c9 100644 --- a/003-product-preview-card-component/assets/style.css +++ b/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; } diff --git a/003-product-preview-card-component/index.html b/003-product-preview-card-component/index.html index c64001b..2de556a 100644 --- a/003-product-preview-card-component/index.html +++ b/003-product-preview-card-component/index.html @@ -13,8 +13,8 @@
- - Product image + + Product image
Perfume @@ -24,9 +24,9 @@

Gabrielle essence eau de parfum

$149.99 $169.99
-