diff --git a/FrontendMentor/single-price-grid-component-master/index.html b/FrontendMentor/single-price-grid-component-master/index.html index 7a59c1f..c9c14c9 100644 --- a/FrontendMentor/single-price-grid-component-master/index.html +++ b/FrontendMentor/single-price-grid-component-master/index.html @@ -8,43 +8,60 @@ Frontend Mentor | Single Price Grid Component - - - - Join our community +
+
+
+ Join our community +
- 30-day, hassle-free money back guarantee +
+ 30-day, hassle-free money back guarantee +
+ +
+ Gain access to our full library of tutorials along with expert code reviews. + Perfect for any developers who are serious about honing their skills. +
+
+
+
+
+ Monthly Subscription +
- Gain access to our full library of tutorials along with expert code reviews. - Perfect for any developers who are serious about honing their skills. +
+
$29
per month +
+ +
+ Full access for less than $1 a day +
+ + Sign Up +
+
+
+ Why Us +
- Monthly Subscription - - $29 per month - - Full access for less than $1 a day - - Sign Up - - Why Us - - Tutorials by industry experts - Peer & expert code review - Coding exercises - Access to our GitHub repos - Community forum - Flashcard decks - New videos every week - +
+ Tutorials by industry experts + Peer & expert code review + Coding exercises + Access to our GitHub repos + Community forum + Flashcard decks + New videos every week +
+
+
+
diff --git a/FrontendMentor/single-price-grid-component-master/work-through/process.md b/FrontendMentor/single-price-grid-component-master/work-through/process.md index 6a2c8f3..c603813 100644 --- a/FrontendMentor/single-price-grid-component-master/work-through/process.md +++ b/FrontendMentor/single-price-grid-component-master/work-through/process.md @@ -3,4 +3,12 @@ Next challenge started 12th Sept 2020 As usual copy files into place and commit. Checked size of the design images: 1440x800 and 375x870 -Set up the style.css to have the base things listed in the style guide (font, colors, font size), and add style.css to index.html \ No newline at end of file +Set up the style.css to have the base things listed in the style guide (font, colors, font size), and add style.css to index.html + +Looking at the designs, I see it as Flex, with 2 rows in a column. On the desktop, the 2nd row, is a row of 2 items, on mobile the 2nd row becomes as column of 2 items. +Otherwise there doesn't seem to be any obvious/glaring differences between the 2 designs. Sizing seems largely the same, as does positioning of everything inside their respective boxes. + +Set-up the HTML into `div`s to match what I think are the distinct sections. Absolutely need to change some of the names, but I can't think of better descriptors at the moment. (seriously ... "sellBlurb" 🙄) + +Aside: Would love something to take all the classes I define in the html file and put them into the css file ... *quick google later* Oooooh. Such a thing does exist https://marketplace.visualstudio.com/items?itemName=diz.ecsstractor-port ... lets see how well that works. +