├── images
    ├── image-anne.jpg
    ├── image-irene.jpg
    ├── favicon-32x32.png
    ├── image-colton.jpg
    ├── icon-star.svg
    ├── bg-pattern-top-mobile.svg
    ├── bg-pattern-top-desktop.svg
    ├── bg-pattern-bottom-mobile.svg
    └── bg-pattern-bottom-desktop.svg
├── design
    ├── desktop-design.jpg
    ├── mobile-design.jpg
    └── desktop-preview.jpg
├── .gitignore
├── style-guide.md
├── README.md
├── style.css
└── index.html


/images/image-anne.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohnMwendwa/social-proof-section/HEAD/images/image-anne.jpg


--------------------------------------------------------------------------------
/images/image-irene.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohnMwendwa/social-proof-section/HEAD/images/image-irene.jpg


--------------------------------------------------------------------------------
/design/desktop-design.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohnMwendwa/social-proof-section/HEAD/design/desktop-design.jpg


--------------------------------------------------------------------------------
/design/mobile-design.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohnMwendwa/social-proof-section/HEAD/design/mobile-design.jpg


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


--------------------------------------------------------------------------------
/images/image-colton.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohnMwendwa/social-proof-section/HEAD/images/image-colton.jpg


--------------------------------------------------------------------------------
/design/desktop-preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohnMwendwa/social-proof-section/HEAD/design/desktop-preview.jpg


--------------------------------------------------------------------------------
/images/icon-star.svg:
--------------------------------------------------------------------------------
1 | <svg width="17" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z" fill="#EF9546" fill-rule="nonzero"/></svg>


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/images/bg-pattern-top-mobile.svg:
--------------------------------------------------------------------------------
1 | <svg width="374" height="232" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="100%" y1="69.24%" x2="9.399%" y2="32.157%" id="a"><stop stop-color="#8A4389" stop-opacity="0" offset="0%"/><stop stop-color="#512051" offset="100%"/><stop stop-color="#512051" offset="100%"/><stop stop-color="#512051" offset="100%"/></linearGradient></defs><path d="M0 232c25.63-53.065 74.118-86.618 145.464-100.66 107.018-21.062 66.506-42.306 119.083-84.466C299.6 18.767 336.083 3.143 374 0v232H0z" transform="rotate(180 187 116)" fill="url(#a)" fill-rule="evenodd" opacity=".05"/></svg>


--------------------------------------------------------------------------------
/images/bg-pattern-top-desktop.svg:
--------------------------------------------------------------------------------
1 | <svg width="584" height="362" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="100%" y1="69.212%" x2="9.399%" y2="32.183%" id="a"><stop stop-color="#8A4389" stop-opacity="0" offset="0%"/><stop stop-color="#512051" offset="100%"/><stop stop-color="#512051" offset="100%"/><stop stop-color="#512051" offset="100%"/></linearGradient></defs><path d="M0 362c40.022-82.8 115.736-135.154 227.141-157.064 167.108-32.864 103.85-66.012 185.949-131.796C467.823 29.284 524.793 4.904 584 0v362H0z" transform="rotate(180 292 181)" fill="url(#a)" fill-rule="evenodd" opacity=".05"/></svg>


--------------------------------------------------------------------------------
/images/bg-pattern-bottom-mobile.svg:
--------------------------------------------------------------------------------
1 | <svg width="375" height="503" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="100%" y1="69.237%" x2="9.399%" y2="32.159%" id="a"><stop stop-color="#8A4389" stop-opacity="0" offset="0%"/><stop stop-color="#512051" offset="100%"/><stop stop-color="#512051" offset="100%"/><stop stop-color="#512051" offset="100%"/></linearGradient></defs><path d="M-355 1530c74.356-153.934 215.022-251.268 422-292 310.466-61.099 192.94-122.724 345.47-245.025C514.157 911.442 620 866.116 730 857v673H-355z" transform="translate(0 -1027)" fill="url(#a)" fill-rule="evenodd" opacity=".05"/></svg>


