rmcg.dev/FrontendMentor/single-price-grid-component.../work-through/process.md

24 lines
1.4 KiB
Markdown
Raw Normal View History

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
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" 🙄)
2020-09-12 13:18:25 +02:00
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.
Seems to ... Nice!
**Just noticed, the corners on the mobile design column are less rounded than on the desktop design. Need to properly compare, might just be a sizing thing.** Check!
Continued basic styling. Used a color picker to find (roughly) what the other tourqise/aquamarine color was.
Stopped for lunch & roleplaying.