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

View File

@ -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 {
}
}

View File

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

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" 🙄)
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.