--------------------------------------------------------------------------------
/images/bg-pattern-bottom-desktop.svg:
--------------------------------------------------------------------------------
1 | <svg width="1085" height="673" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="100%" y1="69.237%" x2="9.399%" y2="32.159%" id="a"><stop stop-color="#8A4389" stop-opacity="0" offset="0%"/><stop stop-color="#512051" offset="100%"/><stop stop-color="#512051" offset="100%"/><stop stop-color="#512051" offset="100%"/></linearGradient></defs><path d="M355 800c74.356-153.934 215.022-251.268 422-292 310.466-61.099 192.94-122.724 345.47-245.025C1224.157 181.442 1330 136.116 1440 127v673H355z" transform="translate(-355 -127)" fill="url(#a)" fill-rule="evenodd" opacity=".05"/></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 | ## Colors
11 | 
12 | ### Primary
13 | 
14 | Very Dark Magenta: hsl(300, 43%, 22%)
15 | Soft Pink: hsl(333, 80%, 67%)
16 | 
17 | ### Neutral
18 | 
19 | Dark Grayish Magenta: hsl(303, 10%, 53%)
20 | Light Grayish Magenta: hsl(300, 24%, 96%)
21 | White: hsl(0, 0%, 100%)
22 | 
23 | ## Typography
24 | 
25 | ### Body Copy
26 | 
27 | - Font size: 15px
28 | 
29 | ### Font
30 | 
31 | - Family: [League Spartan](https://fonts.google.com/specimen/League+Spartan)
32 | - Weights: 400, 500, 700
33 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Frontend Mentor - Social proof section solution
 2 | 
 3 | This is a solution to the [Social proof section challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/social-proof-section-6e0qTv_bA). 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 section 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/social-proof-section](https://github.com/JohnMwendwa/social-proof-section)
30 | - Live Site URL: [https://johnmwendwa.github.io/social-proof-section](https://johnmwendwa.github.io/social-proof-section/)
31 | 
32 | ## My process
33 | 
34 | ### Built with
35 | 
36 | - Semantic HTML5 markup
37 | - CSS custom properties
38 | - 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 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap");
  2 | 
  3 | *,
  4 | *::after,
  5 | *::before {
  6 |   margin: 0;
  7 |   padding: 0;
  8 |   box-sizing: border-box;
  9 | }
 10 | 
 11 | :root {
 12 |   /* Primary */
 13 |   --very-dark-magenta: hsl(300, 43%, 22%);
 14 |   --soft-pink: hsl(333, 80%, 67%);
 15 | 
 16 |   /* Neutral */
 17 |   --dark-grayish-magenta: hsl(303, 10%, 53%);
 18 |   --light-grayish-magenta: hsl(300, 24%, 96%);
 19 |   --white: hsl(0, 0%, 100%);
 20 | }
 21 | 
 22 | body {
 23 |   font-family: "League Spartan", sans-serif;
 24 |   font-size: 0.9375rem;
 25 |   background-image: url(images/bg-pattern-top-desktop.svg),
 26 |     url("images/bg-pattern-bottom-desktop.svg");
 27 |   background-repeat: no-repeat;
 28 |   background-position: left top, right bottom;
 29 |   background-attachment: local;
 30 |   display: grid;
 31 |   place-content: center;
 32 |   min-height: 100vh;
 33 |   padding: 4rem 2rem;
 34 | }
 35 | 
 36 | @media screen and (min-width: 1440px) {
 37 |   body {
 38 |     padding: 8rem;
 39 |   }
 40 | }
 41 | 
 42 | main {
 43 |   max-width: 1440px;
 44 |   width: 100%;
 45 | }
 46 | 
 47 | .container__one {
 48 |   display: grid;
 49 |   grid-template-columns: 1fr;
 50 | }
 51 | 
 52 | @media screen and (min-width: 768px) {
 53 |   .container__one {
 54 |     grid-template-columns: 1fr 1fr;
 55 |     justify-items: start;
 56 |   }
 57 | }
 58 | 
 59 | .main__header {
 60 |   max-width: 450px;
 61 |   text-align: center;
 62 |   margin: auto;
 63 | }
 64 | 
 65 | .main__header h1 {
 66 |   color: var(--very-dark-magenta);
 67 |   font-size: 3rem;
 68 |   font-weight: 700;
 69 |   letter-spacing: -0.07rem;
 70 |   line-height: 0.8;
 71 |   margin-bottom: 1.5rem;
 72 | }
 73 | 
 74 | .main__header p {
 75 |   color: var(--dark-grayish-magenta);
 76 |   font-size: 1.125rem;
 77 |   font-weight: 400;
 78 | }
 79 | 
 80 | @media screen and (min-width: 768px) {
 81 |   .main__header {
 82 |     margin: unset;
 83 |     text-align: start;
 84 |   }
 85 | 
 86 |   .main__header h1 {
 87 |     font-size: 3.5rem;
 88 |   }
 89 | }
 90 | 
 91 | p {
 92 |   line-height: 1.35;
 93 | }
 94 | 
 95 | .rating__card {
 96 |   display: flex;
 97 |   flex-direction: column;
 98 |   align-items: center;
 99 |   gap: 0.3rem;
100 |   padding: 0.75rem 1.5rem;
101 |   background-color: var(--light-grayish-magenta);
102 |   border-radius: 0.5rem;
103 |   width: 100%;
104 |   margin-top: 1rem;
105 | }
106 | .rating__card p {
107 |   font-weight: 700;
108 |   color: var(--very-dark-magenta);
109 | }
110 | 
111 | @media screen and (min-width: 768px) {
112 |   .rating__card {
113 |     gap: 1rem;
114 |     flex-direction: row;
115 |     max-width: 400px;
116 |   }
117 |   .rating__card:nth-of-type(2) {
118 |     margin-left: 2rem;
119 |   }
120 | 
121 |   .rating__card:nth-of-type(3) {
122 |     margin-left: 4rem;
123 |   }
124 | }
125 | 
126 | .container__two {
127 |   margin-top: 2rem;
128 |   display: flex;
129 |   flex-direction: column;
130 |   justify-content: center;
131 |   gap: 1rem;
132 | }
133 | 
134 | .card {
135 |   background-color: var(--very-dark-magenta);
136 |   padding: 2rem;
137 |   border-radius: 0.5rem;
138 |   align-self: flex-start;
139 | }
140 | 
141 | @media screen and (min-width: 768px) {
142 |   .container__two {
143 |     margin-top: 4rem;
144 |     flex-direction: row;
145 |     gap: 2rem;
146 |   }
147 | 
148 |   .card {
149 |     max-width: 320px;
150 |   }
151 |   .card:nth-of-type(2) {
152 |     margin-top: 1.5rem;
153 |   }
154 |   .card:nth-of-type(3) {
155 |     margin-top: 3rem;
156 |   }
157 | }
158 | 
159 | .card__image img {
160 |   border-radius: 50%;
161 |   width: 3rem;
162 |   aspect-ratio: 1/1;
163 | }
164 | 
165 | .card__header {
166 |   display: flex;
167 |   align-items: center;
168 |   gap: 1rem;
169 | }
170 | 
171 | .card__header__text h2 {
172 |   color: var(--white);
173 |   font-size: 1.125rem;
174 |   font-weight: 400;
175 | }
176 | 
177 | .card__header__text p {
178 |   color: hsla(333, 80%, 67%, 0.8);
179 |   font-size: 1rem;
180 | }
181 | 
182 | .card__body p {
183 |   margin-top: 2rem;
184 |   color: var(--white);
185 | }
186 | 


--------------------------------------------------------------------------------
/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 |     <!-- External stylesheet -->
 15 |     <link rel="stylesheet" href="style.css" />
 16 | 
 17 |     <title>Frontend Mentor | Social proof section</title>
 18 |   </head>
 19 |   <body>
 20 |     <main>
 21 |       <div class="container__one">
 22 |         <div class="main__header">
 23 |           <h1><span> 10,000+</span> of our users love our products.</h1>
 24 |           <p>
 25 |             We only provide great products combined with excellent customer
 26 |             service. See what our satisfied customers are saying about our
 27 |             services.
 28 |           </p>
 29 |         </div>
 30 |         <div class="rating_cards">
 31 |           <div class="rating__card">
 32 |             <div class="rating__stars">
 33 |               <img src="images/icon-star.svg" alt="star" />
 34 |               <img src="images/icon-star.svg" alt="star" />
 35 |               <img src="images/icon-star.svg" alt="star" />
 36 |               <img src="images/icon-star.svg" alt="star" />
 37 |               <img src="images/icon-star.svg" alt="star" />
 38 |             </div>
 39 |             <p>Rated 5 Stars in Reviews</p>
 40 |           </div>
 41 |           <div class="rating__card">
 42 |             <div class="rating__stars">
 43 |               <img src="images/icon-star.svg" alt="star" />
 44 |               <img src="images/icon-star.svg" alt="star" />
 45 |               <img src="images/icon-star.svg" alt="star" />
 46 |               <img src="images/icon-star.svg" alt="star" />
 47 |               <img src="images/icon-star.svg" alt="star" />
 48 |             </div>
 49 |             <p>Rated 5 Stars in Report Guru</p>
 50 |           </div>
 51 |           <div class="rating__card">
 52 |             <div class="rating__stars">
 53 |               <img src="images/icon-star.svg" alt="star" />
 54 |               <img src="images/icon-star.svg" alt="star" />
 55 |               <img src="images/icon-star.svg" alt="star" />
 56 |               <img src="images/icon-star.svg" alt="star" />
 57 |               <img src="images/icon-star.svg" alt="star" />
 58 |             </div>
 59 |             <p>Rated 5 Stars in BestTech</p>
 60 |           </div>
 61 |         </div>
 62 |       </div>
 63 |       <div class="container__two">
 64 |         <div class="card">
 65 |           <div class="card__header">
 66 |             <div class="card__image">
 67 |               <img src="images/image-colton.jpg" alt="avatar" />
 68 |             </div>
 69 |             <div class="card__header__text">
 70 |               <h2>Colton Smith</h2>
 71 |               <p>Verified Buyer</p>
 72 |             </div>
 73 |           </div>
 74 |           <div class="card__body">
 75 |             <p>
 76 |               "We needed the same printed design as the one we had ordered a
 77 |               week prior. Not only did they find the original order, but we also
 78 |               received it in time. Excellent!"
 79 |             </p>
 80 |           </div>
 81 |         </div>
 82 |         <div class="card">
 83 |           <div class="card__header">
 84 |             <div class="card__image">
 85 |               <img src="images/image-irene.jpg" alt="avatar" />
 86 |             </div>
 87 |             <div class="card__header__text">
 88 |               <h2>Irene Roberts</h2>
 89 |               <p>Verified Buyer</p>
 90 |             </div>
 91 |           </div>
 92 |           <div class="card__body">
 93 |             <p>
 94 |               "Customer service is always excellent and very quick turn around.
 95 |               Completely delighted with the simplicity of the purchase and the
 96 |               speed of delivery."
 97 |             </p>
 98 |           </div>
 99 |         </div>
100 |         <div class="card">
101 |           <div class="card__header">
102 |             <div class="card__image">
103 |               <img src="images/image-anne.jpg" alt="avatar" />
104 |             </div>
105 |             <div class="card__header__text">
106 |               <h2>Anne Wallace</h2>
107 |               <p>Verified Buyer</p>
108 |             </div>
109 |           </div>
110 |           <div class="card__body">
111 |             <p>
112 |               "Put an order with this company and can only praise them for the
113 |               very high standard. Will definitely use them again and recommend
114 |               them to everyone!"
115 |             </p>
116 |           </div>
117 |         </div>
118 |       </div>
119 |     </main>
120 |   </body>
121 | </html>
122 | 


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