diff --git a/FrontendMentor/single-price-grid-component-master/css/style.css b/FrontendMentor/single-price-grid-component-master/css/style.css index d493054..59f2bd9 100644 --- a/FrontendMentor/single-price-grid-component-master/css/style.css +++ b/FrontendMentor/single-price-grid-component-master/css/style.css @@ -1,26 +1,36 @@ @import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap'); +/* -- Basic Styling -- */ + :root { /* setting base to 20px to make my life nicer working with rem */ font-size: 20px; /* primary site colours */ --site-cyan: hsl(179, 62%, 43%); --site-bright-yellow: hsl(71, 73%, 54%); + /* secondary colours, not defined in style guide */ + --site-greener-cyan: rgb(0, 195, 192); /* neutral site colours */ --site-light-gray: hsl(204, 43%, 93%); --site-grayish-blue: hsl(218, 22%, 67%); + --box-border-radius: 8px; + font-weight: 400; + } * { margin: 0; padding: 0; + box-sizing: border-box; } +/* -- General Styling -- */ + body { /* per the style guide, the body copy is 16px */ font-size: 16px; font-family: 'Karla', sans-serif; - width: 90vw; + width: 85vw; height: 100vh; margin: 0 auto; @@ -33,72 +43,124 @@ body { background-color: var(--site-light-gray); } -.box { - box-sizing: border-box; - padding-left: 0.8rem; - padding-right: 0.8rem; - padding-top: 0.7rem; - padding-bottom: 0.7rem; +.container { + box-shadow: 2px 10px 25px -12px rgba(0,0,0,0.5); } -.topRow { - padding-top: 1rem; - padding-bottom: 1rem; - background-color: white; +.box { + padding-left: 2rem; + padding-right: 2rem; + padding-top: 2rem; + padding-bottom: 2rem; } + .heading { /* margin-top: 1.5rem; */ color: white; + font-size: 0.95rem; + /* font-weight: 700; */ + +} + +/* Specific stylings */ + +.topRow { + padding-top: 1.75rem; + padding-bottom: 2.4rem; + background-color: white; + border-top-left-radius: var(--box-border-radius); + border-top-right-radius: var(--box-border-radius); } .topRow .heading { color: var(--site-cyan); + font-size: 1.20rem; } .quickSell { + margin-top: 0.7rem; color: var(--site-bright-yellow); + font-size: 0.9rem; } .sellBlurb { - color: var(--site-light-gray); + margin-top: 0.75rem; + color: gray; + font-size: 0.75rem; + line-height: 1.2rem; } .bottomRow { + display: flex; flex-direction: column; - display: flex; } .pricingBox { background-color: var(--site-cyan); } .priceRow { display: flex; + align-items: center; + margin-top: 1rem; } .price { color: white; + font-size: 1.5rem; + } .pricePeriod { - color: var(--site-cyan) + color: var(--site-greener-cyan); + font-size: 1rem; + margin-left: 0.5rem; } .sell { + margin-top: 0.5rem; color: white; } .signupButton { + text-align: center; + display: block; + margin-top: 1.5rem; background-color: var(--site-bright-yellow); color: white; + /* width: 85%; */ + /* height: 20%; */ + padding: 13px 3.25rem; + /* margin-left: auto; */ + /* margin-right: auto; */ + /* align-self: center; */ + justify-content: center; + border-radius: 5px; + font-weight: 700; + + } .whyUsBox { - background-color: rgb(0, 195, 192); + background-color: var(--site-greener-cyan); + border-bottom-left-radius: var(--box-border-radius); + border-bottom-right-radius: var(--box-border-radius); + } .blurb { + margin-top: 0.75rem; } .blurb .unstyledList { list-style: none; - font-size: 10px; - color: var(--site-light-gray) + font-size: 16px; + color: var(--site-light-gray); + line-height: 1rem; +} + +footer { + text-align: center; + position: fixed; + bottom: 0; + /* margin-top: auto; */ } /* Feel free to remove these styles or customise in your own stylesheet 👍 */ - .attribution { font-size: 11px; text-align: center; } + .attribution { font-size: 11px; text-align: center; + /* visibility: hidden; */ + } .attribution a { color: hsl(228, 45%, 44%); } /** @@ -106,13 +168,84 @@ body { * TODO: Tweak transition point later */ @media screen and (max-width: 500px) { + .topRow { + } + + .topRow .heading { + margin-top: 0.4rem; + font-size: 1.05rem; + } + + .box { + padding-left: 1.25rem; + padding-right: 1.25rem; + padding-top: 1.25rem; + padding-bottom: 1.25rem; + } + + .topRow.box { + padding-top: 0.6rem; + padding-bottom: 1.95rem; + } + + .quickSell { + margin-top: 1.20rem; + font-size: 0.8rem; + } + + .sellBlurb { + margin-top: 0.9rem; + font-size: 0.65rem; + } + + .pricingBox.box { + padding-bottom: 1.25rem; + } + + .pricingBox .heading { + font-size: 0.9rem; + } + + .priceRow { + display: flex; + align-items: center; + margin-top: 0.8rem; + } + .price { + } + .pricePeriod { + } + .sell { + margin-top: 0.35rem; + } + .signupButton { + margin-top: 1.5rem; + padding: 13px 3.25rem; + + } + .whyUsBox { + } + .blurb { + margin-top: 0.75rem; + } + + .blurb .unstyledList { + font-size: 14px; + } + + footer { + } } @media screen and (min-width: 500px) and (max-width: 800px) { body { /* roughly half way, arbitrary for the moment */ - width: 78vw; + width: 65vw; + } + + .signupButton { + font-size: 0.90rem; } } @@ -121,34 +254,19 @@ body { width: 45vw; } - .topRow { - } - .heading { - } - .quickSell { - } - .sellBlurb { - } .bottomRow { flex-direction: row; /* flex: 0 50%; */ } .pricingBox { width: 50%; - } - .priceRow { - } - .price { - } - .pricePeriod { - } - .sell { + border-bottom-left-radius: var(--box-border-radius); + } .signupButton { } .whyUsBox { width: 50%; - } - .blurb { + border-bottom-left-radius: 0px; } } \ No newline at end of file diff --git a/FrontendMentor/single-price-grid-component-master/index.html b/FrontendMentor/single-price-grid-component-master/index.html index fc217c0..c573174 100644 --- a/FrontendMentor/single-price-grid-component-master/index.html +++ b/FrontendMentor/single-price-grid-component-master/index.html @@ -10,7 +10,7 @@ Frontend Mentor | Single Price Grid Component -
+
Join our community @@ -60,11 +60,11 @@
-