From da77334e7b8c4e771cd1420869396c7d6852c757 Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Sun, 6 Sep 2020 00:26:08 +0100 Subject: [PATCH] Not quite as exact as it used to be, but close enough. Switched so that the transition to phones and tablets to 1100 pixels BUT that has the drawback that the logo is too small and the background image is in the wrong place. (and argulably the mockup is a little big) --- .../css/style.css | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/FrontendMentor/huddle-landing-page-with-single-introductory-section-master/css/style.css b/FrontendMentor/huddle-landing-page-with-single-introductory-section-master/css/style.css index 971be29..08205c8 100644 --- a/FrontendMentor/huddle-landing-page-with-single-introductory-section-master/css/style.css +++ b/FrontendMentor/huddle-landing-page-with-single-introductory-section-master/css/style.css @@ -33,12 +33,13 @@ h1 { display: flex; /* margin: auto; */ margin: 5.0625rem 0rem 0rem 4.55rem; - width: 90%; + width: 98%; max-width: 1440px; } .illustrations { - width: 50%; + width: 55%; + padding: 0; } .illustration { @@ -46,20 +47,23 @@ h1 { } .siteBlurb { - margin: 1.0625rem 4rem 2rem 3.325rem; - width: 50%; + margin: 3rem 4rem 2rem 3.325rem; + width: 45%; /* line-height: 2rem; font-weight: 400; */ } .siteBlurb h1 { + line-height: 1.5; margin-right: 2em; margin-bottom: 0; + letter-spacing: 1px; } .siteBlurb p { - margin-right: 1.5rem; + margin-top: 1rem; + margin-right: 4rem; margin-bottom: 1.5625rem; line-height: 1.7rem; font-size: 18px; @@ -71,11 +75,11 @@ h1 { color: var(--site-color); font-size: 19px; border: none; - padding: 17px 64px; + padding: 18px 64px; text-align: center; text-decoration: none; display: inline-block; - /* margin: 4px 2px; */ + margin: 0; cursor: pointer; border-radius: 32px; box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.4); /* 10px 5px 10px*/ @@ -112,11 +116,11 @@ h1 { background: rgb(174, 6, 208); } -.attribution { font-size: 11px; text-align: center; } +.attribution { margin-top: 1rem; font-size: 11px; text-align: center; } .attribution a { color: hsl(63, 100%, 65%); } /* Formating for Mobile devices. Sample to match is 375z800 */ -@media screen and (max-width: 500px) { +@media screen and (max-width: 1100px) { body { background-image: url("../images/bg-mobile.svg");