finished desktop version

This commit is contained in:
Robert McGovern 2022-10-04 00:08:39 +01:00
parent 7684f4698c
commit f60b524f86
7 changed files with 309 additions and 97 deletions

View File

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

View File

@ -32,101 +32,103 @@
<body> <body>
<main> <main>
<header class="page-header"> <div class="top-area">
<h1 class="page__heading"> <header class="page-header">
10,000+ of our users love our products. <h1 class="page__heading">
</h1> 10,000+ of our users love our products.
<div class="page__body"> </h1>
<p> <div class="page__body">
We only provide great products combined with excellent customer service. <p>
See what our satisfied customers are saying about our services. We only provide great products combined with excellent customer service.
</p> See what our satisfied customers are saying about our services.
</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!"
</p> </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> </div>
<blockquote> </header>
<p class="reviewer__quote"> <section class="ratings">
"Customer service is always excellent and very quick turn around. Completely <div class="rating-box">
delighted with the simplicity of the purchase and the speed of delivery." <div class="rating-box__ratings" aria-hidden="true">
</p> <img src="images/icon-star.svg" alt="Star">
</blockquote> <img src="images/icon-star.svg" alt="Star">
</div> <img src="images/icon-star.svg" alt="Star">
<div class="card-review"> <img src="images/icon-star.svg" alt="Star">
<div class="reviewer"> <img src="images/icon-star.svg" alt="Star">
<img class="reviewer__image" src="images/image-anne.jpg" alt="Picture of Anne"> </div>
<div class="reviewer__block"> <p class="rating-box__rated-by">Rated 5 Stars in Reviews</p>
<div class="reviewer__name">Anne Wallace </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>
<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>
<blockquote> <div class="card-review">
<p class="reviewer__quote"> <div class="reviewer">
"Put an order with this company and can only praise them for the very high <img class="reviewer__image" src="images/image-irene.jpg" alt="Picture of Irene" aria-hidden="true">
standard. Will definitely use them again and recommend them to everyone!" <div class="reviewer__block">
</p> <div class="reviewer__name">Irene Roberts</div>
</blockquote> <div class="reviewer__status">Verified Buyer</div>
</div> </div>
</section> </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> </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