diff --git a/FrontendMentor/single-price-grid-component-master/css/style.css b/FrontendMentor/single-price-grid-component-master/css/style.css new file mode 100644 index 0000000..3c8fa1a --- /dev/null +++ b/FrontendMentor/single-price-grid-component-master/css/style.css @@ -0,0 +1,41 @@ +@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap'); + +: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%); + /* neutral site colours */ + --site-light-gray: hsl(204, 43%, 93%); + --site-grayish-blue: hsl(218, 22%, 67%); +} + +* { + margin: 0; + padding: 0; +} + +body { + /* per the style guide, the body copy is 16px */ + font-size: 16px; + font-family: 'Karla', sans-serif; + min-width: 375px; + + display: flex; + flex-direction: column; + + background-color: var(--site-light-gray); +} + +/** +* * style guide has 2 designs, one aimed for 375x870, and the other 1440x800 +* TODO: Tweak transition point later +*/ +@media screen and (max-width: 500px) { + +} + +@media screen and (min-width: 500px) { + +} \ 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 d166d16..7a59c1f 100644 --- a/FrontendMentor/single-price-grid-component-master/index.html +++ b/FrontendMentor/single-price-grid-component-master/index.html @@ -5,6 +5,7 @@ +