├── screenshot.png
├── design
    ├── active-states.jpg
    ├── mobile-design.jpg
    ├── desktop-design.jpg
    └── desktop-preview.jpg
├── images
    ├── favicon-32x32.png
    ├── image-product-desktop.jpg
    ├── image-product-mobile.jpg
    └── icon-cart.svg
├── .gitignore
├── style-guide.md
├── README.md
├── index.html
└── style.css


/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevin-powell/product-preview-card-component-main/HEAD/screenshot.png


--------------------------------------------------------------------------------
/design/active-states.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevin-powell/product-preview-card-component-main/HEAD/design/active-states.jpg


--------------------------------------------------------------------------------
/design/mobile-design.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevin-powell/product-preview-card-component-main/HEAD/design/mobile-design.jpg


--------------------------------------------------------------------------------
/images/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevin-powell/product-preview-card-component-main/HEAD/images/favicon-32x32.png


--------------------------------------------------------------------------------
/design/desktop-design.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevin-powell/product-preview-card-component-main/HEAD/design/desktop-design.jpg


--------------------------------------------------------------------------------
/design/desktop-preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevin-powell/product-preview-card-component-main/HEAD/design/desktop-preview.jpg


--------------------------------------------------------------------------------
/images/image-product-desktop.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevin-powell/product-preview-card-component-main/HEAD/images/image-product-desktop.jpg


--------------------------------------------------------------------------------
/images/image-product-mobile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevin-powell/product-preview-card-component-main/HEAD/images/image-product-mobile.jpg


--------------------------------------------------------------------------------
/images/icon-cart.svg:
--------------------------------------------------------------------------------
1 | <svg width="15" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M14.383 10.388a2.397 2.397 0 0 0-1.518-2.222l1.494-5.593a.8.8 0 0 0-.144-.695.8.8 0 0 0-.631-.28H2.637L2.373.591A.8.8 0 0 0 1.598 0H0v1.598h.983l1.982 7.4a.8.8 0 0 0 .799.59h8.222a.8.8 0 0 1 0 1.599H1.598a.8.8 0 1 0 0 1.598h.943a2.397 2.397 0 1 0 4.507 0h1.885a2.397 2.397 0 1 0 4.331-.376 2.397 2.397 0 0 0 1.12-2.021ZM11.26 7.99H4.395L3.068 3.196h9.477L11.26 7.991Zm-6.465 6.392a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Zm6.393 0a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Z" fill="#FFF"/></svg>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Avoid accidental upload of the Sketch and Figma design files
 2 | #####################################################
 3 | ## Please do not remove lines 5 and 6 - thanks! 🙂 ##
 4 | #####################################################
 5 | *.sketch
 6 | *.fig
 7 | 
 8 | # Avoid accidental XD upload if you convert the design file
 9 | ###############################################
10 | ## Please do not remove line 12 - thanks! 🙂 ##
11 | ###############################################
12 | *.xd
13 | 
14 | # Avoid your project being littered with annoying .DS_Store files!
15 | .DS_Store
16 | .prettierignore


--------------------------------------------------------------------------------
/style-guide.md:
--------------------------------------------------------------------------------
 1 | # Front-end Style Guide
 2 | 
 3 | ## Layout
 4 | 
 5 | The designs were created to the following widths:
 6 | 
 7 | - Mobile: 375px
 8 | - Desktop: 1440px
 9 | 
