├── images
    ├── image-kira.jpg
    ├── favicon-32x32.png
    ├── image-daniel.jpg
    ├── image-jeanette.jpg
    ├── image-jonathan.jpg
    ├── image-patrick.jpg
    └── bg-pattern-quotation.svg
├── design
    ├── desktop-design.jpg
    ├── mobile-design.jpg
    └── desktop-preview.jpg
├── .gitignore
├── style-guide.md
├── README.md
├── style.css
└── index.html


/images/image-kira.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohnMwendwa/testimonials-grid-section/HEAD/images/image-kira.jpg


--------------------------------------------------------------------------------
/design/desktop-design.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohnMwendwa/testimonials-grid-section/HEAD/design/desktop-design.jpg


--------------------------------------------------------------------------------
/design/mobile-design.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohnMwendwa/testimonials-grid-section/HEAD/design/mobile-design.jpg


--------------------------------------------------------------------------------
/images/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohnMwendwa/testimonials-grid-section/HEAD/images/favicon-32x32.png


--------------------------------------------------------------------------------
/images/image-daniel.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohnMwendwa/testimonials-grid-section/HEAD/images/image-daniel.jpg


--------------------------------------------------------------------------------
/images/image-jeanette.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohnMwendwa/testimonials-grid-section/HEAD/images/image-jeanette.jpg


--------------------------------------------------------------------------------
/images/image-jonathan.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohnMwendwa/testimonials-grid-section/HEAD/images/image-jonathan.jpg


--------------------------------------------------------------------------------
/images/image-patrick.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohnMwendwa/testimonials-grid-section/HEAD/images/image-patrick.jpg


--------------------------------------------------------------------------------
/design/desktop-preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohnMwendwa/testimonials-grid-section/HEAD/design/desktop-preview.jpg


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


--------------------------------------------------------------------------------
/images/bg-pattern-quotation.svg:
--------------------------------------------------------------------------------
1 | <svg width="104" height="102" xmlns="http://www.w3.org/2000/svg"><path d="M104 102V59.727H84.114c0-5.871.689-11.182 2.068-15.933 1.379-4.75 3.42-9.287 6.125-13.61C95.01 25.86 98.909 22.257 104 19.375V0c-9.758 4.27-17.712 9.874-23.864 16.813-6.151 6.939-10.712 14.545-13.681 22.818C63.485 47.904 62 59.941 62 75.74V102h42zm-62 0V59.727H22.114c0-5.871.689-11.182 2.068-15.933 1.379-4.75 3.42-9.287 6.125-13.61C33.01 25.86 36.909 22.257 42 19.375V0c-9.652 4.27-17.58 9.874-23.784 16.813C12.01 23.752 7.424 31.358 4.455 39.631 1.485 47.904 0 59.941 0 75.74V102h42z" fill="#A775F1" fill-rule="nonzero"/></svg>


