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