diff --git a/projects/FrontendMentor/newbie/social-proof-section/README-template.md b/projects/FrontendMentor/newbie/social-proof-section/README-template.md index d50b492..7f1727c 100644 --- a/projects/FrontendMentor/newbie/social-proof-section/README-template.md +++ b/projects/FrontendMentor/newbie/social-proof-section/README-template.md @@ -1,20 +1,22 @@ # Frontend Mentor - Social proof section solution -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. +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. ## 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) +- [Frontend Mentor - Social proof section solution](#frontend-mentor---social-proof-section-solution) + - [Table of contents](#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.** @@ -32,7 +34,7 @@ Users should be able to: Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. -Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. +Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. @@ -52,14 +54,11 @@ Then crop/optimize/edit your image however you like, add it to your project, and - Flexbox - CSS Grid - Mobile-first workflow -- [React](https://reactjs.org/) - JS library -- [Next.js](https://nextjs.org/) - React framework -- [Styled Components](https://styled-components.com/) - For styles - -**Note: These are just examples. Delete this note and replace the list above with your own choices** ### What I learned +To check for update files. I had downloaded this ages ago, then I found the font was no longer available, so i redownloaded the project and set it up with the new font. but realised that my setup was nothing like the design. So I redownloaded the figma file and discovered that font sizes and spacing had changed. + Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge. To see how you can add code snippets, see below: diff --git a/projects/FrontendMentor/newbie/social-proof-section/css/style.css b/projects/FrontendMentor/newbie/social-proof-section/css/style.css index 1294631..a59ffca 100644 --- a/projects/FrontendMentor/newbie/social-proof-section/css/style.css +++ b/projects/FrontendMentor/newbie/social-proof-section/css/style.css @@ -1,7 +1,7 @@ /* * Design sizes: - Desktop: 1440x800 - Mobile: 375x1530 + * Desktop: 1440x800 + * Mobile: 375x1530 */ *, @@ -14,46 +14,198 @@ :root { /* Colors */ - --col-primary-very-dark-magenta: hsl(300, 43%, 22%); - --col-primary-soft-pink: hsl(333, 80%, 67%); - --col-neutral-dark-grayish-magenta: hsl(303, 10%, 53%); - --col-neutral-light-grayish-magenta: hsl(300, 24%, 96%); + --col-primary-very-dark-magenta: hsl(300, 44%, 22%); + --col-primary-soft-pink: hsl(334, 80%, 67%); + --col-neutral-dark-grayish-magenta: hsl(301, 10%, 53%); + --col-neutral-light-grayish-magenta: hsl(301, 23%, 96%); --col-neutral-white: hsl(0, 0%, 100%); /* Typography */ - --fs-header: 2rem; + --fs-header: 2.5rem; --lh-header: 2rem; - --ls-header: -1.14286px; + --ls-header: -1.43px; /*-1.42857px;*/ --fw-header: 700; + --text-align-header: center; - --fs-body: 0.9375rem; + --fs-body: 1.1875rem; --lh-body: 1.5625rem; - --ls-body: -0.5px; + --ls-body: -0.633333px; --fw-body: 500; - --fs-rating: 0.8125rem; - --lh-rating: 0.9375rem; + --fs-rating: 1.0625rem; + --lh-rating: 0.9775rem; /* 1rem */ --fw-rating: 700; - --fs-name: 0.8125rem; - --lh-name: 0.9375rem; + --fs-name: 1.0625rem; + --lh-name: 0.9775rem; /* 1rem */ --fw-name: 700; - --fs-buyer: 0.8125rem; - --lh-buyer: 0.9375rem; + --fs-buyer: 1.0625rem; + --lh-buyer: 0.9775rem; /* 1rem */ --fw-buyer: 400; - --fs-quote: 0.8125rem; + --fs-quote: 1.0625rem; --lh-quote: 1.375rem; - --ls-quote: -0.232143px; + --ls-quote: -0.303571px; --fw-quote: 500; + + /* Images */ + + --img-top: url(../images/bg-pattern-top-mobile.svg); + --img-bottom: url(../images/bg-pattern-bottom-mobile.svg); + + --border-radius: 0.5rem; +} + +body { + background: var(--img-bottom) bottom right no-repeat, + var(--img-top) top left no-repeat; + + min-height: 100vh; + + margin: auto 1.5rem; + + font-family: "League Spartan", sans-serif; + + display: grid; + place-content: center; +} + +main { +} + +.page-header { + margin-bottom: 2.4375rem; + text-align: var(--text-align-header); +} +.page__heading { + font-size: var(--fs-header); + font-weight: var(--fw-header); + line-height: var(--lh-header); + letter-spacing: var(--ls-header); + + color: var(--col-primary-very-dark-magenta); + + margin-bottom: 1rem; +} + +.page__body { + font-size: var(--fs-body); + font-weight: var(--fw-body); + line-height: var(--lh-body); + letter-spacing: var(--ls-body); + + color: var(--col-neutral-dark-grayish-magenta); +} + +.ratings { + margin-bottom: 3.0625rem; +} + +.rating-box { + font-size: var(--fs-rating); + font-weight: var(--fw-rating); + line-height: var(--lh-rating); + color: var(--col-primary-very-dark-magenta); + + background-color: var(--col-neutral-light-grayish-magenta); + margin-bottom: 1rem; + text-align: center; + + border-radius: var(--border-radius); + + padding: 1rem 3.4375rem; +} + +.rating-box:last-of-type { + margin-bottom: unset; +} + +.rating-box__ratings { + margin-bottom: 0.9519rem; +} + +.rating-box__rated-by { +} + +.reviews { +} +.card-review { + background-color: var(--col-primary-very-dark-magenta); + padding: 2.5rem 2rem 2.1875rem 2rem; + margin-bottom: 1rem; + border-radius: var(--border-radius); +} + +.card-review:last-of-type { + margin-bottom: 0; +} + +.reviewer { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 1.4375rem; +} + +.reviewer__image { + border-radius: 2.5rem; + height: 2.5rem; +} + +.reviewer__block { + margin-left: 1.4375rem; +} +.reviewer__name { + font-size: var(--fs-name); + font-weight: var(--fw-name); + line-height: var(--lh-name); + + color: var(--col-neutral-white); + + margin-bottom: 0.25rem; +} +.reviewer__status { + font-size: var(--fs-buyer); + font-weight: var(--fw-buyer); + line-height: var(--lh-buyer); + + color: var(--col-primary-soft-pink); +} + +.reviewer__quote { + font-size: var(--fs-quote); + font-weight: var(--fw-quote); + line-height: var(--lh-quote); + letter-spacing: var(--ls-quote); + + color: var(--col-neutral-white); +} + +.reviewer__quote::before { + content: "“"; +} + +.reviewer__quote::after { + content: "”"; } @media screen and (min-width: 800px) { :root { /* Typography */ - --fs-header: 3rem; + --fs-header: 3.5rem; --lh-header: 3rem; - --ls-header: -1.71429px; + --ls-header: -2px; + + --text-align-header: unset; + + /* Images */ + + --img-top: url(../images/bg-pattern-top-desktop.svg); + --img-bottom: url(../images/bg-pattern-bottom-desktop.svg); + } + + .page-header { + margin-bottom: unset; } } diff --git a/projects/FrontendMentor/newbie/social-proof-section/design/desktop-design.jpg b/projects/FrontendMentor/newbie/social-proof-section/design/desktop-design.jpg index a948747..ae6eecb 100644 Binary files a/projects/FrontendMentor/newbie/social-proof-section/design/desktop-design.jpg and b/projects/FrontendMentor/newbie/social-proof-section/design/desktop-design.jpg differ diff --git a/projects/FrontendMentor/newbie/social-proof-section/design/desktop-preview.jpg b/projects/FrontendMentor/newbie/social-proof-section/design/desktop-preview.jpg index ec414fb..986fd9e 100644 Binary files a/projects/FrontendMentor/newbie/social-proof-section/design/desktop-preview.jpg and b/projects/FrontendMentor/newbie/social-proof-section/design/desktop-preview.jpg differ diff --git a/projects/FrontendMentor/newbie/social-proof-section/design/mobile-design.jpg b/projects/FrontendMentor/newbie/social-proof-section/design/mobile-design.jpg index 93b3e37..b2bc158 100644 Binary files a/projects/FrontendMentor/newbie/social-proof-section/design/mobile-design.jpg and b/projects/FrontendMentor/newbie/social-proof-section/design/mobile-design.jpg differ diff --git a/projects/FrontendMentor/newbie/social-proof-section/index.html b/projects/FrontendMentor/newbie/social-proof-section/index.html index 4dd138c..7fdb6f7 100644 --- a/projects/FrontendMentor/newbie/social-proof-section/index.html +++ b/projects/FrontendMentor/newbie/social-proof-section/index.html @@ -30,30 +30,104 @@ - 10,000+ of our users love our products. - We only provide great products combined with excellent customer service. - See what our satisfied customers are saying about our services. +
+
+