--------------------------------------------------------------------------------
/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 | > 💡 These are just the design sizes. Ensure content is responsive and meets WCAG requirements by testing the full range of screen sizes from 320px to large screens.
11 | 
12 | ## Colors
13 | 
14 | ### Primary
15 | 
16 | Moderate violet: hsl(263, 55%, 52%)
17 | Very dark grayish blue: hsl(217, 19%, 35%)
18 | Very dark blackish blue: hsl(219, 29%, 14%)
19 | White: hsl(0, 0%, 100%)
20 | 
21 | ### Neutral
22 | 
23 | Light gray: hsl(0, 0%, 81%)
24 | Light grayish blue: hsl(210, 46%, 95%)
25 | 
26 | Note for text colors:
27 | 
28 | 1. "Verified Graduate" has the same color as the person's name with 50% opacity
29 | 2. Review paragraphs inside the quotations have the same color as well, but are at 70% opacity
30 | 
31 | ## Typography
32 | 
33 | ### Body Copy
34 | 
35 | - Font size: 13px
36 | 
37 | ### Font
38 | 
39 | - Family: [Barlow Semi Condensed](https://fonts.google.com/specimen/Barlow+Semi+Condensed)
40 | - Weights: 500, 600
41 | 
42 | > 💎 [Upgrade to Pro](https://www.frontendmentor.io/pro?ref=style-guide) for design file access to see all design details and get hands-on experience using a professional workflow with tools like Figma.
43 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Frontend Mentor - Testimonials grid section solution
 2 | 
 3 | This is a solution to the [Testimonials grid section challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/testimonials-grid-section-Nnw6J7Un7). 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 for the site depending on their device's screen size
22 | 
23 | ### Screenshot 🔳
24 | 
25 | ![Project screenshot](design/desktop-preview.jpg)
26 | 
27 | ### Links 🔗
28 | 
29 | - Solution URL: [https://github.com/JohnMwendwa/testimonials-grid-section](https://github.com/JohnMwendwa/testimonials-grid-section)
30 | - Live Site URL: [https://johnmwendwa.github.io/testimonials-grid-section](https://johnmwendwa.github.io/testimonials-grid-section/)
31 | 
32 | ## My process 🛠
33 | 
34 | ### Built with
35 | 
36 | - Semantic HTML5 markup
37 | - CSS custom properties
38 | - CSS flexbox
39 | - CSS Grid
40 | - Mobile-first workflow
41 | 
42 | ## Author 🤵
43 | 
44 | - Website - [John Mwendwa](https://johnmwendwa.vercel.app/)
45 | - Frontend Mentor - [@JohnMwendwa](https://www.frontendmentor.io/profile/JohnMwendwa)
46 | 
47 | ## Reminder 📝
48 | 
49 | - Practice is the modus operandi when it comes to software development.
50 | - NO amount of reading coding books or watching coding tutorials will make you a good software developer (Escape tutorial hell through practice 🏃‍♂️).
51 | - Getting better entails creating projects of your own after reading a software development book or watching a coding tutorial.
52 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 | }
  8 | 
  9 | :root {
 10 |   /* Primary */
 11 |   --Moderate-violet: hsl(263, 55%, 52%);
 12 |   --Very-dark-grayish-blue: hsl(217, 19%, 35%);
 13 |   --Very-dark-blackish-blue: hsl(219, 29%, 14%);
 14 |   --White: hsl(0, 0%, 100%);
 15 | 
 16 |   /* Neutral */
 17 |   --Light-gray: hsl(0, 0%, 81%);
 18 |   --light-grayish-blue: hsl(210, 46%, 95%);
 19 | }
 20 | 
 21 | body {
 22 |   font-family: "Barlow Semi Condensed", sans-serif;
 23 |   background-color: var(--light-grayish-blue);
 24 |   font-size: 0.8125rem;
 25 |   min-height: 100vh;
 26 |   display: grid;
 27 |   place-content: center;
 28 | }
 29 | 
 30 | main {
 31 |   max-width: 1440px;
 32 |   width: 100%;
 33 |   padding: 4rem 2rem;
 34 | }
 35 | 
 36 | .container {
 37 |   display: grid;
 38 |   grid-template-columns: 1fr;
 39 |   gap: 1rem;
 40 |   max-width: 70rem;
 41 | }
 42 | 
 43 | .card {
 44 |   border-radius: 0.5rem;
 45 |   padding: 1.5rem 2rem;
 46 |   color: var(--clr);
 47 |   box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.1);
 48 |   background-color: var(--bg-clr);
 49 |   transition: all 0.3s ease;
 50 | }
 51 | 
 52 | .card:hover {
 53 |   transform: scale(1.04);
 54 | }
 55 | 
 56 | .card__header {
 57 |   display: flex;
 58 |   align-items: center;
 59 |   gap: 1rem;
 60 |   margin-bottom: 0.75rem;
 61 | }
 62 | 
 63 | .card__header .avatar img {
 64 |   width: 2.5rem;
 65 |   height: 2.5rem;
 66 |   border-radius: 50%;
 67 |   border: 2px solid var(--border-clr);
 68 | }
 69 | 
 70 | .card__header .text h2 {
 71 |   font-size: 0.84rem;
 72 |   font-weight: 500;
 73 | }
 74 | 
 75 | .card__header .text p {
 76 |   font-weight: 300;
 77 |   margin-top: 0.25rem;
 78 |   opacity: 0.5;
 79 | }
 80 | 
 81 | .card__body h3 {
 82 |   font-size: 1rem;
 83 |   font-weight: 600;
 84 |   margin-bottom: 1rem;
 85 |   letter-spacing: 0.01rem;
 86 | }
 87 | 
 88 | .card__body p {
 89 |   font-size: 0.82rem;
 90 |   font-weight: 300;
 91 |   line-height: 1.5;
 92 |   letter-spacing: 0.01rem;
 93 |   color: var(--clr);
 94 |   opacity: 0.7;
 95 | }
 96 | 
 97 | .card-1 {
 98 |   --clr: hsl(0, 0%, 100%);
 99 |   --bg-clr: hsl(263, 55%, 52%);
100 |   --border-clr: hsla(210, 46%, 95%, 0.5);
101 |   background-image: url(images/bg-pattern-quotation.svg);
102 |   background-repeat: no-repeat;
103 |   background-position-y: 0;
104 |   background-position-x: 80%;
105 | }
106 | 
107 | .card-2 {
108 |   --clr: var(--White);
109 |   --bg-clr: var(--Very-dark-grayish-blue);
110 |   --border-clr: var(--White);
111 | }
112 | 
113 | .card-3 {
114 |   --clr: var(--Very-dark-blackish-blue);
115 |   --bg-clr: var(--White);
116 |   --border-clr: hsl(210, 46%, 95%);
117 | }
118 | 
119 | .card-4 {
120 |   --clr: var(--White);
121 |   --bg-clr: var(--Very-dark-blackish-blue);
122 |   --border-clr: var(--Moderate-violet);
123 | }
124 | 
125 | .card-5 {
126 |   --clr: var(--Very-dark-blackish-blue);
127 |   --bg-clr: var(--White);
128 |   --border-clr: hsl(217, 19%, 35%, 0.5);
129 | }
130 | 
131 | @media screen and (min-width: 600px) {
132 |   main {
133 |     padding: 4rem 3.85rem;
134 |   }
135 | 
136 |   .container {
137 |     grid-template-columns: repeat(2, 1fr);
138 |     grid-template-rows: repeat(auto-fit, minmax(266px, 1fr));
139 |   }
140 |   .card-1 {
141 |     grid-column: 1 / 3;
142 |     grid-row: 1 / 2;
143 |   }
144 | 
145 |   .card-2 {
146 |     grid-column: 1 / 2;
147 |     grid-row: 2 / 3;
148 |   }
149 | 
150 |   .card-3 {
151 |     grid-column: 2 / 3;
152 |     grid-row: 2 / 3;
153 |   }
154 | 
155 |   .card-4 {
156 |     grid-column: 1 / 3;
157 |     grid-row: 3 / 4;
158 |   }
159 | 
160 |   .card-5 {
161 |     grid-column: 1 / 3;
162 |     grid-row: 4 / 5;
163 |   }
164 | }
165 | 
166 | @media screen and (min-width: 768px) {
167 |   .container {
168 |     grid-template-columns: repeat(3, 1fr);
169 |     grid-template-rows: repeat(auto-fit, minmax(266px, 1fr));
170 |   }
171 | 
172 |   .card-1 {
173 |     grid-column: 1 / 3;
174 |     grid-row: 1 / 2;
175 |   }
176 | 
177 |   .card-2 {
178 |     grid-column: 3 / 4;
179 |     grid-row: 1 / 2;
180 |   }
181 | 
182 |   .card-3 {
183 |     grid-column: 1 / 2;
184 |     grid-row: 2 / 3;
185 |   }
186 | 
187 |   .card-4 {
188 |     grid-column: 2 / 4;
189 |     grid-row: 2 / 3;
190 |   }
191 | 
192 |   .card-5 {
193 |     grid-column: 1 / 4;
194 |     grid-row: 3 / 4;
195 |   }
196 | }
197 | 
198 | @media screen and (min-width: 968px) {
199 |   .container {
200 |     grid-template-columns: repeat(4, 1fr);
201 |     grid-template-rows: repeat(auto-fit, minmax(266px, 1fr));
202 |   }
203 | 
204 |   .card-1 {
205 |     grid-column: 1 / 3;
206 |     grid-row: 1 / 2;
207 |   }
208 | 
209 |   .card-2 {
210 |     grid-column: 3 / 4;
211 |     grid-row: 1 / 2;
212 |   }
213 | 
214 |   .card-3 {
215 |     grid-column: 1 / 2;
216 |     grid-row: 2 / 3;
217 |   }
218 | 
219 |   .card-4 {
220 |     grid-column: 2 / 4;
221 |     grid-row: 2 / 3;
222 |   }
223 | 
224 |   .card-5 {
225 |     grid-column: 4 / 5;
226 |     grid-row: 1 / 3;
227 |   }
228 | }
229 | 
230 | @media screen and (min-width: 1440px) {
231 |   .container {
232 |     gap: 2rem;
233 |   }
234 | }
235 | 


--------------------------------------------------------------------------------
/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 |     <!-- Stylesheet -->
 16 |     <link rel="stylesheet" href="style.css" />
 17 | 
 18 |     <title>Testimonials Section</title>
 19 |   </head>
 20 |   <body>
 21 |     <main>
 22 |       <div class="container">
 23 |         <div class="card card-1">
 24 |           <div class="card__header">
 25 |             <div class="avatar">
 26 |               <img src="images/image-daniel.jpg" alt="Daniel Clifford" />
 27 |             </div>
 28 |             <div class="text">
 29 |               <h2>Daniel Clifford</h2>
 30 |               <p>Verified Graduate</p>
 31 |             </div>
 32 |           </div>
 33 |           <div class="card__body">
 34 |             <h3>
 35 |               I received a job offer mid-course, and the subjects I learned were
 36 |               current, if not more so, in the company I joined. I honestly feel
 37 |               I got every penny’s worth.
 38 |             </h3>
 39 |             <p>
 40 |               “ I was an EMT for many years before I joined the bootcamp. I’ve
 41 |               been looking to make a transition and have heard some people who
 42 |               had an amazing experience here. I signed up for the free intro
 43 |               course and found it incredibly fun! I enrolled shortly thereafter.
 44 |               The next 12 weeks was the best - and most grueling - time of my
 45 |               life. Since completing the course, I’ve successfully switched
 46 |               careers, working as a Software Engineer at a VR startup. ”
 47 |             </p>
 48 |           </div>
 49 |         </div>
 50 |         <div class="card card-2">
 51 |           <div class="card__header">
 52 |             <div class="avatar">
 53 |               <img src="images/image-jonathan.jpg" alt="Jonathan Walters" />
 54 |             </div>
 55 |             <div class="text">
 56 |               <h2>Jonathan Walters</h2>
 57 |               <p>Verified Graduate</p>
 58 |             </div>
 59 |           </div>
 60 |           <div class="card__body">
 61 |             <h3>The team was very supportive and kept me motivated</h3>
 62 |             <p>
 63 |               “ I started as a total newbie with virtually no coding skills. I
 64 |               now work as a mobile engineer for a big company. This was one of
 65 |               the best investments I’ve made in myself. ”
 66 |             </p>
 67 |           </div>
 68 |         </div>
 69 |         <div class="card card-3">
 70 |           <div class="card__header">
 71 |             <div class="avatar">
 72 |               <img src="images/image-jeanette.jpg" alt="Jeanette Harmon" />
 73 |             </div>
 74 |             <div class="text">
 75 |               <h2>Jeanette Harmon</h2>
 76 |               <p>Verified Graduate</p>
 77 |             </div>
 78 |           </div>
 79 |           <div class="card__body">
 80 |             <h3>An overall wonderful and rewarding experience</h3>
 81 |             <p>
 82 |               “ Thank you for the wonderful experience! I now have a job I
 83 |               really enjoy, and make a good living while doing something I love.
 84 |               ”
 85 |             </p>
 86 |           </div>
 87 |         </div>
 88 |         <div class="card card-4">
 89 |           <div class="card__header">
 90 |             <div class="avatar">
 91 |               <img src="images/image-patrick.jpg" alt="Patrick Abrams" />
 92 |             </div>
 93 |             <div class="text">
 94 |               <h2>Patrick Abrams</h2>
 95 |               <p>Verified Graduate</p>
 96 |             </div>
 97 |           </div>
 98 |           <div class="card__body">
 99 |             <h3>
100 |               Awesome teaching support from TAs who did the bootcamp themselves.
101 |               Getting guidance from them and learning from their experiences was
102 |               easy.
103 |             </h3>
104 |             <p>
105 |               “ The staff seem genuinely concerned about my progress which I
106 |               find really refreshing. The program gave me the confidence
107 |               necessary to be able to go out in the world and present myself as
108 |               a capable junior developer. The standard is above the rest. You
109 |               will get the personal attention you need from an incredible
110 |               community of smart and amazing people. ”
111 |             </p>
112 |           </div>
113 |         </div>
114 |         <div class="card card-5">
115 |           <div class="card__header">
116 |             <div class="avatar">
117 |               <img src="images/image-kira.jpg" alt="Kira Whittle" />
118 |             </div>
119 |             <div class="text">
120 |               <h2>Kira Whittle</h2>
121 |               <p>Verified Graduate</p>
122 |             </div>
123 |           </div>
124 |           <div class="card__body">
125 |             <h3>Such a life-changing experience. Highly recommended!</h3>
126 |             <p>
127 |               “ Before joining the bootcamp, I’ve never written a line of code.
128 |               I needed some structure from professionals who can help me learn
129 |               programming step by step. I was encouraged to enroll by a former
130 |               student of theirs who can only say wonderful things about the
131 |               program. The entire curriculum and staff did not disappoint. They
132 |               were very hands-on and I never had to wait long for assistance.
133 |               The agile team project, in particular, was outstanding. It took my
134 |               learning to the next level in a way that no tutorial could ever
135 |               have. In fact, I’ve often referred to it during interviews as an
136 |               example of my developent experience. It certainly helped me land a
137 |               job as a full-stack developer after receiving multiple offers.
138 |               100% recommend! ”
139 |             </p>
140 |           </div>
141 |         </div>
142 |       </div>
143 |     </main>
144 |   </body>
145 | </html>
146 | 


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