finished mobile version, or near enough
This commit is contained in:
parent
869b838a76
commit
7684f4698c
|
|
@ -4,6 +4,8 @@ This is a solution to the [Social proof section challenge on Frontend Mentor](ht
|
|||
|
||||
## Table of contents
|
||||
|
||||
- [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)
|
||||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -30,30 +30,104 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
10,000+ of our users love our products.
|
||||
|
||||
<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
|
||||
<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!"
|
||||
|
||||
Irene Roberts
|
||||
Verified Buyer
|
||||
</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."
|
||||
|
||||
Anne Wallace
|
||||
Verified Buyer
|
||||
</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
|
||||
|
|
|
|||
Loading…
Reference in New Issue