From c2a59f697f9877bd93219727bbab20a43979af3d Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Sat, 12 Sep 2020 12:18:25 +0100 Subject: [PATCH] Work in progress --- .../css/style.css | 117 +++++++++++++++++- .../index.html | 22 ++-- .../work-through/process.md | 11 +- 3 files changed, 137 insertions(+), 13 deletions(-) diff --git a/FrontendMentor/single-price-grid-component-master/css/style.css b/FrontendMentor/single-price-grid-component-master/css/style.css index 3c8fa1a..d493054 100644 --- a/FrontendMentor/single-price-grid-component-master/css/style.css +++ b/FrontendMentor/single-price-grid-component-master/css/style.css @@ -20,14 +20,87 @@ body { /* per the style guide, the body copy is 16px */ font-size: 16px; font-family: 'Karla', sans-serif; - min-width: 375px; + width: 90vw; + height: 100vh; + margin: 0 auto; display: flex; flex-direction: column; + justify-content: center; + align-content: center; + /* align-items: center; */ 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; +} + +.topRow { + padding-top: 1rem; + padding-bottom: 1rem; + background-color: white; +} +.heading { + /* margin-top: 1.5rem; */ + color: white; +} + +.topRow .heading { + color: var(--site-cyan); +} + +.quickSell { + color: var(--site-bright-yellow); +} +.sellBlurb { + color: var(--site-light-gray); +} +.bottomRow { + flex-direction: column; + + display: flex; +} +.pricingBox { + background-color: var(--site-cyan); +} +.priceRow { + display: flex; +} +.price { + color: white; +} +.pricePeriod { + color: var(--site-cyan) +} +.sell { + color: white; +} +.signupButton { + background-color: var(--site-bright-yellow); + color: white; +} +.whyUsBox { + background-color: rgb(0, 195, 192); +} +.blurb { +} + +.blurb .unstyledList { + list-style: none; + font-size: 10px; + color: var(--site-light-gray) +} + +/* Feel free to remove these styles or customise in your own stylesheet 👍 */ + .attribution { font-size: 11px; text-align: center; } + .attribution a { color: hsl(228, 45%, 44%); } + /** * * style guide has 2 designs, one aimed for 375x870, and the other 1440x800 * TODO: Tweak transition point later @@ -36,6 +109,46 @@ body { } -@media screen and (min-width: 500px) { +@media screen and (min-width: 500px) and (max-width: 800px) { + body { + /* roughly half way, arbitrary for the moment */ + width: 78vw; + } +} +@media screen and (min-width: 800px) { + body { + width: 45vw; + } + + .topRow { + } + .heading { + } + .quickSell { + } + .sellBlurb { + } + .bottomRow { + flex-direction: row; + /* flex: 0 50%; */ + } + .pricingBox { + width: 50%; + } + .priceRow { + } + .price { + } + .pricePeriod { + } + .sell { + } + .signupButton { + } + .whyUsBox { + width: 50%; + } + .blurb { + } } \ 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 c9c14c9..fc217c0 100644 --- a/FrontendMentor/single-price-grid-component-master/index.html +++ b/FrontendMentor/single-price-grid-component-master/index.html @@ -11,7 +11,7 @@
-
+
Join our community
@@ -26,7 +26,7 @@
-
+
Monthly Subscription
@@ -41,19 +41,21 @@ 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 c603813..189c397 100644 --- a/FrontendMentor/single-price-grid-component-master/work-through/process.md +++ b/FrontendMentor/single-price-grid-component-master/work-through/process.md @@ -10,5 +10,14 @@ Otherwise there doesn't seem to be any obvious/glaring differences between the 2 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. +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. + +