+ 10,000+ of our users love our products. +

+
+

+ We only provide great products combined with excellent customer service. + See what our satisfied customers are saying about our services. +

+
+
- Rated 5 Stars in Reviews - Rated 5 Stars in Report Guru - Rated 5 Stars in BestTech +
+
+
+ Star + Star + Star + Star + Star +
+

Rated 5 Stars in Reviews

+
+
+
+ Star + Star + Star + Star + Star +
+

Rated 5 Stars in Report Guru

+
+
+
+ Star + Star + Star + Star + Star +
+

Rated 5 Stars in BestTech

+
+
- Colton Smith - Verified Buyer - "We needed the same printed design as the one we had ordered a week prior. - Not only did they find the original order, but we also received it in time. - Excellent!" - - Irene Roberts - Verified Buyer - "Customer service is always excellent and very quick turn around. Completely - delighted with the simplicity of the purchase and the speed of delivery." - - Anne Wallace - Verified Buyer - "Put an order with this company and can only praise them for the very high - standard. Will definitely use them again and recommend them to everyone!" +
+
+
+ Picture of Colton +
+
Colton Smith
+
Verified Buyer
+
+
+
+

+ "We needed the same printed design as the one we had ordered a week prior. + Not only did they find the original order, but we also received it in time. + Excellent!" +

+
+
+ +
+
+ Picture of Irene +
+
Irene Roberts
+
Verified Buyer
+
+
+
+

+ "Customer service is always excellent and very quick turn around. Completely + delighted with the simplicity of the purchase and the speed of delivery." +

+
+
+
+
+ Picture of Anne +
+
Anne Wallace +
+
Verified Buyer
+
+
+
+

+ "Put an order with this company and can only praise them for the very high + standard. Will definitely use them again and recommend them to everyone!" +

+
+
+
+