diff --git a/projects/FrontendMentor/newbie/social-proof-section/css/style.css b/projects/FrontendMentor/newbie/social-proof-section/css/style.css index a59ffca..544d14a 100644 --- a/projects/FrontendMentor/newbie/social-proof-section/css/style.css +++ b/projects/FrontendMentor/newbie/social-proof-section/css/style.css @@ -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 { diff --git a/projects/FrontendMentor/newbie/social-proof-section/design/Desktop.svg b/projects/FrontendMentor/newbie/social-proof-section/design/Desktop.svg new file mode 100644 index 0000000..1b90d0c --- /dev/null +++ b/projects/FrontendMentor/newbie/social-proof-section/design/Desktop.svg @@ -0,0 +1,99 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/projects/FrontendMentor/newbie/social-proof-section/design/Desktop@1x.png b/projects/FrontendMentor/newbie/social-proof-section/design/Desktop@1x.png new file mode 100644 index 0000000..3f00007 Binary files /dev/null and b/projects/FrontendMentor/newbie/social-proof-section/design/Desktop@1x.png differ diff --git a/projects/FrontendMentor/newbie/social-proof-section/design/Desktop@2x.png b/projects/FrontendMentor/newbie/social-proof-section/design/Desktop@2x.png new file mode 100644 index 0000000..0efddc9 Binary files /dev/null and b/projects/FrontendMentor/newbie/social-proof-section/design/Desktop@2x.png differ diff --git a/projects/FrontendMentor/newbie/social-proof-section/index.html b/projects/FrontendMentor/newbie/social-proof-section/index.html index 7fdb6f7..82cef20 100644 --- a/projects/FrontendMentor/newbie/social-proof-section/index.html +++ b/projects/FrontendMentor/newbie/social-proof-section/index.html @@ -32,101 +32,103 @@
-
-

- 10,000+ of our users love our products. -

-
-

- We only provide great products combined with excellent customer service. - See what our satisfied customers are saying about our services. -

-
-
- -
-
-
- Star - Star - Star - Star - Star -
-

Rated 5 Stars in Reviews

-
-
-
- Star - Star - Star - Star - Star -
-

Rated 5 Stars in Report Guru

-
-
-
- Star - Star - Star - Star - Star -
-

Rated 5 Stars in BestTech

-
-
- -
-
-
- Picture of Colton -
-
Colton Smith
-
Verified Buyer
-
-
-
-

- "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!" +

+
+

+ 10,000+ of our users love our products. +

+
+

+ We only provide great products combined with excellent customer service. + See what our satisfied customers are saying about our services.

-
-
- -
-
- Picture of Irene -
-
Irene Roberts
-
Verified Buyer
-
-
-

- "Customer service is always excellent and very quick turn around. Completely - delighted with the simplicity of the purchase and the speed of delivery." -

-
-
-
-
- Picture of Anne -
-
Anne Wallace + +
+
+ +

Rated 5 Stars in Reviews

+
+
+ +

Rated 5 Stars in Report Guru

+
+
+ +

Rated 5 Stars in BestTech

+
+
+
+ +
+
+
+
+ +
+
Colton Smith
+
Verified Buyer
-
Verified Buyer
+
+

+ 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! +

+
-
-

- "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!" -

-
-
-
+
+
+ +
+
Irene Roberts
+
Verified Buyer
+
+
+
+

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

+ 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! +

+
+
+ +