diff --git a/README.md b/README.md index 82b8f51..45871c5 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # Frontend Mentor - Product preview card component solution -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. +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. ![](./screenshot.jpg) diff --git a/index.html b/index.html index da7ffb8..1c4edb8 100644 --- a/index.html +++ b/index.html @@ -12,20 +12,48 @@ /> Product preview card component + - -

Perfume

+ +
+ + + Gabrielle Essence Eau De Parfum + -

Gabrielle Essence Eau De Parfum

+
+

Perfume

-

- A floral, solar and voluptuous interpretation composed by Olivier Polge, - Perfumer-Creator for the House of CHANEL. -

+

+ Gabrielle Essence Eau De Parfum +

-

$149.99

-

$169.99

+

+ A floral, solar and voluptuous interpretation composed by Olivier + Polge, Perfumer-Creator for the House of CHANEL. +

-

Add to Cart

+
+

$149.99

+

$169.99

+
+ + +
+
diff --git a/public/fonts/Fraunces.ttf b/public/fonts/Fraunces.ttf new file mode 100644 index 0000000..c3f165a Binary files /dev/null and b/public/fonts/Fraunces.ttf differ diff --git a/public/fonts/Montserrat.ttf b/public/fonts/Montserrat.ttf new file mode 100644 index 0000000..797c4a5 Binary files /dev/null and b/public/fonts/Montserrat.ttf differ diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..5085ba7 --- /dev/null +++ b/styles.css @@ -0,0 +1,17 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + @font-face { + font-weight: 100 900; + src: url("/fonts/Montserrat.ttf") format("truetype"); + font-family: "Montserrat"; + } + + @font-face { + font-weight: 100 900; + src: url("/fonts/Fraunces.ttf") format("truetype"); + font-family: "Fraunces"; + } +} diff --git a/tailwind.config.js b/tailwind.config.js index d6cfed4..11ce061 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,4 +1,44 @@ export default { content: ["index.html"], - theme: {}, + theme: { + colors: { + white: "#FFFFFF", + cream: "#F2EAE2", + metal: { + 400: "#6C7289", + 700: "#1C232B", + }, + aquamarine: { + 400: "#3D8168", + 700: "#1A4032", + }, + }, + fontFamily: { + sans: ["Montserrat", "sans-serif"], + serif: ["Fraunces", "serif"], + }, + fontSize: { + category: [ + "0.75rem", + { + fontWeight: 500, + letterSpacing: "5px", + }, + ], + heading: [ + "2rem", + { + fontWeight: 700, + lineHeight: "2rem", + }, + ], + body: [ + "0.875rem", + { + fontWeight: 500, + lineHeight: "1.438rem", + }, + ], + }, + }, };