finished desktop version
This commit is contained in:
parent
7684f4698c
commit
f60b524f86
|
|
@ -37,11 +37,11 @@
|
||||||
--fw-rating: 700;
|
--fw-rating: 700;
|
||||||
|
|
||||||
--fs-name: 1.0625rem;
|
--fs-name: 1.0625rem;
|
||||||
--lh-name: 0.9775rem; /* 1rem */
|
--lh-name: 1rem; /* 1rem */
|
||||||
--fw-name: 700;
|
--fw-name: 700;
|
||||||
|
|
||||||
--fs-buyer: 1.0625rem;
|
--fs-buyer: 1.0625rem;
|
||||||
--lh-buyer: 0.9775rem; /* 1rem */
|
--lh-buyer: 1rem; /* 1rem */
|
||||||
--fw-buyer: 400;
|
--fw-buyer: 400;
|
||||||
|
|
||||||
--fs-quote: 1.0625rem;
|
--fs-quote: 1.0625rem;
|
||||||
|
|
@ -55,6 +55,10 @@
|
||||||
--img-bottom: url(../images/bg-pattern-bottom-mobile.svg);
|
--img-bottom: url(../images/bg-pattern-bottom-mobile.svg);
|
||||||
|
|
||||||
--border-radius: 0.5rem;
|
--border-radius: 0.5rem;
|
||||||
|
|
||||||
|
/* Sizing */
|
||||||
|
|
||||||
|
--max-width-main: 31.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
@ -72,6 +76,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
|
max-width: var(--max-width-main);
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header {
|
.page-header {
|
||||||
|
|
@ -86,7 +91,7 @@ main {
|
||||||
|
|
||||||
color: var(--col-primary-very-dark-magenta);
|
color: var(--col-primary-very-dark-magenta);
|
||||||
|
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1.5rem; /* 1rem;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__body {
|
.page__body {
|
||||||
|
|
@ -114,7 +119,7 @@ main {
|
||||||
|
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
||||||
padding: 1rem 3.4375rem;
|
padding: 1rem 3.4375rem 0.9375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rating-box:last-of-type {
|
.rating-box:last-of-type {
|
||||||
|
|
@ -123,13 +128,20 @@ main {
|
||||||
|
|
||||||
.rating-box__ratings {
|
.rating-box__ratings {
|
||||||
margin-bottom: 0.9519rem;
|
margin-bottom: 0.9519rem;
|
||||||
|
margin-right: 0.5281rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rating-box__rated-by {
|
.rating-box__ratings img {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin-right: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reviews {
|
.rating-box__ratings img:last-of-type {
|
||||||
|
margin: 0;
|
||||||
|
margin-right: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-review {
|
.card-review {
|
||||||
background-color: var(--col-primary-very-dark-magenta);
|
background-color: var(--col-primary-very-dark-magenta);
|
||||||
padding: 2.5rem 2rem 2.1875rem 2rem;
|
padding: 2.5rem 2rem 2.1875rem 2rem;
|
||||||
|
|
@ -190,7 +202,7 @@ main {
|
||||||
content: "”";
|
content: "”";
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 800px) {
|
@media screen and (min-width: 1200px) {
|
||||||
:root {
|
:root {
|
||||||
/* Typography */
|
/* Typography */
|
||||||
--fs-header: 3.5rem;
|
--fs-header: 3.5rem;
|
||||||
|
|
@ -203,6 +215,105 @@ main {
|
||||||
|
|
||||||
--img-top: url(../images/bg-pattern-top-desktop.svg);
|
--img-top: url(../images/bg-pattern-top-desktop.svg);
|
||||||
--img-bottom: url(../images/bg-pattern-bottom-desktop.svg);
|
--img-bottom: url(../images/bg-pattern-bottom-desktop.svg);
|
||||||
|
|
||||||
|
/* Sizing */
|
||||||
|
|
||||||
|
--max-width-main: 68.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
/*
|
||||||
|
Following would have placement to match design
|
||||||
|
*/
|
||||||
|
/* display: block;
|
||||||
|
margin: 7.375rem 165px 0 165px; */
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
/* remove if using the margins in the body */
|
||||||
|
margin-top: 0.9375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-area {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
max-width: 68.75rem;
|
||||||
|
height: 15.3125rem;
|
||||||
|
|
||||||
|
margin-bottom: 4.4375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
width: 27.8125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ratings {
|
||||||
|
width: 33.75rem;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
margin-bottom: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rating-box {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 1.25rem 4.9375rem 1.25rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rating-box__ratings {
|
||||||
|
margin-bottom: unset;
|
||||||
|
margin-right: 2.0281rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rating-box:first-of-type {
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rating-box:last-of-type {
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-area {
|
||||||
|
height: 16.625rem;
|
||||||
|
/* max-width: 69.375rem; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.reviews {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 1.875rem;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-review {
|
||||||
|
margin-bottom: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-review:first-of-type {
|
||||||
|
align-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-review:last-of-type {
|
||||||
|
align-self: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reviewer {
|
||||||
|
margin-bottom: 1.9375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reviewer__quote {
|
||||||
|
width: 29ch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header {
|
.page-header {
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1022 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 265 KiB |
|
|
@ -32,6 +32,7 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
<div class="top-area">
|
||||||
<header class="page-header">
|
<header class="page-header">
|
||||||
<h1 class="page__heading">
|
<h1 class="page__heading">
|
||||||
10,000+ of our users love our products.
|
10,000+ of our users love our products.
|
||||||
|
|
@ -43,10 +44,9 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section class="ratings">
|
<section class="ratings">
|
||||||
<div class="rating-box">
|
<div class="rating-box">
|
||||||
<div class="rating-box__ratings">
|
<div class="rating-box__ratings" aria-hidden="true">
|
||||||
<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">
|
<img src="images/icon-star.svg" alt="Star">
|
||||||
|
|
@ -56,7 +56,7 @@
|
||||||
<p class="rating-box__rated-by">Rated 5 Stars in Reviews</p>
|
<p class="rating-box__rated-by">Rated 5 Stars in Reviews</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rating-box">
|
<div class="rating-box">
|
||||||
<div class="rating-box__ratings">
|
<div class="rating-box__ratings" aria-hidden="true">
|
||||||
<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">
|
<img src="images/icon-star.svg" alt="Star">
|
||||||
|
|
@ -66,7 +66,7 @@
|
||||||
<p class="rating-box__rated-by">Rated 5 Stars in Report Guru</p>
|
<p class="rating-box__rated-by">Rated 5 Stars in Report Guru</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rating-box">
|
<div class="rating-box">
|
||||||
<div class="rating-box__ratings">
|
<div class="rating-box__ratings" aria-hidden="true">
|
||||||
<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">
|
<img src="images/icon-star.svg" alt="Star">
|
||||||
|
|
@ -76,11 +76,13 @@
|
||||||
<p class="rating-box__rated-by">Rated 5 Stars in BestTech</p>
|
<p class="rating-box__rated-by">Rated 5 Stars in BestTech</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bottom-area">
|
||||||
<section class="reviews">
|
<section class="reviews">
|
||||||
<div class="card-review">
|
<div class="card-review">
|
||||||
<div class="reviewer">
|
<div class="reviewer">
|
||||||
<img class="reviewer__image" src="images/image-colton.jpg" alt="Picture of Colton">
|
<img class="reviewer__image" src="images/image-colton.jpg" alt="Picture of Colton" aria-hidden="true">
|
||||||
<div class="reviewer__block">
|
<div class="reviewer__block">
|
||||||
<div class="reviewer__name">Colton Smith</div>
|
<div class="reviewer__name">Colton Smith</div>
|
||||||
<div class="reviewer__status">Verified Buyer</div>
|
<div class="reviewer__status">Verified Buyer</div>
|
||||||
|
|
@ -88,16 +90,15 @@
|
||||||
</div>
|
</div>
|
||||||
<blockquote>
|
<blockquote>
|
||||||
<p class="reviewer__quote">
|
<p class="reviewer__quote">
|
||||||
"We needed the same printed design as the one we had ordered a week prior.
|
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.
|
Not only did they find the original order, but we also received it in time.
|
||||||
Excellent!"
|
Excellent!
|
||||||
</p>
|
</p>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="card-review">
|
<div class="card-review">
|
||||||
<div class="reviewer">
|
<div class="reviewer">
|
||||||
<img class="reviewer__image" src="images/image-irene.jpg" alt="Picture of Irene">
|
<img class="reviewer__image" src="images/image-irene.jpg" alt="Picture of Irene" aria-hidden="true">
|
||||||
<div class="reviewer__block">
|
<div class="reviewer__block">
|
||||||
<div class="reviewer__name">Irene Roberts</div>
|
<div class="reviewer__name">Irene Roberts</div>
|
||||||
<div class="reviewer__status">Verified Buyer</div>
|
<div class="reviewer__status">Verified Buyer</div>
|
||||||
|
|
@ -105,14 +106,14 @@
|
||||||
</div>
|
</div>
|
||||||
<blockquote>
|
<blockquote>
|
||||||
<p class="reviewer__quote">
|
<p class="reviewer__quote">
|
||||||
"Customer service is always excellent and very quick turn around. Completely
|
Customer service is always excellent and very quick turn around. Completely
|
||||||
delighted with the simplicity of the purchase and the speed of delivery."
|
delighted with the simplicity of the purchase and the speed of delivery.
|
||||||
</p>
|
</p>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-review">
|
<div class="card-review">
|
||||||
<div class="reviewer">
|
<div class="reviewer">
|
||||||
<img class="reviewer__image" src="images/image-anne.jpg" alt="Picture of Anne">
|
<img class="reviewer__image" src="images/image-anne.jpg" alt="Picture of Anne" aria-hidden="true">
|
||||||
<div class="reviewer__block">
|
<div class="reviewer__block">
|
||||||
<div class="reviewer__name">Anne Wallace
|
<div class="reviewer__name">Anne Wallace
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -121,12 +122,13 @@
|
||||||
</div>
|
</div>
|
||||||
<blockquote>
|
<blockquote>
|
||||||
<p class="reviewer__quote">
|
<p class="reviewer__quote">
|
||||||
"Put an order with this company and can only praise them for the very high
|
Put an order with this company and can only praise them for the very high standard. Will definitely use
|
||||||
standard. Will definitely use them again and recommend them to everyone!"
|
them again and recommend them to everyone!
|
||||||
</p>
|
</p>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- <div class="attribution">
|
<!-- <div class="attribution">
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 450 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 331 KiB |
Loading…
Reference in New Issue