finished desktop version
This commit is contained in:
parent
7684f4698c
commit
f60b524f86
|
|
@ -37,11 +37,11 @@
|
|||
--fw-rating: 700;
|
||||
|
||||
--fs-name: 1.0625rem;
|
||||
--lh-name: 0.9775rem; /* 1rem */
|
||||
--lh-name: 1rem; /* 1rem */
|
||||
--fw-name: 700;
|
||||
|
||||
--fs-buyer: 1.0625rem;
|
||||
--lh-buyer: 0.9775rem; /* 1rem */
|
||||
--lh-buyer: 1rem; /* 1rem */
|
||||
--fw-buyer: 400;
|
||||
|
||||
--fs-quote: 1.0625rem;
|
||||
|
|
@ -55,6 +55,10 @@
|
|||
--img-bottom: url(../images/bg-pattern-bottom-mobile.svg);
|
||||
|
||||
--border-radius: 0.5rem;
|
||||
|
||||
/* Sizing */
|
||||
|
||||
--max-width-main: 31.25rem;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -72,6 +76,7 @@ body {
|
|||
}
|
||||
|
||||
main {
|
||||
max-width: var(--max-width-main);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
|
|
@ -86,7 +91,7 @@ main {
|
|||
|
||||
color: var(--col-primary-very-dark-magenta);
|
||||
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1.5rem; /* 1rem;*/
|
||||
}
|
||||
|
||||
.page__body {
|
||||
|
|
@ -114,7 +119,7 @@ main {
|
|||
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
padding: 1rem 3.4375rem;
|
||||
padding: 1rem 3.4375rem 0.9375rem;
|
||||
}
|
||||
|
||||
.rating-box:last-of-type {
|
||||
|
|
@ -123,13 +128,20 @@ main {
|
|||
|
||||
.rating-box__ratings {
|
||||
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 {
|
||||
background-color: var(--col-primary-very-dark-magenta);
|
||||
padding: 2.5rem 2rem 2.1875rem 2rem;
|
||||
|
|
@ -190,7 +202,7 @@ main {
|
|||
content: "”";
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
@media screen and (min-width: 1200px) {
|
||||
:root {
|
||||
/* Typography */
|
||||
--fs-header: 3.5rem;
|
||||
|
|
@ -203,6 +215,105 @@ main {
|
|||
|
||||
--img-top: url(../images/bg-pattern-top-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 {
|
||||
|
|
|
|||
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,101 +32,103 @@
|
|||
<body>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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!"
|
||||
<div class="top-area">
|
||||
<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>
|
||||
</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
|
||||
</header>
|
||||
<section class="ratings">
|
||||
<div class="rating-box">
|
||||
<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">
|
||||
</div>
|
||||
<p class="rating-box__rated-by">Rated 5 Stars in Reviews</p>
|
||||
</div>
|
||||
<div class="rating-box">
|
||||
<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">
|
||||
</div>
|
||||
<p class="rating-box__rated-by">Rated 5 Stars in Report Guru</p>
|
||||
</div>
|
||||
<div class="rating-box">
|
||||
<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">
|
||||
</div>
|
||||
<p class="rating-box__rated-by">Rated 5 Stars in BestTech</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="bottom-area">
|
||||
<section class="reviews">
|
||||
<div class="card-review">
|
||||
<div class="reviewer">
|
||||
<img class="reviewer__image" src="images/image-colton.jpg" alt="Picture of Colton" aria-hidden="true">
|
||||
<div class="reviewer__block">
|
||||
<div class="reviewer__name">Colton Smith</div>
|
||||
<div class="reviewer__status">Verified Buyer</div>
|
||||
</div>
|
||||
<div class="reviewer__status">Verified Buyer</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>
|
||||
<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>
|
||||
<div class="card-review">
|
||||
<div class="reviewer">
|
||||
<img class="reviewer__image" src="images/image-irene.jpg" alt="Picture of Irene" aria-hidden="true">
|
||||
<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" aria-hidden="true">
|
||||
<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>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- <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