finished mobile version, or near enough

This commit is contained in:
Robert McGovern 2022-10-03 18:35:09 +01:00
parent 869b838a76
commit 7684f4698c
6 changed files with 284 additions and 59 deletions

View File

@ -4,17 +4,19 @@ This is a solution to the [Social proof section challenge on Frontend Mentor](ht
## 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.**
@ -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:

View File

@ -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;
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 81 KiB

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 61 KiB

View File

@ -30,30 +30,104 @@
</head>
<body>
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.
<main>
<header class="page-header">
<h1 class="page__heading">
10,000+ of our users love our products.
</h1>
<div class="page__body">
<p>
We only provide great products combined with excellent customer service.
See what our satisfied customers are saying about our services.
</p>
</div>
</header>
Rated 5 Stars in Reviews
Rated 5 Stars in Report Guru
Rated 5 Stars in BestTech
<section class="ratings">
<div class="rating-box">
<div class="rating-box__ratings">
<img src="images/icon-star.svg" alt="Star">
<img src="images/icon-star.svg" alt="Star">
<img src="images/icon-star.svg" alt="Star">
<img src="images/icon-star.svg" alt="Star">
<img src="images/icon-star.svg" alt="Star">
</div>
<p class="rating-box__rated-by">Rated 5 Stars in Reviews</p>
</div>
<div class="rating-box">
<div class="rating-box__ratings">
<img src="images/icon-star.svg" alt="Star">
<img src="images/icon-star.svg" alt="Star">
<img src="images/icon-star.svg" alt="Star">
<img src="images/icon-star.svg" alt="Star">
<img src="images/icon-star.svg" alt="Star">
</div>
<p class="rating-box__rated-by">Rated 5 Stars in Report Guru</p>
</div>
<div class="rating-box">
<div class="rating-box__ratings">
<img src="images/icon-star.svg" alt="Star">
<img src="images/icon-star.svg" alt="Star">
<img src="images/icon-star.svg" alt="Star">
<img src="images/icon-star.svg" alt="Star">
<img src="images/icon-star.svg" alt="Star">
</div>
<p class="rating-box__rated-by">Rated 5 Stars in BestTech</p>
</div>
</section>
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!"
<section class="reviews">
<div class="card-review">
<div class="reviewer">
<img class="reviewer__image" src="images/image-colton.jpg" alt="Picture of Colton">
<div class="reviewer__block">
<div class="reviewer__name">Colton Smith</div>
<div class="reviewer__status">Verified Buyer</div>
</div>
</div>
<blockquote>
<p class="reviewer__quote">
"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!"
</p>
</blockquote>
</div>
</div>
<div class="card-review">
<div class="reviewer">
<img class="reviewer__image" src="images/image-irene.jpg" alt="Picture of Irene">
<div class="reviewer__block">
<div class="reviewer__name">Irene Roberts</div>
<div class="reviewer__status">Verified Buyer</div>
</div>
</div>
<blockquote>
<p class="reviewer__quote">
"Customer service is always excellent and very quick turn around. Completely
delighted with the simplicity of the purchase and the speed of delivery."
</p>
</blockquote>
</div>
<div class="card-review">
<div class="reviewer">
<img class="reviewer__image" src="images/image-anne.jpg" alt="Picture of Anne">
<div class="reviewer__block">
<div class="reviewer__name">Anne Wallace
</div>
<div class="reviewer__status">Verified Buyer</div>
</div>
</div>
<blockquote>
<p class="reviewer__quote">
"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!"
</p>
</blockquote>
</div>
</section>
</main>
<!-- <div class="attribution">
Challenge by