added project 09

Author: RanitManik

FrontendMentor01—Blog-preview-card/README.md

@@ -41,7 +41,7 @@ Your users should be able to:
 
 - Solution URL: [click here to see the solution](https://www.frontendmentor.io/solutions/html-css-IFKqcIOTCf)
 - Live Site
-  URL: [click here to see the code](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor01%E2%80%94Blog-preview-card/index.html)
+  URL: [click here to see the Live Site](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor01%E2%80%94Blog-preview-card/index.html)
 - codepen: [click here to see the codepen](https://codepen.io/RANIT-MANIK/pen/QWowgja)
 
 ## My process

FrontendMentor02—Results-summary-component/README.md

@@ -45,7 +45,7 @@ Your users should be able to:
 - Solution
   URL: [click here to see the solution](https://www.frontendmentor.io/solutions/responsive-summary-component-using-html-css-z3Of8x7IhU)
 - Live Site
-  URL: [click here to see the code](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor02%E2%80%94Results-summary-component/index.html)
+  URL: [click here to see the Live Site](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor02%E2%80%94Results-summary-component/index.html)
 - codepen: [click here to see the codepen](https://codepen.io/RANIT-MANIK/pen/OJqPwaz)
 
 ## My process

FrontendMentor03—Product-preview-card-component/README.md

@@ -45,7 +45,7 @@ the **#help** channel.
 - Solution
   URL: [click here to see the solution](https://www.frontendmentor.io/solutions/product-preview-card-component-using-grid-6-ppfghQ4J)
 - Live Site
-  URL: [click here to see the code](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor03%E2%80%94Product-preview-card-component/index.html)
+  URL: [click here to see the Live Site](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor03%E2%80%94Product-preview-card-component/index.html)
 - codepen: [click here to see the codepen](https://codepen.io/RANIT-MANIK/full/vYPOJad)
 
 ## My process

FrontendMentor04—nft-preview-card-component/README.md

@@ -39,9 +39,9 @@ Users should be able to:
 ### Links
 
 - Solution
-  URL: [Add solution URL here](https://www.frontendmentor.io/solutions/nft-preview-card-component-using-html-css-Z0bX2RTQ2t)
+  URL: [click here to see the solution](https://www.frontendmentor.io/solutions/nft-preview-card-component-using-html-css-Z0bX2RTQ2t)
 - Live Site
-  URL: [Add live site URL here](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor04%E2%80%94nft-preview-card-component/index.html)
+  URL: [click here to see the Live Site](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor04%E2%80%94nft-preview-card-component/index.html)
 - codepen: [click here to see the codepen](https://codepen.io/RANIT-MANIK/pen/vYPNLWJ)
 
 ## My process

FrontendMentor05—QR code component/README.md

@@ -32,9 +32,9 @@ You can use any tools you like to help you complete the challenge. So if you've
 ### Links
 
 - Solution
-  URL: [Add solution URL here](https://www.frontendmentor.io/solutions/qr-code-component-using-html-css-svjAZqvJiC)
+  URL: [click here to see the solution](https://www.frontendmentor.io/solutions/qr-code-component-using-html-css-svjAZqvJiC)
 - Live Site
-  URL: [Add live site URL here](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor05%E2%80%94QR%20code%20component/index.html)
+  URL: [click here to see the Live Site](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor05%E2%80%94QR%20code%20component/index.html)
 - codepen: [click here to see the codepen](https://codepen.io/RANIT-MANIK/pen/ExMVXaL)
 
 ## My process

FrontendMentor06—Order-summary-component/README.md

@@ -38,9 +38,9 @@ Your users should be able to:
 ### Links
 
 - Solution
-  URL: [Add solution URL here](https://www.frontendmentor.io/solutions/order-summary-component-using-scss-4tTK5rXyNU)
+  URL: [click here to see the solution](https://www.frontendmentor.io/solutions/order-summary-component-using-scss-4tTK5rXyNU)
 - Live Site
-  URL: [Add live site URL here](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor06%E2%80%94Order-summary-component/index.html)
+  URL: [click here to see the live Site](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor06%E2%80%94Order-summary-component/index.html)
 - codepen: [click here to see the codepen](https://codepen.io/RANIT-MANIK/pen/JjzGyzX)
 
 ## My process

FrontendMentor07—stats-preview-card-component/README.md

@@ -40,7 +40,7 @@ Your users should be able to:
 - Solution
   URL: [click here to see the solution](https://www.frontendmentor.io/solutions/statspreviewcardcomponent-using-css-Yp0fsleRKH)
 - Live Site
-  URL: [click here to see the code](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor07%E2%80%94stats-preview-card-component/index.html)
+  URL: [click here to see the live Site](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor07%E2%80%94stats-preview-card-component/index.html)
 - codepen: [click here to see the codepen](https://codepen.io/RANIT-MANIK/pen/MWxyvVP)
 
 ## My process

FrontendMentor08—testimonials-grid-section/README.md

@@ -6,35 +6,6 @@ Frontend Mentor challenges help you improve your coding skills by building reali
 
 ## Table of contents
 
-- [Overview](#overview)
-    - [The challenge](#the-challenge)
-    - [Screenshot](#screenshot)
-    - [Links](#links)
-- [My process](#my-process)
-    - [Built with](#built-with)
-    - [What I learned](#what-i-learned)
-    - [Continued development](#continued-development)
-    - [Useful resources](#useful-resources)
-- [Author](#author)
-- [Acknowledgments](#acknowledgments)
-
-**Note: Delete this note and update the table of contents based on what sections you keep.**
-
-## Overview
-
-### The challenge
-
-Your challenge is to build out this testimonials grid section and get it looking as close to the design as possible.
-
-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.
-
-Your users should be able to:
-
-- View the optimal layout for the site depending on their device's screen size
-
-## Table of contents
-
 - [Overview](#overview)
     - [The challenge](#the-challenge)
     - [Screenshot](#screenshot)
@@ -69,7 +40,7 @@ Your users should be able to:
 - Solution
   URL: [click here to see the solution](https://www.frontendmentor.io/solutions/testimonials-grid-section-using-scss-cdcEOqq_8W)
 - Live Site
-  URL: [click here to see the code](https://github.com/RanitManik/frontendmentor-challenges/tree/main/FrontendMentor08%E2%80%94testimonials-grid-section)
+  URL: [click here to see the Live Site](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor08%E2%80%94testimonials-grid-section/index.html)
 - codepen: [click here to see the codepen](https://codepen.io/RANIT-MANIK/pen/NWJrQeg)
 
 ## My process

FrontendMentor09—3-column-preview-card-component/README.md

@@ -0,0 +1,85 @@
+# Frontend Mentor - 3-column preview card component solution
+
+This is a solution to
+the [3-column preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/3column-preview-card-component-pH92eAR2-).
+Frontend Mentor challenges help you improve your coding skills by building realistic projects.
+
+## Table of contents
+
+- [Overview](#overview)
+    - [The challenge](#the-challenge)
+    - [Screenshot](#screenshot)
+    - [Links](#links)
+- [My process](#my-process)
+    - [Built with](#built-with)
+    - [What I learned](#what-i-learned)
+    - [Code Highlights](#code-highlights)
+    - [Useful resources](#Useful-resources)
+- [Author](#author)
+- [Acknowledgments](#acknowledgments)
+
+**Note: Delete this note and update the table of contents based on what sections you keep.**
+
+## Overview
+
+### The challenge
+
+Your challenge is to build out this 3-column preview card component and get it looking as close to the design as
+possible.
+
+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.
+
+Your users should be able to:
+
+- View the optimal layout depending on their device's screen size
+- See hover states for interactive elements
+
+### Screenshot
+
+![](./screenshot.jpg)
+
+### Links
+
+- Solution
+  URL: [click here to see the solution](https://www.frontendmentor.io/solutions/testimonials-grid-section-using-scss-cdcEOqq_8W)
+- Live Site
+  URL: [click here to see the Live Site](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor09%E2%80%943-column-preview-card-component/index.html)
+- codepen: [click here to see the codepen](https://codepen.io/RANIT-MANIK/pen/NWJrQeg)
+
+## My process
+
+### Built with
+
+- Semantic HTML5 markup
+- SCSS
+- CSS custom properties
+- CSS Grid
+- SCSS mixin
+
+### What I learned
+
+### Code Highlights
+
+### Useful resources
+
+## Author
+
+- Website - [Ranit Manik](https://ranitmanik.github.io/Portfolio-1.0)
+- Frontend Mentor - [@RanitManik](https://www.frontendmentor.io/profile/RanitManik)
+- LinkedIn - [@ranit-manik](https://www.linkedin.com/in/ranit-manik/)
+
+## Acknowledgments
+
+I would like to express my gratitude to the creators of the Frontend Mentor platform for providing an engaging and
+practical challenge in the form of the Blog Preview Card. The hands-on experience gained through tackling this project
+has significantly contributed to my growth as a web developer.
+
+I want to acknowledge the supportive community at Frontend Mentor. The platform's collaborative environment and
+constructive feedback from peers have been invaluable in refining my skills and pushing me to strive for excellence.
+
+This project has been a rewarding learning experience, and I look forward to applying these insights in future
+endeavors. Thank you to everyone who has played a part in my journey of continuous improvement.
+
+Best regards,<br>
+Ranit Manik

FrontendMentor09—3-column-preview-card-component/design/active-states.jpg

@@ -0,0 +1,35 @@
+# Front-end Style Guide
+
+## Layout
+
+The designs were created to the following widths:
+
+- Mobile: 375px
+- Desktop: 1440px
+
+## Colors
+
+### Primary
+
+Bright orange: hsl(31, 77%, 52%)
+Dark cyan: hsl(184, 100%, 22%)
+Very dark cyan: hsl(179, 100%, 13%)
+
+### Neutral
+
+Transparent white (paragraphs): hsla(0, 0%, 100%, 0.75)
+Very light gray (background, headings, buttons): hsl(0, 0%, 95%)
+
+## Typography
+
+### Body Copy
+
+- Font size: 15px
+
+### Font
+
+- Family: [Lexend Deca](https://fonts.google.com/specimen/Lexend+Deca)
+- Weights: 400
+
+- Family: [Big Shoulders Display](https://fonts.google.com/specimen/Big+Shoulders+Display)
+- Weights: 700

FrontendMentor09—3-column-preview-card-component/design/desktop-design.jpg

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
+    <title>Frontend Mentor | 3-column preview card component</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap"
+          rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<main class="grid-flow">
+    <div class="card">
+        <img src="images/icon-sedans.svg" alt="">
+        <h1>Sedans</h1>
+        <p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city
+            or on your next road trip.</p>
+        <button class="btn">Learn More</button>
+    </div>
+    <div class="card">
+        <img src="images/icon-suvs.svg" alt="">
+        <h1>SUVs</h1>
+        <p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation
+            and off-road adventures.</p>
+        <button class="btn">Learn More</button>
+    </div>
+    <div class="card">
+        <img src="images/icon-luxury.svg" alt="">
+        <h1>Luxury</h1>
+        <p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury
+            rental and arrive in style.</p>
+        <button class="btn">Learn More</button>
+    </div>
+</main>
+</body>
+</html>