1.4 KiB
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 divs 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.
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.