├── design
    ├── active-states.jpg
    ├── mobile-design.jpg
    ├── desktop-design.jpg
    └── desktop-preview.jpg
├── images
    ├── favicon-32x32.png
    ├── icon-sedans.svg
    ├── icon-suvs.svg
    └── icon-luxury.svg
├── .gitignore
├── style-guide.md
├── README.md
├── index.html
└── style.css


/design/active-states.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohnMwendwa/3-column-preview-card/HEAD/design/active-states.jpg


--------------------------------------------------------------------------------
/design/mobile-design.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohnMwendwa/3-column-preview-card/HEAD/design/mobile-design.jpg


--------------------------------------------------------------------------------
/images/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohnMwendwa/3-column-preview-card/HEAD/images/favicon-32x32.png


--------------------------------------------------------------------------------
/design/desktop-design.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohnMwendwa/3-column-preview-card/HEAD/design/desktop-design.jpg


--------------------------------------------------------------------------------
/design/desktop-preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohnMwendwa/3-column-preview-card/HEAD/design/desktop-preview.jpg


--------------------------------------------------------------------------------
/.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 | Bright orange: hsl(31, 77%, 52%)
15 | Dark cyan: hsl(184, 100%, 22%)
16 | Very dark cyan: hsl(179, 100%, 13%)
17 | 
18 | ### Neutral
19 | 
20 | Transparent white (paragraphs): hsla(0, 0%, 100%, 0.75)
21 | Very light gray (background, headings, buttons): hsl(0, 0%, 95%)
22 | 
23 | ## Typography
24 | 
25 | ### Body Copy
26 | 
27 | - Font size: 15px
28 | 
29 | ### Font
30 | 
31 | - Family: [Lexend Deca](https://fonts.google.com/specimen/Lexend+Deca)
32 | - Weights: 400
33 | 
34 | - Family: [Big Shoulders Display](https://fonts.google.com/specimen/Big+Shoulders+Display)
35 | - Weights: 700
36 | 


--------------------------------------------------------------------------------
/images/icon-sedans.svg:
--------------------------------------------------------------------------------
1 | <svg width="64" height="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="#000" opacity=".201" cx="20" cy="20" r="20"/><path d="M52.936 24.11c1.942 0 3.517 1.542 3.517 3.445 0 1.903-1.575 3.445-3.517 3.445s-3.516-1.542-3.516-3.445c0-1.903 1.574-3.445 3.516-3.445zm-21.957 0c1.942 0 3.517 1.542 3.517 3.445 0 1.903-1.575 3.445-3.517 3.445s-3.516-1.542-3.516-3.445c0-1.903 1.574-3.445 3.516-3.445zm6.948-4.848v1.429c0 .716.61 1.293 1.348 1.259a1.295 1.295 0 001.225-1.295v-1.393h8.256l13.483 1.313c.956.093 1.676.881 1.676 1.814 0 2.89-2.126 5.303-4.926 5.819.397-3.557-2.458-6.62-6.053-6.62-3.646 0-6.504 3.14-6.039 6.723h-9.879c.466-3.588-2.397-6.722-6.039-6.722-3.595 0-6.45 3.062-6.052 6.62-2.14-.398-3.916-1.912-4.61-3.931h1.142c.731 0 1.32-.598 1.285-1.322-.033-.678-.629-1.2-1.322-1.2H20v-.251c0-1.274 1.066-2.243 2.306-2.243h15.62zM42.59 11c2.645 0 4.99 1.556 5.972 3.963l.726 1.779H40.17L38.413 11h4.178zm-6.865 0l1.758 5.741H26.505l3.357-3.654A6.502 6.502 0 0134.644 11h1.082z" fill="#FFD473" fill-rule="nonzero"/></g></svg>


--------------------------------------------------------------------------------
/images/icon-suvs.svg:
--------------------------------------------------------------------------------
1 | <svg width="64" height="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="#000" opacity=".201" cx="20" cy="20" r="20"/><path d="M31.002 22.358c2.917 0 5.18 2.593 4.762 5.506a4.828 4.828 0 01-2.962 3.778 4.797 4.797 0 01-5.3-1.165c-1.188-1.26-1.235-2.613-1.263-2.613-.42-2.924 1.857-5.506 4.763-5.506zm22 0c3.457 0 5.798 3.567 4.41 6.744A4.816 4.816 0 0152.3 31.94a4.826 4.826 0 01-4.06-4.077c-.42-2.915 1.846-5.506 4.762-5.506zm-15.04-6.083v1.462a1.29 1.29 0 001.352 1.29c.693-.033 1.227-.631 1.227-1.326v-1.426h8.3l13.056.716a1.29 1.29 0 011.164.917c.27.895.446 1.477.563 1.87h-1.047c-.694 0-1.291.534-1.324 1.228a1.29 1.29 0 001.288 1.352h1.445c-.164 2.225-1.57 4.193-3.6 5.05.13-4.212-3.255-7.63-7.384-7.63-4.317 0-7.762 3.718-7.358 8.086h-7.285c.43-4.655-3.503-8.531-8.131-8.046v-3.543h7.734zm-10.312 0v4.308a7.4 7.4 0 00-4.006 7.274 3.874 3.874 0 01-3.642-3.864v-1.635h1.46a1.29 1.29 0 000-2.58h-1.461v-3.213l.003-.29h7.646zm14.986-8.196c2.65 0 5 1.592 5.984 4.055l.63 1.579a5.525 5.525 0 01-.065-.004l-.026-.002-.034-.002-.022-.002a4.178 4.178 0 00-.224-.006l-.098-.001h-.039l-.136-.001h-.052l-.326-.001H40.211L38.528 8.08zm-13.632 0l-1.122 5.616h-7.144l1.47-4.71a1.29 1.29 0 011.231-.906h5.565zm6.832 0l1.683 5.615h-7.007l1.121-5.615h4.203z" fill="#26B5C0" fill-rule="nonzero"/></g></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Frontend Mentor - 3-column preview card component solution
 2 | 
 3 | 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.
 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 | - [Author](#author)
14 | 
15 | ## Overview
16 | 
17 | ### The challenge
18 | 
19 | Users should be able to:
20 | 
21 | - View the optimal layout depending on their device's screen size
22 | - See hover states for interactive elements
23 | 
24 | ### Screenshot
25 | 
26 | ![Project screenshot](design/desktop-preview.jpg)
27 | 
28 | ### Links
29 | 
30 | - Solution URL: []()
31 | - Live Site URL: []()
32 | 
33 | ## My process
34 | 
35 | ### Built with
36 | 
37 | - Semantic HTML5 markup
38 | - CSS custom properties
39 | - Flexbox
40 | - CSS Grid
41 | - Mobile-first workflow
42 | 
43 | ## Author
44 | 
45 | - Website - [John Mwendwa](https://johnmwendwa.vercel.app/)
46 | - Frontend Mentor - [@JohnMwendwa](https://www.frontendmentor.io/profile/JohnMwendwa)
47 | 


--------------------------------------------------------------------------------
/images/icon-luxury.svg:
--------------------------------------------------------------------------------
1 | <svg width="64" height="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="#000" opacity=".201" cx="20" cy="20" r="20"/><path d="M30.98 22.835c1.941 0 3.516 1.604 3.516 3.583 0 1.978-1.575 3.582-3.517 3.582s-3.516-1.604-3.516-3.582c0-1.979 1.574-3.583 3.516-3.583zm21.956 0c1.942 0 3.517 1.604 3.517 3.583 0 1.978-1.575 3.582-3.517 3.582s-3.516-1.604-3.516-3.582c0-1.979 1.574-3.583 3.516-3.583zm-9.143-10.45a1.27 1.27 0 011.819 0l3.715 3.784c4.444-.115 9.7 1.142 13.964 3.753.387.237.624.664.624 1.124 0 3.006-2.126 5.514-4.926 6.05.397-3.698-2.458-6.882-6.053-6.882-3.646 0-6.504 3.264-6.039 6.99h-9.669c.76-1.544.993-2.026 1.337-2.711l.082-.162c.421-.835 1.056-2.07 2.883-5.65 1.68-.023 3.47-.408 5.247-1.403l-2.984-3.04a1.328 1.328 0 010-1.854zm-7.68 1.064c.683-.2 1.395.202 1.592.898l.749 2.652a3.46 3.46 0 01-.247 2.51l-1.733 3.395-.216.424c-1.07-1.89-3.06-3.114-5.279-3.114-3.595 0-6.45 3.184-6.052 6.885-1.832-.347-3.414-1.537-4.278-3.276a1.331 1.331 0 01.117-1.376l.955-1.303-1.325-1.295c-.751-.735-.376-2.024.64-2.231l6.614-1.346.13-.026c.092-.019.145-.03.157-.031.314-.146 1.07-.591 1.07-1.506 0-.734.592-1.327 1.316-1.31.712.016 1.268.662 1.256 1.388a4.11 4.11 0 01-.348 1.611 22.69 22.69 0 014.7 1.146l-.7-2.473a1.314 1.314 0 01.882-1.622z" fill="#19B89D" fill-rule="nonzero"/></g></svg>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <!-- displays site properly based on user's device -->
 7 | 
 8 |     <link
 9 |       rel="icon"
10 |       type="image/png"
11 |       sizes="32x32"
12 |       href="./images/favicon-32x32.png"
13 |     />
14 | 
15 |     <title>Frontend Mentor | 3-column preview card component</title>
16 | 
17 |     <!-- Google fonts -->
18 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
19 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
20 |     <link
21 |       href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap"
22 |       rel="stylesheet"
23 |     />
24 | 
25 |     <!-- External stylesheet -->
26 |     <link rel="stylesheet" href="style.css" />
27 |   </head>
28 |   <body>
29 |     <main>
30 |       <div class="container">
31 |         <div class="card">
32 |           <img src="images/icon-sedans.svg" alt="sedan icon" />
33 |           <h2>Sedans</h2>
34 |           <p>
35 |             Choose a sedan for its affordability and excellent fuel economy.
36 |             Ideal for cruising in the city or on your next road trip.
37 |           </p>
38 |           <div class="card__footer">
39 |             <button>Learn More</button>
40 |           </div>
41 |         </div>
42 |         <div class="card">
43 |           <img src="images/icon-suvs.svg" alt="SUV icon" />
44 |           <h2>SUVs</h2>
45 |           <p>
46 |             Take an SUV for its spacious interior, power, and versatility.
47 |             Perfect for your next family vacation and off-road adventures.
48 |           </p>
49 |           <div class="card__footer">
50 |             <button>Learn More</button>
51 |           </div>
52 |         </div>
53 |         <div class="card">
54 |           <img src="images/icon-luxury.svg" alt="luxury car icon" />
55 |           <h2>Luxury</h2>
56 |           <p>
57 |             Cruise in the best car brands without the bloated prices. Enjoy the
58 |             enhanced comfort of a luxury rental and arrive in style.
59 |           </p>
60 |           <div class="card__footer">
61 |             <button>Learn More</button>
62 |           </div>
63 |         </div>
64 |       </div>
65 |     </main>
66 |   </body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | :root {
  8 |   /* Primary */
  9 |   --bright-orange: hsl(31, 77%, 52%);
 10 |   --dark-cyan: hsl(184, 100%, 22%);
 11 |   --very-dark-cyan: hsl(179, 100%, 13%);
 12 | 
 13 |   /* Neutral */
 14 |   /* (paragraphs) */
 15 |   --transparent-white: hsla(0, 0%, 100%, 0.75);
 16 |   /* (background, headings, buttons) */
 17 |   --very-light-gray: hsl(0, 0%, 95%);
 18 | }
 19 | 
 20 | body {
 21 |   font-family: "Lexend Deca", sans-serif;
 22 |   font-size: 0.9375rem;
 23 |   font-weight: 400;
 24 | }
 25 | 
 26 | img {
 27 |   display: block;
 28 |   max-width: 100%;
 29 |   width: 4rem;
 30 | }
 31 | 
 32 | h2 {
 33 |   font-family: "Big Shoulders Display", sans-serif;
 34 |   font-size: 3rem;
 35 |   text-transform: uppercase;
 36 |   color: var(--very-light-gray);
 37 |   font-weight: 700;
 38 | }
 39 | 
 40 | button {
 41 |   border-radius: 100vh;
 42 |   padding: 1rem 2rem;
 43 |   border: transparent;
 44 |   display: inline-block;
 45 |   color: var(--item-clr);
 46 |   font-size: 1rem;
 47 |   font-weight: 700;
 48 |   cursor: pointer;
 49 |   transition: all 0.3s;
 50 |   background-color: var(--very-light-gray);
 51 | }
 52 | 
 53 | button:hover {
 54 |   background-color: transparent;
 55 |   color: var(--transparent-white);
 56 |   outline: 1px solid var(--very-light-gray);
 57 | }
 58 | 
 59 | main {
 60 |   display: grid;
 61 |   place-content: center;
 62 |   background-color: var(--very-light-gray);
 63 |   min-height: 100vh;
 64 |   padding: 3rem 1rem;
 65 | }
 66 | 
 67 | .container {
 68 |   display: grid;
 69 |   grid-template-columns: 1fr;
 70 | }
 71 | 
 72 | @media screen and (min-width: 968px) {
 73 |   .container {
 74 |     grid-template-columns: 1fr 1fr 1fr;
 75 |   }
 76 | }
 77 | 
 78 | @media screen and (min-width: 1440px) {
 79 |   main {
 80 |     padding: 5rem 1rem;
 81 |   }
 82 | }
 83 | 
 84 | .card {
 85 |   display: flex;
 86 |   flex-direction: column;
 87 |   padding: 3rem;
 88 |   max-width: 19.2rem;
 89 |   gap: 2rem;
 90 |   background-color: var(--item-clr);
 91 | }
 92 | 
 93 | .card p {
 94 |   margin-bottom: 0rem;
 95 |   line-height: 1.75;
 96 |   color: var(--transparent-white);
 97 | }
 98 | 
 99 | @media screen and (min-width: 968px) {
100 |   .card p {
101 |     margin-bottom: 3rem;
102 |   }
103 | }
104 | 
105 | .card:nth-of-type(1) {
106 |   --item-clr: var(--bright-orange);
107 |   border-radius: 0.5rem 0.5rem 0 0;
108 | }
109 | .card:nth-of-type(2) {
110 |   --item-clr: var(--dark-cyan);
111 | }
112 | .card:nth-of-type(3) {
113 |   --item-clr: var(--very-dark-cyan);
114 |   border-radius: 0 0 0.5rem 0.5rem;
115 | }
116 | 
117 | @media screen and (min-width: 968px) {
118 |   .card:nth-of-type(1) {
119 |     border-radius: 0.5rem 0 0 0.5rem;
120 |   }
121 | 
122 |   .card:nth-of-type(3) {
123 |     border-radius: 0 0.5rem 0.5rem 0;
124 |   }
125 | }
126 | 
127 | .card__footer {
128 |   margin-top: auto;
129 | }
130 | 


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