10 | ## Colors
11 | 
12 | ### Primary
13 | 
14 | - Dark cyan: hsl(158, 36%, 37%)
15 | - Cream: hsl(30, 38%, 92%)
16 | 
17 | ### Neutral
18 | 
19 | - Very dark blue: hsl(212, 21%, 14%)
20 | - Dark grayish blue: hsl(228, 12%, 48%)
21 | - White: hsl(0, 0%, 100%)
22 | 
23 | ## Typography
24 | 
25 | ### Body Copy
26 | 
27 | - Font size (paragraph): 14px
28 | 
29 | ### Font
30 | 
31 | - Family: [Montserrat](https://fonts.google.com/specimen/Montserrat)
32 | - Weights: 500, 700
33 | 
34 | - Family: [Fraunces](https://fonts.google.com/specimen/Fraunces)
35 | - Weights: 700
36 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Frontend Mentor - Product preview card component solution
 2 | 
 3 | This is a solution to the [Product preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
 4 | 
 5 | ## Table of contents
 6 | 
 7 | - [Overview](#overview)
 8 |   - [The challenge](#the-challenge)
 9 |   - [Screenshot](#screenshot)
10 |   - [Links](#links)
11 | - [My process](#my-process)
12 |   - [Built with](#built-with)
13 | 
14 | **Note: Delete this note and update the table of contents based on what sections you keep.**
15 | 
16 | ## Overview
17 | 
18 | ### The challenge
19 | 
20 | Users should be able to:
21 | 
22 | - View the optimal layout depending on their device's screen size
23 | - See hover and focus states for interactive elements
24 | 
25 | ### Screenshot
26 | 
27 | ![screenshot of my solution](screenshot.png)
28 | 
29 | ### Links
30 | 
31 | - [Solution](https://github.com/kevin-powell/product-preview-card-component-main)
32 | - [Live version](https://jade-sprinkles-7fbebb.netlify.app/)
33 | 
34 | ## My process
35 | 
36 | ### Built with
37 | 
38 | - Semantic HTML5 markup
39 | - CSS custom properties
40 | - Flexbox
41 | - CSS Grid
42 | - Mobile-first workflow
43 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <!-- displays site properly based on user's device -->
 8 |   <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
 9 |   <title>Frontend Mentor | Product preview card component</title>
10 |   <!-- Google fonts -->
11 |   <link rel="preconnect" href="https://fonts.googleapis.com">
12 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13 |   <link
14 |     href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;600&display=swap"
15 |     rel="stylesheet">
16 |   <!-- My CSS -->
17 |   <link rel="stylesheet" href="style.css">
18 | </head>
19 | 
20 | <body>
21 | 
22 |   <main>
23 |     <article class="product">
24 |       <picture class="product__img">
25 |         <source srcset="images/image-product-desktop.jpg" media="(min-width: 600px)">
26 |         <img src="images/image-product-mobile.jpg"
27 |           alt="Gabrielle Essense perfume bottle laying flat on a table with green leaves above and below it">
28 |       </picture>
29 | 
30 |       <div class="product__content">
31 |         <p class="product__category">Perfume</p>
32 | 
33 |         <h1 class="product__title">Gabrielle Essence Eau De Parfum</h1>
34 | 
35 |         <p>A floral, solar and voluptuous interpretation composed by Olivier Polge,
36 |           Perfumer-Creator for the House of CHANEL.</p>
37 | 
38 |         <div class="flex-group">
39 |           <p class="product__price">
40 |             <span class="visually-hidden">Current price:</span>
41 |             $149.99
42 |           </p>
43 |           <p class="product__original-price">
44 |             <span class="visually-hidden">Original price:</span>
45 |             <s>$169.99</s>
46 |           </p>
47 |         </div>
48 | 
49 |         <button class="button" data-icon="shopping-cart">Add to Cart</button>
50 |       </div>
51 | 
52 |     </article>
53 |   </main>
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --clr-primary-400: hsl(158, 36%, 37%);
  3 |   --clr-primary-500: hsl(158, 36%, 20%);
  4 |   --clr-secondary-200: hsl(30, 38%, 92%);
  5 | 
  6 |   --clr-neutral-900: hsl(212, 21%, 14%);
  7 |   --clr-neutral-400: hsl(228, 12%, 48%);
  8 |   --clr-neutral-100: hsl(0, 0%, 100%);
  9 | 
 10 |   --ff-accent: "Fraunces", serif;
 11 |   --ff-base: "Montserrat", sans-serif;
 12 | 
 13 |   --fw-regular: 500;
 14 |   --fw-bold: 700;
 15 | }
 16 | 
 17 | /*
 18 |   1. Use a more-intuitive box-sizing model.
 19 | */
 20 | *,
 21 | *::before,
 22 | *::after {
 23 |   box-sizing: border-box;
 24 | }
 25 | /*
 26 |   2. Remove default margin
 27 | */
 28 | * {
 29 |   margin: 0;
 30 | }
 31 | /*
 32 |   3. Allow percentage-based heights in the application
 33 | */
 34 | html,
 35 | body {
 36 |   height: 100%;
 37 | }
 38 | /*
 39 |   Typographic tweaks!
 40 |   4. Add accessible line-height
 41 |   5. Improve text rendering
 42 | */
 43 | body {
 44 |   line-height: 1.7;
 45 |   -webkit-font-smoothing: antialiased;
 46 | }
 47 | /*
 48 |   6. Improve media defaults
 49 | */
 50 | img,
 51 | picture,
 52 | video,
 53 | canvas,
 54 | svg {
 55 |   display: block;
 56 |   max-width: 100%;
 57 | }
 58 | /*
 59 |   7. Remove built-in form typography styles
 60 | */
 61 | input,
 62 | button,
 63 | textarea,
 64 | select {
 65 |   font: inherit;
 66 | }
 67 | /*
 68 |   8. Avoid text overflows
 69 | */
 70 | p,
 71 | h1,
 72 | h2,
 73 | h3,
 74 | h4,
 75 | h5,
 76 | h6 {
 77 |   overflow-wrap: break-word;
 78 | }
 79 | 
 80 | h1,
 81 | h2,
 82 | h3 {
 83 |   line-height: 1;
 84 | }
 85 | 
 86 | /* general styling */
 87 | 
 88 | body {
 89 |   font-family: var(--ff-base);
 90 |   font-weight: var(--fw-regular);
 91 |   font-size: 0.875rem;
 92 |   color: var(--clr-neutral-400);
 93 |   background-color: var(--clr-secondary-200);
 94 | 
 95 |   /* for this project only */
 96 |   display: grid;
 97 |   place-content: center;
 98 |   margin: 1rem;
 99 | }
100 | 
101 | /* utilities */
102 | 
103 | .flex-group {
104 |   display: flex;
105 |   gap: 1rem;
106 |   flex-wrap: wrap;
107 |   align-items: center;
108 | }
109 | 
110 | .visually-hidden:not(:focus):not(:active) {
111 |   clip: rect(0 0 0 0);
112 |   clip-path: inset(50%);
113 |   height: 1px;
114 |   overflow: hidden;
115 |   position: absolute;
116 |   white-space: nowrap;
117 |   width: 1px;
118 | }
119 | 
120 | /* button */
121 | .button {
122 |   cursor: pointer;
123 |   text-decoration: none;
124 |   display: inline-flex;
125 |   gap: 0.75rem;
126 |   justify-content: center;
127 |   align-items: center;
128 | 
129 |   border: 0;
130 |   border-radius: 0.5rem;
131 |   padding: 0.75em 1.5em;
132 |   background-color: var(--clr-primary-400);
133 |   color: var(--clr-neutral-100);
134 |   font-weight: var(--fw-bold);
135 |   font-size: 0.925rem;
136 | }
137 | 
138 | .button[data-icon="shopping-cart"]::before {
139 |   content: "";
140 |   background-image: url("images/icon-cart.svg");
141 |   width: 15px;
142 |   height: 16px;
143 | }
144 | 
145 | .button:is(:hover, :focus) {
146 |   background-color: var(--clr-primary-500);
147 | }
148 | 
149 | /* product styles */
150 | .product {
151 |   --content-padding: 1.5rem;
152 |   --content-spacing: 1rem;
153 | 
154 |   display: grid;
155 |   background-color: var(--clr-neutral-100);
156 |   border-radius: 0.5rem;
157 |   overflow: hidden;
158 |   max-width: 600px;
159 | }
160 | 
161 | @media (min-width: 600px) {
162 |   .product {
163 |     --content-padding: 2rem;
164 |     grid-template-columns: 1fr 1fr;
165 |   }
166 | }
167 | 
168 | .product__content {
169 |   display: grid;
170 |   gap: var(--content-spacing);
171 |   padding: var(--content-padding);
172 | }
173 | 
174 | .product__category {
175 |   font-size: 0.8125rem;
176 |   letter-spacing: 5px;
177 |   text-transform: uppercase;
178 | }
179 | 
180 | .product__title {
181 |   font-size: 2rem;
182 |   font-family: var(--ff-accent);
183 |   color: var(--clr-neutral-900);
184 | }
185 | 
186 | .product__price {
187 |   font-size: 2rem;
188 |   font-family: var(--ff-accent);
189 |   color: var(--clr-primary-400);
190 | }
191 | 


--------------------------------------------------------------------------------