tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Work in progress

This commit is contained in:
Robert McGovern 2020-09-12 12:18:25 +01:00
parent 4b1e46d0a3
commit c2a59f697f
3 changed files with 137 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
FrontendMentor/single-price-grid-component-master/css/style.css
View File

@ -20,14 +20,87 @@ body {
/* per the style guide, the body copy is 16px */ /* per the style guide, the body copy is 16px */
font-size: 16px; font-size: 16px;
font-family: 'Karla', sans-serif; font-family: 'Karla', sans-serif;
min-width: 375px; width: 90vw;
height: 100vh;
margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
align-content: center;
/* align-items: center; */
background-color: var(--site-light-gray); 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 * * style guide has 2 designs, one aimed for 375x870, and the other 1440x800
* TODO: Tweak transition point later * 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 {
}
} }

22
FrontendMentor/single-price-grid-component-master/index.html
View File

@ -11,7 +11,7 @@
</head> </head>
<body> <body>
<main> <main>
<div class="topRow"> <div class="topRow box">
<div class="heading"> <div class="heading">
Join our community Join our community
</div> </div>
@ -26,7 +26,7 @@
</div> </div>
</div> </div>
<div class="bottomRow"> <div class="bottomRow">
<div class="pricingBox"> <div class="pricingBox box">
<div class="heading"> <div class="heading">
Monthly Subscription Monthly Subscription
</div> </div>
@ -41,19 +41,21 @@
<a title="Sign Up Button" href="#" class="signupButton">Sign Up</a> <a title="Sign Up Button" href="#" class="signupButton">Sign Up</a>
</div> </div>
<div class="whyUsBox"> <div class="whyUsBox box">
<div class="heading"> <div class="heading">
Why Us Why Us
</div> </div>
<div class="blurb"> <div class="blurb">
Tutorials by industry experts <ul class="unstyledList">
Peer &amp; expert code review <li>Tutorials by industry experts</li>
Coding exercises <li>Peer &amp; expert code review</li>
Access to our GitHub repos <li>Coding exercises</li>
Community forum <li>Access to our GitHub repos</li>
Flashcard decks <li>Community forum</li>
New videos every week <li>Flashcard decks</li>
<li>New videos every week</li>
</ul>
</div> </div>
</div> </div>
</div> </div>

9
FrontendMentor/single-price-grid-component-master/work-through/process.md
View File

@ -11,4 +11,13 @@ 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" 🙄) 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.